LoginSignup
418

More than 3 years have passed since last update.

Railsアプリで Bootstrap 4 を利用する

Last updated at Posted at 2017-11-03

rails-bootstrap.png

注意点

本投稿ではWebpackerがインストールされてないRails5以前のアプリを対象にBootstrap4を導入する手順を掲載しております。

Webpackerが標準となったRails6アプリにBootstrap4を導入する際には以下の記事がとても参考になりました🙇‍♂️
RailsでBootstrapとFont-AwesomeはWebpackerで今時っぽく使おう - Qiita

はじめに

Bootstrap 4のComponentsの中にちょうど使いたいと思っていた部品があったので、Bootstrap 4をRailsに導入する手順を確認しました。

公式サイト

Bootstrap · The most popular HTML, CSS, and JS library in the world.

注意点

投稿時点でのBootstrapのバージョンはv4.0.0-beta.2 4.1.1です。

gem

これまでrailsにBootstrapを導入する際にはbootstrap-sassを利用してましたが、READMEに「Bootstrap 4ではbootstrap-rubygemを利用してね」と案内がありました。

Bootstrap Gem GitHub
2~3 bootstrap-sass twbs/ bootstrap-sass
4 bootstrap twbs/ bootstrap-rubygem

導入手順

bootstrap-rubygemのREADME通りに進めていきます。

Gemfile

Gemfileでbootstrapを指定してインストールする。
BootstrapはjQueryに依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上ではjquery-railsもGemfileに追記する。

Gemfile
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
$ bundle install

注意点
sprockets-railsv2.3.2.以上である必要がある。

`sprockets-rails`バージョン確認方法
$ bundle show |fgrep sprockets-rails
  * sprockets-rails (3.2.1)

application.scss

Railsアプリの作成時に生成されるapplication.cssapplication.scssにリネームするなどして、.scss(Sass構文の場合は.sass)ファイルを用意する。

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

app/assets/stylesheets/application.scssでbootstrapをimportさせる。

/assets/stylesheets/application.scss
// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

注意点
- Sassファイルでは*= require*= require_treeを削除する
- Sassファイルではインポートに@importを利用する
- Sassファイルで*= requireを利用すると他のスタイルシートではBootstrapのmixinや変数を利用できなくなる

application.js

Bootstrapと依存関係をapplication.jsに追記する

app/assets/javascripts/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets

補足
- Bootstrapのtooltipsやpopoverはpopper.jsに依存している
- bootstrapの依存gemにpopper_jsが指定されているため新たにインストールは不要
- コンパイルを高速化したい場合はbootstrap-sprocketsの代わりにbootstrapを指定する

さいごに

Bootsrap3のサイトで利用していたコードを今回構築したBootstrap4環境に適用してみました。見た目に大きな変化はありませんが、4のほうが色合いが鮮やかですね。

bootstrap3-4.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
418