【Bootstrap】ホバー・サイドメニュー・テーブル・画像スライダー・アコーディオンまとめ

🔹 ツールチップ（Tooltip）| ホバーで説明 |

マウスを乗せると説明を表示。

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="これはツールチップです">
  ホバーで説明表示
</button>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

✅ data-bs-toggle="tooltip" でツールチップを設定
✅ JavaScript で有効化が必要

---

🔹 オフキャンバス（Offcanvas）| サイドメニュー |

サイドバーのように隠れているメニューを表示。

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
  サイドバーを開く
</button>

<div class="offcanvas offcanvas-start" id="offcanvasExample">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">メニュー</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>サイドメニューの内容</p>
  </div>
</div>

✅ offcanvas-start で左から表示
✅ offcanvas-end にすると右から表示

---

🔹 テーブル（Table）

表を枠付きで整理。

<table class="table table-bordered">
  <thead>
    <tr>
      <th>項目</th>
      <th>値</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>123</td>
    </tr>
    <tr>
      <td>データ2</td>
      <td>456</td>
    </tr>
  </tbody>
</table>

✅ table-bordered で枠を追加
✅ table-striped を加えると交互に色付け

---

🔹 メディアオブジェクト（Media Object）

画像やアイコンをテキストと並べる。

<div class="d-flex align-items-center border p-3">
  <img src="https://via.placeholder.com/50" class="rounded-circle me-3">
  <div>
    <h5 class="mb-1">ユーザー名</h5>
    <p>コメントの内容がここに入ります。</p>
  </div>
</div>

✅ d-flex align-items-center で横並び
✅ rounded-circle で丸い画像

---

🔹 カルーセル（Carousel）

画像スライダー。

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400/ff0000" class="d-block w-100">
    </div>
  </div>
  <button class="carousel-control-prev" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

✅ carousel クラスでスライダーを作成
✅ carousel-control-prev / carousel-control-next で操作

---

🔹 アコーディオン（Accordion） | 開閉可能なボックス |

クリックで開閉できる枠組み。

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        セクション1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">
        ここに詳細な説明を記載できます。
      </div>
    </div>
  </div>
</div>

✅ accordion で開閉機能を追加
✅ accordion-item で各セクションを作成

---