※ Bootstrapをより簡単に導入する(sass版)記事 もあるので、そちらも参照してみてください。
twitter-bootstrap-railsというGemを使って、Rails4にBootstrap3を導入します。
$ rails -v Rails 4.1.1
$ ruby -v ruby 2.1.0p0
サンプルアプリの用意
まずはbootstrap3という名前のサンプルアプリを生成し、次に確認用のページを生成します。
$ rails new bootstrap3
$ cd bootstrap3
$ rails g scaffold Book title:string price:integer
$ rake db:migrate
$ rails server
Gemfileの設定
Bootstrapのcssがlessで書かれているので、Railsでもlessが扱えるようにし、さらにlessをコンパイルするためのGemもインストールします。
bootstrap3/Gemfile
gem ‘therubyracer’ # javascript runtime。lessをコンパイルするために必要
gem ‘less-rails’ # Railsでlessを使えるようにする。Bootstrapがlessで書かれているため
gem ‘twitter-bootstrap-rails’ # Bootstrapの本体
Gemを反映します。
$ bundle install
Bootstrapの設定
まずはBootstrapのJsとCssを生成します。
$ rails g bootstrap:install
insert app/assets/javascripts/application.js
create app/assets/javascripts/bootstrap.js.coffee
create app/assets/stylesheets/bootstrap_and_overrides.css.less
create config/locales/en.bootstrap.yml
gsub app/assets/stylesheets/application.css
ヘッダー、フッターのBootstrap化
次にヘッダー、フッターをBootstrapのコンポーネントに差し替えるため、
app/views/layouts/application.html.erbを上書き(Overwrite)します。
$ rails g bootstrap:layout application
conflict app/views/layouts/application.html.erb
Overwrite /bootstrap3/app/views/layouts/application.html.erb? (enter “h” for help) [Ynaqdh] Y
force app/views/layouts/application.html.erb
scaffoldしたページのBootstrap化
次に、scaffoldしたページ全体に対してBootstrap化をしていきます。
ページはすでに生成されているので、ここでも上書きするかメッセージが出ますが、すべてYで上書きます。
$ rails g bootstrap:themed Books
conflict app/views/books/index.html.erb
Overwrite /bootstrap3/app/views/books/index.html.erb? (enter “h” for help) [Ynaqdh] Y
force app/views/books/index.html.erb
conflict app/views/books/new.html.erb
Overwrite /bootstrap3/app/views/books/new.html.erb? (enter “h” for help) [Ynaqdh] Y
force app/views/books/new.html.erb
conflict app/views/books/edit.html.erb
Overwrite /bootstrap3/app/views/books/edit.html.erb? (enter “h” for help) [Ynaqdh] Y
force app/views/books/edit.html.erb
conflict app/views/books/_form.html.erb
Overwrite /bootstrap3/app/views/books/_form.html.erb? (enter “h” for help) [Ynaqdh] Y
force app/views/books/_form.html.erb
conflict app/views/books/show.html.erb
Overwrite /bootstrap3/app/views/books/show.html.erb? (enter “h” for help) [Ynaqdh] Y
force app/views/books/show.html.erb
Glyphicons(Webフォント)の設定
Bootstrap3からGlyphiconsは、Webフォントなっており、別途サーバーにフォントをインストールする必要があります。
本家サイトからbootstrap本体をダウンロードし、fontをapp/vendor/assets/配下にコピーします。
wget https://github.com/twbs/bootstrap/releases/download/v3.3.2/bootstrap-3.3.2-dist.zip
$ unzip bootstrap-3.3.2-dist.zip
$ cp -a bootstrap-3.3.2-dist/fonts /bootstrap3/vendor/assets/
次にダウンロードしたフォントを読み込むため、configに設定します。
bootstrap3/config/application.rb
module Bootstrap3
class Application < Rails::Application
config.assets.paths << “#{Rails}/vendor/assets/fonts” #<- 追加
…
最後にlessファイルに対して、ダウンロードしたフォントのパスを設定します。
bootstrap3/app/assets/stylesheets/bootstrap＿and＿overrides.css.less
@font-face {
font-family: ‘Glyphicons Halflings’;
src: url(‘/assets/glyphicons-halflings-regular.eot’);
src: url(‘/asstes/glyphicons-halflings-regular.eot?#iefix’) format(‘embedded-opentype’),
url(‘/assets/glyphicons-halflings-regular.woff’) format(‘woff’),
url(‘/assets/glyphicons-halflings-regular.ttf’) format(‘truetype’),
url(‘/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular’) format(‘svg’);
}
試しにindex.html.erbに、Glyphiconsのspanタグを書いてみます。
bootstrap3/app/views/books/index.html.erb
<%- model_class = Book -%>
<div class=‘page-header’>
<h1>
<%=‘.title’, :default => model_class.model_name.human.pluralize.titleize %>
<span class=‘glyphicon glyphicon-heart’ aria-hidden=‘true’></span>
</h1>
…
参考サイト
- RailsにTwitter Bootstrapの導入と簡易な使い方
- Rails4でサイト構築をする – Bootstrap導入編
- Bootstrap3をRails4で使うときのメモ
- rails4でbootstrap3のglyphiconを使う方法