RubyonRailsアプリケーションにブートストラップを追加する方法

序章

Ruby on Rails アプリケーションを開発している場合は、ユーザーエンゲージメントを促進するために、プロジェクトにスタイルを追加することをお勧めします。これを行う1つの方法は、 Bootstrap を追加することです。これは、Webプロジェクトを応答性が高く、モバイル対応にするプロセスを簡素化するように設計されたHTML、CSS、およびJavaScriptフレームワークです。 RailsプロジェクトにBootstrapを実装することで、そのレイアウト規則とコンポーネントをアプリケーションに統合して、ユーザーとサイトとの対話をより魅力的にすることができます。

このチュートリアルでは、webpackバンドラーを使用してJavaScriptおよびCSSアセットを提供する既存のRailsプロジェクトにBootstrapを追加します。目標は、ユーザーがサメに関する情報を共有するために対話できる視覚的に魅力的なサイトを作成することです。

前提条件

このチュートリアルに従うには、次のものが必要です。

Ubuntu18.04を実行しているローカルマシンまたは開発サーバー。開発マシンには、管理者権限を持つroot以外のユーザーと、ufwで構成されたファイアウォールが必要です。これを設定する方法については、 Ubuntu18.04を使用した初期サーバー設定のチュートリアルを参照してください。
Node.jsおよびnpmがローカルマシンまたは開発サーバーにインストールされています。このチュートリアルでは、Node.jsバージョン10.16.3とnpmバージョン6.9.0を使用します。 Ubuntu 18.04にNode.jsとnpmをインストールする手順については、 Ubuntu18.04にNode.jsをインストールする方法の「PPAを使用したインストール」セクションの手順に従ってください。
Ubuntu18.04でrbenvを使用してRubyonRailsをインストールする方法の手順1〜4 に従って、ローカルマシンまたは開発サーバーにインストールされたRuby、 rbenv 、およびRails 。このチュートリアルでは、Ruby 2.5.1 、rbenv 1.1.2 、およびRails 5.2.3を使用します。
Ruby onRailsアプリケーションのステップ1に従ってSQLiteをインストールしました。このチュートリアルでは、SQLite 3 3.22.0を使用します。

ステップ1—プロジェクトのクローンを作成して依存関係をインストールする

最初のステップは、 DigitalOceanCommunityGitHubアカウントからrails-stimulusリポジトリのクローンを作成することです。このリポジトリには、既存のRails5プロジェクトにStimulus.jsを追加する方法を説明したRubyonRailsアプリケーションに刺激を追加する方法で説明されているセットアップのコードが含まれています。

リポジトリをrails-bootstrapというディレクトリに複製します。

git clone https://github.com/do-community/rails-stimulus.git rails-bootstrap

rails-bootstrapディレクトリに移動します。

cd rails-bootstrap

プロジェクトコードを操作するには、最初に、Gemfileにリストされているプロジェクトの依存関係をインストールする必要があります。次のコマンドを使用して、必要なgemをインストールします。

bundle install

次に、Yarnの依存関係をインストールします。このRails5プロジェクトは、webpackでアセットを提供するように変更されているため、JavaScriptの依存関係はYarnによって管理されるようになりました。これは、プロジェクトのpackage.jsonファイルにリストされている依存関係をインストールして検証する必要があることを意味します。

次のコマンドを実行して、これらの依存関係をインストールします。

yarn install --check-files

--check-filesフラグは、node_modulesディレクトリにすでにインストールされているファイルが削除されていないことを確認します。

次に、データベースの移行を実行します。

rails db:migrate

移行が完了したら、アプリケーションをテストして、期待どおりに機能していることを確認できます。ローカルで作業している場合は、次のコマンドを使用してサーバーを起動します。

rails s

開発サーバーで作業している場合は、次のコマンドでアプリケーションを起動できます。

rails s --binding=your_server_ip

localhost:3000またはhttp://your_server_ip:3000に移動します。次のランディングページが表示されます。

