Bootstrap 5の新機能

チュートリアル
Bootstrap

Bootstrapは最も人気のあるCSSライブラリの一つです。開発者は美しいスタイルやコンポーネントを簡単に使用し、レスポンシブなウェブサイトを作成できます。Bootstrapを使用することで、開発者は特にほとんどのプロジェクトで使用されるコンポーネントについて時間を節約できます。

Bootstrap 5（2021年5月にリリースされた現在のメジャーバージョン）は、新しいコンポーネントの追加、新しいクラス、古いコンポーネントの新しいスタイリング、更新されたブラウザサポート、いくつかの古いコンポーネントの削除など、多くの変更と改善をもたらしました。

この記事では、Bootstrap 5で何が変わったのか、何が廃止されたのか、そして最も興味深いのは、何が新しくなったのかについて説明します。

Bootstrapをいつ使用すべきか（そしていつ使用すべきでないか）

Bootstrapは「世界で最も人気のあるレスポンシブでモバイルファーストのサイトを構築するフレームワーク」と自負しており、GitHubで152kのスターがあることから、その主張はそれほど誇張ではないと思います。特に初心者にとって、Bootstrapは現代でクリーンなウェブサイトを作成する素晴らしい方法です。複雑でモバイルファーストのデザインを実現するのが簡単で、複数のプロジェクトで必要になる可能性のある多くのコンポーネントを提供します。

Bootstrapは学習曲線が低く、ビルドステップを必要としない静的なウェブサイトに適しています。BootstrapのCDNからライブラリを参照するだけです。これは、バンドラーやタスクランナーとの使用を最適化する他の人気のあるCSSフレームワークとは対照的です。

また、Bootstrap が万能薬ではないことにも注意してください。初心者の場合、Bootstrapは乱雑で複雑なマークアップを簡単に生成することができます。また、キロバイト数の点で比較的重量級のライブラリです（ただし、リリースごとに改善されています）ので、その機能の一つか二つしか使用しない場合、最良の選択ではないかもしれません。どんな抽象化でも、基盤となる技術を良く理解し、それを使用するタイミングを知っていることで大いに役立ちます。

Bootstrap 4から5へのアップグレード

Bootstrap 4から5へのアップグレードは一般的に非常に簡単です。Bootstrap 4で利用可能なほとんどのコンポーネント、それらのクラス、およびユーティリティクラスはBootstrap 5でも利用可能です。移行時に最も注目すべき点は、使用しているクラスやコンポーネントが廃止されていないかです。廃止されている場合、ユーティリティクラスを使用して同じ結果を得るための代替手段があります。2番目に注目すべき点は、JavaScriptをその機能の一部として必要とするコンポーネントでdata-*属性からdata-bs-*属性に切り替えることです。（次のセクションでこれについてもっと説明します。）

BootstrapのSassファイルを使用している場合、いくつかの変数とミックスインが名前変更されています。Bootstrap 5には、カスタマイズに関する詳細なセクションがあり、各コンポーネントのドキュメントページにそれぞれのSass変数とミックスインの詳細があります。

変更点

Bootstrap 5は、ライブラリとしてのBootstrapに根本的な変更をもたらします。必要な依存関係やブラウザのサポートなどが変更されるほか、以前のバージョンで使用してきたコンポーネントやクラスにも変化があります。

jQueryが依存関係ではなくなりました

以前のバージョンからの大きな変更として、jQueryはもはやBootstrapの依存関係ではありません。今後は、Popper.jsが必要なことを除き、jQueryなしでBootstrapを完全に活用できます。この変更により、ReactなどのjQueryを必要としないプロジェクトでのBootstrapの使用が容易になります。

ウェブサイトの一部としてjQueryを使用している場合は、引き続きBootstrapとともにjQueryを使用できます。Bootstrapがwindowオブジェクト内のjQueryを検出すると、すべてのコンポーネントをjQueryのプラグインシステムに自動的に追加します。したがって、v4からv5への移行時にはこの変更について心配する必要はありません。必要に応じて引き続きjQueryを使用できます。

しかし、ウェブサイトでjQueryを使用しているが、BootstrapがjQueryを使用しないようにしたい場合はどうすればよいでしょうか？その場合は、ドキュメントのボディ要素にdata-bs-no-jquery属性を追加することができます。

<body data-bs-no-jquery="true">
</body>

