,

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

公開日: 2013/10/18
更新日: 2021/02/09

twitter-bootstrap をRailsに導入する（Less編）。

Contents

サンプルの作成

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

% 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

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

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