Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
413
Help us understand the problem. What is going on with this article?
@NaokiIshimura

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

More than 1 year has passed since last update.

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

413
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
NaokiIshimura
Ruby on Rails Engineer.

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
413
Help us understand the problem. What is going on with this article?