Bootstrap 5のサンプル集とTailwindでの書き方

Bootstrap 5のサンプル集

Bootstrap 5サンプル集：ナビバー、カード、グリッド、モーダルとTailwind | We.Inc

ナビバー、カード、グリッド、フォーム、モーダル、アラート、ボタンをBootstrap 5.3で実際に表示するサンプル集です。それぞれにTailwindでの書き方とクラス変換ツールを用意しています。

Bootstrap 5は、用意されたクラスを組み合わせてレイアウトを作ります。メニューにはnavbar navbar-expand-lg、12カラムのグリッドにはrowとcol-md-4、コンテンツの枠にはcard、ボタンにはbtn btn-primary、メッセージにはalert alert-successを使います。CDNから5.3.3のCSSを読み込み、モーダルやドロップダウンのような動きのある部品を使うときだけJavaScriptのバンドルを追加します。

Bootstrap 5の基本クラス

コンポーネント
Bootstrap 5
Tailwindでの考え方

コンテナ
mx-auto max-w-7xl px-4

グリッドの行と列
row, col-md-4
grid md:grid-cols-3 gap-6

カード
card, card-body
rounded-xl border p-6

メインのボタン
btn btn-primary
rounded-md bg-blue-600 px-4 py-2 text-white

アラート
alert alert-warning
rounded-md border bg-amber-50 p-4

以下の各コンポーネントは、Bootstrap 5.3向けに新しく書き起こし、その場で表示しています。横には同じものをTailwind CSSで書いた版を並べているので、2つの書き方を比べたり、ページをどちらか一方からもう一方へ移植したりできます。よくある1対1の置き換えには、クラス変換ツールが使えます。

必要なコンポーネントまでスクロールします。左側のBootstrapのコードは、本物のBootstrapのスタイルシートでその場に描画されます。
btn-outline-dangerやcol-lg-3など、別のバリエーションを試したいときはコードを編集します。
プロジェクトでTailwindを使っている場合は、その下にあるTailwind版をコピーします。
クラスの一覧を変換ツールに貼り付ければ、よく使うユーティリティをどちらの方向にも変換できます。

bootstrap.bundle.min.jsを読み込むのは、モーダル、ドロップダウン、折りたたみ、ツールチップ、ポップオーバーを使う場合だけにしましょう。バンドルには、ドロップダウンとツールチップに必要なPopperが含まれています。
コンポーネントのクラスを1つずつ上書きするのではなく、--bs-primary-rgbのようなCSS変数か、コンパイル前のSassでカスタマイズしましょう。
Bootstrap 5.3にはカラーモードがあります。html要素や任意の囲み要素にdata-bs-theme="dark"を付けると、その範囲がダークの配色に切り替わります。
CDNのリンクでは正確なバージョンを固定し、公式ドキュメントにあるintegrityハッシュを付けましょう。そうすれば、中身が変わったファイルが紛れ込むことはありません。

よくある質問

Bootstrap 5のナビバーをスマートフォンで折りたたむには？

navにnavbar-expand-lg（またはmd、sm）を指定し、data-bs-toggle="collapse"と、メニューのidを指すdata-bs-targetを持つnavbar-togglerボタンを追加して、リンクをcollapse navbar-collapseのdivで囲みます。開閉の切り替えには、BootstrapのJavaScriptバンドルが必要です。

Bootstrapのグリッドは何列ですか？

1行につき12列です。col-6は半分、col-4は3分の1を占め、col-md-4のようにブレークポイントの接頭辞を付けると、その幅以上で適用されます。ブレークポイントは6つあり、576px未満の既定に加えて、sm、md、lg、xl、xxlがそれぞれ576、768、992、1200、1400ピクセルです。

BootstrapとTailwindのどちらを使うべきですか？

完成したコンポーネントと、デザインの手間が少ない一般的な見た目がほしいならBootstrapのほうが早く作れます。独自のデザインがあり、コンポーネントを自分で組み立てるならTailwindのほうが早く作れます。どちらもMITライセンスで、しっかりメンテナンスされています。

Bootstrap 5にjQueryは必要ですか？

いいえ。Bootstrap 5はjQueryへの依存をなくしました。JavaScriptのプラグインは素のJavaScriptで書かれており、唯一の依存関係であるPopperもバンドルファイルに含まれています。

このページのモーダルが開いたり閉じたりしないのはなぜですか？

サンプルはスクリプトを無効にしたサンドボックスのフレームで動いているため、モーダルはposition-staticとd-blockのクラスを使って、最初から開いた状態で表示しています。実際のページでは、JavaScriptのバンドルが開閉とフォーカスの管理を行います。

Bootstrapを選ぶべきとき、Tailwindを選ぶべきとき

Bootstrapが真価を発揮するのは、社内ツール、管理画面、手早く作るマーケティング用サイトなど、標準の見た目で問題がなく、個性的なスタイルよりきちんと動く部品が大事な場面です。書くクラスが少なく済み、モーダルやドロップダウンでは検証済みのキーボード操作が手に入ります。
Tailwindが真価を発揮するのは、デザイナーから独自のレイアウトを渡されたときです。独自デザインに合わせるためにBootstrapのカードの余白やボタンのスタイルと格闘するより、ユーティリティでカードを一から組むほうが早く済みます。しかも、スタイルシートに残るのは実際に使ったクラスだけです。

ライセンスとクレジット

Bootstrapは、The Bootstrap AuthorsによってMITライセンスで公開されています。商用の制作物にも使えますが、CSSとJavaScriptのファイルの先頭に付いているライセンスのコメントは残してください。このページのマークアップは当社が独自に書いたもので、自由にコピーしてかまいません。

コンポーネント：Bootstrap 5.3の実物とTailwind版を並べて

各フレームでは、当社でホストしている無改変のBootstrap 5.3.3のスタイルシートを読み込んでいます。ご自身のプロジェクトでは、下に示すリンクで公式のCDNから読み込んでください。フレーム内ではスクリプトが無効なので、各コンポーネントはCSS側の見た目だけが表示されます。

自分のプロジェクトでBootstrap 5.3.3を読み込む

スタイルシートはheadに、バンドルはbodyの閉じタグの直前に置きます。getbootstrap.comからintegrityハッシュをコピーし、integrity属性とcrossorigin属性として追加しましょう。