初めてのbootstrap導入(rails) #Ruby

はじめに

bootstrapを導入する時に手間取ってしまったので、初めて触ってみる人でもわかりやすく、導入手順を一からおさらいします超初級編です
bootstrapは簡単にgridレイアウトを実現できるので、使えるようになると便利です

Gemfile

gem 'bootstrap'

今回はバージョン指定はしません。
この時、compass-railsというgemが追加されてあるとエラーを吐いてしまうので、なくて問題ないようなら削除します。

terminal

$ bundle install

app>assets>stylesheet>application.css

application.css

@import "bootstrap";

application.cssをapplication.scssに名前変更

app>assets>javascripts>application.js

application.js

//= require bootstrap

bootstrapから、好きなデザインを探し、適応させたいビューファイルに挿入します。
bootstrapトップページから、ヘッダーのDocumentation->左にあるCommponentsから探します。

e.g.) 今回は、headerにNavbarを使います。
app>views>layouts>application.html.erb

application.html.erb

<header>
  ここにコピーしたコードを貼り付け
</header>

これで$ rails sでサーバーを起動させて該当ページを表示させると、下のようにbootstrapが適用されます。

後はエディタのbootstrapをコピーした部分のリンクや表示させたい文字などを調節して完成です！やったね！