Rails/Bootstrap の履歴ソース(No.6)

&tag(Rails/Bootstrap);
*目次 [#c3ed9b71]
#contents
*関連ページ [#lf2e978e]
*参考情報 [#n8b6f96d]
-[[Gemfile]]
-[[Rails]]
-[[Bootstrap3]]
-[[Rails/検証]]

*bootstrap-sassを使って導入 [#a5457844]
-Rails4にBootstrap3を入れる場合、bootstrap-sassというのを使ったほうがいいらしい。
-[[bootstrap-sass という gem について - willnet.in:http://www.willnet.in/136]]
-[[Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入 | EasyRamble:http://easyramble.com/bootstrap-sass-on-rails4.html]]
-[[Rails 4 で Twitter Bootstrap と Font Awesome を利用する手順 - Qiita:http://qiita.com/hkusu/items/a549a96dcb2bb935a47b]]

**Gemfileの編集 [#q9863aaa]
-Gemfileに追加。
#pre{{
gem 'bootstrap-sass', '~> 3.3.4'
gem 'font-awesome-sass'
}}

**bundle install実行 [#ncbd9634]
-bundle installを実行
 bundle install --path vendor/bundle

**application.css.scss作成など [#xda4204a]
-app/assets/stylesheets/application.css.scssを作成
#pre{{
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
}}
- app/assets/stylesheets/application.cssは削除
-app/assets/javascripts/application.jsの編集
#pre{{
//= require bootstrap-sprockets
}}
**動作確認 [#nc1012ae]
-scaffoldを作ってみる

***scaffold実行 [#p5e838f6]
-bookモデルのscaffoldを作成
 bundle exec rails g scaffold  book title:string author:string summary:text
 bundle exec rake db:migrate
-ここで一旦 http://localhost:3000/books にアクセスして確認。
-app/views/layouts/application.html.erbを編集。ナビゲーションの追加とyieldの囲みが必要。
#pre{{
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/"><i class="fa fa-home"></i>Home</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="http://www.google.com/" target="_blank">Google</a></li>
                <li><a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! Japan</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-left">
                <div class="form-group">
                    <%= form_tag('/softwares', method: 'get', class: 'navbar-form navbar-right') do %>
                        <%= text_field_tag(:q, params[:q], class: 'form-control', style: 'width: 200px;', placeholder: 'Search') %>
                    <% end %>
                </div>
            </ul>
        </div>
    </div><!-- /.container-fluid -->
</nav>

<div class="container">
    <!-- flash messages -->
    <%= yield %>
    <hr>
    <footer>
        <p>&#169; src256</p>
    </footer>
</div>
}}
-もう一回 http://localhost:3000/books にアクセス。

*Bootstrap3対応フォーム [#s090fa47]

**フォームの生成 [#o77012ff]

-以下のようなフォームを作成する。
#ref(newbook.png)
-books/_form.html.erbの内容
#pre{{
<%= form_for(@book, html: {class: 'form-horizontal'}) do |f| %>
    <% if @book.errors.any? %>
        <div id="error_explanation">
            <h2>エラーが発生しました :</h2>
            <ul>
                <% @book.errors.full_messages.each do |msg| %>
                    <li><%= msg %></li>
                <% end %>
            </ul>
        </div>
    <% end %>

    <div class="form-group">
        <%= f.label(:title, 'タイトル', class: 'col-xs-2 control-label') %>
        <div class="col-xs-10">
            <%= f.text_field(:title, class: 'form-control') %>
        </div>
    </div>

    <div class="form-group">
        <%= f.label(:author, '著者', class: 'col-xs-2 control-label') %>
        <div class="col-xs-10">
            <%= f.text_field(:author, class: 'form-control') %>
        </div>
    </div>

    <div class="form-group">
        <%= f.label(:summary, '概要', class: 'col-xs-2 control-label') %>
        <div class="col-xs-10">
            <%= f.text_area(:summary, rows: 14, cols: 20, class: 'form-control') %>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-12">
            <%= f.submit('保存', class: 'btn btn-primary') %>
        </div>
    </div>
<% end %>

}}

**エラーメッセージの見せ方 [#qc95f2dd]
#ref(error.png)
-フォームの中にエラーを一覧表示し、さらにエラーに成ったフィールドを.field_with_errorsでハイライトするのが普通らしい。
-application.css.scssの修正。本来は最初のブロックでいいはずだが、form-horizontalを使う場合下の修正も必要(ずれる)。
#pre{{
.field_with_errors {
  @extend .form-group;
  @extend .has-error;
}

.form-horizontal .field_with_errors {
  margin: 0;
}

.form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after {
  display: block;
  clear: none;
}

}}
-ビューの修正。alert-dangerにバツじるしをつけて閉じられるようにする場合。
#pre{{
    <% if @item.errors.any? %>
        <div class="alert alert-danger" role="alert">
            <button class="close" data-dismiss="alert">×</button>
            <h2>エラーが発生しました :</h2>
            <ul>
                <% @item.errors.full_messages.each do |msg| %>
                    <li><%= msg %></li>
                <% end %>
            </ul>
        </div>
    <% end %>

}}