Bootstrap【導入方法】

Bootstrapの導入方法

RailsにはCSSのデザインテンプレートがありません。
Bootstrapを用いることで、デザインが簡単に整えられます。

導入方法の種類が何個かあります。

• CDNの導入
• ファイルを配置する
• yarnでインストール
• gemでインストール

今回はyarnを用いて導入していきます。

Bootstrap導入手順

下記コマンドを実行します。

$ yarn add jquery bootstrap@4.5 popper.js

その後に、config/webpack/enviroment.jsを編集します。
下記を記述します。

config/webpack/enviroment.js

:
:
const webpack = require('wabpack')
environment.plugins.prepend(
 'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)

次にapp/javascriptの配下にstylesheetフォルダを作成し、配下にapplication.scssファイルを作成して、次のように記述します。

app/javascript/stylesheets/application.scss

:
:
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application" 

次にapp/views/layouts/application.html.erbの記述を変更します。

app/views/layouts/application.html.erb

:
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
:

これでBootstrapの導入が終了です。

後は、こちらのBootstrapのサイトから色々試してデザインしてみてください。
https://getbootstrap.jp/docs/4.5/components/forms/

まとめ

自分もまだまだ初学者ですが、デザインは好きなので色々試してみていきたいと思います。