Tag: Rails/Bootstrap

目次

関連ページ

参考情報

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の編集

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編)

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対応フォーム

フォームの生成

  • 以下のようなフォームを作成する。
    newbook.png
  • 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 %>
    
    

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

error.png
  • フォームの中にエラーを一覧表示し、さらにエラーに成ったフィールドを.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

添付ファイル: fileerror.png 468件 [詳細] filenewbook.png 453件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-07-30 (月) 16:02:21