BootstrapはjQueryなしでどのように動作するのでしょうか？例えば、v4ではJavaScript内で次のようなコードを使用してToast要素を作成しました。

$('.toast').toast()

Bootstrap 5では、ウェブサイトで既にjQueryを使用している場合、同じコードを使用してToast要素を作成できます。jQueryがない場合は、次のようなコードを使用してToast要素を作成する必要があります。

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

これはバニラJavaScriptを使用して、.toastクラスを持つ要素を文書から照会し、new bootstrap.Toast()を使用して要素上にToastコンポーネントを初期化します。

ブラウザサポートの変更

v4までは、BootstrapはInternet Explorer (IE) 10および11をサポートしていました。Bootstrap 5から、IEのサポートは完全に廃止されました。したがって、ウェブサイトでIEをサポートする必要がある場合、v5に移行する際に注意する必要があります。

ブラウザサポートにおけるその他の変更には以下が含まれます。

  • FirefoxおよびChromeのサポートは現在、バージョン60から開始
  • SafariおよびiOSのサポートは現在、バージョン12から開始
  • Android BrowserおよびWebViewのサポートは現在、バージョン6から開始

データ属性の変更

Bootstrap 5は、JavaScriptをその機能の一部として使用するコンポーネントに一般的に使用されるデータ属性の名前を変更しました。以前は、JavaScriptの機能に依存するほとんどのコンポーネントは、data-で始まるデータ属性を持っていました。たとえば、Bootstrap 4でTooltipコンポーネントを作成するには：

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

ここではdata-toggleとdata-placementの使用に注意してください。Bootstrap 5では、これらのコンポーネントのデータ属性はdata-bsで始まり、Bootstrap属性を簡単に名前空間化できるようになりました。たとえば、Bootstrap 5でTooltipコンポーネントを作成するには：

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

代わりにdata-toggleおよびdata-placementを使用する代わりに、data-bs-toggleおよびdata-bs-placementを使用します。 JavaScriptを使用してBootstrapのコンポーネントを作成する場合、変更を行う必要はおそらくありません。ただし、コンポーネントがデータ属性のみに依存して機能する場合は、dataで始まるすべてのデータ属性をdata-bsで始まるものに変更する必要があります。

不具合修正

Bootstrap 4のドキュメントのブラウザーとデバイスの下には、いくつかのブラウザーで発生する不具合のリストがありました。これらの不具合は、Bootstrap 5の同じリストには表示されていません。次のようなリストが含まれています。

  • iOSでのタッチイベントに対して要素にホバースタイリングが適用されていましたが、これは予期しない動作と見なされており、望ましくありませんでした。
  • Safari 8以上で.containerを使用すると、印刷時に小さいフォントサイズになりました。
  • 境界半径が検証フィードバックによって上書きされていました（ただし、追加の.has-validationクラスを追加することで修正できました）。

Bootstrap 4のドキュメントの不具合と問題のリストには、サポートされなくなったブラウザバージョンで発生した不具合も詳述されています。

その他の変更

