config/routes.rb次の行を見つけます。.次のように変更してください。index`ビューがアプリケーションのルートとして設定され、そこからアプリケーションの他の部分に分岐できるようになります。編集が終了したら、ファイルを保存して閉じます。これらの変更が完了したら、アプリケーションにBootstrapを追加する準備が整いました。手順3-ブートストラップのインストールとカスタムスタイルの追加この手順では、適切に機能するために必要なツールライブラリとともに、プロジェクトにBootstrapを追加します。これには、アプリケーションのwebpackエントリポイントと環境ファイルへのライブラリとプラグインのインポートが含まれます。javascript`ディレクトリ(プロジェクトのJavaScriptアセットが存在するディレクトリ)にカスタムスタイルシートを作成する必要があります。+`を使用してBootstrapとその必要な依存関係をインストールします。[JQuery]およびhttps://popper.js.org/[Popper.js]に加えて、Bootstrap独自のカスタムプラグインを必要とするため、このコマンドにより、ライブラリが確実に保持されます。+`またはお気に入りのエディターで開きます。ファイルに次のコードを追加します。require`ステートメントを回避するのに役立ちます。このプラグインを配置すると、webpackは自動的に正しいモジュールをロードし、指定された変数を各モジュールのロードされたエクスポートにポイントします。編集が終了したら、ファイルを保存して閉じます。css`スタイルファイルをインポートします。.編集が終了したら、ファイルを保存して閉じます。+`ディレクトリを作成します。app/javascript/stylesheetsカスタムスタイルファイルを開きます。[CSS]の代わりにhttps://sass-lang.com/[Sass]を使用します。Sheets)は、開発者が共有変数などのプログラミングロジックと規則をスタイリングルールに統合できるようにするCSS拡張言語です。+`スタイルとGoogleフォントをインポートします。url('https://fonts.googleapis.com/css?family=Merriweather:400,700');次に、アプリケーションに次のカスタム変数の定義とスタイルを追加します。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現在、ファイルは次のようになっています。[csp-nonce]は、インラインスクリプトタグを許可するセッションごとのnonce、およびアプリケーションのスタイルシートとjavascriptアセット用です。+`が含まれていることに注意してください。`ステートメントは、ビューからコンテンツを挿入するようにRailsに指示します。`サメビューにマップされていたため、そのビューからコンテンツが挿入されていました。+`ビューからコンテンツが挿入されます。これにより、いくつかの質問が発生します。これらのビューを多少変えたい場合、どのように実装しますか?最初のステップは、すべてのアプリケーションビューで何を複製するかを決定することです。+`の下にすべてを含めることができます。このセクション内では、すべてのアプリケーションビューをカスタマイズするいくつかの項目を追加することもできます。+`メタタグを追加します。+`コードを、アプリケーションのタイトルをより動的にレンダリングするコードに置き換えます。+`タグを追加します。.このコードを配置すると、レイアウトに部分的なナビゲーションを追加できます。理想的には、アプリケーションの各ページには、ページの上部にhttps://getbootstrap.com/docs/4.0/components/navbar/[navbar]コンポーネントを含めて、ユーザーがサイトの一部から別の。+`タグと次のrenderステートメントを追加します。+`タグを使用すると、メインコンテンツとnavbarを分けてページコンテンツを整理できます。+`要素タグとロジックを追加して、アプリケーションがレンダリングするビュー、つまりレイアウトを制御できます。method]を使用して、サメのレイアウトに関連付けるコンテンツ識別子を参照します次のステップ。+`ステートメントを次のコンテンツに置き換えます。+`ブロックが設定されている場合、アプリケーションは関連するレイアウトを生成します。+`コントローラーに関連付けられたビューの暗黙的なyieldを行います。これらの変更を行ったら、ファイルを保存して閉じます。アプリケーション全体のレイアウトセットを使用すると、シャークビュー用の共有navbarパーシャルとシャークレイアウトの作成に進むことができます。`で参照したサメのレイアウト、およびアプリケーションのランディングページのビュー。+`要素にBootstrapスタイルを追加することもできます。共有navbarパーシャルのファイルを開きます。app/views/layouts/_navigation.html.erb次のコードをファイルに追加して、navbarを作成します。+]メソッドを使用して、アプリケーションルートのリンクを作成します。アプリケーションのルートパスに。navbarには2つの追加リンクも含まれています。編集が終了したら、ファイルを保存して閉じます。+`ブロックとして設定されていることを確認する必要があります。ファイルに次の行を追加してブロックを作成します。+`ブロック内にレンダリングされます。+」ステートメントが含まれ、2番目のコンテナには、特定のサメが常に友好的で歓迎しているというリマインダーが含まれています。+`ステートメントを追加して、アプリケーションレイアウトをレンダリングします。+`ブロックのコンテンツを提供します。次に、アプリケーションレイアウト自体をレンダリングして、レンダリングされたアプリケーションページにアプリケーション全体のレベルで必要なものがすべて含まれるようにします。編集が終了したら、ファイルを保存して閉じます。+」ビューをまだ作成していません。今すぐそのファイルを開きます。app/views/home/index.html.erbこのビューの構造は、メインのジャンボトロンコンポーネントと2つのコンテナを使用して、シャークビュー用に定義したレイアウトと一致します。ファイル内の定型コードを次のコードに置き換えます。</div></div>これで、アプリケーションのホームページに着陸したときに、ユーザーは[サメの情報を取得]ボタンをクリックして、アプリケーションのサメセクションに移動する明確な方法を使用できます。+」コントローラーに関連付けられたルートにマップするヘルパーを指します。編集が終了したら、ファイルを保存して閉じます。link_to`メソッドの一部を、Bootstrapを使用してスタイル設定できるボタンに変換することです。+`ビューからホームページに戻る方法も追加します。link_to`メソッドを見つけます。“`クラスを使用するボタンに変更します。%>次に、アプリケーションのホームページにリンクを追加します。%>編集が終了したら、ファイルを保存して閉じます。+`メソッドにボタンスタイルを追加します。%>ファイルを保存して閉じます。+`メソッドは次のように配置されています。%>ページ上の配置を変更し、ボタンスタイルを追加して、コードが次のようになるようにします。%>ファイルを保存して閉じます。+`メソッドを見つけます。.次のように変更します。.ファイルを保存して閉じます。これで、アプリケーションをテストする準備ができました。適切なコマンドでサーバーを起動します。http://:3000+」に移動します。次のランディングページが表示されます。次のページが表示されます。Railsアプリケーションに追加する方法]。会話に新しいサメを追加することもできます。他のサメビューに移動すると、サメ​​のレイアウトが常に含まれていることがわかります。[サメのショーページ]これで、RailsアプリケーションにBootstrapが統合されました。ここから、アプリケーションに新しいスタイルとコンポーネントを追加して、ユーザーにとってより魅力的なものにすることで、先に進むことができます。結論これで、BootstrapがRailsアプリケーションに統合され、レスポンシブで視覚的に魅力的なスタイルを作成して、プロジェクトのユーザーエクスペリエンスを向上させることができます。documentation]をご覧ください。[Sassのドキュメント]を参照して、CSSのスタイルとロジックを強化および拡張するためにどのように使用できるかを理解することもできます。Bootstrapが他のフレームワークとどのように統合されるかを確認するには、https://www.digitalocean.com/community/tutorials/how-to-build-a-weather-app-with-angular-bootstrap-and-theをご覧ください。APIを使用して天気アプリを作成する方法]。Railsプロジェクトをセットアップする方法]。