Rails入門3: Railsサービスを機能アップしてみよう

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になります。

このようなレイアウト方法をグリッドレイアウトと呼びます。