「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; }