（個人メモ）Rails5.1にpopoverとカスタム変数ファイルをBootstrap4を導入する

# 目的
Rails5.1にpopoverとカスタム変数ファイルをBootstrap4を導入する
# 概要
* bootstrapとjquery-rails gemをインストール
* application.jsにjquery3, popper, bootstrap追加
* application.scssに'bootstrap/functions'と'foundation/bootstrap_variables'と'bootstrap'を追加
* application.html.erbに <%= javascript_include_tag 'application' %>を追加

# 環境
* Rails: 5.1.4
* Sprockets, Turbolinks未導入

# 手順
Twitter公式の[bootstrap-rubygem](https://github.com/twbs/bootstrap-rubygem)のインストール手順通りに加えて、popover用の設定とカスタム用のファイルの配置手順あわせて行う。

## bootstrapとjquery-rails gemをインストール
Gemfileに下記を追加し、`bundle install`を実行する。

```Gemfile
# for Bootstrap
gem 'bootstrap', '~> 4.0.0'
gem 'jquery-rails'
```

## application.jsにjquery3, popper, bootstrap追加

* jquery3, popper, bootstrapを読み込むように設定する
* [popover](https://getbootstrap.com/docs/4.0/components/popovers/)を使えるようにfunctionを追加
* [tooltip](https://getbootstrap.com/docs/4.0/content/reboot/)を使えるようにfunctionを追加

```app/assets/javascripts/application.js
省略
// about supported directives.
//
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .

$(function () {
  $('[data-toggle="popover"]').popover()
}) // popoverのために追加

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
}) // tooltipのために追加
```

## application.scssに'bootstrap/functions'と'foundation/bootstrap_variables'と'bootstrap'を追加

bootstrapの設定値（primary colorとか）をカスタムできるように用意されているファイルを配置する

* foundation/bootstrap_variablesを追加

  * [variables.scss](https://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/_variables.scss)をダウンロード
  * `_bootstrap_variableds.scss`にリネームする
  * `app/assets/stylesheets/foundation`にコピーする

* app/assets/stylesheets/application.scssを書き換える
 *  （やっていなかったら、application.cssをapplication.scssにリネーム）
 * `*= require`と`*= require_tree`を消して以下のようにする

```app/assets/stylesheets/application.scss
省略
 *
 */
@import 'bootstrap/functions'; // bootstrap_variables のために必要
@import 'foundation/bootstrap_variables';
@import 'bootstrap';
```

## 'bootstrap/functions'補足
`@import 'bootstrap/functions'`がない場合下記のエラーが出る。

```
ActionView::Template::Error ($color: 'theme-color("primary")' is not a color for `darken'):
```

これは、`foundation/bootstrap_variables`で使われる`theme-color`functionが読み込まれていないのが原因。

`theme-color`は`bootstrap/functions`にふくまれている。よって、`bootstrap/functions`を`foundation/bootstrap_variables`をimportする前に読み込めばＯＫ。（[参考：v4 - Error: $color: 'theme-color("primary")' is not a color for `darken'](https://github.com/twbs/bootstrap/issues/23313)）


## application.html.erbに <%= javascript_include_tag 'application' %>を追加

これは、普通は最初から入っていると思う。個人的にSPAを作るため消していたので復活させた。

```app/views/layouts/application.html.erb
<head>
省略
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
省略
</head>
```

# カスタム例

カスタムを適用するhtml.erbファイル

```index.html.erb
<div class="jumbotron">
  <h1 class="display-3">Jumbo heading</h1>
  <p class="lead">Jumbo helper text</p>
  <hr class="my-2">
  <p>More info</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="Jumbo action link" role="button">Jumbo action name</a>
  </p>
  <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="タイトル" data-content="メモ">Click to toggle popover</button>
</div>
```

カスタム変数ファイルを編集して各行の変数の指定（ `$xxxx: yyy` の `yyy` ）を下記の通り書き換える
（ @kotaro912214 からいただいたコメントをもとに追記修正しました。）

```app/assets/stylesheets/foundation/_bootstrap_variables.scss
// 省略
$primary:       $orange !default; // 73行目あたり
// 省略
$danger:        $yellow !default; // 78行目あたり
// 省略
$border-radius:               0rem !default; // 228行目あたり
$border-radius-lg:            0rem !default; // 229行目あたり
$border-radius-sm:            0rem !default; // 230行目あたり
// 省略
$display3-size:               1rem !default; // 282行目あたり
// 省略
$lead-font-size:              ($font-size-base * 5) !default; // 291行目あたり
// 省略
$hr-border-color:             rgba($blue, 2) !default; // 301行目あたり
// 省略
```

## カスタム結果
* 適用前

    [![https://gyazo.com/78ea2f996e0c9b0b69cc8f909ecfe742](https://i.gyazo.com/78ea2f996e0c9b0b69cc8f909ecfe742.gif)](https://gyazo.com/78ea2f996e0c9b0b69cc8f909ecfe742)

* 適用後
    [![https://gyazo.com/575ae0c4cc83e7d8ea0d21077a9d97c3](https://i.gyazo.com/575ae0c4cc83e7d8ea0d21077a9d97c3.gif)](https://gyazo.com/575ae0c4cc83e7d8ea0d21077a9d97c3)