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

前書き

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

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

image：https：//assets.digitalocean.com/articles/docker_node_image/landing_page.png [アプリケーションのランディングページ]

前提条件

このチュートリアルを実行するには、次のものが必要です。

Ubuntu 18.04を実行しているローカルマシンまたは開発サーバー。開発マシンには、管理権限を持つ非ルートユーザーと、「+ ufw +」で設定されたファイアウォールが必要です。これを設定する方法については、https：//www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-18-04 [Ubuntu 18.04での初期サーバー設定]チュートリアルを参照してください。
ローカルマシンまたは開発サーバーにインストールされているhttps://nodejs.org [Node.js]およびhttps://www.npmjs.com/[npm]。このチュートリアルでは、Node.jsバージョンとnpmバージョンを使用します。 Node.jsおよびnpmをUbuntu 18.04にインストールするためのガイダンスについては、https：//www.digitalocean.com/community/tutorials/how-to-install-node-の*「PPAを使用してインストールする」セクションの手順に従ってください。 js-on-ubuntu-18-04＃installing-using-a-ppa [Ubuntu 18.04にNode.jsをインストールする方法]。
Ruby、https：//github.com/rbenv/rbenv [rbenv]、およびローカルマシンまたは開発サーバーにインストールされているRails（https://www.digitalocean.com/community/tutorials/の*ステップ1-4 *に従って） how-to-install-ruby-on-rails-with-rbenv-on-ubuntu-18-04 [Ubuntu 18.04にrbenvでRuby on Railsをインストールする方法]。このチュートリアルでは、Ruby、rbenv、およびRailsを使用します。
Ruby on Railsアプリケーションの構築方法の*ステップ1 *に従って、SQLiteがインストールされました。このチュートリアルではSQLite 3を使用します。

手順1-プロジェクトの複製と依存関係のインストール

最初のステップは、https：//github.com/do-community/rails-stimulus.git [rails-stimulus]リポジトリをhttps://github.com/do-community[DigitalOcean Community GitHubアカウント]から複製することです。。このリポジトリには、https：//www.digitalocean.com/community/tutorials/how-to-add-stimulus-to-a-ruby-on-rails-application [刺激をRuby on Railsアプリケーション]。既存のRails 5プロジェクトにhttps://stimulusjs.org/[Stimulus.js]を追加する方法を説明しました。

リポジトリを `++`というディレクトリにクローンします：

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

`++`ディレクトリに移動します：

cd

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

bundle install

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

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

yarn install --check-files

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

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

rails db:migrate

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

rails s

開発サーバーで作業している場合は、次を使用してアプリケーションを開始できます。

rails s --binding=

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

image：https：//assets.digitalocean.com/articles/build_rails_app/index_no_style.png [アプリケーションのランディングページ]

新しいサメを作成するには、ページの下部にある* New Shark *リンクをクリックして、 `+ sharks / new `ルートに移動します。プロジェクトのhttps://www.digitalocean.com/community/tutorials/how-to-build-a-ruby-on-のおかげで、ユーザー名（* sammy *）とパスワード（* shark *）の入力を求められますrails-application＃step-％E2％80％94-adding-authentication [認証設定]。 ` new +`ビューは次のようになります。

image：https：//assets.digitalocean.com/articles/build_rails_app/new_no_style.png [新しいサメの作成]

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

image：https：//assets.digitalocean.com/articles/build_rails_app/add_shark_no_style.png [ホオジロザメの追加]

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

image：https：//assets.digitalocean.com/articles/build_rails_app/show_no_style.png [サメを見る]

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

ステップ2-メインランディングページとコントローラーの追加

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

+ home +`コントローラーを作成するには、 `+ controller +`ジェネレーターでhttps://guides.rubyonrails.org/command_line.html#rails-generate[+rails generate + `]コマンドを使用できます。この場合、メインのランディングページに `+ index +`ビューが必要であることを指定します。

