Rails/Bootstrap4 の履歴(No.8)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Rails/Bootstrap4 へ行く。
  • 1 (2020-05-08 (金) 23:22:09)
  • 2 (2020-05-08 (金) 23:35:20)
  • 3 (2020-05-27 (水) 00:16:58)
  • 4 (2020-09-26 (土) 06:06:52)
  • 5 (2021-04-06 (火) 01:47:09)
  • 6 (2021-04-08 (木) 02:48:57)
  • 7 (2021-04-09 (金) 02:53:30)
  • 8 (2021-04-26 (月) 22:29:31)

---

&tag(Rails/Bootstrap4);

目次†[edit]

関連ページ†[edit]

• Rails
• ../Bootstrap3

参考情報†[edit]

Bootstrap4を導入(Rails 6編)†[edit]

Bootstrap4とjQueryとFontawesomeを導入する。

参考情報†[edit]

• Rails6にjQueryとBootstrapを導入する手順 – knmts.com

yarnでjQueryとBootstrapを実行†[edit]

• yarnで必要なファイルをインストール

  yarn add bootstrap jquery popper.js
  yarn add @fortawesome/fontawesome-free

jsをインクルード†[edit]

• app/javascript/packs/application.jsを編集。

  import '@fortawesome/fontawesome-free/js/all'
  require("@rails/ujs").start()
  //require("turbolinks").start()
  require("@rails/activestorage").start()
  require("channels")
  require("bootstrap") //Bootstrapを追加
  
  import jQuery from 'jquery'
  window.jQuery = window.$ = jQuery
  

cssをインクルード†[edit]

• app/assets/stylesheets/application.cssを編集。

  *= require bootstrap/dist/css/bootstrap.min.css

• 先頭にインクルード。

scssをインクルード†[edit]

• app/assets/stylesheets/application.scssを編集。requireだと読み込まれない？

  @import "bootstrap/scss/bootstrap";

• manifest.jsは以下のままで良いようだ。

  //= link_tree ../images
  //= link_directory ../stylesheets .css
  //= link_directory ../javascripts .js
  

すべてのpackでjQueryを使えるように。†[edit]

※application.jsで「window.jQuery = window.$ = jQuery」した場合、以下は不要。むしろエラーになる。

• config/webpack/environment.jsを編集。jQueryのパスは相対パス指定が必要？

  const { environment } = require('@rails/webpacker')
  
  //ここから
  const webpack = require('webpack')
  environment.plugins.prepend('Provide',
      new webpack.ProvidePlugin({
          $: 'jquery/src/jquery',
          jQuery: 'jquery/src/jquery'
      })
  )
  //ここまで
  
  module.exports = environment
  
  

Bootstrap4を導入(Rails 5.2編)†[edit]

参考情報†[edit]

• twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc…公式サイト
• Railsアプリで Bootstrap 4 を利用する - Qiita

Gemfileの編集†[edit]

• Gemfileに以下を追加。

  gem 'bootstrap', '~> 4.1.1'
  gem 'jquery-rails'
  

• sprockets-railsがv2.3.2以降であることを確認(Rails 5.2だとデフォルト対応済みか?)

  bundle show |fgrep sprockets-rails

application.scssの作成†[edit]

• application.scssを作成する。

  @import "bootstrap";

application.html.erb†[edit]

• これは特に変更なし？

  <!DOCTYPE html>
  <html>
    <head>
      <title>Rails5Bootstrap4Demo</title>
      <%= csrf_meta_tags %>
      <%= csp_meta_tag %>
  
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    </head>
  
    <body>
      <div class="container">
        <%= yield %>
      </div>
    </body>
  </html>
  
  

kaminariの対応†[edit]

• bootstrap4が適用されたkaminariのviewを作成したい - その辺にいるWebエンジニアの備忘録

  bundle exec rails g kaminari:views bootstrap4

Tips†[edit]

Bootstrap3ぽくする設定†[edit]

• application.scssを編集。プライマリーの色とベースのフォントサイズを16pxから14pxに。

  $primary: #337ab7;
  @import "bootstrap";
  html {
    font-size: 14px; /* ルート要素のフォントサイズを1rem=14pxと定義する */
  }
  

モーダルを表示する。†[edit]

• 基本的に以下のコードでボタンを押した際にモーダルが表示されるはず。

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-remote="true">
    Launch demo modal
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  

• ただしapplication.jsに最低限以下の設定が必要。

  //= require rails-ujs
  //= require jquery3
  //= require popper
  //= require bootstrap-sprockets
  

モーダルが表示されない場合: 2020/09/25(金)†[edit]

• 上記最低限のコードでボタンを押してもモーダルが表示されていない場合、application.jsの最後に「require bootstrap-sprockets」があるかどうかを確認。

「data-remote: true」でajaxを組み合わせたとき表示されない場合†[edit]

• 例えば以下のようなコードで呼び出す。

  <p>
    <%= link_to("モーダル", modal_link_books_path, {"data-toggle" => "modal", "data-target" => '#exampleModal', :remote => true}) %>
  </p>
  

• この場合、application.jsで「require rails-ujs」を「require jquery_ujs」に変更すれば良い(turbolinksは関係ない模様)。
• または「:remote => true」を削除する？remote不要?(要確認)。rails-ujs not working with remote: true Ajax request · Issue #33115 · rails/rails

  <p>
    <%= link_to("モーダル", modal_link_books_path, {"data-toggle" => "modal", "data-target" => '#exampleModal'}) %>
  </p>
  

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

Uncaught Error: Bootstrap dropdown require Popper.js†[edit]

• Rails 5 - Uncaught Error: Bootstrap dropdown require Popper.js - Stack Overflow
• application.jsに以下を追加

  //= require popper
  //= require bootstrap-sprockets

• ちなみにapplication.jsに指定するbootstrapとbootstrap-sprroketsの違い。ruby on rails - What's the difference between bootstrap and bootstrap-sprockets? - Stack Overflow。bootstrapはjsファイルをまとめたもの、bootstrap-sproketsは個別のファイルということらしい。