下拉菜單是一種顯示選項(xiàng)列表的面板，通過點(diǎn)擊或懸停觸發(fā)器（按鈕或鏈接）顯示。制作 Bootstrap 下拉菜單需以下步驟：創(chuàng)建容器并添加 dropdown 類。添加觸發(fā)器元素（按鈕或鏈接）并添加 dropdown-toggle 和 data-toggle="dropdown" 屬性。創(chuàng)建無序列表并添加 dropdown-menu 類。在列表中添加包含鏈接或內(nèi)容的列表項(xiàng)。

Bootstrap 下拉菜單制作指南

什么是下拉菜單？

下拉菜單是一種交互式組件，當(dāng)用戶點(diǎn)擊或懸停時(shí)會(huì)顯示一個(gè)包含選項(xiàng)列表的面板。

如何制作 Bootstrap 下拉菜單？

創(chuàng)建下拉菜單需用到以下 HTML 元素：

<li><div> 容器用于包裹下拉菜單<li> <code><button></button> 或 <a></a> 元素作為觸發(fā)器，用戶點(diǎn)擊或懸停時(shí)顯示菜單 <li> <ul></ul> 無序列表用于包含菜單選項(xiàng) <li> <li> 列表項(xiàng)用于表示單個(gè)菜單選項(xiàng)

步驟：

<li>創(chuàng)建一個(gè) <div> 容器并添加 <code>dropdown 類。<li>在容器內(nèi)添加觸發(fā)器元素（<button></button> 或 <a></a>），并添加 dropdown-toggle 和 data-toggle="dropdown" 屬性。 <li>創(chuàng)建一個(gè) <ul></ul> 無序列表，并將 dropdown-menu 類添加到該列表中。 <li>在 <ul></ul> 列表內(nèi)添加 <li> 列表項(xiàng)，并為每個(gè)選項(xiàng)添加鏈接或其他內(nèi)容。

示例代碼：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

高級(jí)選項(xiàng)：

<li> 子菜單：使用嵌套 <ul></ul> 和 <li> 元素創(chuàng)建子菜單。 <li> 分隔符：添加 <li role="separator" class="divider"> 將菜單項(xiàng)分隔開。 <li> 標(biāo)題：添加 <li role="heading" class="dropdown-header"> 來創(chuàng)建標(biāo)題。 <li> 禁用項(xiàng)：添加 disabled 屬性以禁用菜單項(xiàng)。

提示：

<li>確保觸發(fā)器元素具有 aria-haspopup="true" 和 aria-expanded="false" 屬性，以提高可訪問性。 <li>使用 JavaScript 來處理下拉菜單事件（例如，顯示/隱藏菜單）。 <li>利用 Bootstrap 文檔和組件示例來獲取更多高級(jí)用法。