概要
Railsチュートリアルをやっていて、Bootstrapのバージョンが3と古かったので最新版の4を使ってみた。
環境構築から実際に使ってみるまで色々調査したのでメモする。
バージョン
- Rails: 5.2.2
- Bootstrap: 4.3.1
Bootstrapとは
おそらく知らない人はあまりいないだろうけど、念の為書いておく。
Bootstrapはフロントエンド用のフレームワークで、html,css,JSから構成されている
元々用意されているデザイン用のテンプレートを使うことで、効率的かつ綺麗なデザインを使うことができる。
Bootstrapをそのまま使うとBootstrap臭がするとか言われるが、あんまり気にしない。
Bootstrap3から4への変更点
Bootstrap4移行ガイドを参照のこと。
Rails5にBootstrap4を導入する
bootstrap-rubygemのGithubに導入手順が書いてあるので参考にする。
Gemfileにgemを追記するだけではダメで、とapplication.sassとapplication.jsを編集する必要がある。
application.sassファイルには、bootstrapをimportする設定を追記する。
ファイルの拡張子がcssの場合はsassに変更する。(bootstrapを@importするため)
さらに、*= requireと*= require_treeを削除する必要がある。
(@importはimport先のscssを含めて一つのcssを生成するが、requireは他のファイルを参照する動きをするため、同じcssを見に行こうとしてエラーになる、という理由だと思われる。
Rails guide (アセットパイプライン), sprockets を参照)
$ vim app/assets/stylesheets/application.scss
*
- *= require_tree .
- *= require_self
*/
+ @import "bootstrap";
Bootstrap4でページを修飾してみる
Bootstrap NavigationBarを参考に、Navigation Barを設定する。
<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
ちなみにbootstrap3だとこう書く
<nav class="navbar navbar-dark fixed-top">
bootstrap4では、新しくnavbar-expand-{} と bg-{} を追記する必要がある。
navbar-expand-{}はレスポンシブデザインの挙動、bg-{} はnavbarの背景色を指定する。
ナビゲーションバーの項目にはnavbar-navを使うが、bootstrap4だと項目毎にnav-itemclassを指定する必要がある。(若干めんどくさい)あと、リンクにはnav-linkを使う
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<%= link_to "Home", "#", class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "Blog", "#", class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "Contents", "#", class: "nav-link" %>
</li>
</ul>
まとめるとこんな感じ
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
<%= link_to "tech blog", "#", id: "logo", class: "navbar-brand" %>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<%= link_to "Home", "#", class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "Blog", "#", class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "Contents", "#", class: "nav-link" %>
</li>
</ul>
</nav>
<div class="container">
<%= yield %>
</div>
画面を表示するとこうなる。
まとめ
- 環境構築はGithubとか公式ドキュメントを見よう
-
*= requireを消さないまま使おうとしてエラーが発生していた、、
-
- 出来るだけ一つ一つの設定の意味を理解しよう
- Bootstrapのclassの意味を理解しておかないと、変なところで表示崩れする。
フロントエンド周りももっと力つけたいなあ
参考
- Bootstrap4以降ガイド
- bootstrap-rubygem
- Rails guide (アセットパイプライン)
- sprockets
- Bootstrap NavigationBar