Startover-twitter-bootstrap

【Twitter bootstrap 導入手順】2013/05/29～

bootstrapの導入が不完全だったため、bootswatchの導入とともに改めてまとめる

■ruby及びrailsのバージョン

ruby 1.9.3p429
Rails 3.2.13

■必要なGem

以下のふたつのgemをGemfileに記述し、bundle installすること

1
2

gem 'less-rails'                # less
gem 'twitter-bootstrap-rails'   # twitter boostrap

※ 以下のGemは何れにしても必要なので追記すること

1

gem "therubyracer"

■bootstrapのインストール

1. bootstrapそのもののインストール

1

$ rails generate bootstrap:install less

2. 可変レイアウト設定生成

1

$ rails g bootstrap:layout application fluid

3. 以下のビューファイルを削除する（同様のslimファイルが既に生成されているため）

app/views/layouts/application.html.erb

※ 以下のビューファイルも不要のため削除してよし public/index.html

ルーティング設定（config/routes.rb）で他のコントローラへ誘導すること

1

root :to => 'pages#index'

4. 以下のスタイルシートファイルを削除する（bootswatchと変数が干渉するため）

app/assets/stylesheets/scaffolds.css.scss

■bootswatchの導入

ここまででデザインが適用されるか否かわかりやすいように某かのscaffoldを作成しておくこと

1. 下記サイトより任意のデザインのvariables.less及びbootswatch.lessを取得する

http://bootswatch.com/

2. 以下のディレクトリを作成し、上記サイトで取得したlessファイルふたつを設置する

vendor/assets/stylesheets/bootswatch/

3. 以下のファイルへ上記lessファイルふたつを読み込むように宣言を追記する

app/assets/stylesheets/bootstrap_and_overrides.css.less

1
2

@import "bootswatch/variables.less";
@import "bootswatch/bootswatch.less";

■ Viewテンプレートを生成

例） 以下のようにしてビューbooksのbootstrapテンプレートを生成する

1

$ rails g bootstrap:themed books -f

参考サイト:

http://qiita.com/items/260a930c5ff95aafebd1 http://blog.scimpr.com/2012/08/25/rails%E3%81%ABtwitter-bootstrap%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%EF%BD%9Etwitter-bootstrap-rails/ http://inoccu.net/blog/2013/04/28/112225.html http://gagapi.hatenablog.jp/entry/2013/05/17/222340 http://shoheik.hatenablog.com/entry/2013/03/09/115015