Rails/Bootstrap の履歴(No.11) - src256 wiki

[ トップ ] [ 新規 | 一覧 | 検索 | 最終更新 | ヘルプ | ログイン ]

Tag: Rails/Bootstrap

目次†

目次
関連ページ
参考情報
bootstrap-sassを使って導入(Rails 5.1編)
bootstrap-sassを使って導入(Rails 5編)
bootstrap-sassを使って導入(Rails 4編)
Bootstrap3対応フォーム
トラブルシューティング

関連ページ†

Rails

参考情報†

twbs/bootstrap-sass: Official Sass port of Bootstrap 2 and 3.…公式サイト
Gemfile
Rails
Bootstrap3
Rails/検証

bootstrap-sassを使って導入(Rails 5.1編)†

Gemfileの編集†

Gemfileに以下を追加

gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass'
gem 'jquery-rails'

bunlde installを実行†

以下のコマンドを実行する
```
bundle install --path vendor/bundle
```

application.css.scss作成など†

application.cssをapplication.css.scssリネーム。内容は以下で作成。

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

app/assets/javascripts/application.jsの編集

//= require jquery
//= require bootstrap-sprockets

動作確認†

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の囲みが必要。

<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('/books', 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 にアクセス。

bootstrap-sassを使って導入(Rails 5編)†

Gemfileの編集†

GitHub - twbs/bootstrap-sass: Official Sass port of Bootstrap 2 and 3.…公式サイトの指示に従い以下をGemfileに追加する

ついでにfont-awesomeも。

gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass'

bundle installを実行†

bundle installを実行
```
bundle install --path vendor/bundle
```

application.css.scss作成など†

application.css.scssを作成。

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

app/assets/stylesheets/application.cssは削除
app/assets/javascripts/application.jsの編集
```
//= require bootstrap-sprockets
```

bootstrap-sassを使って導入(Rails 4編)†

GitHub - twbs/bootstrap-sass: Official Sass port of Bootstrap 2 and 3.…公式サイト
Rails4にBootstrap3を入れる場合、bootstrap-sassというのを使ったほうがいいらしい。
bootstrap-sass という gem について - willnet.in
Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入 | EasyRamble
Rails 4 で Twitter Bootstrap と Font Awesome を利用する手順 - Qiita

Gemfileの編集†

Gemfileに追加。

gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass'

bundle install実行†

bundle installを実行
```
bundle install --path vendor/bundle
```

application.css.scss作成など†

app/assets/stylesheets/application.css.scssを作成

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

app/assets/stylesheets/application.cssは削除
app/assets/javascripts/application.jsの編集
```
//= require bootstrap-sprockets
```

動作確認†

scaffoldを作ってみる

scaffold実行†

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の囲みが必要。

<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('/books', 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対応フォーム†

フォームの生成†

以下のようなフォームを作成する。

books/_form.html.erbの内容

<%= 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 %>

エラーメッセージの見せ方†

フォームの中にエラーを一覧表示し、さらにエラーに成ったフィールドを.field_with_errorsでハイライトするのが普通らしい。

application.css.scssの修正。本来は最初のブロックでいいはずだが、form-horizontalを使う場合下の修正も必要(ずれる)。

.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にバツじるしをつけて閉じられるようにする場合。

    <% 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 %>

メッセージの表示†

画面上部に×印で閉じることが出来るメッセージを表示したい場合(フォーム以外でも表示するためにレイアウトファイルに追加する)。

application.css.scssに追加†

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;
}

application.html.erbの編集†

<div class="container">
  <!-- flash messages -->
  <div class="row">
    <div class="col-xs-12">
      <%= flash_messages %>
    </div>
  </div>
  <div class="row">
    <%= yield %>
  </div>
  <hr>
  <footer>
    <p>&#169; src256</p>
  </footer>
</div>

application_helper.rbに追加†

module ApplicationHelper
  def bootstrap_class_for flash_type
    { success: "alert-success", error: "alert-danger", alert: "alert-warning", notice: "alert-info"\
 }[flash_type.to_sym] || flash_type.to_s
  end

  def flash_messages(opts = {})
    flash.each do |msg_type, message|
      concat(content_tag(:div, message, class: "alert #{bootstrap_class_for(msg_type)} alert-dismis\
sible", role: 'alert') do
        concat(content_tag(:button, class: 'close', data: { dismiss: 'alert' }) do
          concat content_tag(:span, '&times;'.html_safe, 'aria-hidden' => true)
          concat content_tag(:span, 'Close', class: 'sr-only')
        end)
        concat message
      end)
    end
    nil
  end
end

呼び出し例†

books_controller.rbで表示する場合

  def index
    @books = Book.all
    flash[:notice] = 'はじめまして'
  end

トラブルシューティング†

twitter-bootstrap-railsから移行するとナビゲーションが表示されない†

twitter-bootstrap-railsがBootstrap2ベースのせいかもしれない。
Bootstrap2とBootstrap3ではナビゲーションの記述方法やグリッドなど全くことなっているので書き直しが必要。

padding-top: 60pxはどうなる？†

bodyのpadding-top: 60pxはnavbar-fixed-topを利用する場合に必要。fixed-topじゃないナビゲーションバーを使うならば不要。
navbar-fixed-topは画面の上につねにナビゲーションバーが表示され続ける。

kaminariのページングの表示が乱れる†

以下のコマンドを実行する

bundle exec rails g kaminari:views bootstrap3