＃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になります。
このようなレイアウト方法をグリッドレイアウトと呼びます。