rails generate controller home index

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

ファイルを開きます。

nano config/routes.rb

次の行を見つけます。

〜/ rails-bootstrap / config / routes.rb

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

次のように変更してください。

〜/ rails-bootstrap / config / routes.rb

. . .
root '#index'
. . .

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

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

これらの変更が完了したら、アプリケーションにBootstrapを追加する準備が整いました。

手順3-ブートストラップのインストールとカスタムスタイルの追加

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

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

yarn add bootstrap jquery popper.js

Bootstrapのコンポーネントの多くは、https：//jquery.com/ [JQuery]およびhttps://popper.js.org/[Popper.js]に加えて、Bootstrap独自のカスタムプラグインを必要とするため、このコマンドにより、ライブラリが確実に保持されます。あなたが必要です。

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

nano config/webpack/environment.js

ファイル内に、webpackライブラリと、JQueryおよびPopper変数の解釈方法をBootstrapに指示するhttps://webpack.js.org/plugins/provide-plugin/ [+ ProvidePlugin +]を追加します。

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

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

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








module.exports = environment

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

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

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

nano app/javascript/packs/application.js

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

〜/ rails-bootstrap / app / javascript / packs / application.js

. . .
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"



. . .

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

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

mkdir app/javascript/stylesheets

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

nano app/javascript/stylesheets/application.scss

これは `+ scss +`ファイルで、https：//en.wikipedia.org/wiki/Cascading_Style_Sheets [CSS]の代わりにhttps://sass-lang.com/[Sass]を使用します。 Sass（Syntactically Awesome Style Sheets）は、開発者が共有変数などのプログラミングロジックと規則をスタイリングルールに統合できるようにするCSS拡張言語です。

ファイルに次のステートメントを追加して、プロジェクトのカスタムBootstrap `+ 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エントリポイントが定義されていることを確認し、共有ナビゲーションヘッダーhttps://guides.rubyonrails.org/layouts_and_rendering.html#using-partials[partial][partial]といくつかのロジックへの参照も追加します。 sharkアプリケーションに関連付けられたビューのレイアウトをレンダリングできるようにします。

まず、アプリケーションのメインレイアウトファイルである `+ 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>

このコードは、動的フォームのhttps://api.rubyonrails.org/classes/ActionView/Helpers/CsrfHelper.html [クロスサイトリクエストフォージェリ保護パラメーターとトークン]、https：//api.rubyonrails.org/ v5.2.3 / classes / ActionView / Helpers / CspHelper.html [csp-nonce]は、インラインスクリプトタグを許可するセッションごとのnonce、およびアプリケーションのスタイルシートとjavascriptアセット用です。 `+ javascript_link_tag `を使用するのではなく、コードに ` javascript__tag +`が含まれていることに注意してください。

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

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

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

最初に、応答性のある動作のためにBootstrapが推奨する `+ viewport +`メタタグを追加します。

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

<!DOCTYPE html>
<html>
 <head>

   <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">

   <%= 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>

   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
. . .

このコードを配置すると、レイアウトに部分的なナビゲーションを追加できます。理想的には、アプリケーションの各ページには、ページの上部にhttps://getbootstrap.com/docs/4.0/components/navbar/[navbar]コンポーネントを含めて、ユーザーがサイトの一部から別の。

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

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

 <body>




   <%= yield %>
. . .

この `+ <header> +`タグを使用すると、メインコンテンツとnavbarを分けてページコンテンツを整理できます。

最後に、 + <main> +`要素タグとロジックを追加して、アプリケーションがレンダリングするビュー、つまりレイアウトを制御できます。このコードはhttps://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-content_for [+ content_for +` method]を使用して、サメのレイアウトに関連付けるコンテンツ識別子を参照します次のステップ。

既存の `+ yield +`ステートメントを次のコンテンツに置き換えます。

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

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



 </body>
</html>

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

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

