【Rails#4】Bootstrapを導入しよう │ コジマノテック

コジマです。

【Rails#3】バリデーションを付けよう
の続きです。

https://serene-brook-78971.herokuapp.com/
デプロイしたherokuはこちら

見た目クソダサいページを作っていたので、
Bootstrapを導入することを決意しました。

Bootstrapってのは
かっちょいい画面を簡単かつ速く作るためのフレームワークですね。

ネットで調べると色々出てくるんですが、皆我流だったりするので、
方針に迷った時は公式のHPを見るようにしています。

1. 使用方法

使用方法

http://getbootstrap.com/docs/4.1/getting-started/introduction/
これを参照しました。

headタグ内に必要なmetaタグを設定
headタグ内に必要なlinkタグを設定
bodyタグの最後に必要なscriptタグを設定

とカンタンな手順でした。
Railsには全てのページで読み込まれるapplication.html.erbという最強viewがいるので、そこに当て込んでいきます。

  <head>
    <title>もくもくブログ</title>
    <%= csrf_meta_tags %>
    <!-- Bootstrap CSS -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
(中略)
    <div class="container">
      <%= yield %>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

  </body>

ほぼコピペ超カンタン（調べるのに時間はかかった）

http://getbootstrap.com/docs/4.1/examples/starter-template/
しかも参考テンプレートまであるんですね。
これを参考にヘッダーナビ部分を改造していきます。

  <body>
    <header>
      <div class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <div class="navbar-brand">
          <%= link_to("もくもくブログ","/", { :class => "nav-link" } )%>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <%= link_to("記事一覧","/articles/index", { :class => "nav-link" })%>
              </li>
              <li class="nav-item">
                <%= link_to("記事作成","/articles/new", { :class => "nav-link" })%>
              </li>
              <li class="nav-item">
                <%= link_to("ユーザー登録","/signup", { :class => "nav-link" })%>
              </li>
            </ul>
        </div>
      </div>


    </header>
    <div class="container">
      <%= yield %>
    </div>

そうすると