83.3K+ダウンロード
CSSコンポーネントシステム · 新しいリソース

Bootstrapデザインシステム.

Bootstrap 5.3.8の実際のスペーシングスケール、セマンティックカラー、レスポンシブグリッド、コンポーネントのAPIを使います。動作する予約フォーム、エラー概要、テーブルフィルター、モーダル、カラーモード切り替えを試し、ドキュメントに記載されたコードを再利用してください。

OpenDesign をダウンロード DESIGN.md をダウンロード
OpenDesign ガイド8章66件のリファレンス項目オリジナルアプリケーションガイド
01

Bootstrapデザインシステムのインターフェースプレビュー

予約を絞り込み、入力項目を検証し、ネイティブモーダルで確認できます。ライトモードとダークモードの切り替えにも対応しています。

機器の予約 · Bootstrap 5.3.8完全な例を開く
ネイティブのBootstrap 5.3.8 CSSとJavaScriptをローカルで配信しています。予約データとアプリケーションの動作は、説明用に独自に用意したものです。 · 実装リファレンス
02

Bootstrapデザインシステムのデザインリファレンス

Bootstrap 5.3.8の標準コンパイル済みCSSと、バージョン5.3のドキュメントを参照しています。ここに記載する値は標準値であり、必須のブランドルールではありません。remとpxの換算はルートフォントサイズを16pxと仮定しています。レスポンシブなフォントサイズは、大画面向けの上限に達する前は異なる場合があります。周囲のOpenDesignページは独自のタイポグラフィを維持します。

セマンティックカラーと界面表面の役割

ソース
名前 / ルール値 / 設定用途
--bs-primary#0d6efd 主要アクションとリンクの基本色。
--bs-secondary#6c757d セカンダリテーマの色群。画面幅に応じて変化する本文のセカンダリテキストとは別の役割です。
--bs-success#198754 ポジティブステータスの基本色。ラベルも併記してください。
--bs-danger#dc3545 エラー／破壊的操作向けテーマの基本色。
--bs-warning#ffc107 警告テーマの基本色。前景色とのコントラストを確認してください。
--bs-info#0dcaf0 情報テーマの基本色。
--bs-body-bg#fffライトモードのページ背景。
--bs-body-color#212529 ライトモードの本文色。
--bs-secondary-bg#e9ecef ライトモードのセカンダリ背景。
--bs-tertiary-bg#f8f9fa ライトモードの控えめなパネル背景。
--bs-primary-bg-subtle#cfe2ff ライトモードの主要色を薄く帯びた背景。
--bs-primary-text-emphasis#052c65 primary-subtleの背景に組み合わせるテキスト。
--bs-border-color#dee2e6 ライトモードのボーダーの役割。

本文のタイポグラフィと読みやすい階層

ソース
名前 / ルール値 / 設定用途
--bs-body-font-size1rem本文の標準サイズ: 1rem（通常は16px）。
--bs-body-line-height1.5単位なしの倍率。行の高さは通常24pxです。
--bs-body-font-weight400本文の標準ウェイト。
--bs-body-font-familyvar(--bs-font-sans-serif)Bootstrapが提供するシステムUIフォントスタック。
--bs-font-monospaceSFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospaceコードと技術的な値には等幅フォントスタックを使用します。

見出しサイズとディスプレイ用ユーティリティ

ソース
名前 / ルール値 / 設定用途
h1 / .h12.5rem大画面向けの上限値。h1〜h4は標準でレスポンシブなフォントサイズを使用します。
h2 / .h22rem大画面向けの上限値。h1〜h4は標準でレスポンシブなフォントサイズを使用します。
h3 / .h31.75rem大画面向けの上限値。h1〜h4は標準でレスポンシブなフォントサイズを使用します。
h4 / .h41.5rem大画面向けの上限値。h1〜h4は標準でレスポンシブなフォントサイズを使用します。
h5 / .h51.25rem固定の見出し標準サイズ。
h6 / .h61rem固定の見出し標準サイズ。
.lead1.25rem / weight 300導入文向け。見出しの代わりには使用しないでください。
.small0.875em相対的に小さいテキスト。メタデータなどに限定して使用します。

スペーシングユーティリティのスケール

