- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2021-04-08T08:53:30+00:00","default:src128","src128")
#author("2022-02-03T08:35:18+00:00","default:src128","src128")
&tag(Rails/Bootstrap4);
*目次 [#x711acac]
#contents
*関連ページ [#q4790619]
-[[Rails]]
-[[../Bootstrap3]]
-[[./Rails6.1に導入]]
-[[./Rails6に導入]]
-[[./Rails5.2に導入]]
*参考情報 [#m9d4ce21]
*Bootstrap4を導入(Rails 6編) [#k13ec77d]
**参考情報 [#kb7551f8]
-[[Rails6にjQueryとBootstrapを導入する手順 – knmts.com:https://knmts.com/become-engineer-4/]]
**yarnでjQueryとBootstrapを実行 [#l1580665]
yarn add bootstrap jquery popper.js
**jsをインクルード [#u61005e7]
-app/javascript/packs/application.jsを編集。
#pre{{
require("jquery") //jQueryを追加
require("bootstrap") //Bootstrapを追加
}}
**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]
-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は個別のファイルということらしい。
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
