I Ran Spike of Twitter Bootstrap + Rails 3.2.3 to Know How to Use Them
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,
(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'
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 ;)