序章

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:

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

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

  1. cd rails-bootstrap

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

  1. bundle install

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

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

  1. yarn install --check-files

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

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

  1. rails db:migrate

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

  1. rails s

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

  1. rails s --binding=your_server_ip

案内する localhost:3000 また http://your_server_ip:3000. 次のランディングページが表示されます。

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

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

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

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

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

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

を作成するには home コントローラの場合、 railsgenerateコマンドを controller 発生器。 この場合、必要なことを指定します index メインのランディングページを表示します。

  1. rails generate controller home index

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

ファイルを開きます。

  1. 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エントリポイントと環境ファイルにインポートすることが含まれます。 また、アプリケーションでカスタムスタイルシートを作成する必要があります app/javascript ディレクトリ、プロジェクトのJavaScriptアセットが存在するディレクトリ。

まず、 yarn Bootstrapとそれに必要な依存関係をインストールするには：

  1. yarn add bootstrap jquery popper.js

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

次に、メインのWebpack構成ファイルを開きます。 config/webpack/environment.js と nano またはお気に入りの編集者：

  1. 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

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

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

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

  1. 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 アプリケーションスタイルシートのディレクトリ：

  1. mkdir app/javascript/stylesheets

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

  1. nano app/javascript/stylesheets/application.scss

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

ファイルに次のステートメントを追加して、カスタムブートストラップをインポートします scss プロジェクトのスタイルと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、アプリケーションのメインレイアウトファイル：

  1. 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、これはRailsにメインのwebpackエントリポイントをロードするように指示します。 app/javascript/packs/application.js.

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

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

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

まず、を追加します viewport Bootstrapがレスポンシブ動作に推奨するメタタグ：

〜/ 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> タグと次のレンダリングステートメント：

〜/ 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—共有の部分的および特定のレイアウトを作成する

前のステップでアプリケーションレイアウトに加えた変更に加えて、共有ナビゲーションバーパーシャル、で参照したサメのレイアウトを作成する必要があります。 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つの追加リンクも含まれています。 Home パス、にマップします home コントローラーの index ビュー、およびサメのアプリケーションパスへの別のパス。 shark index 見る。

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

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

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

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

〜/ rails-bootstrap / app / views / layouts / sharks.html.erb
<% content_for :content do %>
<% end %>

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

次に、ブロック自体の中に、次のコードを追加して、ジャンボトロンコンポーネントと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 %>

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

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

〜/ rails-bootstrap / app / views / layouts / sharks.html.erb
. . . 
            </div>
        </div>
    </div>
    <% end %>
        <%= render template: "layouts/application" %>

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

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

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

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

  1. 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 開始するビュー：

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

ファイルの下部で、 link_to に向ける方法 new サメの眺め：

〜/ 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 見る：

  1. 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 見る：

  1. 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 見る：

  1. 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との統合方法についても学ぶことができます。