手軽に導入できる！Ruby on RailsでBootStrapを使う方法【初心者向け】
に載っていた内容に興味があったので
せっかくなので、過去にドットインストールで ruby on rails で作成したものを改造することに
まず
1 | cd heroku/mymemo/ |
でプロジェクトに移動
次に
1 | vim app/views/memos/index.html.erb |
でファイルを開き、ボタンのコードに class 設定を追加
あまり改造するとわかりにくくなるので
1 | <td><%= link_to 'Show', memo %></td> |
の部分を
1 | <td><%= link_to 'Show', memo ,class: "btn btn-lg btn-primary" %></td> |
として保存
次に
1 | vim Gemfile |
で Gemfile の最終行に追記します
ちなみに、バージョンが古いかな？と調べてみたら
Rails 4 で Twitter Bootstrap と Font Awesome を利用する手順
で
Font Awesome の入れ方も書いてあったので、こちらも追加することにします
1 2 | gem 'bootstrap-sass', '~> 3.2.0'gem 'font-awesome-sass' |
を最終行に追記します
そしてGemfile を読み込むため
1 | bundle install |
を実行します
次に、Bootstrap と Font Awesome を適用するため
application.css に追記します
1 | vim app/assets/stylesheets/application.css |
でファイルを開き
1 2 3 4 | @import "bootstrap-sprockets";@import "bootstrap";@import "font-awesome-sprockets";@import "font-awesome"; |
をファイル末尾に追記します
これで動作すると思ったのですが、反映されないため
bootstrap に関しては
https://github.com/twbs/bootstrap-sass
Font Awesome に関しては
http://fortawesome.github.io/Font-Awesome/get-started/
を参考にすることにしました
まず
1 | vim Gemfile |
でファイルを開き
1 | gem 'sass-rails', '>= 3.2' |
を追加し、再度
1 | bundle install |
を実行
しかし、
1 2 3 4 5 6 7 8 | [!] There was an error parsing `Gemfile`: You cannot specify the same gem twice with different version requirements.You specified: sass-rails (~> 5.0) and sass-rails (>= 3.2). Bundler cannot continue. # from /home/snowpool/dotinstall/heroku/mymemo/Gemfile:52 # ------------------------------------------- # > gem 'sass-rails', '>= 3.2' # ------------------------------------------- |
となるため、すでにインストール済みとのこと
次に
1 | vim app/assets/stylesheets/application.scss |
でファイルを作成し
1 2 3 4 | @import "bootstrap-sprockets";@import "bootstrap";@import "font-awesome-sprockets";@import "font-awesome"; |
を記述し、保存
これだけだと反映されないため、
1 2 3 | cd app/assets/stylesheets/cp application.css application.css_bakrm application.css |
として、application.css を削除したところ
無事に反映されました
なお、Font Awesome も反映されるか確かめたかったので
1 | vim app/views/memos/index.html.erb |
でファイルを開き
1 | <i class="fa fa-home"></i> |
を追記してから
1 | rails s |
で起動
これでブラウザで確認したところ、無事に変更が反映されていました
