#author("2021-04-26T04:29:31+00:00","default:src128","src128") &tag(Rails/Bootstrap4); *目次 [#x711acac] #contents *関連ページ [#q4790619] -[[Rails]] -[[../Bootstrap3]] *参考情報 [#m9d4ce21] *Bootstrap4を導入(Rails 6編) [#k13ec77d] Bootstrap4とjQueryとFontawesomeを導入する。 **参考情報 [#kb7551f8] -[[Rails6にjQueryとBootstrapを導入する手順 – knmts.com:https://knmts.com/become-engineer-4/]] **yarnでjQueryとBootstrapを実行 [#l1580665] -yarnで必要なファイルをインストール yarn add bootstrap jquery popper.js yarn add @fortawesome/fontawesome-free **jsをインクルード [#u61005e7] -app/javascript/packs/application.jsを編集。 #pre{{ 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をインクルード [#s488eecc] -app/assets/stylesheets/application.cssを編集。 *= require bootstrap/dist/css/bootstrap.min.css -先頭にインクルード。 **scssをインクルード [#taf6a04e] -app/assets/stylesheets/application.scssを編集。requireだと読み込まれない? @import "bootstrap/scss/bootstrap"; -manifest.jsは以下のままで良いようだ。 #pre{{ //= link_tree ../images //= link_directory ../stylesheets .css //= link_directory ../javascripts .js }} **すべてのpackでjQueryを使えるように。 [#n42b3b39] ※application.jsで「window.jQuery = window.$ = jQuery」した場合、以下は不要。むしろエラーになる。 -config/webpack/environment.jsを編集。jQueryのパスは相対パス指定が必要? #pre{{ 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編) [#ye2b2012] **参考情報 [#m35bf134] -[[twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc:https://github.com/twbs/bootstrap-rubygem]]…公式サイト -[[Railsアプリで Bootstrap 4 を利用する - Qiita:https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf]] **Gemfileの編集 [#i5e663fa] -Gemfileに以下を追加。 #pre{{ gem 'bootstrap', '~> 4.1.1' gem 'jquery-rails' }} -sprockets-railsがv2.3.2以降であることを確認(Rails 5.2だとデフォルト対応済みか?) bundle show |fgrep sprockets-rails **application.scssの作成 [#f4729296] -application.scssを作成する。 @import "bootstrap"; **application.html.erb [#m2426b17] -これは特に変更なし? #pre{{ <!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の対応 [#bd45688b] -[[bootstrap4が適用されたkaminariのviewを作成したい - その辺にいるWebエンジニアの備忘録:https://kossy-web-engineer.hatenablog.com/entry/2018/11/14/061534]] bundle exec rails g kaminari:views bootstrap4 *Tips [#y15b90ce] **Bootstrap3ぽくする設定 [#o2f3cd75] -application.scssを編集。プライマリーの色とベースのフォントサイズを16pxから14pxに。 #pre{{ $primary: #337ab7; @import "bootstrap"; html { font-size: 14px; /* ルート要素のフォントサイズを1rem=14pxと定義する */ } }} **モーダルを表示する。 [#ud1c1b34] -基本的に以下のコードでボタンを押した際にモーダルが表示されるはず。 #pre{{ <!-- 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">×</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に最低限以下の設定が必要。 #pre{{ //= require rails-ujs //= require jquery3 //= require popper //= require bootstrap-sprockets }} ***モーダルが表示されない場合: 2020/09/25(金) [#nef50845] -上記最低限のコードでボタンを押してもモーダルが表示されていない場合、application.jsの最後に「require bootstrap-sprockets」があるかどうかを確認。 ***「data-remote: true」でajaxを組み合わせたとき表示されない場合 [#gdbfb718] -例えば以下のようなコードで呼び出す。 #pre{{ <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:https://github.com/rails/rails/issues/33115]] #pre{{ <p> <%= link_to("モーダル", modal_link_books_path, {"data-toggle" => "modal", "data-target" => '#exampleModal'}) %> </p> }} *トラブルシューティング [#h6d01913] **Uncaught Error: Bootstrap dropdown require Popper.js [#ze6b004e] -[[Rails 5 - Uncaught Error: Bootstrap dropdown require Popper.js - Stack Overflow:https://stackoverflow.com/questions/45737011/rails-5-uncaught-error-bootstrap-dropdown-require-popper-js]] -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:https://stackoverflow.com/questions/34481363/whats-the-difference-between-bootstrap-and-bootstrap-sprockets]]。bootstrapはjsファイルをまとめたもの、bootstrap-sproketsは個別のファイルということらしい。