Ruby on RailsにBootstrapをインストールする方法

railsのインストールが完了後からの手順を記載。

---

最初のやり方ではBootstrapのverが2だったで、3をインストールするやり方を追記。

※ liubin0329さんのやり方を使わせていただきました。liubin0329さん有り難うございました。

---

 

以下、Bootstrap ver3のインストールの方法

 

Gemfileを開いて、以下の6行を追加。

gem 'therubyracer', platforms: :ruby
gem 'turbolinks'
gem 'less-rails'
gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails', :github => 'anjlab/bootstrap-rails'
gem 'execjs'
gem 'rb-readline', '~> 0.4.2'

 

• gemの更新。

$ bundle install

 

• app/assets/stylesheets/bootstrap.css.scssを作成し、以下の1行を記述。

@import "twitter/bootstrap";

 

• app/assets/stylesheets/application.cssに以下の2行を追加。

 *= require_self
 *= require_tree .

 

• app/assets/javascripts/application.jsに以下の1行を追加。

//= require twitter/bootstrap

 

• app/views/layouts/application.html.erbのに以下の3行を追加。

<%= stylesheet_link_tag    "bootstrap", media: "all", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

 

• 完了

ControllerとViewを作り、ページを表示するとBootstrap3が適用されている。

 
 
 
 

以下、Bootstrap ver2のインストールの方法

• Gemfileを開いて、以下の3行を追加。

gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'execjs'

 

• gemの更新。

$ bundle install

 

• Bootstrapインストール

$ rails g bootstrap:install

 

• Bootstrapを適用したレイアウトファイル作成

$ rails g bootstrap:layout application

 

---

上記のやり方でインストールしたBootstrapはverが古いので、修正。

• Bootstrapのページから最新版をダウンロード

Bootstrap
 

• ダウンロードしたファイルを解凍して出来た以下の2ファイルをassets/stylesheetsに移動。

bootstrap-theme.min.css
bootstrap.min.css

 

• 完了

---