新しいサメを作成するには、ページの下部にある New Shark リンクをクリックすると、sharks/newルートに移動します。プロジェクトの認証設定のおかげで、ユーザー名（ sammy ）とパスワード（ shark ）の入力を求められます。 newビューは次のようになります。

アプリケーションが機能していることを確認するために、いくつかのデモ情報をアプリケーションに追加できます。 Name フィールドに「GreatWhite」を入力し、Factsフィールドに「Scary」を入力します。

サメの作成ボタンをクリックして、サメを作成します。

これで、プロジェクトに必要な依存関係がインストールされ、その機能がテストされました。次に、Railsアプリケーションにいくつかの変更を加えて、ユーザーがサメ情報アプリケーション自体に移動する前にメインのランディングページにアクセスできるようにします。

ステップ2—メインランディングページとコントローラーを追加する

現在のアプリケーションは、ルートビューをメインのサメ情報ページであるsharksコントローラーのindexビューに設定します。これはユーザーをメインアプリケーションに誘導するために機能しますが、将来的にアプリケーションを開発して他の機能を追加することにした場合は、あまり望ましくない場合があります。ルートビューをhomeコントローラーに設定するようにアプリケーションを再編成できます。これには、indexビューが含まれます。そこから、アプリケーションの他の部分にリンクできます。

homeコントローラーを作成するには、 railsgenerateコマンドをcontrollerジェネレーターで使用できます。この場合、メインのランディングページにindexビューが必要であることを指定します。

rails generate controller home index

コントローラを作成したら、プロジェクトのconfig/routes.rbファイル（アプリケーションのルート宣言を指定するファイル）のルートビューを変更する必要があります。これは、ルートビューが現在サメindexに設定されているためです。見る。

ファイルを開きます。

nano config/routes.rb

次の行を見つけます。

〜/ rails-bootstrap / config / routers.rb

. . . 
root 'sharks#index'
. . .

次のように変更します。

〜/ rails-bootstrap / config / routers.rb

. . . 
root 'home#index'
. . .

これにより、homeコントローラーのindexビューがアプリケーションのルートとして設定され、そこからアプリケーションの他の部分に分岐できるようになります。

編集が終了したら、ファイルを保存して閉じます。

これらの変更が適切に行われると、アプリケーションにBootstrapを追加する準備が整います。

ステップ3—ブートストラップのインストールとカスタムスタイルの追加

このステップでは、Bootstrapを、正しく機能するために必要なツールライブラリとともにプロジェクトに追加します。これには、ライブラリとプラグインをアプリケーションのwebpackエントリポイントと環境ファイルにインポートすることが含まれます。また、プロジェクトのJavaScriptアセットが存在するディレクトリであるアプリケーションのapp/javascriptディレクトリにカスタムスタイルシートを作成する必要があります。

まず、yarnを使用して、Bootstrapとそれに必要な依存関係をインストールします。

yarn add bootstrap jquery popper.js

Bootstrapのコンポーネントの多くは、JQueryとPopper.jsに加えて、Bootstrap独自のカスタムプラグインを必要とするため、このコマンドで必要なライブラリを確保できます。

次に、メインのWebpack構成ファイルconfig/webpack/environment.jsをnanoまたはお気に入りのエディターで開きます。

nano config/webpack/environment.js

ファイル内に、JQuery変数とPopper変数の解釈方法をBootstrapに指示するProvidePluginとともにwebpackライブラリを追加します。

次のコードをファイルに追加します。

〜/ rails-bootstrap / config / webpack / environment.js

const { environment } = require('@rails/webpacker')
const webpack = require("webpack") 