ソース
名前 / ルール値 / 設定用途
00m/p/gap/gユーティリティと併用します。例: p-0。
10.25remm/p/gap/gユーティリティと併用します。例: p-1。
20.5remm/p/gap/gユーティリティと併用します。例: p-2。
31remm/p/gap/gユーティリティと併用します。例: p-3。
41.5remm/p/gap/gユーティリティと併用します。例: p-4。
53remm/p/gap/gユーティリティと併用します。例: p-5。
ms / meinline start / end論理プロパティによる辺の指定。旧バージョンのBootstrapにあるml/mrとは異なります。
p-3 p-md-41rem → 1.5rem at mdこの例で使用しているレスポンシブなパディング。
gap-20.5remflex/gridの子要素間の間隔。

レスポンシブグリッドのブレークポイント

ソース
名前 / ルール値 / 設定用途
xs / .col-0基本サイズ。xsの接頭辞は付きません。
sm / .col-sm-576pxスモールサイズ。`.container` の最大幅は540pxです。
md / .col-md-768pxミディアムサイズ。`.container` の最大幅は720pxです。
lg / .col-lg-992pxラージサイズ。`.container` の最大幅は960pxです。
xl / .col-xl-1200px特大サイズ。`.container` の最大幅は1140pxです。
xxl / .col-xxl-1400px標準で最も大きいサイズ。`.container` の最大幅は1320pxです。
Grid columns12col-lg-7とcol-lg-5の組み合わせで、1行を埋めます。
Default horizontal gutter1.5rem列の左右に0.75remのパディングを設定し、行側で負のマージンを使って調整します。

ボーダー、角丸、影

ソース
名前 / ルール値 / 設定用途
--bs-border-width1px標準のボーダー幅。
--bs-border-radius0.375rem入力欄、カード、標準の角丸。
--bs-border-radius-sm0.25rem控えめな角丸。
--bs-border-radius-lg0.5remやや大きめの角丸。
--bs-border-radius-xl1rem大きめの背景向け角丸。
--bs-border-radius-xxl2rem特大の背景向け角丸。
--bs-border-radius-pill50remピル形状。コンポーネントの実測半径ではありません。
--bs-box-shadow-sm0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)控えめな影。
--bs-box-shadow0 0.5rem 1rem rgba(0, 0, 0, 0.15)標準の影。
--bs-box-shadow-lg0 1rem 3rem rgba(0, 0, 0, 0.175)強い影。すべての背景に適用しないでください。

ボタンのサイズと状態変数

ソース
名前 / ルール値 / 設定用途
--bs-btn-padding-x0.75remボタンの標準の左右パディング。
--bs-btn-padding-y0.375remボタンの標準の上下パディング。
--bs-btn-font-size1remボタンラベルの標準サイズ。
--bs-btn-line-height1.5ラベルの標準行高倍率。
--bs-btn-border-width1px標準のボーダー幅。
--bs-btn-border-radiusvar(--bs-border-radius)ボタンの標準角丸。
--bs-btn-disabled-opacity0.65見た目上のスタイルです。実際のdisabled属性も併用してください。

ライト／ダークモードでの役割の変化

ソース
名前 / ルール値 / 設定用途
--bs-body-bglight #fff / dark #212529ページ背景はdata-bs-themeに応じて変わります。
--bs-body-colorlight #212529 / dark #dee2e6前景色は背景に合わせて変わります。
--bs-border-colorlight #dee2e6 / dark #495057テーマに応じて変わるボーダー。
--bs-primary-bg-subtlelight #cfe2ff / dark #031633色付きのステータス背景はモードに応じて変わります。
--bs-primary-text-emphasislight #052c65 / dark #6ea8fe対応するsubtle背景と併用します。
data-bs-themelight | darkhtml全体、または局所的なサブツリーに設定します。
03

Bootstrapデザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

DESIGN-bootstrap.md

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

ガイドをダウンロード

Bootstrap デザインシステムのCSSとJavaScriptの役割を選ぶ

単一のスタイルシートと、必要に応じて使うコンポーネント動作

Bootstrapのコンパイル済みスタイルシートは、グリッド、タイポグラフィ、ユーティリティ、コンポーネントの外観を提供します。JavaScriptのバンドルを追加すると、Modal、Collapse、Dropdownなどのインタラクティブなプラグインが使えます。スタイル付きのボタンにはJavaScriptは不要ですが、data-bs-toggleを使うモーダルのトリガーには必要です。動作するプレビューでは、対応する5.3.8のスタイルシートとバンドルをローカルで読み込み、実際の仕様に沿った動作を各コントロールで確認できます。

