Bootstrap5を導入する記事がrails6のものばかりだったので一応。
当方はrailsチュートリアルを無料で読むためにrails5.2を利用しています。
なお、超初心者向けの記事のため記載しておきますと、
Bootstrap5はIE11以下、初期のEdgeには対応しておりません。
また、紹介するBootstrap関連の便利gemがまだまだBootstrap4対応なので、Bootstrap4にしておいたほうがいいと思います。
こちらでそんなに問題なく動いているバージョンで追加していっています。
Bootstrapと依存popper.js
Gemfile
gem 'bootstrap', '~> 5.1.0'
gem 'popper_js', '~> 2.9.3'
assets/stylesheets/application.scss
@import "bootstrap";
assets/javascript/application.js
//= require popper
//= require bootstrap-sprockets
これだけ。application.jsのpopper.jsは上に書かないといけないらしいですが試していません。
JQuery依存はなくなりましたがハンバーガーメニューなど、Javascriptが不要になったわけではなかったです。
記事を書いている私も初心者過ぎてそのへんよくわかっていませんでした。
bundle installもお忘れなく。
bundle install
JQueryが必要になれば、追加で導入すれば問題なく利用できます。
ついでにBootstrap_formを導入
Bootstrapでラクをするくらいですから、Formもラクをしていきましょう。
ただ、Bootstrap5対応はまだ開発中であり、たまにissueにひっかかることもあります。
それでも、めちゃくちゃ便利でcrispyです。
Gemfile
gem "bootstrap_form", git: "https://github.com/bootstrap-ruby/bootstrap_form.git", branch: "bootstrap-5"
assets/stylesheets/application.scss
@import "rails_bootstrap_forms";
注意点
何度も記載しておりますが、IE11非対応です。
polyfillを入れることで対応するらしいですが、もし確認する機会があればやってみたいと思います。
polyfill
または
polyfill.io