小さいか、急激で目立つ変化を引き起こさない多くの変更があります。これらの変更は次のとおりです。

  • Bootstrap 5 では Popper v2 を使用しています。Popper のバージョンをアップグレードすることを確認してください。Popper v1 はもう動作しなくなりました。Bootstrap 5 は @popperjs/core を要求するため、以前の popper.js ではなくなりました。

  • Bootstrap 5 は、ブラウザでモジュールとして使用できるようになりました。Bootstrap の ECMAScript モジュールとしてビルドされたバージョン を使用してください。

  • Bootstrap 4 で使用されていた Libsass と Node Sass は現在非推奨となっており、Bootstrap 5 では Dart Sass を使用して、ソース Sass ファイルを CSS にコンパイルします。

  • いくつかの Sass 変数の値に変更がありました。例えば、$zindex-modalが1050から1060に、$zindex-popoverが1060から1070に変更されました。そのため、Bootstrap 5 のドキュメントで各コンポーネントやユーティリティクラスの Sass 変数を確認することをお勧めします。

  • 以前は、要素を非表示にしながら支援技術で検出可能にするために、クラス.sr-onlyが使用されていました。このクラスは.visually-hiddenに置き換えられました。

  • 以前は、インタラクティブな要素を見えなくしながら、支援技術で検出可能にするために、.sr-only と .sr-only-focusable の両方のクラスを使用する必要がありました。Bootstrap 5では、.visually-hidden なしで .visually-hidden-focusable のみを使用するだけです。

  • 名前付きのソースを持つブロッククォートは、<figure> 要素で囲まれるようになりました。

    以下は、Bootstrap 5でのブロッククォートの例です：

  • 以前のバージョンでは、テーブルスタイルは継承されていました。つまり、テーブルが別のテーブル内にネストされている場合、ネストされたテーブルは親テーブルから継承されます。Bootstrap 5では、テーブルスタイルは互いに独立しており、ネストされていても同様です。

  • ボーダーライブラリは、テーブルをサポートします。これにより、ボーダーカラーライブラリを使用してテーブルのボーダーカラーを変更できます。

    Bootstrap 5でテーブルにボーダーライブラリを使用する例:

  • パンくずリストのデフォルトスタイリングが変更され、以前のバージョンにあったデフォルトのグレー背景、パディング、およびボーダー半径が削除されました。

    Bootstrap 5のパンくずリストのスタイルの例:

  • 位置を参照するクラス名がleftとrightからstartとendに変更されました。例えば、ドロップダウンの.dropleftと.droprightはそれぞれ.dropstartと.dropendに置き換えられました。

  • 前述の点と同様に、l を left、r を right として使用していたユーティリティクラスは、それぞれ s を start、e を end として使用するようになりました。例えば、.mr-* は .me-* になりました。

  • .form-control-range クラスは、スライダー入力に使用されていましたが、現在は .form-range になりました。

  • ガター（余白）は以前の px ではなく、現在 rems で設定されています。

  • .no-gutters は新しいガタークラスの一部として（後のセクションで詳述）.g-0 に名称が変更されました。

  • リンクはホバーしていないときでも、デフォルトで下線が引かれるようになりました。

  • カスタムフォーム要素のクラス名は .custom-* からフォームコンポーネントのクラスに統合され、例えば .custom-check は .form-check に、.custom-select は .form-select に置き換えられました。

  • ラベルに .form-label を追加することが必須になりました。

  • アラート、パンcrumbs、カード、ドロップダウン、リストグループ、モダル、ポップオーバー、そしてツールチップは、いずれも $spacer 変数を使用して同じパディング値を使用するようになりました。

  • バッジ要素のデフォルトのパディングは .25em/.5em から .35em/.65em に変更されました。

  • トグルボタン用のラッパーはチェックボックスやラジオボタンと共に使用されます。マークアップも現在は簡略化されています。Bootstrap 4では、トグルボタンのチェックボックスは以下のマークアップで実現されていました:

    <div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

    Bootstrap 5では、より簡単な方法で実現できます:

    <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Checked</label>

  • ボタンのactiveおよびhover状態の色のコントラストが現在増加しています。

  • カルーセルのチェバンアイコンは現在Bootstrap IconsからSVGを使用しています。

  • 閉じるボタンのクラス名が.closeから.btn-closeに変更され、&times;の代わりにSVGアイコンを使用しています。

  • ドロップダウンのセパレータが現在、より高いコントラストの暗い色で表示されています。

  • ナビバーのコンテンツは現在、コンテナ要素で囲まれるべきです。例えば、Bootstrap 4では以下のようになります：

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  ...
</nav>

    Bootstrap 5では以下のようになります：

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </div>
</nav>

  • ポップオーバー

    コンポーネントの.arrowクラスは.popover-arrowに置き換えられ、トゥールティ コンポーネントの.arrowクラスは.tooltip-arrowに置き換えられました。

  • ポップオーバーのオプションwhiteListはallowListに名称が変更されました。

  • デフォルトのトースト持続時間が5秒に変更されました。

  • ツールチップ、ドロップダウン、ポップオーバーのコンポーネントにおけるfallbackPlacementsのデフォルト値が、配列['top', 'right', 'bottom', 'left']に変更されました。

  • .text-monospaceが.font-monospaceに名称変更されました。

  • .font-weight-*が.fw-*に、.font-style-*が.fst-*に名称変更されました。

  • .rounded-smと.rounded-lgが、0から3までの範囲を持つ.rounded-*のクラスに置き換えられました。

削除された機能

変更はコストを伴うことがあります。新しいバージョンがリリースされ、変更や機能強化が行われると、以前サポートしていたいくつかの古い機能も削除されます。この新しいリリースでは、Bootstrapのいくつかのコンポーネント、ユーティリティクラス、またはその他の機能が削除されています。