アプリケーション全体のレイアウトセットを使用すると、シャークビュー用の共有navbarパーシャルとシャークレイアウトの作成に進むことができます。

ステップ5-共有部分および特定レイアウトの作成

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

まず、共有navbarパーシャルのファイルを開きます。

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

次のコードをファイルに追加して、navbarを作成します。

〜/ 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>

このnavbarは、https：//api.rubyonrails.org/v5.2.3/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to [+ link_to +]メソッドを使用して、アプリケーションルートのリンクを作成します。アプリケーションのルートパスに。 navbarには2つの追加リンクも含まれています。1つは「+ home 」コントローラーの「 index 」ビューにマッピングする「 Home 」パスへのリンク、もう1つは「 shark 」「 index + `ビュー。

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

次に、サメのレイアウト用の `+ 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 +`ブロック内にレンダリングされます。

次に、ブロック自体の内部で、次のコードを追加してhttps://getbootstrap.com/docs/4.3/components/jumbotron/[jumbotron]コンポーネントと2つのhttps://getbootstrap.com/docs/4.3/layout/を作成します概要/＃containers [コンテナ]：

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

<% content_for :content do %>




















   <% end %>

最初のコンテナには、「+ shark 」コントローラのビューからコンテンツを挿入する「 yield +」ステートメントが含まれ、2番目のコンテナには、特定のサメが常に友好的で歓迎しているというリマインダーが含まれています。

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

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

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

このサメのレイアウトは、メインアプリケーションレイアウトの名前付きの `+：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>

これで、アプリケーションのホームページに着陸したときに、ユーザーは[サメの情報を取得]ボタンをクリックして、アプリケーションのサメセクションに移動する明確な方法を使用できます。このボタンは、「+ 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 %>

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

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

. . .
<%= link_to 'New Shark', new_shark_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 %>

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

`+ 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 = +

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

image：https：//assets.digitalocean.com/articles/docker_node_image/landing_page.png [アプリケーションのランディングページ]

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

image：https：//assets.digitalocean.com/articles/rails_bootstrap/rails-bootstrap-sharks-index.png [サメのインデックスページ]

https://www.digitalocean.com/community/tutorials/how-to-add-stimulus-to-a-ruby-on-rails-で説明されている方法を使用して、サメを編集したり、事実や投稿を追加したりできるようになりましたapplication [刺激をRuby on Railsアプリケーションに追加する方法]。会話に新しいサメを追加することもできます。

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

image：https：//assets.digitalocean.com/articles/rails_bootstrap/rails-bootstrap-sharks-show.png [サメのショーページ]

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

結論

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

Bootstrapの機能とその機能の詳細については、https：//getbootstrap.com/docs/4.3/getting-started/introduction/ [Bootstrap documentation]をご覧ください。また、https：//sass-lang.com/documentation [Sassのドキュメント]を参照して、CSSのスタイルとロジックを強化および拡張するためにどのように使用できるかを理解することもできます。

Bootstrapが他のフレームワークとどのように統合されるかを確認するには、https：//www.digitalocean.com/community/tutorials/how-to-build-a-weather-app-with-angular-bootstrap-and-theをご覧ください。 -apixu-api [Angular、Bootstrap、およびAPIXU APIを使用して天気アプリを作成する方法]。また、https：//www.digitalocean.com/community/tutorials/how-to-set-up-a-ruby-on-rails-project-with-a-を読むことで、Rails and Reactと統合する方法について学ぶこともできますreact-frontend [ReactフロントエンドでRuby on Railsプロジェクトをセットアップする方法]。

TOC

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

前書き

前提条件

手順1-プロジェクトの複製と依存関係のインストール

ステップ2-メインランディングページとコントローラーの追加

手順3-ブートストラップのインストールとカスタムスタイルの追加

手順4-アプリケーションレイアウトの変更

ステップ5-共有部分および特定レイアウトの作成

結論

Related