演習課題「テーブルへのクラスの適用」
右の環境には、Railsで、おすすめのネコ情報を投稿する「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作ってあり、Bootstrapが導入してあります。
エディタを使って、app/views/cats/index.html.erbを修正して、猫リストのテーブルにBootstrapのデザインを割り当てて、1行おきに色を付け、マウスポインタを重ねたら色が変わるようにしてください。
割り当てるのは、次のクラスです。
- table
- table-striped
- table-hover
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
演習課題「ボタンにクラスを適用する」
右の環境には、Railsで、おすすめのネコ情報を投稿する「catmap」というプロジェクトに、「cat」という掲示板と「breed」という掲示板が作られており、Bootstrapが導入されています。
エディタを使って、app/views/cats/index.html.erbを修正して、「New Cat」ボタンに、'btn btn-primary'スタイルを割り当ててください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
演習課題「グリッドの幅を設定する」
右の環境には、Railsで、おすすめのネコ情報を投稿する「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作られてあり、Bootstrapが導入してあります。
エディタを使って、app/views/cats/_form.html.erbを修正して、グリッドの割合を1:11にしてください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
＃02:Bootstrapでレスポンシブデザインにしよう
ここでは、BootstrapでRailsアプリをレスポンシブデザインにします。そして、テーブルやボタン・フォームにBootstrapのスタイルを適用します。
app/views/shops/index.html.erb<table class='table table-striped table-hover'>
・・・
</table>
app/views/shops/index.html.erb<%= link_to 'New Shop', new_shop_path, class: 'btn btn-primary' %> | <%= link_to 'Show category list', categories_path %>
app/views/shops/_form.html.erb<%= form_for(shop, html: {class: 'form-horizontal', role: 'form'}) do |f| %>
フォームの部品
app/views/shops/_form.html.erb<div class='form-group'>
<%= f.label :category_id, class: 'col-sm-2 control-label' %>
<div class='col-sm-10'>
<%= f.select :category_id, Category.all.map{|o| [o.name, o.id]} %>
</div>
</div>
<div class='form-group'>
<%= f.label :name, class: 'col-sm-2 control-label' %>
<div class='col-sm-10'>
<%= f.text_field :name %>
</div>
</div>
<div class='form-group'>
<%= f.label :address, class: 'col-sm-2 control-label' %>
<div class='col-sm-10'>
<%= f.text_field :address %>
</div>
</div>
登録ボタン
app/views/shops/_form.html.erb<div class='actions'>
<div class='form-group'>
<div class='col-sm-offset-2 col-sm-10'>
<%= f.submit 'Submit', class: 'btn btn-success' %>
</div>
</div>
</div>
- Linuxコマンド集 - ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20060224/230573/
- Ruby on Railsサービス開発逆引き辞典
http://code.materializer.co/index.html
- Railsドキュメント
http://railsdoc.com/
Bootstrapでは、HTML要素の"class"属性に"col-sm-X"を適用すると、ページの横幅を12としたときに、その要素が占める横幅をXとすることができます。
例えば、"col-sm-3"が適用された要素と"col-sm-9"が適用された要素を並べたならば、これらの横幅の比率は、3:9になります。
このようなレイアウト方法をグリッドレイアウトと呼びます。