twitter-bootstrap-railsの導入

デザインが得意でないプログラマとしては、twitter bootstrapは多いに利用したいところです。
railsで使用する場合には、twitter-bootstrap-rails が便利そうなので、試してみました。

以下、その時の手順です。

◆インストールからrailsの実行まで
1.Gemfileに以下を追加し、bundle install。
gem "twitter-bootstrap-rails"

2.以下を実行し、必要なものをインストール。
rails g bootstrap:install

3.rails s でアプリを実行し、アクセスすると、以下のエラーが発生。
cannot load such file -- less

4.Gemfileに以下を追加し、bundle install。
gem "less-rails"

5.再度、rails s を行い、アプリが起動することを確認する。

◆アプリケーションテンプレートの作成
1.以下を実行し、テンプレートを作成する。
rails g bootstrap:layout application fixed

2.ヘッダー部のバーとコンテンツが重なるのを防ぐ設定をする。
app\assets\stylesheets\bootstrap_and_overrides.css.less に以下を追加。
body { padding-top: 60px; }

◆余談・・・twitter bootstrapのボタンデザインについて
http://www.plugolabs.com/twitter-bootstrap-button-generator/
このサイトを使うと、ボタンの作成が楽にできそうです。

以上です。

ソースコードから理解する技術－ＵｎｄｅｒＳｏｕｒｃｅＣｏｄｅ