参考にした記事URL一覧
今回はそっけない表示画面をそれっぽくするためにビューにBootstrapを当てはめる。
Gemfileを編集
+gem 'less-rails'
+gem 'twitter-bootstrap-rails'
+gem 'execjs'
-gem 'sass-rails'
以下のコマンドを実行
$ bundle install
$ rails g bootstrap:install
$ rails g bootstrap:layout application
と実行したけど、最後のコマンドはビューを勝手に色々いじるので、しない方が良いかもしれない。上のコマンドを実行すると
app/assets/javascripts/application.js
app/assets/javascripts/bootstrap.js.coffee
app/assets/stylesheets/application.css
app/assets/stylesheets/bootstrap_and_overrides.css.less
が出来る。さて、この状態で出力を見ると、ページ上部がナビゲーションバーで隠れてしまった。 app/assets/stylesheets/bootstrap_and_overrides.css.lessを修正することで対処する
変更前
@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";
変更後
@import "twitter/bootstrap/bootstrap";
body {padding-top:60px;}
@import "twitter/bootstrap/responsive";
これでページが隠れなくなる。レイアウト変更にはapp/views/layouts/application.html.erbを編集する必要がある。