ブートストラップ5から削除されたほとんどの項目は、それらをスタンドアロンコンポーネントとして作成する代わりにユーティリティクラスを使用して同じことができるために削除されました。また、削除されたいくつかの項目は使用されず、不要であることが証明されました。

ブートストラップ5から削除されたもののリストは次のとおりです。

  • 前のセクションで述べたように、IEのサポートは完全に削除されました。

  • バッジのカラークラス（例えば、.badge-primary）は、カラーユーティリティクラス（例えば、.bg-primary）を使用することにより削除されました。

  • .badge-pillバッジクラスは、バッジにピルスタイルを与えるものでしたが、同じ結果を得るために.rounded-pillを使用することにより削除されました。

  • クラス.btn-blockは削除されました。同じ結果を得るためには、表示ユーティリティクラス、例えば.d-blockを使用することができます。

  • 以前利用可能であったメイソンリーの.card-columnsカードレイアウトは廃止されました。多くの副作用がありました。

  • ドロップダウンコンポーネントのflipオプションは、Popperの設定に合わせて削除されました。

  • ジャンボトロンコンポーネントは廃止されました。同じ結果を達成するためには、ユーティリティクラスを使用することができます。

  • オーダー用のユーティリティ・クラスの一部（.order-*）が廃止されました。以前は1から12までありましたが、現在は1から5までになりました。

  • メディアコンポーネントが廃止されました。ユーティリティ・クラスで同じ結果を得ることができるためです。

  • .thead-light と .thead-dark クラスが廃止されました。.table-* バリアント・クラスをすべてのテーブル要素に適用できるためです。

  • .pre-scrollable クラスが廃止されました。あまり使用されていないためです。

  • .text-justify クラスが廃止されました。レスポンシブ問題のためで、.text-hide クラスも廃止されました。その方法が古くなっており、使用すべきではありません。そして、.text-* クラスはもはやリンクにホバーやフォーカス状態を追加しません。これらの .text-* クラスは .link-* クラスに置き換えられるべきです。

  • 複数の入力やコンポーネントを持つ入力グループは、もはや .input-group-append や .input-group-prepend を使用する必要がありません。グループに含めるべき要素は、すべて .input-group の子として直接追加できます。

    複数の入力を使用した入力グループの例:

  • .form-group、.form-row、および.form-inlineは、レイアウトクラスによる代替のため廃止されました。

  • .form-textはもはやdisplayプロパティを設定していません。要素の表示は、それ自体がブロック要素かインライン要素かによって決まります。

  • <select>要素でmultipleが指定されている場合、検証アイコンが削除されました。

  • .card-deckクラスはグリッドクラスによる代替のため廃止されました。

  • デフォルトでは負のマージンが無効になりました。

  • .embed-responsive-item要素は、以前のレスポンシブエンド（次のセクションで詳しく説明します）の子孫にスタイリングを適用することにより、廃止されました。

新機能

最後に、Bootstrapはバージョン5でライブラリに多くの刺激的な追加をもたらします。これらの変更には、新機能、新たにサポートされた概念、新しいコンポーネント、新しいユーティリティクラスなどが含まれます。

レスポンシブフォントサイズはデフォルトで有効になりました

レスポンシブフォントサイズ（RFS）は以前のBootstrapのバージョンではありましたが、デフォルトで無効になっていました。Bootstrap 5はRFSをデフォルトで有効にし、Bootstrapのフォントをよりレスポンシブにします。RFSは、Bootstrapが最初にレスポンシブにフォントサイズをスケーリングおよびリサイズするために作成したサイドプロジェクトです。現在は、マージン、パディング、ボックスシャドウなどのプロパティに対しても同じことができます。

それが行うのは、基本的にブラウザの寸法に基づいて最も適切な値を計算し、それらの計算がコンパイル時にcalc関数に変換されることです。RFSを使用することで、以前のpxの使用をremに切り替えることができ、より良いレスポンシブデザインを実現できます。

BootstrapのSassファイルを使用している場合、font-size、margin、paddingなど、RFSによって作成されたミックスインを使用できるようになりました。これにより、コンポーネントやスタイルがレスポンシブであることを確認できます。

右から左へのサポート

Bootstrap 5はRTLCSSを使用して右から左への（RTL）サポートを追加しています。Bootstrapは世界中で使用されているため、RTLサポートをデフォルトで利用可能にすることは大きく重要なステップです。そのため、Bootstrap 5は方向に関する特定の命名法（例えば、leftやrightの使用）をstartとendに代えることで柔軟性を高め、左から右（LTR）および右から左（RTL）のウェブサイトとの互換性を確保しています。例えば、.dropleftは.dropstartに、.ml-*は.ms-*になりました。

