Bootstrapの実装

アプリケーション作成 Bookers2 Bootstrap

Bootstrapとは

Bootstrapは、Twitter社が開発したCSSの「フレームワーク」です。

Bootstrapにはよく使うスタイルがあらかじめ定義されているので、整ったデザインのページを効率的に作成することができます。

詳細に知りたい方はホームページを確認ください。

参考URL　Bootstrap · 世界で最も利用されているHTML、CSS、JSのライブラリです。

Bootstrapの導入

Bootstrapの導入には、いくつか方法がありますが、今回はyarnを使用してインストールしていきます。

まず、YarnでBootstrapに必要なパッケージをインストールします。(今回はbootstrap4.6.2を使用する)

$ yarn add jquery bootstrap@4.6.2 popper.js

次に、config/webpack/environment.jsを編集します。 下記を追加で記述してください。

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

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

@use '~bootstrap/scss/bootstrap';

次にYarnでインストールしたBootstrapパッケージを利用できるようにimportします。

app/javascript/packs/application.js に下記のコードを追加します。

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

最後に app/views/layouts/application.erb.html の「stylesheet_link_tag」を「stylesheet_pack_tag」に変更します。

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

これでBootstrapの導入が完了しました。

以上。

アプリケーションの作成 参考URL　 作成するアプリケーションについて - takifugu’s blog