この OpenDesign ガイドから

予約テーブルの絞り込み、エラー概要、ローカルでの行追加はアプリケーション側のコードです。この違いを明確にしておけば、Bootstrap自体の機能と誤解させることなく、架空のレコードをサービスに置き換えられます。

  • CSS: レイアウト、タイポグラフィ、ボタン、入力欄、テーブル、状態のスタイル。
  • Bootstrap JavaScript: モーダルの開閉、バックドロップ、Escapeキー、フォーカスの動作。
  • アプリケーションJavaScript: 検証メッセージ、レコードの絞り込み、ローカルデータの更新。

関連する仕様を確認する

コンパイル済みCSSとSassビルドを選ぶ

すぐに使い始めたい場合や、標準のユーティリティ一式をそのまま利用できる製品には、コンパイル済みのCSSを使用します。ビルド時にテーママップ、ユーティリティの生成、グリッドを変更する場合は、Sassソースを使用します。実行時のCSSカスタムプロパティはコンポーネント単位のカスタマイズに便利ですが、ルートのカラー変数を変更しても、コンパイル済みのすべてのバリエーションが再生成されるわけではありません。

scss
$primary: #3159a5;
$border-radius: .5rem;
@import "bootstrap/scss/bootstrap";

コードリファレンス

関連する仕様を確認する

Bootstrapデザインシステムでセマンティックカラーとカラーモードを使う

ステータスの背景色と前景色を組み合わせる

予約バッジではbg-primary-subtleとtext-primary-emphasisを使用します。これらは対応するセマンティックな役割のため、data-bs-themeが変わると前景色と背景色の両方が適応します。単色の青い背景に任意のグレーのテキストを組み合わせると、この関係が失われます。「予約済み」「使用中」「下書き」はテキストラベルでも示されるため、状態を色だけで伝えることはありません。

html
<span class="badge text-primary-emphasis bg-primary-subtle">Reserved</span>
<section data-bs-theme="dark">
  <div class="bg-body text-body border rounded p-3">Theme-scoped content</div>
</section>

コードリファレンス

関連する仕様を確認する

コンポーネント単位でカスタマイズする

特定のアクションだけをカスタマイズする場合は、その要素の--bs-btn-*プロパティを上書きします。通常時の背景色だけでなく、hoverとactiveの値も設定してください。以下の例はアプリケーション独自のバリエーションであり、Bootstrapの標準設定ではありません。このクラスは対象のボタンだけに付け、ページ内の別の場所にあるすべての主要アクションに意図せず影響しないようにしてください。

CSS
.btn-reserve {
  --bs-btn-color: #fff;
  --bs-btn-bg: #3159a5;
  --bs-btn-border-color: #3159a5;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #274783;
  --bs-btn-hover-border-color: #274783;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #203a6b;
  --bs-btn-active-border-color: #203a6b;
}

コードリファレンス

関連する仕様を確認する

Bootstrapデザインシステムの実際のタイポグラフィスケールを使う

文書の意味と見た目のサイズを分ける

プレビューのメインタイトルは、h3クラスを適用したh1です。ページのメイン見出しであることは変わりませんが、ツールに適した小さめの表示サイズになります。セクション見出しにはh2要素とh5のスタイルを使用しています。Bootstrapには要素のデフォルトスタイルと同等の見出しクラスが用意されているため、文書構造のレベルを飛ばさずにこの使い分けができます。

本文のデフォルトの文字サイズは1rem、行高は1.5です。h1からh4までは、参照表に記載された値に達するまで画面幅に応じて拡大します。そのため、ある幅で撮影したスクリーンショットだけでは、文字サイズ全体の設計はわかりません。単一のビューポートで測ったピクセルサイズをコピーするのではなく、コンパイル済みのスタイルか、ドキュメントに記載されたSassの動作を参照してください。

関連する仕様を確認する

セカンダリテキストにはテーマに対応する役割を与える

