RailsへのBootstrapの導入
はじめに
Railsを使用したオリジナルアプリの作成の過程で（まだrails newしたばっか 笑）Bootstrapを導入したので、その方法を紹介します。プログラミング初心者で導入を考えている人は参考にしてみてください！
筆者自身もHTML/CSSから勉強を始めて約１ヶ月です。間違えている点がありましたらフィードバックをよろしくお願いいたします。
①Gemfileへの記述
まず以下2点をGemfileに追記します。
gem 'bootstrap', '~> 4.4.1' gem "jquery-rails"
その後ターミナルで忘れずにbundle installしましょう！
application.scssとapplication.jsファイルへの追記
次に、インストールしたBootstrapが機能するように既に存在してあるapplication.scssとapplication.jsファイルに追記を行います。なぜこの２つかと言うと、application.html.erbファイル内の記述を見るとわかります。以下はheadタグ内のとある２つの記述を抜粋したものです。
<%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'javascript' %>
application.html.erbファイルは全てのビューファイルが集約されるものであり（イメージ）、つまりビューファイルの王様みたいなやつがstylesheetはapplicationを、javascriptもapplicationの内容を読み込んで反映するぞと言っています。なので見出しの２ファイルにBootstrapが反映されるように記述する必要があるのです。
※本来上記のコードにはturbolinksに関する記述もありますが筆者は削除してあります。
では本題に戻ります。
まずはapplication.scssからです。
このファイルの拡張子が.cssの方は.scssにリネームをお願いします。理由は、今回インストールしたBootstrap4ではCSSでなくSassが採用されているためです。
app/assets/stylesheets/application.scss
@import "bootstrap";
次にapplication.jsです。
app/assets/javascripts/application.js
//= require jquery3 //= require popper //= require bootstrap-sprockets
以上でRailsへのBootstrap導入は完了です！
Bootstrapの利用方法
Bootstrap公式サイトで目的のコードを引用することで同じデザインの目標物を作成することができます。
例えばボタンであれば、
https://getbootstrap.com/docs/4.4/components/buttons/
これらのコードをコピーして、自分のHTMLファイルに ペーストします。
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>
以下のように同じものを作成できました。実際はこの中から使用したいものを抜粋して利用しましょう！
あとはこのまま使うもいいし、またカスタマイズも可能です。
その方法はまた今度紹介します！
