1. NaokiIshimura

    No comment

    NaokiIshimura
Changes in body
Source | HTML | Preview
@@ -1,86 +1,86 @@
![rails-bootstrap.png](https://qiita-image-store.s3.amazonaws.com/0/141934/10e5407e-276a-f1dc-dd38-c09cf3b88fa1.png)
# はじめに
Bootstrap 4のComponentsの中にちょうど使いたいと思っていた部品があったので、Bootstrap 4をRailsに導入する手順を確認しました。
# 公式サイト
<a href="http://getbootstrap.com/">Bootstrap · The most popular HTML, CSS, and JS library in the world.</a>
# 注意点
-投稿時点でのBootstrapのバージョンは`v4.0.0-beta.2`です。
+投稿時点での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](https://github.com/twbs/bootstrap-sass) |
| 4 | bootstrap | [twbs/ bootstrap\-rubygem](https://github.com/twbs/bootstrap-rubygem) |
# 導入手順
`bootstrap-rubygem`のREADME通りに進めていきます。
## Gemfile
Gemfileで`bootstrap`を指定してインストールする。
Bootstrapは`jQuery`に依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上では`jquery-rails`もGemfileに追記する。
```ruby:Gemfile
-gem 'bootstrap', '~> 4.0.0.beta2.1'
+gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
```
```shell-session
$ bundle install
```
**注意点**
`sprockets-rails`が`v2.3.2.`以上である必要がある。
```shell-session:`sprockets-rails`バージョン確認方法
$ bundle show |fgrep sprockets-rails
* sprockets-rails (3.2.1)
```
## application.scss
Railsアプリの作成時に生成される`application.css`を`application.scss`にリネームするなどして、`.scss`(Sass構文の場合は`.sass`)ファイルを用意する。
```shell-session
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```
`app/assets/stylesheets/application.scss`でbootstrapをimportさせる。
```ruby:/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`に追記する
```ruby: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](https://qiita-image-store.s3.amazonaws.com/0/141934/ded6bd8a-843f-a0c0-487e-56a886fb4c55.png)