[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
“`
### 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ファイルを生成してくれるようです。
## 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]