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

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

サンプルの作成

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

% 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
# 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

<a href="https://www.d-wood.com/wpmt/wp-content/uploads/2013/10/tbr-2013-09-27-16.11.21.png"><img src="https://www.d-wood.com/wpmt/wp-content/uploads/2013/10/tbr-2013-09-27-16.11.21.png" alt="tbr 2013-09-27 16.11.21" width="400" height="100" class="alignnone size-full wp-image-4890" /></a>
### 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ファイルを生成してくれるようです。
<a href="https://www.d-wood.com/wpmt/wp-content/uploads/2013/10/tbr-2013-09-27-16.11.39.png"><img src="https://www.d-wood.com/wpmt/wp-content/uploads/2013/10/tbr-2013-09-27-16.11.39.png" alt="tbr 2013-09-27 16.11.39" width="400" height="111" class="alignnone size-full wp-image-4891" /></a>
## 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