environment.plugins.append("Provide", new webpack.ProvidePlugin({ 
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))  

module.exports = environment

ProvidePluginは、JQueryまたはPopperモジュールを操作するときに通常使用する複数のimportまたはrequireステートメントを回避するのに役立ちます。このプラグインを配置すると、webpackは自動的に正しいモジュールをロードし、名前付き変数が各モジュールのロードされたエクスポートを指すようになります。

編集が終了したら、ファイルを保存して閉じます。

次に、メインのWebpackエントリポイントファイルapp/javascript/packs/application.jsを開きます。

nano app/javascript/packs/application.js

ファイル内に、次のimportステートメントを追加して、Bootstrapと次に作成するカスタムscssスタイルファイルをインポートします。

. . . 
[label ~/rails-bootstrap/app/javascript/packs/application.js]
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

import "bootstrap"
import "../stylesheets/application"
. . .

編集が終了したら、ファイルを保存して閉じます。

次に、アプリケーションスタイルシート用のstylesheetsディレクトリを作成します。

mkdir app/javascript/stylesheets

カスタムスタイルファイルを開きます。

nano app/javascript/stylesheets/application.scss

これはscssファイルであり、CSSの代わりにSassを使用します。 Sass、またはSyntactically Awesome Style Sheetsは、開発者がプログラミングロジックや共有変数などの規則をスタイリングルールに統合できるようにするCSS拡張言語です。

ファイルに次のステートメントを追加して、プロジェクトのカスタムBootstrapscssスタイルとGoogleフォントをインポートします。

〜/ rails-bootstrap / app / javascript / stylesheets / application.scss

@import "~bootstrap/scss/bootstrap";
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

次に、アプリケーションの次のカスタム変数定義とスタイルを追加します。

〜/ rails-bootstrap / app / javascript / stylesheets / application.scss

. . .
$white: white;
$black: black;

.navbar {
        margin-bottom: 0;
        background: $black;
}
body {
        background: $black;
        color: $white;
        font-family: 'Merriweather', sans-serif;
}
h1,
h2 {
        font-weight: bold;
}
p {
        font-size: 16px;
        color: $white;
}
a:visited {
        color: $black;
}
.jumbotron {
        background: #0048CD;
        color: $white;
        text-align: center;
        p {
                color: $white;
                font-size: 26px;
        }
}
.link {
        color: $white;
}
.btn-primary {
        color: $white;
        border-color: $white;
        margin-bottom: 5px;
}
.btn-sm {
        background-color: $white;
        display: inline-block;
}
img,
video,
audio {
        margin-top: 20px;
        max-width: 80%;
}
caption {

        float: left;
        clear: both;

}

編集が終了したら、ファイルを保存して閉じます。

いくつかのカスタムスタイルとともに、Bootstrapをプロジェクトに追加しました。これで、Bootstrapレイアウト規則とコンポーネントをアプリケーションファイルに統合することに進むことができます。

ステップ4—アプリケーションレイアウトの変更

Bootstrapの規則とコンポーネントをプロジェクトに統合する最初のステップは、それらをメインのアプリケーションレイアウトファイルに追加することです。このファイルは、アプリケーションのレンダリングされた各ビューテンプレートに含まれる要素を設定します。このファイルでは、webpackエントリポイントが定義されていることを確認すると同時に、共有ナビゲーションヘッダー partial への参照と、サメに関連付けられたビューのレイアウトをレンダリングできるようにするロジックを追加します。応用。

まず、アプリケーションのメインレイアウトファイルであるapp/views/layouts/application.html.erbを開きます。

nano app/views/layouts/application.html.erb

現在、ファイルは次のようになっています。

〜/ rails-bootstrap / app / views / layouts / application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Sharkapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

このコードは、動的フォームのクロスサイトリクエストフォージェリ保護パラメーターとトークン、インラインスクリプトタグを許可するセッションごとのナンスの csp-nonce 、アプリケーションのスタイルシートとjavascriptアセット。コードにはjavascript_link_tagではなく、javascript_pack_tagが含まれていることに注意してください。これは、メインのWebpackエントリポイントをapp/javascript/packs/application.jsにロードするようにRailsに指示します。

ページの<body>で、yieldステートメントは、ビューからコンテンツを挿入するようにRailsに指示します。この場合、以前はアプリケーションルートがindex sharkビューにマップされていたため、このビューからコンテンツが挿入されていました。ただし、ルートビューを変更したため、homeコントローラーのindexビューからコンテンツが挿入されます。

これにより、いくつかの疑問が生じます。アプリケーションのホームビューを、ユーザーがsharkアプリケーションを表示したときに表示されるものと同じにする必要がありますか？そして、これらのビューを多少異なるものにしたい場合、それをどのように実装しますか？

最初のステップは、すべてのアプリケーションビューに何を複製するかを決定することです。 <header>に含まれるすべてのものをそのままにしておくことができます。これは、すべてのアプリケーションページに表示するのは主にタグとメタデータであるためです。ただし、このセクション内に、すべてのアプリケーションビューをカスタマイズするいくつかのものを追加することもできます。

まず、Bootstrapが応答動作に推奨するviewportメタタグを追加します。

〜/ rails-bootstrap / app / views / layouts / application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sharkapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

次に、既存のtitleコードを、アプリケーションタイトルをより動的な方法でレンダリングするコードに置き換えます。

〜/ rails-bootstrap / app / views / layouts / application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

<meta>タグを追加して、サイトの説明を含めます。

〜/ rails-bootstrap / app / views / layouts / application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "About Sharks" %>">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
. . .

このコードを配置すると、ナビゲーション部分をレイアウトに追加できます。理想的には、アプリケーションの各ページの上部に navbar コンポーネントを含めて、ユーザーがサイトのある部分から別の部分に簡単に移動できるようにする必要があります。

<body>タグの下に、<header>タグと次のrenderステートメントを追加します。

〜/ rails-bootstrap / app / views / layouts / application.html.erb

  <body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>

    <%= yield %>
. . .

この<header>タグを使用すると、ページコンテンツを整理して、ナビゲーションバーをメインページのコンテンツから分離できます。

最後に、<main>要素タグといくつかのロジックを追加して、アプリケーションがレンダリングするビュー、つまりレイアウトを制御できます。このコードは、 content_forメソッドを使用して、次のステップでサメのレイアウトに関連付けるコンテンツ識別子を参照します。

既存のyieldステートメントを次の内容に置き換えます。

〜/ rails-bootstrap / app / views / layouts / application.html.erb

. . . 
  <body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>
    <main role="main">
    <%= content_for?(:content) ? yield(:content) : yield %>
    </main>
  </body>
</html>

これで、:contentブロックが設定されている場合、アプリケーションは関連するレイアウトを生成します。それ以外の場合は、三項演算子のおかげで、homeコントローラーに関連付けられたビューが暗黙的に生成されます。

これらの変更を行ったら、ファイルを保存して閉じます。

アプリケーション全体のレイアウトを設定すると、共有ナビゲーションバーパーシャルとサメビューのサメレイアウトの作成に進むことができます。

ステップ5—共有の部分的および特定のレイアウトを作成する

前のステップでアプリケーションレイアウトに加えた変更に加えて、共有navbarパーシャル、app/views/layouts/application.html.erbで参照したサメのレイアウト、およびアプリケーションのランディングページのビューを作成する必要があります。組み込みのブートストラップスタイルを利用するために、アプリケーションの現在のlink_to要素にブートストラップスタイルを追加することもできます。

まず、共有ナビゲーションバーパーシャルのファイルを開きます。

nano app/views/layouts/_navigation.html.erb

次のコードをファイルに追加して、ナビゲーションバーを作成します。

〜/ rails-bootstrap / app / views / layouts / _navigation.html.erb

<nav class="navbar navbar-dark navbar-static-top navbar-expand-md">
    <div class="container">
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        </button> <%= link_to "Everything Sharks", root_path, class: 'navbar-brand' %>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav mr-auto">
            <li class='nav-item'><%= link_to 'Home', home_index_path, class: 'nav-link' %></li>
            <li class='nav-item'><%= link_to 'Sharks', sharks_path, class: 'nav-link' %></li>  
                
                </li>
            </ul>
        </div>
    </div>
</nav>

このナビゲーションバーは、 link_to メソッドを使用してアプリケーションルートへのリンクを作成します。このメソッドは、アプリケーションルートパスにマップされます。ナビゲーションバーには、2つの追加リンクも含まれています。1つはhomeコントローラーのindexビューにマップするHomeパスへのリンク、もう1つはsharkindexビュー。

編集が終了したら、ファイルを保存して閉じます。

次に、layoutsディレクトリにあるサメのレイアウトのファイルを開きます。

nano app/views/layouts/sharks.html.erb

レイアウト機能を追加する前に、レイアウトのコンテンツがメインアプリケーションレイアウトで参照する:contentブロックとして設定されていることを確認する必要があります。次の行をファイルに追加して、ブロックを作成します。

〜/ rails-bootstrap / app / views / layouts / sharks.html.erb

<% content_for :content do %>
<% end %>

このブロックに記述しようとしているコードは、コントローラーからサメのビューが要求されるたびに、app/views/layouts/application.html.erbファイルの:contentブロック内にレンダリングされます。

次に、ブロック自体の中に、次のコードを追加して、ジャンボトロンコンポーネントと2つのコンテナーを作成します。

〜/ rails-bootstrap / app / views / layouts / sharks.html.erb

<% content_for :content do %>
    <div class="jumbotron text-center">
        <h1>Shark Info</h1>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <p>
                    <%= yield %>
                </p>
            </div>
            <div class="col-lg-6">
                <p>

                    <div class="caption">You can always count on some sharks to be friendly and welcoming!</div>
                    <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
                </p>

            </div>
        </div>
    </div>
    <% end %>

最初のコンテナには、sharkコントローラのビューからコンテンツを挿入するyieldステートメントが含まれ、2番目のコンテナには、特定のサメが常に友好的で歓迎的であることを思い出させるものが含まれています。

最後に、ファイルの最後に、次のrenderステートメントを追加して、アプリケーションのレイアウトをレンダリングします。

〜/ rails-bootstrap / app / views / layouts / sharks.html.erb

. . . 
            </div>
        </div>
    </div>
    <% end %>
        <%= render template: "layouts/application" %>

このサメのレイアウトは、メインアプリケーションレイアウトの名前付き:contentブロックのコンテンツを提供します。次に、アプリケーションレイアウト自体をレンダリングして、レンダリングされたアプリケーションページにアプリケーション全体のレベルで必要なものがすべて含まれるようにします。

編集が終了したら、ファイルを保存して閉じます。

これでパーシャルとレイアウトが配置されましたが、ユーザーがアプリケーションのホームページに移動したときに表示されるビュー、homeコントローラーのindexビューはまだ作成されていません。

今すぐそのファイルを開きます：

nano app/views/home/index.html.erb

このビューの構造は、メインのジャンボトロンコンポーネントと2つのコンテナを使用して、サメビュー用に定義したレイアウトと一致します。ファイル内のボイラープレートコードを次のように置き換えます。

〜/ rails-bootstrap / app / views / home / index.html.erb

<div class="jumbotron">
    <div class="container">
        <h1>Want to Learn About Sharks?</h1>
        <p>Are you ready to learn about sharks?</p>
        <br>
        <p>
            <%= button_to 'Get Shark Info', sharks_path, :method => :get,  :class => "btn btn-primary btn-lg"%>
        </p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <h3>Not all sharks are alike</h3>
            <p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans.
            </p>
        </div>
        <div class="col-lg-6">
            <h3>Sharks are ancient</h3>
            <p>There is evidence to suggest that sharks lived up to 400 million years ago.
            </p>
        </div>
    </div>
</div>

これで、アプリケーションのホームページにアクセスしたときに、 Get Shark Info ボタンをクリックして、アプリケーションのサメセクションに移動する明確な方法が得られます。このボタンは、shark_path —sharksコントローラーに関連付けられたルートにマップするヘルパーを指します。

編集が終了したら、ファイルを保存して閉じます。

最後のタスクは、アプリケーションのlink_toメソッドの一部を、Bootstrapを使用してスタイルを設定できるボタンに変換することです。また、サメのindexビューからホームページに戻る方法も追加します。

サメのindexビューを開いて開始します。

nano app/views/sharks/index.html.erb

ファイルの下部で、newサメビューに移動するlink_toメソッドを見つけます。

〜/ rails-bootstrap / app / views / sharks / index.html.erb

. . .
<%= link_to 'New Shark', new_shark_path %>

このリンクをBootstrapの"btn btn-primary btn-sm"クラスを使用するボタンに変えるようにコードを変更します。

〜/ rails-bootstrap / app / views / sharks / index.html.erb

. . .
<%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %>

次に、アプリケーションのホームページへのリンクを追加します。

〜/ rails-bootstrap / app / views / sharks / index.html.erb

. . .
<%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %> <%= link_to 'Home', home_index_path, :class => "btn btn-primary btn-sm" %>

編集が終了したら、ファイルを保存して閉じます。

次に、newビューを開きます。

nano app/views/sharks/new.html.erb

ファイルの下部にあるlink_toメソッドにボタンスタイルを追加します。

〜/ rails-bootstrap / app / views / sharks / new.html.erb

. . . 
<%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

ファイルを保存して閉じます。

editビューを開きます。

nano app/views/sharks/edit.html.erb

現在、link_toメソッドは次のように配置されています。

〜/ rails-bootstrap / app / views / sharks / edit.html.erb

. . . 
<%= link_to 'Show', @shark %> |
<%= link_to 'Back', sharks_path %>

ページ上の配置を変更し、ボタンスタイルを追加して、コードが次のようになるようにします。

〜/ rails-bootstrap / app / views / sharks / edit.html.erb

. . . 
<%= link_to 'Show', @shark, :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

ファイルを保存して閉じます。

最後に、showビューを開きます。

nano app/views/sharks/show.html.erb

次のlink_toメソッドを見つけます。

〜/ rails-bootstrap / app / views / sharks / show.html.erb

. . . 
<%= link_to 'Edit', edit_shark_path(@shark) %> |
<%= link_to 'Back', sharks_path %>
. . .

次のように変更します。

〜/ rails-bootstrap / app / views / sharks / show.html.erb

. . . 
<%= link_to 'Edit', edit_shark_path(@shark), :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>
. . .

ファイルを保存して閉じます。

これで、アプリケーションをテストする準備が整いました。

適切なコマンドでサーバーを起動します。

rails sローカルで作業している場合
rails s --binding=your_server_ip開発サーバーを使用している場合

ローカルで作業しているかサーバーで作業しているかに応じて、localhost:3000またはhttp://your_server_ip:3000に移動します。次のランディングページが表示されます。

Get SharkInfoをクリックします。次のページが表示されます。

Ruby on Railsアプリケーションに刺激を追加する方法で説明されている方法を使用して、サメを編集したり、事実や投稿を追加したりできるようになりました。会話に新しいサメを追加することもできます。

他のサメのビューに移動すると、サメのレイアウトが常に含まれていることがわかります。

これで、BootstrapがRailsアプリケーションに統合されました。ここから、アプリケーションに新しいスタイルとコンポーネントを追加して、ユーザーにとってより魅力的なものにすることで、先に進むことができます。

結論

これで、BootstrapがRailsアプリケーションに統合されました。これにより、応答性が高く視覚的に魅力的なスタイルを作成して、プロジェクトのユーザーエクスペリエンスを向上させることができます。

ブートストラップ機能とその機能の詳細については、ブートストラップドキュメントを参照してください。また、Sass のドキュメントを参照して、CSSスタイルとロジックを拡張および拡張するためにどのように使用できるかを理解することもできます。

Bootstrapが他のフレームワークとどのように統合されるかを知りたい場合は、 Angular、Bootstrap、およびAPIXUAPIを使用して天気アプリを構築する方法をご覧ください。また、Reactフロントエンドを使用してRubyonRailsプロジェクトをセットアップする方法を読んで、RailsおよびReactとの統合方法についても学ぶことができます。