演習課題「ナビゲーションバーのリンクの追加」
右の環境には、Railsで「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作られており、Bootstrapのナビゲーションバーが導入されています。
エディタを使って、app/views/layouts/application.html.erbを修正して、ナビゲーションバーの「Cat」と「Feed」という項目に、各掲示板へのリンクを貼ってください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
＃03:スマートフォン向けの画面にしよう vol.1
ここでは、Railsアプリをスマートフォン向けの画面に設定します。そのために、ナビゲーションバーを設置し、お店リストの操作を整理します。
app/views/layouts/application.html.erb<!-- Fixed navbar -->
<nav class='navbar navbar-inverse navbar-fixed-top'>
<div class='container'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='#'>Lunch Map</a>
</div>
<div id='navbar' class='collapse navbar-collapse'>
<ul class='nav navbar-nav'>
<li><a href='#'>Shop</a></li>
<li><a href='#'>Category</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
app/views/layouts/application.html.erb<%= link_to 'Lunch Map', root_path, class: 'navbar-brand' %>
app/views/layouts/application.html.erb<ul class='nav navbar-nav'>
<li><%= link_to 'Shop', shops_path %></li>
<li><%= link_to 'Category', categories_path %></li>
</ul>
app/views/shops/index.html.erb<td><%= link_to shop.category.name, shop, class: 'widelink' %></td>
<td><%= link_to shop.name, shop, class: 'widelink' %></td>
<td><%= link_to shop.address, shop, class: 'widelink' %></td>
app/assets/stylesheets/application.css.scss/* table row for link */
a.widelink {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
app/views/shops/index.html.erb<table class='table table-striped table-hover'>
<thead>
<tr>
<th>Category</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
- Linuxコマンド集 - ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20060224/230573/
- Ruby on Railsサービス開発逆引き辞典
http://code.materializer.co/index.html
- Railsドキュメント
http://railsdoc.com/