読者です 読者をやめる 読者になる 読者になる

#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に変換します。

f:id:tsyknsr:20160630215613p:plain

あとは変換されたslimのコードをコツコツと反映していきます。たまに変換がうまくいっていない箇所があったので、その場合は直接修正しました。

現在の状態

f:id:tsyknsr:20160630222835p:plain

f:id:tsyknsr:20160630222849p:plain

参考