株式会社エキスパートエンタープライズ

ページを読みこみ中・・・

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();

Facebookも情報発信中!
広告