Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

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

<div class="footer">
  <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;
}