twitter-bootstrap-railsでなんか作る(1)

2013年になりましたねってことで、twitter-bootstrap-railsを使ってなにか作りたいと思います(唐突)
twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。
を大いに参考にしました。というかほぼそのままです。

まずは適当にrailsのプロジェクトを作成

$ rails new kotoyoro --skip-bundle
$ cd kotoyoro

gemを用意

Gemfileのassetsのとこのtherubyracerをアンコメントして、以下の2行を追加します

  gem 'therubyracer', :platforms => :ruby #コメントを外す
  gem 'twitter-bootstrap-rails'
  gem 'less-rails'
$ bundle install

レイアウトのひな形を作成

$ rails g bootstrap:install less
$ rails g bootstrap:layout application fluid

もともとあるレイアウトファイル(application.html.erb)とconflictしてどうのこうのと出てくると思いますが、上書きしましょう。

ビューを用意

このままでは枠だけで中身がないので、適当なコントローラとビューを用意します。

$ rails g controller pages index

app/views/pages/index.html.erbを適当に編集

<div class="hero-unit">
<h1>ことよろ!</h1>
</div>
<p>謹んで新年の挨拶を申し上げます。</p>

routes.rbに以下を追記してrootを変更

root :to => 'pages#index'

デフォルトのホームページを削除

$ rm public/index.html

確認してみる!

$ rails s

http://localhost:3000にアクセス。

できましたー。

背景をテクスチャパターンに変更する。

これだけだとなんか寂しいので、背景をテクスチャっぽいパターンに変更してみましょう。
テクスチャ 背景 でググるといくらでも出てくるので適当に画像を入手して、
app/assets/images/ に置きましょう。
app/assets/stylesheets/application.cssに、

body{
	background-image: url(/assets/texture.jpg);
}

と追加します。imagesの部分は省略しないとうまくいかないです(rails3.2.9)
これでブラウザをリロードすると、こういうかんじ。

ちょっとリッチになりました。


それにしてもtwitter-bootstrap-rails、恐ろしく便利…
次はこれを元に機能を追加できればいいなあ。