text-body-secondaryは本文のカラーモードに応じた色になります。機器のタイトルの下に表示する所有者名など、レコードを補足する情報に適しています。smallクラスは周囲の文字よりサイズを小さくするため、すべてのフィールドラベルに使うとフォームが読み取りにくくなります。ラベルは通常のフォームサイズにし、コンパクトなテキストはヒントやメタデータに限定してください。

html
<h1 class="h3">Equipment reservations</h1>
<p class="text-body-secondary">Review availability before booking.</p>
<small class="text-body-secondary">Local demonstration data</small>

コードリファレンス

関連する仕様を確認する

Bootstrapデザインシステム：スペーシングユーティリティとグリッドを組み合わせる

任意の余白ではなくスケールを使う

p-3は1rem、p-4は1.5rem、p-5は3remのパディングを表します。これらのラベルはピクセル数そのものではなく、スケール上のキーです。プレビューではp-3 p-md-4を使用し、768pxで外側のパディングを広げています。また、mb-3でフィールドグループの間に1remの余白を設けています。これはこの例における具体的な方針であり、新たな公式スペーシングスケールではありません。

html
<div class="p-3 p-md-4">
  <div class="d-flex flex-wrap gap-2 mb-3">
    <button class="btn btn-primary">Review</button>
    <button class="btn btn-outline-secondary">Reset</button>
  </div>
</div>

コードリファレンス

関連する仕様を確認する

行と列の関係を保つ

関連する仕様を確認する

Bootstrapデザインシステム：明示的な関連付けでフィールドを構築する

ラベル、ヒント、フィードバックを関連付ける

form-labelは実際のlabel要素にスタイルを適用します。forの値はinputのidと一致させてください。form-controlはテキスト入力などに、form-selectはselectに適用します。プレビューではaria-describedbyでヒントとエラーのIDを関連付け、実際の制約にはrequiredを使用しています。クラス名だけでは、こうしたセマンティックな関連付けは自動的に行われません。

html
<label for="equipment" class="form-label">Equipment</label>
<select id="equipment" class="form-select" required
  aria-describedby="equipment-error">
  <option value="">Choose equipment</option>
  <option>Camera kit A</option>
</select>
<div class="invalid-feedback" id="equipment-error">Choose equipment.</div>

コードリファレンス

関連する仕様を確認する

実際の無効状態と、たどり着ける要約を用意する

送信時に各フィールドを検証し、is-invalidとaria-invalidを設定して、エラーのあるフィールドへのテキストリンクを作成し、要約にフォーカスを移します。フィールドを修正すると、そのフィールドの状態だけが更新され、ほかの回答は保持されます。このアプリケーション層は不可欠です。Bootstrapのバリデーションのドキュメントでは、独自の視覚的なフィードバックだけでは支援技術に十分伝わらないと説明されています。

  1. フィールドを無効としてマークする前に、実際の制約の結果を確認する。
  2. エラーテキストをフィールドに関連付け、無効状態を伝える。
  3. 送信後は、役立つ要約または最初の無効なフィールドにフォーカスを置く。

関連する仕様を確認する

Bootstrapデザインシステム：意味を損なわずにレコードを表示・絞り込む

比較可能なデータにはテーブルコンポーネントを使う

このテーブルには列見出し、行見出し、キャプションがあります。table-hoverはホバー時のスタイルを適用しますが、行をボタンにするものではありません。絞り込みでは一致する行の表示状態を変更し、aria-liveで結果件数を更新します。表示ステータスはバッジ内のテキストでも示されるため、カラーモードが変わっても意味が伝わります。

html
<div class="table-responsive">
  <table class="table table-hover">
    <caption>Fictional equipment reservations</caption>
    <thead><tr><th scope="col">Equipment</th><th scope="col">Status</th></tr></thead>
    <tbody><tr><th scope="row">Camera kit A</th><td>Reserved</td></tr></tbody>
  </table>
</div>

コードリファレンス

関連する仕様を確認する

テーブルのスクロールをデータ領域内にとどめる

幅の広いテーブルが収まらない場合、table-responsiveで水平方向にスクロールできるようにします。切り抜き領域からはみ出す必要のあるドロップダウンをこのラッパー内に配置する場合は、問題がないか確認してください。この例では、テーブルの上に絞り込みを配置しています。モバイルではデータ領域だけを水平方向にスクロールできるようにし、ページ全体はビューポート内に収めてください。

関連する仕様を確認する

