概要環
環境
- Ruby 2.1.0p0
- Rails 4.2.0
- nginx
- unicorn
- twitter-bootstrap-rails 3.2.0
Bootstrpeの公式ページからファイルをダウンロードし、Railsに追加する方法を説明します。
そして、解凍し、dist内の下記のファイルをRailsプロジェクトにコピーします。
| コピー元 | コピー先 |
|---|
| dist/css/bootstrap.min.css | vendor/assets/stylesheets/. |
| dist/js/bootstrap.min.js | vendor/assets/javascripts/. |
| dist/fonts | vendor/assets/. |
そして、Railsに追加したbootstrapを読み込ませるようにします。
# app/assets/javascripts/application.js
...
//
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require_tree .
#app/assets/stylesheets/application.css
...
*
*= require bootstrap.min
*= require_tree .
*= require_self
*/
では、ここからはカスタマイズをして行きましょう。
基本的に、それぞれのカスタマイズ項目は独立していますが、少し依存関係がある箇所もありますのでご注意ください。
これは、適切なTwitter Bootstrap用のclass値が設定されていないためです。
先ほどの少しだけソースコードを見てみましょう。
table table-stripedや
btn btn-primaryなどTwitter Bootstrapのclass値が指定されていますね。
実際にどのようなclass値が使えるかは
公式ドキュメントを参照して下さい。
...
class
="table table-striped
">
...
<%= link_to t('.new', :default => t("helpers.links.new
")),
new_product_path,
:class => 'btn btn-primary' %>
実は、現在２つ問題があります。
・データを作成/更新したときにサクセスメッセージとエラーが発生したときにエラーメッセージが表示されない
・フォームでエラーメッセージ表示されない
１つ目について、ここで解消します。２つ目は次の「simple_formとの連携」で解消します。
サクセスメッセージやエラーメッセージは、flash[:notice]かflash[:error]のどちらかに入ってきます。
また、Twitter Bootstrapでは、アラートは、alert alert-successalert alert-errorで表示させます。
そのため、下記のようなコードを追加します。
...
<% flash.each do |name, msg| %>
class
="alert alert-<%= name ==
"notice" ?
"success" :
"error" %>
">
"close" data-dismiss="alert">×
<%= msg %>
<% end %>
<%= yield %>
では、もう１つの問題の、フォーム上でエラーメッセージを表示しましょう。
まず、エラーメッセージを出すために、ModelにValidationを追加します。
class Product < ActiveRecord::Base
validates :name, presence: true
validates :price, presence: true
end
次に、simple_formを導入します。
gem 'simple_form'
そして、gemをインストールします。
$ bundle install
$ rails g simple_form:install --bootstrap
create config/initializers/simple_form.rb
create config/initializers/simple_form_bootstrap.rb
exist config/locales
create config/locales/simple_form.en.yml
create lib/templates/erb/scaffold/_form.html.erb
===============================================================================
Be sure to have a copy of the Bootstrap stylesheet available on your
application, you can get it on http://twitter.github.com/bootstrap.
Inside your views, use the 'simple_form_for' with one of the Bootstrap form
classes, '.form-horizontal', '.form-inline', '.form-search' or
'.form-vertical', as the following:
= simple_form_for(@user, html: {class: 'form-horizontal' }) do |form|
===============================================================================
フォームをsimple_formで書き換えます。
# app/views/products/_form.html.erb
<%= simple_form_for @product, :html => { :class => 'form-horizontal' } do |f| %>
<%= f.input :name %>
<%= f.input :price %>
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to t('.cancel', :default => t("helpers.links.cancel")),
products_path, :class => 'btn' %>
</div>
<% end %>
これで、完成です。画面を開き、エラーメッセージを表示させましょう。
サイドバーを追加して行きますが、Twitter Bootstrapでは、
- fixed：940pxで横幅が要素の位置が固定される
- fluid：ブラウザサイズに応じてと要素が広がる
の２つがあります。
今回は、fixedでサイドバーを追加して行きます。
Twitter Bootstrapでは、下記のような構成でレイアウトを作っていきます。
...
<body>
<div class="container">
<div class="row">
<div class="span8">
... メインコンンツを記載 ...
</div>
<div class="span4">
... サイドバーコンンツを記載 ...
</div>
</div>
</div>
</body>
では、上記の構成を全体のレイアウトファイルに適用させましょう。
# app/views/layouts/application.html.erb
....
<body>
<div class="container">
<div class="row">
<% flash.each do |name, msg| %>
<div class="alert alert-<%= name == "notice" ? "success" : "error" %>">
<a class="close" data-dismiss="alert">×</a>
<%= msg %>
</div>
<% end %>
<div class="span8">
<%= yield %>
</div>
<div class="span4">
<h2>Side bar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</body>
</html>
では、サイドバーが追加されたことがわかると思います。
ちなみに、ブラウザの横幅を狭めていくと、サイドバーが下側に移動すると思います。既に、レスポンシブデザインが適用されている証拠です。
可読性を上げるために、headerを外部ファイル化します。
renderメソッドでheaderを呼び出ます。
...
<%= render 'layouts/header' %>
class
="container">
class
="row">
class
="span8">
...
# app/views/layouts/_haeder.html.erb
<header>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Some Store</a>
<div class="nav-collapse">
<ul class="nav">
<li><%= link_to "Products", products_path %></li>
<li><%= link_to "Price List" %></li>
<li><%= link_to "Contact Us" %></li>
<li><%= link_to "Cart" %></li>
</ul>
</div>
</div>
</div>
</div>
</header>
また、
IEの古いバージョンだと
HTML5が上手く動かないので、それに対処するコードを追加します。
さらに、モバイル端末での表示が良くするために、viewportを指定します。
# app/views/layouts/application.html.erb
...
<head>
<title>TwitterBootstrap</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
...
では、画面にナビゲーションバーが表示されていることを確認しましょう。
