Bootstrapについての簡易的なまとめ_Railsチュートリアル5章より

Rails Rails

Rails tutorialの第5章を終えました。
その時の気づいたこととか備忘録です。
今回はBootstrapについて

railstutorial.jp

Bootstrap

Twitter社が提供している、そこそこなデザインを作成するためのWebフレームワーク。
ノンデザイナーがサクッとモックを作るには良い感じです。
レスポンシブ・ウェブ・デザイン(RWD)が手軽にできるため、さっとそれっぽくできます。

セットアップ

RailsでBootstrapを使用する際のセットアップはこのあたりにまとめました

qiita.com

具体例(ナビバー)

Bootstrapのクラスを使うとこんな感じでナビバーを作成できます。 f:id:onthebacksoftheflyer:20190113155352p:plain

でソースは下記のようになります。

_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse">
    <div class="container">
        <%= link_to "sample app", root_path ,id: "logo" %>
        <nav>
            <ul class="nav navbar-nav navbar-right">
                 <li>
                 </li>
            </ul>
        </nav>
    </div>
</header>

これをapplication.html.erbに読み込ませるといい感じにnavbarができます

<body>
  <%= render 'layouts/header' %>
  <div class="container">
    <%= yield %>
  </div>
</body>

また、navクラスについての公式ドキュメントは以下になります。 Navbar · Bootstrap ナビバーの見た目を変えたい場合はここを元にクラスを指定するといい感じです。

パーシャル

Railsではパーシャルという機能を使い、HTMLをまとめることができます。 上記application.html.erb内<%= render 'layouts/header' %>と書くことで
layoutsフォルダ内に_header.html.erbを探しに行きます
アンダースコアは必要ですアンダースコアをつけることで全てのパーシャルの識別に役立ちます。