Bootstrapがウェブサイト上でRTLスタイリングを認識し適用するためには、<html>のdirをrtlに設定し、ウェブサイトのRTL言語でlang属性を追加する必要があります。例えば、lang="ar"です。

最後に、BootstrapのRTL CSSファイルを含める必要があります:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

これで、あなたのウェブサイトはRTLをサポートするようになります。

新しいブレークポイント

Bootstrap 5は、1400px以上の幅を持つデバイスを対象とする新しいブレークポイントxxlをサポートしています。以前は、最高のブレークポイントは1200px以上の幅を持つデバイスを対象とするxlでした。この変更により、より大きな画面を持つデバイスのためのより良いレスポンシブデザインが可能になり、xlブレークポイントでは十分ではありませんでした。

新しいブレークポイントの使用は、他のすべてのブレークポイントに似ています。たとえば、1400px以上のデバイス幅にパディングを適用するには、クラス.p-xxl-2を使用できます。

改善されたドキュメント

これはライブラリ自体の一部ではありませんが、Bootstrapのドキュメントの改善について触れておく価値があります。Bootstrap 5のドキュメントは、より詳細な内容を持つコンポーネントが現在は独自のセクションになっているため、コンテンツの整理がより良くなっています。たとえば、Bootstrap 4のフォームコンポーネントは、すべてのコンポーネントが詰め込まれた1ページでした。Bootstrap 5では、フォームコンポーネントのドキュメントは独自のセクションであり、フォームコントロール、セレクト、入力グループなど、異なるサブコンポーネントのサブセクションがあります。

さらに、ドキュメント内のナビゲーションは、特に小さな画面ではサイドバーを通じて今や簡単です。Bootstrap 4では、目次のサイドバーは小さなデバイスでは表示されず、ページ上の必要なセクションを見つけるのが難しかったです。Bootstrap 5では、目次はすべての画面サイズで常に表示されます。

さらに、Bootstrap 5では、各コンポーネントのページですべてのSass変数、ミックスイン、関数を見つけることができます。以前は、Bootstrapのテーマ変数を変更する方法についていくつかの詳細があるテーマページだけでした。今では、カスタマイズセクションが独自に存在し、Bootstrapのテーマをカスタマイズする方法に関するより詳細な情報があります。

新しいコンポーネント

Bootstrap 5はライブラリにいくつかの新しいコンポーネントを導入しています。これらのコンポーネントの中には、他のコンポーネントの一部であったものが、現在は独立したコンポーネントとして存在しています。

アコーディオン

以前は、アコーディオンは折りたたみ可能なコンポーネントの一部であったが、Bootstrap 5ではアコーディオンは新しいコンポーネントとなっています。アコーディオンには、その中にアコーディオンアイテムのリストを保持する新しいクラス.accordionが付属しています。また、Bootstrap 4の以前のスタイルと比較して、アコーディオンには新しいスタイルが導入されています。アコーディオンコンポーネントの例を以下に示します。

Bootstrap 5はまた、アコーディオンのスタイリングを変更するためのいくつかのクラスも追加しています。例えば、.accordion-flushはデフォルトのアコーディオンの背景や境界線の色などのスタイリングを削除します。また、data-bs-parent属性を.accordion-collapse要素から削除することで、アコーディオンアイテムを常に開いた状態にすることもできます。

オフキャンバス

もう一つの新しいコンポーネントはオフキャンバスで、オーバーレイのサイドバーを作成することができます。これは、通常、ウェブサイト上で小さなデバイスでメニューを表示するために使用されるサイドバーです。コード.offcanvas-startを使用してLTRの左、.offcanvas-topを使用して上、.offcanvas-endを使用してLTRの右、.offcanvas-bottomを使用して下に配置することができます。また、オフキャンバスにバックドロップが必要かどうかを指定することもできます。オフキャンバスコンポーネントの使用例を以下に示します。

フローティングラベル

フローティングラベルは、フォームコンポーネントの新しい部品です。これにより、入力欄のラベルが最初はプレースホルダーのように見え、入力欄がフォーカスを受けるとラベルが入力欄の上部に浮かび上がるように作成できます。また、<select>要素や<textarea>要素でも機能します。フローティングラベルの使用例を以下に示します:

その他の追加

新しいコンポーネントだけでなく、既存のコンポーネント用に新しいクラス、新しいユーティリティクラス、新しいヘルパークラスなどが追加されています。Bootstrap 5で追加された他の新機能のリストを以下に示します:

  • クラス.row-cols-autoが追加されました。これにより、列がその自然な幅を取ることができます。

  • A new utility class has been added to justify content called .justify-content-evenly.

  • 以前は、列間のガウターはスペーシングユーティリティを使用して実現されていました。現在は、新しいガウターレイアウトユーティリティを使用して列間のガウターを設定できます。水平ガウターを設定するには.gx-*を使用します。垂直ガウターを設定するには.gy-*を使用します。水平および垂直の両方のガウターを設定するには.g-*を使用します。

  • A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.

  • テーブルで垂直方向の配置ユーティリティクラスを使用できるようになりました。

  • A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.

  • パンくずリストの区切り文字を--bs-breadcrumb-dividerというCSS変数を使用して変更するオプションが現在利用可能です。

    区切り文字を>>に変更する例:

  • カルーセルには.carousel-darkクラスを使用する新しいダークバリアントがあり、ドロップダウンには.dropdown-menu-darkを使用する新しいダークバリアントがあります。

  • ドロップダウンには、ドロップダウンメニューがいつ閉じるかのデフォルト動作を変更できる新しい自動閉じるオプションがあります。デフォルトでは、ドロップダウンメニューは、ドロップダウンの外側やドロップダウンアイテムのいずれかをクリックすると閉じます。data-bs-auto-closeデータ属性をinsideに設定することで、ドロップダウンアイテムのいずれかをクリックしたときにのみ閉じるように変更できますが、外側をクリックしたときは閉じません。また、outsideに設定すると、ドロップダウンの外側をクリックしたときのみ閉じるようになります。最後に、falseに設定すると、ドロップダウンボタンを再びクリックしたときのみ閉じるようになります。ドロップダウンをJavaScriptで初期化する場合は、データ属性の代わりにautoCloseオプションを使用できます。使用例を以下に示します：

  • フォーム内のファイル入力に対してスタイリングが改善されました。

  • A new color input has been added, using the class .form-control-color.

  • A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

  • Sass変数に新たなカラーの色合いと濃淡が追加されました。

  • 新たに2つのディスプレイヘッダーサイズ.display-5と.display-6が追加されました。

  • クローズボタンに新たなホワイトバリアント.btn-close-whiteが追加されました。

  • Dropdownには.dropdown-itemsを<li>要素で囲んだものを含めることができるようになりました。

  • リストグループ内のアイテムは、新しいクラス.list-group-numberedを使用して番号付けできるようになりました。

  • ページネーションコンポーネント内のリンクには、そのスタイルを改善するtransitionプロパティがあります。

  • ボディの背景色を白に設定する新しい.bg-bodyクラスが追加されました。

  • 要素のtop、left、right、bottomプロパティを設定するための新しい位置ユーティリティクラスがあります。例えば、.top-0です。

  • 絶対配置要素をそれぞれ水平方向と垂直方向に簡単に中央に配置するための新しい.translate-middle-xおよび.translate-middle-yクラスが追加されました。

  • 幅指定の新しいユーティリティクラス.border-*が1から5まで追加されました。

  • 新しい表示ユーティリティ.d-gridと新しいギャップユーティリティ.gapが追加されました。

  • 新しい行高さユーティリティ.lh-1, .lh-sm, .lh-baseおよび.lh-lgが追加されました。

  • 以前のレスポンシブ埋め込みヘルパーを置き換える新しい比率ヘルパーが追加されました。クラス名はembed-responsiveをratioに、byをxに置き換えることで変更されました。例えば、以前は.embed-responsive-16by9でしたが、現在は.ratio-16x9です。

  • A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.

  • フォントサイズを調整するための.fs-*ユーティリティがあり、RFSがデフォルトで有効になっています。

結論

Bootstrapは過去10年のほとんどをリーディングカンポジアCSSライブラリとして過ごしてきました。開発者が簡単にレスポンシブなウェブサイトを構築し、良いユーザーエクスペリエンスを提供できるようにしています。Bootstrap 5の追加と変更により、このプロセスはさらに簡単になり、ウェブサイトのデザインを改善し、良いユーザーエクスペリエンスを提供することができます。Bootstrap 4を使用していて、Bootstrap 5に移行することを考えている場合、移行は簡単で、多くの変更をする必要はありません。

