Bootstrap v5の主な変更点
- 脱jQuery
- IE非対応
- CSS変数
- ブレークポイントxxl
- Bootstrap Icons
HTMLサイトの場合
Bootstrap v4.1.1からBootstrap v5.3.0への移行方法のメモです。
自作のHTML5テンプレートを例にしています。
読み込みファイルの変更
v4
bootstrap.min.css
bootstrap.min.js
popper.min.js ツールチップとポップオーバーに必要。
v5
bootstrap.min.css
bootstrap.bundle.min.js Popper.jsをインクルードしている。
主なCSSクラス名の変更
v4: text-left
v5: text-start
v4: text-right
v5: text-end
v4:custom-select
v5:form-select
v4: embed-responsive embed-responsive-16by9
v5: ratio ratio-16x9
メニュー
HTMLの「data-」を「data-bs-」へ変更
v4: data-toggle=""
v5: data-bs-toggle=""
v4: data-target=""
v5: data-bs-target=""
ツールチップ
HTMLの「data-」を「data-bs-」へ変更
v4: data-toggle="" data-placement=""
v5: data-bs-toggle="" data-bs-placement=""
v5 JSコード追加
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
ポップオーバー
HTMLの「data-」を「data-bs-」へ変更
v4: data-container="" data-toggle="" data-placement="" data-content=""
v5: data-bs-container="" data-bs-toggle="" data-bs-placement="" data-bs-content=""
v5 JSコード追加
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
アラート
v4のHTML
<div class="alert alert-white alert-dismissible fade show" role="alert"> alert-white
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
v5のHTML
<div class="alert alert-white alert-dismissible fade show" role="alert"> alert-white
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
CSSの変更
v4: .alert-dismissible .close { padding: 0.75rem 1.25rem; }
v5: .alert-dismissible .btn-close { padding: 0.5rem; }
ボタンがクリック時に白くなる
詳細度が高いので優先されます。
v4: .btn:active
v5: .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show
WordPressテーマとプラグインの場合
本テーマの場合は、以下の理由からBootstrap v5への移行は見送りとしました。
①. Bootstrap v5.3.0(bootstrap.bundle.min.js)は複数読み込み時に問題が発生する
WordPressテーマとプラグインでそれぞれbootstrap.bundle.min.js(Tooltip等バンドル)を読み込むと、Bootstrapのモバイルメニューや2ndレベルのドロップダウンメニュー等が機能しません。
※bootstrap.min.jsを使用する場合は問題ないようです。
②. WP Bootstrap Navwalker v4.3.0
Bootstrap v5へ手動での対応方法は紹介されていますが、正式な対応はまだされていません。
/**
* Use namespaced data attribute for Bootstrap's dropdown toggles.
*
* @param array $atts HTML attributes applied to the item's `<a>` element.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @return array
*/
function prefix_bs5_dropdown_data_attribute( $atts, $item, $args ) {
if ( is_a( $args->walker, 'WP_Bootstrap_Navwalker' ) ) {
if ( array_key_exists( 'data-toggle', $atts ) ) {
unset( $atts['data-toggle'] );
$atts['data-bs-toggle'] = 'dropdown';
}
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'prefix_bs5_dropdown_data_attribute', 20, 3 );