Bootstrapデザインシステム：モーダルで選択内容を確認する API

フォームが有効な場合にのみ開く

このインタラクティブな例では、Bootstrap Modalインスタンスを作成するか既存のものを再利用し、検証に成功した場合にのみshowを呼び出します。これにより、確認が必要なエラーをレビュー画面で覆い隠すのを防ぎます。モーダル内のテキストには現在の値が反映されます。「詳細を編集」を選ぶと、フォームの内容を保持したままモーダルが閉じます。

JavaScript
const element = document.getElementById("review-modal");
const modal = bootstrap.Modal.getOrCreateInstance(element);
// Run after validation and after populating the review text.
modal.show();
element.addEventListener("hidden.bs.modal", () => {
  document.querySelector("#reservation button[type=submit]").focus();
});

コードリファレンス

関連する仕様を確認する

モーダルをコンポーネントのライフサイクルとして扱う

Bootstrapがバックドロップとトランジションを制御します。displayを手動で切り替えるのではなく、メソッドとイベントを使用してください。手動で切り替えると、フォーカスやバックドロップの状態に一貫性がなくなる場合があります。このデモでは、確定するとローカルのテーブルに行を追加してモーダルを閉じます。予約サービスへの呼び出しは行いません。成功メッセージには、このローカルでの処理結果を正確に記載しています。

関連する仕様を確認する

Bootstrapデザインシステム：このBootstrapの例を統合・拡張する

CSSとJavaScriptは同じリリースのものを読み込む

埋め込みのサンプルでは、ローカルに保存されたBootstrap 5.3.8 CSSとバンドルファイルを読み込みます。データ属性とModal APIは、このリリースのものです。Viteアプリケーションでは、セットアップのセクションに記載されているように、コンパイル済みのCSSと必要なプラグインをインポートしてください。バンドルを読み込んだうえで、別のラッパーを使って同じプラグインをもう一度初期化するのは避けてください。

関連する仕様を確認する

実際のコンポーネント仕様に沿って拡張する

  • サンプルを使って、フォーカス、モーダルの閉じ方、テーマの変更を確認する。
  • アプリケーションのデータ操作とBootstrapプラグインの動作は分けておく。
  • テーマのオーバーライドは、通常、ホバー、フォーカス、無効の各状態で再確認する。

関連する仕様を確認する

Bootstrapデザインシステム：コンポーネントの例

index.html — 予約機能の完全なサンプル

スタイルシート、モーダルのランタイム、バリデーション、絞り込み、ローカルでの確認処理を含む、Bootstrap 5.3.8の完全なページです。このファイルをindex.htmlとして保存し、以下のコマンドでフォルダーを配信してください。バージョンを固定したCDN依存関係を使用するには、ネットワーク接続が必要です。

