まず、Bootstrap 5.2 をウェブページに導入する方法から始めましょう。以下の CDN のリンクを <head> セクションに追加します。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>次に、ドロップダウンメニューを作成する手順を説明します。以下のような HTML のコードを使用します。
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウンメニュー
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">アイテム1</a></li>
<li><a class="dropdown-item" href="#">アイテム2</a></li>
<li><a class="dropdown-item" href="#">アイテム3</a></li>
</ul>
</div>上記のコードでは、dropdown クラスを持つ親要素と、dropdown-toggle クラスを持つボタン要素、dropdown-menu クラスを持つメニュー要素があります。ボタンをクリックすると、メニューが表示されます。
また、各メニューアイテムは <a> タグで表現されています。href 属性には、リンク先の URL を指定します。
さらに、ドロップダウンメニューをカスタマイズする方法もあります。たとえば、ドロップダウンメニューの位置や外観を変更することができます。詳細なカスタマイズ方法については、Bootstrap の公式ドキュメントを参照してください。
以上が、Bootstrap 5.2 のドロップダウンメニューの基本的な使用方法とコード例です。これを参考にして、自分のウェブサイトやアプリケーションにドロップダウンメニューを導入してみてください。