Bootstrap 5に関するよくある質問（FAQ）

Bootstrap 4とBootstrap 5の主な違いは何ですか？

Bootstrap 4とBootstrap 5の最も重要な違いは、後者でのjQueryの削除です。Bootstrap 5は今、バニラJavaScriptを使用しており、それが軽くて速くなっています。別の大きな変化は、ドキュメントの静的サイトジェネレーターにJekyllからHugoへの切り替えです。Bootstrap 5はまた、新しいユーティリティAPI、拡張されたカラーパレット、および更新されたフォームコントロールを導入しています。

Bootstrap 4からBootstrap 5への移行方法は？

ブートストラップ4からブートストラップ5への移行にはいくつかのステップが含まれます。まず、jQueryを削除し、それをバニラJavaScriptで置き換える必要があります。次に、ブートストラップのCSSとJSリンクを最新バージョンに更新します。古いクラスをブートストラップ5で導入された新しいクラスで置き換える必要もあります。最後に、フォームコントロールを更新し、ブートストラップの公式移行ガイドをチェックして追加の変更点があるか確認してください。

ブートストラップ5にはどのような新機能がありますか？

ブートストラップ5はいくつかの新機能を導入しています。今回はjQueryの代わりにバニラJavaScriptを使用し、より軽量で高速になりました。また、より柔軟なカスタマイズが可能な新しいユーティリティAPI、拡張されたカラーパレット、更新されたフォームコントロール、新しいSVGアイコンライブラリを導入しています。ドキュメントもJekyllからHugoに切り替えることで改善されています。

ブートストラップ5の新しいユーティリティAPIはどのように機能しますか？

ブートストラップ5の新しいユーティリティAPIは、より柔軟なカスタマイズを可能にします。独自のユーティリティクラスを作成し、生成されるユーティリティを制御し、既存のユーティリティを変更することができます。これにより、ブートストラップを特定のニーズや好みに合わせてカスタマイズするのが簡単になります。

ブートストラップ5の拡張されたカラーパレットの目的は何ですか？

ブートストラップ5の拡張されたカラーパレットは、より多くのカスタマイズオプションを提供します。より広範囲の色を含むため、より多様で視覚的に魅力的なデザインを作成することができます。これにより、ウェブサイトやアプリケーションの配色をブランドの色合いに合わせるのが簡単になります。

ブートストラップ5ではフォームコントロールがどのように更新されましたか？

Bootstrap 5では、フォームコントロールがCSSを使用するように更新され、JavaScriptの代わりになり、より優れたパフォーマンスとシンプルさを実現しています。また、より現代的でクリーンなデザインで新しいフォームコントロールが導入されており、カスタムフォームは統一性を高めるために新しいフォームコントロールに置き換えられています。

Bootstrap 5の新しいSVGアイコンライブラリとは何ですか？

Bootstrap 5の新しいSVGアイコンライブラリは、1,000を超える無料で高品質なアイコンを提供しています。これらのアイコンはカスタマイズ可能で、ボタン、メニュー、アラートなど、ウェブサイトやアプリケーションのさまざまな部分で使用できます。また、アクセシビリティのために最適化されています。

Bootstrap 5でのドキュメントはどのように改善されましたか？

Bootstrap 5では、静的サイトジェネレーターがJekyllからHugoに切り替えられ、ドキュメントの使用がより迅速かつ簡単になりました。さらに、Bootstrapを効果的に使用する方法を理解するためのより多くの例と説明が含まれています。

Bootstrap 5はすべてのブラウザで互換性がありますか？

Bootstrap 5は、Chrome、Firefox、Safari、Edgeなど、主要なブラウザの最新バージョンと互換性があります。ただし、Internet Explorerはサポートされなくなりました。これは、Internet Explorerが古くなり、多くの現代のウェブ技術をサポートしていないためです。

Bootstrap 5を使い始めるにはどうすればいいですか？

Bootstrap 5を使い始めるには、公式のBootstrapウェブサイトからダウンロードするか、CDNを使用してプロジェクトに含めることができます。Bootstrapを取得したら、HTMLファイルでそのクラスやコンポーネントを使用し始めることができます。詳細情報や例については、公式のBootstrapドキュメントを確認してください。

Source:
https://www.sitepoint.com/bootstrap-5-new-features-examples/