Bootstrap4の導入方法

ドットインストールのBootstrap 4入門を見ながらTodoアプリにナビゲーションバーを追加してみたけど……あれ、レイアウトがおかしいぞ……

あ!Bootstrap4追加してないじゃん!

ということで、Rails(5.2.1)でBootstrap4を導入してみました
(執筆時点でのbootstrap最新はbootstrao 4.1.3)

導入方法

Gemfile

gem 'bootstrap', '~> 4.1.3'
gem 'jquery-rails'

BootstrapはjQueryに依存するため、Rails5.1以上ではjquery-rails追記が必要

また、sprockets-railsがv2.3.2以上である必要がある

application.scss

サイトのレイアウトファイルであるapplication.cssなどを.scssにリネームし、
application.scssでbootstrapをimportさせる

@import "bootstrap";

application.js

Bootstrapと依存関係であるということをapplicationl.js追記する

//= require jquery3
//= require popper
//= require bootstrap-sprockets

こんな感じに

これで、追加したヘッダーが

    <header> 
      <div class="container">
       <nav class="navbar navbar-expand navbar-light">
         <a href="" class="navbar-brand">TodoApp</a>
         <ul class="navbar-nav">
           <li class="nav-item"><a href="" class="nav-link">link</a></li>
           <li class="nav-item"><a href="" class="nav-link">link</a></li>
           <li class="nav-item"><a href="" class="nav-link">link</a></li>
         </ul>
       </nav> 
      </div>
    </header>

f:id:naito-coding0322:20180825130441p:plain

こんな感じにきちんと表示されました。
引き続きレイアウトを綺麗にしていきます。とりあえずデザインの知識が皆無なので、Railsチュートリアルで作ったサンプルアプリを真似ようかな。

その他

インストールしたgemの一覧を表示

gem list

不要なgemをアンインストールしたい場合

gem uninstall (gem名)

bundle update で特定のgemだけをupdateしたい場合

bundle update (gem名)

この方法だと今回設定したような依存関係にあるgemも同時に更新されてしまうので、単体で更新したい場合は

bundle update --source (gem名)