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
背景をテクスチャパターンに変更する。
これだけだとなんか寂しいので、背景をテクスチャっぽいパターンに変更してみましょう。
テクスチャ 背景 でググるといくらでも出てくるので適当に画像を入手して、
app/assets/images/ に置きましょう。
app/assets/stylesheets/application.cssに、
body{ background-image: url(/assets/texture.jpg); }
と追加します。imagesの部分は省略しないとうまくいかないです(rails3.2.9)
これでブラウザをリロードすると、こういうかんじ。
ちょっとリッチになりました。