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>
こんな感じにきちんと表示されました。
引き続きレイアウトを綺麗にしていきます。とりあえずデザインの知識が皆無なので、Railsチュートリアルで作ったサンプルアプリを真似ようかな。
その他
インストールしたgemの一覧を表示
gem list
不要なgemをアンインストールしたい場合
gem uninstall (gem名)
bundle update で特定のgemだけをupdateしたい場合
bundle update (gem名)
この方法だと今回設定したような依存関係にあるgemも同時に更新されてしまうので、単体で更新したい場合は
bundle update --source (gem名)