Twitter Bootstrap + Rails 3.2.3 の使い方を知るためにスパイクしました
はじめに
プログラマでも簡単にそれっぽいデザインができるという Twitter Bootstrap を試しました。Rails と組み合わせてスパイクしました。Grid を試してみたり、table や form にデザインをあてたりしました。スクラッチから Rails + Twitter Bootstrap を立ち上げたいときに参考になると思います。
ソースコードはこちらです。
Twitter Bootstrap の layout を生成する
まずは、Rails と Twitter Bootstrap を組み合わせて画面で確認できるところまでやります。
プロジェクトを新規作成します。
$ rails new bootstrap_bootcamp -d mysql
Gemfile を編集します。
gem 'haml-rails' # ERB じゃなくて Haml を使いたい gem 'twitter-bootstrap-rails' # Bootstrap の layout とかを generate してくれる
インストールします。
$ bundle install $ rails g bootstrap:install
DB をつくっておきます。
$ rake db:create
アプリケーション共通レイアウトをつくります。
$ rails g bootstrap:layout application fixed
$ rm app/views/layouts/application.html.erb
Bootstrap を試すページを用意する
$ rm public/index.html
$ rails g controller welcome index
config/routes.rb に以下を追加します。
root to: 'welcome#index'
Grid を試してみる
app/views/welcome/index.html.haml
%h2 See %ul %li= link_to 'http://twitter.github.com/bootstrap/scaffolding.html' %li= link_to 'http://twitter.github.com/bootstrap/base-css.html' %h2 Grid .row .span4 .well span4 .span4 .well span4 .span4 .well span4 .row .span2 .well span2 .span2 .well span2 .span2 .well span2 .span2 .well span2 .span2 .well span2 .span2 .well span2 .row .span1 .well こ .span1 .well ま .span1 .well か .span1 .well く .span1 .well し .span1 .well て .span1 .well み .span1 .well ま .span1 .well し .span1 .well た .span1 .well よ .span1 .well ！ .row .span3 .well.sidebar-nav %h4 メニュー %ul.nav.nav-list %li.nav-header なにか %li= link_to "Link 1", "/path1" %li= link_to "Link 2", "/path2" %li= link_to "Link 3", "/path3" .span9 なにかでそうなところ %h3 オフセット .row .span4 .well span4 .row .span4.offset4 .well span4 offset4 .row .span4.offset8 .well span4 offset8 %h3 ネスト .row .span12 span12 .row .span6 span6 .row .span2 span2 .span4 span4 .span6 span6 .row .span5 span5 .span1 span1
こんな感じで出ました〜。
table や form にデザインをあてる
Model 作成をまじえて、table や form にデザインをあててみましょう。
ブログのエントリ（Entry）モデルをつくります。
$ rails g scaffold Entry title:string content:text $ rake db:migrate
画面からいくつかエントリをつくります。
table にデザインをあてる
一覧の見た目はこんな感じです。
app/views/entries/index.html.haml の %table に .table を追加します。
また、scaffold 作成時にできた scss がリンクのデザインを変えていたので、いったん
$ rm app/assets/stylesheets/scaffolds.css.scss
しました。
結果はこんな感じ。
form にデザインをあてる
twitter_bootstrap_form_for を Gemfile に書いて bundle install します。
twitter_bootstrap_form_for は、Bootstrap のデザインがあたった form を生成してくたり、form のコードを簡潔に書けるようにしてくれます。たとえば、f.label を書かずに f.text_field を書けばラベルを出してくれます。
入力フィールドをいろいろ試したいので、カラムを追加しました。
class AddColumnsToEntries < ActiveRecord::Migration def change add_column :entries, :password, :string add_column :entries, :reserved_at, :datetime end end
form を生成しているコードはこんな感じです。
= twitter_bootstrap_form_for @entry do |entry| = entry.text_field :title, 'タイトル' = entry.text_area :content, '内容', placeholder: '140字程度' = entry.date_select :reserved_at, '公開予約日' = entry.password_field :password, '削除用パスワード' = entry.submit 'Save'
こんなふうにデザインがあたった form が生成されました。べんり！
