Rails/Bootstrap/古い情報

Tag: Rails/Bootstrap/古い情報

目次†

関連ページ†

参考情報†

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

フォームの生成†

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

  #ref(): File not found: "newbook.png" at page "Rails/Bootstrap/古い情報"

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

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

#ref(): File not found: "error.png" at page "Rails/Bootstrap/古い情報"

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

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

今日の20件

最新の20件