#6 RailsでBootstrapを導入
前回、Pingendoで作成した画面を適用していきます。事前にbootstrap-sassを追加してTwitter Bootstrapを使えるようにします。このタイミングでFont Awesomeを使うためにfont-awesome-railsも追加します。インストール方法・使い方はそれぞれ以下のリンクを参考にしました。
Gemfileに追加
gem 'bootstrap-sass', '~> 3.3.6' gem "font-awesome-rails"
$ bundle install
CSSファイルをリネーム
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
application.scssの以下の項目を削除
*= require_tree . *= require_self
BootstrapとFont Awesomeの読み込みを追加
@import "font-awesome"; @import "bootstrap-sprockets"; @import "bootstrap";
app/assets/javascripts/application.jsに追加
//= require bootstrap-sprockets
再起動後、Bootstrapが反映されていることを確認できました。application.cssをリネームせずに使いたい場合は、Twitter Bootstrapのファイルを直接配置して読み込むという方法もある様です。
Pingendoで生成されたHTMLをerb2slimを利用してブラウザ上でslimに変換します。
あとは変換されたslimのコードをコツコツと反映していきます。たまに変換がうまくいっていない箇所があったので、その場合は直接修正しました。
現在の状態
