Ruby on Rails Tutorial Bootstrap3を使ってフッターリンクを作成

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、Bootstrap3を使ってフッターパーシャルを作成します。

1)フッターのパーシャル作成
 
・リンク部分をBootstrap3の”nav nav-pills”を指定しています。さらに”pull-right”クラスで右寄せしています。
 
$ vi app/views/layouts/_footer.html.erb

  <ul class="nav nav-pills pull-right">
    <li><%= link_to "About",   '#' %></li>
    <li><%= link_to "Contact", '#' %></li>
    <li><a href="http://news.railstutorial.org/">News</a></li>
  </ul>
  <small>
    <a href="http://railstutorial.org/">Rails Tutorial</a>
    by Michael Hartl
  </small>
</div>

 
2)application.html.erbにフッターパーシャル埋め込み
 
$ vi app/views/layouts/application.html.erb

 :
<body>
  <%= render 'layouts/header' %>
  <%= render 'layouts/footer' %>
</body>
</html>

 
3)フッターのスタイル設定
 
Bootstrap3のサンプルにある設定を流用して下記を設定しました。
 
$ vi app/assets/stylesheets/custom.css.scss

/* footer */

.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です