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/
まとめ
自分もまだまだ初学者ですが、デザインは好きなので色々試してみていきたいと思います。