主要コンポーネント
JavaScript連動の部品はデータ属性(data-bs-*)または JS API で制御します。
代表的なコンポーネント:
・ナビゲーション: Navbar / Nav / Breadcrumb / Pagination
・オーバーレイ: Modal / Offcanvas / Toast / Tooltip / Popover
・表示: Card / Accordion / Carousel / Collapse / Tabs
・フォーム: Form controls / Input group / Floating labels / Validation
・その他: Alert / Badge / Button / Dropdown / Progress / Spinner
例: モーダルはボタンのデータ属性で開閉できます。
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#m">開く</button>
<div class="modal fade" id="m" tabindex="-1">
<div class="modal-dialog"><div class="modal-content">
<div class="modal-header"><h5 class="modal-title">タイトル</h5>
<button class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body">本文</div>
</div></div>
</div>JS API から制御する場合:
const m = new bootstrap.Modal(document.getElementById('m'));
m.show();