BootstrapをRails5アプリに統合するには、いくつかの異なる方法がありますが、公式のbootstrap gemをインストールすることで動作させます。 Gemのgithubページの指示は素晴らしいので、以下は実際にあなたがそこに見つけるものの単なる転載です。p>あなたのGemfilebundle installを実行します。
$ bundle install ブートストラップCSSを含める
アプリケーションcssファイルが.scss.cssファイルである可能性があります。
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Sassファイルから*= require*= require_tree@importを使用してsassファイルをインポートします。 その後、ブートストラップスタイルをインポート！p>
//app/assets/stylesheets/application.scss @import "bootstrap"; これで、すべてのブートストラップスタイルが準備できました！ 私たちはかなり終わっていません。
Include The Bootstrap Javascript
Bootstrapコンポーネントの多くはJavascriptとjQueryに依存しているため、必要に応じてBootstrap javascriptファイルをインポートし、jQueryをインストールする必要があります。 Railsのバージョンが5.1未満の場合、jQueryはすでに含まれています。 その場合は、app/assets/javascripts/application.jsマニフェストファイルにbootstrapとpopper（Javascriptライブラリのブートストラップは位置決めに依存します）を含めるだけです。あなたのRailsのバージョンが5.1以上の場合は、jQueryを含める必要があります。 これを行うには、jquery-railsgem,bundle intsallapplication.jsマニフェストファイルに追加します。 たとえば、次のようにします。
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap 今、私たちはスタイルをカスタマイズする準備が整いました！
Customize Bootstrap
アプリに独自のカスタムスタイルを与えるために定義できるブートストラップ変数がたくさんあります。 私たちはすぐにすぐに始める方法を示すために、体の背景色とテーマの色を変更します。 重要な点は、@import "bootstrap";行の前にこれらの変数を設定する必要があることです。
このBootstrapテーマサイトのsignalテーマに合わせてテーマの色を変更し、ボディの背景を明るい灰色に変更します。p>
//app/assets/stylesheets/application.scss $body-bg: #e2e2e2; $theme-colors: ( "primary": #FF304F, "secondary": #CACACA, "success": #015668, "info": #0F81C7, "warning": #0DE2EA, "danger": #06648C, "light": #ececec, "dark": #222222 ); @import "bootstrap"; //bootstrap gem 今、あなたは標準のブートストラップスタイルを使用することができますが、彼らはあなたのカスタム色を持っています！
.container .row .col-md %button.btn.btn-primary Primary %button.btn.btn-secondary Secondary %button.btn.btn-success Success %button.btn.btn-danger Danger %button.btn.btn-warning Warning %button.btn.btn-info Info %button.btn.btn-light Light %button.btn.btn-dark Dark ブートストラップは、さらにあなたのアプリのルックアンドフィールをカスタマ 私はより多くを学ぶためにドキュメントを読むことをお勧めしますが、私は上記があなたを始めるのに役立つことを願っています。