html
<!doctype html><html lang="en" data-bs-theme="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bootstrap equipment reservations — OpenDesign example</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"><style>body{margin:0}main{max-width:1120px;margin:auto}.demo-stat{font-variant-numeric:tabular-nums}.table td,.table th{vertical-align:middle}.table caption{font-size:.875rem}.demo-status:empty{display:none}@media(max-width:575px){.table th,.table td{font-size:.8125rem;padding:.65rem .4rem}.demo-mobile-hide{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}</style></head><body>
<header class="border-bottom bg-body-tertiary px-3 px-md-4 py-3 d-flex align-items-center justify-content-between gap-3"><div><strong>Studio inventory</strong><span class="badge text-bg-primary ms-2">Bootstrap 5.3.8</span></div><button id="theme" type="button" class="btn btn-outline-secondary btn-sm" aria-pressed="false">Dark mode</button></header>
<main class="p-3 p-md-4"><div class="d-flex align-items-start justify-content-between gap-3 mb-4"><div><p class="text-body-secondary small mb-1">EQUIPMENT / RESERVATIONS</p><h1 class="h3 mb-2">Keep the next shoot ready.</h1><p class="text-body-secondary mb-0">Check equipment, create a local reservation and review its details.</p></div><span class="badge rounded-pill text-primary-emphasis bg-primary-subtle border border-primary-subtle demo-mobile-hide">Interactive example</span></div>
<div class="row g-3 mb-4"><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Equipment</div><strong class="fs-3 demo-stat">12</strong></div></div><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Reservations</div><strong id="count" class="fs-3 demo-stat">3</strong></div></div><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Available</div><strong class="fs-3 demo-stat">8</strong></div></div></div>
<div class="row g-4"><section class="col-lg-7" aria-labelledby="list-title"><div class="d-flex align-items-center justify-content-between gap-3 mb-3"><h2 id="list-title" class="h5 m-0">Reservation list</h2><div><label for="filter" class="visually-hidden">Filter reservations by status</label><select class="form-select form-select-sm" id="filter"><option value="all">All statuses</option><option value="Reserved">Reserved</option><option value="In use">In use</option><option value="Draft">Draft</option></select></div></div><div class="table-responsive border rounded"><table class="table table-hover mb-0"><caption class="px-3">Fictional records. New entries stay in this browser tab.</caption><thead class="table-light"><tr><th scope="col">Equipment</th><th scope="col">Date</th><th scope="col">Status</th></tr></thead><tbody id="rows"><tr data-status="Reserved"><th scope="row" class="fw-medium">Camera kit A<div class="small fw-normal text-body-secondary">Mia Chen</div></th><td>10 Oct</td><td><span class="badge text-primary-emphasis bg-primary-subtle">Reserved</span></td></tr><tr data-status="In use"><th scope="row" class="fw-medium">Lighting studio<div class="small fw-normal text-body-secondary">Alex Kim</div></th><td>10 Oct</td><td><span class="badge text-success-emphasis bg-success-subtle">In use</span></td></tr><tr data-status="Draft"><th scope="row" class="fw-medium">Audio recorder<div class="small fw-normal text-body-secondary">Jules Davis</div></th><td>11 Oct</td><td><span class="badge text-secondary-emphasis bg-secondary-subtle">Draft</span></td></tr></tbody></table></div><p id="empty" class="alert alert-info mt-3" hidden>No reservations match this status.</p><p id="results" class="small text-body-secondary mt-2" aria-live="polite">3 reservations shown</p><div class="alert alert-primary mt-4 mb-0"><strong>Try the system</strong><p class="small mb-0 mt-1">Switch color mode, filter the table, submit an empty form, then review a complete reservation in a Bootstrap modal.</p></div></section>
<section class="col-lg-5" aria-labelledby="form-title"><div class="card"><div class="card-body p-3 p-md-4"><h2 id="form-title" class="h5 mb-3">New reservation</h2><form id="reservation" novalidate><div id="error-summary" class="alert alert-danger" tabindex="-1" role="alert" hidden><strong>Check the reservation details.</strong><ul class="mb-0 mt-2" id="error-links"></ul></div><div class="mb-3"><label class="form-label" for="equipment">Equipment</label><select class="form-select" id="equipment" aria-describedby="equipment-error" required><option value="">Choose equipment</option><option>Camera kit A</option><option>Lighting studio</option><option>Audio recorder</option></select><div id="equipment-error" class="invalid-feedback">Choose equipment for this reservation.</div></div><div class="mb-3"><label class="form-label" for="owner">Reserved by</label><input class="form-control" id="owner" autocomplete="name" aria-describedby="owner-hint owner-error" required><div class="form-text" id="owner-hint">Use a fictional name for this example.</div><div class="invalid-feedback" id="owner-error">Enter the name of the person reserving equipment.</div></div><div class="mb-3"><label class="form-label" for="date">Reservation date</label><input class="form-control" id="date" type="date" aria-describedby="date-error" required><div class="invalid-feedback" id="date-error">Choose a reservation date.</div></div><button type="submit" class="btn btn-primary w-100">Review reservation</button></form><p class="small text-body-secondary mt-3 mb-0">This example validates input locally. It does not reserve real equipment.</p></div></div></section></div><div id="notice" class="alert alert-success mt-4 demo-status" role="status" hidden></div></main>
<div class="modal fade" id="review-modal" tabindex="-1" aria-labelledby="review-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 class="modal-title fs-5" id="review-title">Review reservation</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close review"></button></div><div class="modal-body"><dl class="row mb-0"><dt class="col-4">Equipment</dt><dd class="col-8" id="review-equipment"></dd><dt class="col-4">Reserved by</dt><dd class="col-8" id="review-owner"></dd><dt class="col-4">Date</dt><dd class="col-8" id="review-date"></dd></dl><p class="small text-body-secondary mt-3 mb-0">Confirming adds a row to this local example only.</p></div><div class="modal-footer"><button class="btn btn-outline-secondary" data-bs-dismiss="modal" type="button">Edit details</button><button class="btn btn-primary" id="confirm" type="button">Add to example</button></div></div></div></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><script>
const $=id=>document.getElementById(id);const fields=['equipment','owner','date'];const review=bootstrap.Modal.getOrCreateInstance($('review-modal'));
$('theme').onclick=()=>{const dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light mode':'Dark mode'};
function filter(){let count=0;for(const row of $('rows').rows){row.hidden=$('filter').value!=='all'&&row.dataset.status!==$('filter').value;if(!row.hidden)count++}$('empty').hidden=count>0;$('results').textContent=count+' reservations shown'}$('filter').onchange=filter;
function validateField(id){const el=$(id),invalid=!el.checkValidity();el.classList.toggle('is-invalid',invalid);el.setAttribute('aria-invalid',String(invalid));return !invalid}
$('reservation').onsubmit=e=>{e.preventDefault();const invalid=fields.filter(id=>!validateField(id));$('error-links').replaceChildren();$('error-summary').hidden=invalid.length===0;if(invalid.length){for(const id of invalid){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+id;a.className='alert-link';a.textContent=$(id+'-error').textContent;a.onclick=e=>{e.preventDefault();$(id).focus()};li.append(a);$('error-links').append(li)}$('error-summary').focus();return}for(const id of fields)$('review-'+id).textContent=$(id).value;review.show()};
for(const id of fields)$(id).addEventListener('input',()=>{if($(id).getAttribute('aria-invalid')==='true')validateField(id)});
$('review-modal').addEventListener('hidden.bs.modal',()=>$('reservation').querySelector('button').focus());
$('confirm').onclick=()=>{const row=document.createElement('tr');row.dataset.status='Reserved';const name=document.createElement('th');name.scope='row';name.className='fw-medium';name.textContent=$('equipment').value;const owner=document.createElement('div');owner.className='small fw-normal text-body-secondary';owner.textContent=$('owner').value;name.append(owner);const date=document.createElement('td');date.textContent=$('date').value;const state=document.createElement('td'),badge=document.createElement('span');badge.className='badge text-primary-emphasis bg-primary-subtle';badge.textContent='Reserved';state.append(badge);row.append(name,date,state);$('rows').prepend(row);$('count').textContent=$('rows').rows.length;$('filter').value='all';filter();review.hide();$('notice').hidden=false;$('notice').textContent='Reservation added to this local example. No data was sent.';$('reservation').reset();for(const id of fields){$(id).classList.remove('is-invalid');$(id).removeAttribute('aria-invalid')}};
</script></body></html>

コードリファレンス

  • フォームの内容はどのサービスにも送信されません。予約の確定情報は、このページのセッション内にのみ存在します。
  • ローカルプレビューには同じバージョン固定のCSSとJavaScriptが含まれています。このコピーでは、それらの公開CDN URLを使用します。

フィールドラベル、ヒント、明示的なエラー状態

この自己完結型のフィールド構成では、Bootstrapのスタイルと実際の検証結果を使用します。ページの例では、3つのフィールドに移動できるリンクを含むエラー概要も表示します。赤い枠線だけでは、修正方法は伝わりません。

html
<form id="reservation" novalidate>
  <label for="owner" class="form-label">Reserved by</label>
  <input id="owner" class="form-control" required
    aria-describedby="owner-hint owner-error">
  <div id="owner-hint" class="form-text">Use a fictional name.</div>
  <div id="owner-error" class="invalid-feedback">Enter a name.</div>
  <button class="btn btn-primary mt-3" type="submit">Review reservation</button>
</form>
<script>
const form = document.querySelector('#reservation');
const input = document.querySelector('#owner');
form.addEventListener('submit', event => {
  event.preventDefault();
  const invalid = !input.checkValidity();
  input.classList.toggle('is-invalid', invalid);
  input.setAttribute('aria-invalid', String(invalid));
  if (invalid) input.focus();
});
</script>

コードリファレンス

  • .was-validated を使わずに .is-invalid を明示的に設定できます。
  • aria-describedby でヒントとエラーテキストを関連付け、aria-invalid で現在の状態を示します。
  • ドキュメントでは、カスタムの視覚的な検証だけでは、支援技術に十分な情報が伝わらないと説明されています。

わかりやすいラベルを備えたネイティブの確認モーダル

このモーダルでは、Bootstrapの実際のプラグイン、背景オーバーレイ、Escapeキーの処理、フォーカス管理を使用します。タイトルは modal-header、確認内容は modal-body、続行の操作は modal-footer に配置してください。

html
<button class="btn btn-primary" data-bs-toggle="modal"
  data-bs-target="#review">Review reservation</button>
<div class="modal fade" id="review" tabindex="-1"
  aria-labelledby="review-title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="review-title">Review reservation</h2>
        <button class="btn-close" data-bs-dismiss="modal"
          aria-label="Close review"></button>
      </div>
      <div class="modal-body">Camera kit A · 10 October</div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Edit details</button>
      </div>
    </div>
  </div>
</div>

コードリファレンス

  • 対応するBootstrap JavaScriptバンドルを一度だけ読み込みます。
  • data APIは静的な例を開きます。動作する予約フォームでは、有効な入力の後に Modal.getOrCreateInstance を使用します。
  • 開くときのトランジションが完了してから実行する必要がある処理には、shown.bs.modal を使用します。

レスポンシブなリストとフォームのレイアウト

lgブレークポイントでは、在庫リストが7カラム、フォームが5カラムを占めます。lg未満では、両セクションが縦に並びます。g-4を指定すると、レイアウトに1.5remのガターが設定されます。カラムは幅を、セマンティックなセクションと見出しは内容を示します。

html
<main class="container py-4">
  <div class="row g-4">
    <section class="col-lg-7" aria-labelledby="reservations-title">
      <h2 id="reservations-title" class="h5">Reservations</h2>
      <div class="table-responsive">
        <table class="table table-hover">
          <caption>Fictional equipment reservations</caption>
          <thead><tr><th scope="col">Equipment</th><th scope="col">Status</th></tr></thead>
          <tbody><tr><th scope="row">Camera kit A</th><td>Reserved</td></tr></tbody>
        </table>
      </div>
    </section>
    <section class="col-lg-5" aria-labelledby="new-title">
      <h2 id="new-title" class="h5">New reservation</h2>
    </section>
  </div>
</main>

コードリファレンス

  • コンテンツが十分に収まる場合は、同じグリッドで col-md-* を使用できます。
  • CSS変数を使ったメディアクエリではなく、上記のブレークポイント表を参照してください。var() はメディアクエリのしきい値には使えません。
04

Bootstrapデザインシステムエージェントのセットアップ

実装の出発点

このHTMLの完全な例を実行するために、ビルド工程は必要ありません。ファイルに記載されたバージョン固定のCDN URLからBootstrap 5.3.8を読み込みます。以下の短い例では、この動作するページから個々のパターンを抜き出しています。

シェル
# Save the complete index.html from Component Examples in a new folder.
# Serve that folder with Python 3:
python3 -m http.server 8000
# Open http://localhost:8000/ in a browser.

あなたのプロジェクト向けプロンプト

AI エージェント用プロンプト
このガイドに従い、Bootstrap 5.3.8を使って機材予約インターフェースを実装してください。col-lg-7とcol-lg-5を指定したg-4のrowを使い、p-3 p-md-4の余白、テーマに対応するbodyと控えめ・強調色の役割、セマンティックなテーブル、ラベル付きフォームコントロールを使用します。エラーを明示し、エラー概要を表示してから、ネイティブのBootstrap Modalを開いてください。編集時には入力内容を保持し、実際のAPIが提供されていない限り、レコードの追加はローカルのデモ状態に限ります。data-bs-themeのライトモードとダークモード、キーボードによる閉じる操作に対応してください。指定されたスケールを任意の値に置き換えないでください。
05

Bootstrapデザインシステムの情報源と適用範囲

OpenDesignのBootstrap 5.3.8アプリケーションガイドと、実行可能なネイティブコンポーネントの実例です。参照値は、リンク先のBootstrapドキュメントとバージョン固定されたコンパイル済みCSSから取得しています。予約レコード、レイアウト構成、検証概要は独自のアプリケーションコードです。実際の予約は送信されません。