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

bekkou68の日記

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

I Ran Spike of Twitter Bootstrap + Rails 3.2.3 to Know How to Use Them

Twitter Bootstrap Ruby on Rails

Introduction

I tried to use Twitter Bootstrap which allows programmers (like me) to design likes designer and code a spike with Rails. e.g. Grid system and design to table and form. This entry may help you who want to create some codes by Rails + Twitter Bootstrap from scratch.
The source code is following,

https://github.com/bekkou68/bootstrap_bootcamp

(Sorry but the some sample codes or images have Japanese because I wrote my first entry in Japanese then I translated into English as this entry)

Required Environment

This entry assumes that you have these environments.

Generate a layout of Twitter Bootstrap

First, we create a simple display with Rails and Twitter Bootstrap.

Create project.

$ rails new bootstrap_bootcamp -d mysql

Edit Gemfile.

gem 'haml-rails' # I want use not ERB but Haml
gem 'twitter-bootstrap-rails' # It generates layout of Bootstrap and so on

Install.

$ bundle install
$ rails g bootstrap:install

Create Database.

$ rake db:create

Generate layout which shared commonly by application.

$ rails g bootstrap:layout application fixed
$ rm app/views/layout/application.html.erb
Prepare WEB page tries to Bootstrap
$ rm public/index.html
$ rails g controller welcome index

Add the following line to config/routes.rb.

root to: 'welcome#index'
Confirmation

Access to http://localhost:3000 !

Wow! It works!

Try Grid System

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

The output was like that.

Design table and form

Now let's design table and form alongside creating Model.

Generate Entry model of a blog.

$ rails g scaffold Entry title:string content:text
$ rake db:migrate

For confirmation, create some entries by inputting from scaffold display.

Design table

The look of entries' index is:

Add ''.table'' to ''%table"' of app/views/entries/index.html.haml.

And scss which was created when scaffold was generated changed design of links, remove it.

$ rm app/assets/stylesheets/scaffolds.css.scss

The result is:

Design form

Write this (twitter_bootstrap_form_for) and type ''bundle install'' on your terminal. twitter_bootstrap_form_for generates form which designed of Bootstrap and can make us to code of form simply. For example, you can generate label by writing ''t.text_field'' without ''f.label''.

OK. Add a column to Model to see more input fields.

class AddColumnsToEntries < ActiveRecord::Migration
  def change
    add_column :entries, :password, :string
    add_column :entries, :reserved_at, :datetime
  end 
end

The code which generates form is:

= twitter_bootstrap_form_for @entry do |entry|
  = entry.text_field :title, 'タイトル' # Title
  = entry.text_area :content, '内容', placeholder: '140字程度' # 140 characters
  = entry.date_select :reserved_at, '公開予約日' # Day when you want to publish
  = entry.password_field :password, '削除用パスワード' # Password for deletion
  = entry.submit 'Save'

Now we have a form designed like this:

COOOOOL!! X)

At the end

I strongly recommend to use Twitter Bootstrap which allows we to make a cool design easily ;)