[Ruby on Rails 3, Ruby on Rails 4] gems: twitter-bootstrap-rails

twitter-bootstrap をRailsに導入する(Less編)。

[markdown]

> * [seyhunak/twitter-bootstrap-rails · GitHub](https://github.com/seyhunak/twitter-bootstrap-rails)

## サンプルの作成

表示確認用のサンプルを作成しておきます。

“`
% bundle exec rails g scaffold User name:string email:string birthday:date
% bundle exec rake db:migrate
“`

必要に応じてルートの変更やindex.htmlの削除を行う。

“`
% vim config/routes.rb
% rm -f public/index.html
“`

## インストール

twitter-bootstrap-rails と関連する Gem をインストールします。

“`
% vim Gemfile
“`

“`Gemfile
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem ‘sass-rails’, ‘~> 3.2.3’
gem ‘coffee-rails’, ‘~> 3.2.1’
# for twitter-bootstrap
gem ‘twitter-bootstrap-rails’
gem ‘less-rails’ #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem ‘therubyracer’, :platforms => :ruby
gem ‘uglifier’, ‘>= 1.0.3’
end
“`

インストールします。

“`
% bundle install
“`

> * [Ruby on Railsってtwitter-bootstrap-railsとDeviseを使ったらすぐにクールなアプリが作れるじゃん(その1) | INOCCU VISION](http://inoccu.net/blog/2013/04/28/112225.html)
> * [bootstrapを使ってみる – 備忘録](http://d.hatena.ne.jp/xlis/20130317/1363529264)
> * [twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 – ppworks blog](http://ppworks.hatenablog.jp/entry/2012/02/19/033644)

### twitter-bootstrap-rails をインストールする

“`
% bundle exec rails g bootstrap:install less
insert app/assets/javascripts/application.js
create app/assets/javascripts/bootstrap.js.coffee
create app/assets/stylesheets/bootstrap_and_overrides.css.less
create config/locales/en.bootstrap.yml
gsub app/assets/stylesheets/application.css
gsub app/assets/stylesheets/application.css
“`

## Twitter Bootstrap を適用する

### bootstrap:layout application fluid

Bootstrap の fluidレイアウトを設定する。

“`
% bundle exec rails g bootstrap:layout application fluid
conflict app/views/layouts/application.html.erb
Overwrite /Users/****/projects/todo/app/views/layouts/application.html.erb? (enter “h” for help) [Ynaqdh] y
force app/views/layouts/application.html.erb
“`

サーバの再起動が必要でした。

“`
% bundle exec rails s
“`

tbr 2013-09-27 16.11.21

### bootstrap:themed

Userモデルにテーマを適用する。

“`
% bundle exec rails g bootstrap:themed Users
create app/views/user/index.html.erb
create app/views/user/new.html.erb
create app/views/user/edit.html.erb
create app/views/user/_form.html.erb
create app/views/user/show.html.erb
“`

テーブル表示が変わっている。
model から、viewファイルを生成してくれるようです。

tbr 2013-09-27 16.11.39

## Bootswatch

> * [RailsアプリにBootstrapを適用させる – Qiita [キータ]](http://qiita.com/tstomoki/items/17a535ec442a2ab3a5f1)
>
> variables.lessをbootstrap_and_overrides.css.lessにコピー

## 補遺

Users だよ。間違えたら destroy で取消。

“`
% bundle exec rails d bootstrap:themed User
remove app/views/user/index.html.erb
remove app/views/user/new.html.erb
remove app/views/user/edit.html.erb
remove app/views/user/_form.html.erb
remove app/views/user/show.html.erb
“`

[/markdown]