読者です 読者をやめる 読者になる 読者になる

bekkou68の日記

開発しているサービス, IT技術, 英語など。

Twitter Bootstrap + Rails 3.2.3 の使い方を知るためにスパイクしました

Twitter Bootstrap Ruby on Rails

はじめに

プログラマでも簡単にそれっぽいデザインができるという Twitter Bootstrap を試しました。Rails と組み合わせてスパイクしました。Grid を試してみたり、table や form にデザインをあてたりしました。スクラッチから Rails + Twitter Bootstrap を立ち上げたいときに参考になると思います。
ソースコードはこちらです。

https://github.com/bekkou68/bootstrap_bootcamp

(追記2012年10月20日:英語版を書きました)

環境

以下がそろってるとします。

Twitter Bootstrap の layout を生成する

まずは、RailsTwitter 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'
確認

http://localhost:3000 にアクセス!

おおお! 動いてますね!

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 が生成されました。べんり!

おわりに

かんたんにクールなデザインができる Twitter Bootstrap、オススメです!