這是我參與更文挑戰的第23天，活動詳情查看：更文挑戰css

《Bootstrap5零基礎到精通》俺老劉原創，爭取天天更新一節。html

23.1 Bootstrap5下拉菜單組件

下拉菜單（Dropdowns）和表單裏面的下拉列表（Select）具備不少外觀上的類似性，但卻有着本質的不一樣，下拉列表使用的是Select表單，而下拉菜單（Dropdowns）使用的是div和css實現。bootstrap

下拉列表是可切換的上下文覆蓋，用於顯示連接列表等。它們與附帶的Bootstrap 下拉JavaScript插件交互。它們是經過點擊來切換的，而不是經過懸停來切換的；這是一個有意的設計決定，若是你須要懸停切換，能夠經過js實現。瀏覽器

23.2 示例

23.2.1 單個按鈕

將下拉菜單的切換（按鈕或連接）和下拉菜單包裝在dropdown中就變成了下拉菜單。markdown

能夠從a或button元素觸發下拉列表，以更好地知足您的潛在需求。這裏顯示的示例在適當的地方使用語義ul元素，可是支持自定義標記。ide

任何單個.btn均可以變成一個下拉切換，並有一些標記更改。下面是如何將它們與button元素一塊兒使用：工具

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>下拉菜單</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        button下拉菜單
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <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>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">子菜單4</a></li>
        </ul>
        </div>

        <br><br><br>
        <div class="dropdown">
            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
            a 連接下拉菜單
            </a>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <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>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">子菜單4</a></li>
            </ul>
            </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
複製代碼

兩種菜單從外觀和體驗上看是沒有任何區別的。oop

23.2.2 按鈕組

按鈕組就是同一行中同時存在幾個按鈕，默認狀況下，因爲菜單默認是獨佔一行的，兩個菜單靠在一塊兒不美觀，故上面的例子加了幾個換行。post

按鈕組的使用十分簡單，直接把按鈕的<div class="dropdown">換成<div class="btn-group">，並非把單個按鈕放在一個按鈕組容器中，這點必定要注意。學習

<div class="btn-group">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> button下拉菜單 </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <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> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">子菜單4</a></li> </ul> </div>
   <div class="btn-group"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> a 連接下拉菜單 </a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <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> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">子菜單4</a></li> </ul> </div> 複製代碼

23.2.3 分割按鈕

默認狀況下，點擊按鈕任何區域，都會彈出下拉菜單，可是經過往添加dropdown-toggle-split以在下拉插入符號作適當間隔，這插入符號的兩邊水平padding減小了25%，並移除了爲常規按鈕下拉菜單添加的margin-left。這些額外的變化使插入符號集中在分割按鈕中，並在主按鈕旁邊提供適當的空間。

分割按鈕只能用於按鈕組，只有點擊按鈕上的三角符號，下拉菜單纔會彈出，點按鈕其餘地方都不在彈出。下面代碼第一個是普通按鈕，第二個是分割按鈕

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> 普通下拉菜單 </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <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>

        <br>
        <div class="btn-group"> <button type="button" class="btn btn-secondary">分割下拉菜單</button> <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <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>

複製代碼

23.3 下拉菜單的大小

將或者加到button按鈕類中，就能夠實現按鈕大小的設置，雖然例子中用的是按鈕組，但對單個按鈕和分割按鈕一樣適用。下面是三種按鈕大小比較：

<div class="btn-group">
            <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> sm下拉菜單 </button>
        </div>
        <div class="btn-group"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> 下拉菜單 </button> </div>
        <div class="btn-group"> <button class="btn btn-lg btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> lg下拉菜單 </button> </div>
        <div class="btn-group"> <button class="btn btn-secondary btn-sm" type="button"> sm分割按鈕 </button> <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button> </div>
複製代碼

注意：後面通常狀況下，爲了節儉代碼，對於不須要彈出選項的菜單都省略菜單部分。

23.4 下拉菜單的顏色

下拉菜單的顏色與按鈕的顏色徹底一致，如下是各類顏色的下拉菜單：

<div class="btn-group">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> primary </button>
        </div>
        <div class="btn-group"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> secondary </button> </div>
      <div class="btn-group"> <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> success </button> </div>
    <div class="btn-group"> <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> danger </button> </div>
    <div class="btn-group"> <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> warning </button> </div>
    <div class="btn-group"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> info </button> </div>
    <div class="btn-group"> <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> light </button> </div>
    <div class="btn-group"> <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> dark </button> </div>
    <div class="btn-group"> <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> link </button> </div>
複製代碼

23.5 深色下拉列表

23.5.1 深色下拉列表

選擇較暗的下拉菜單以匹配深色導航欄或自定義樣式，方法是將dropdown-menu-dark添加到現有的dropdown-menu。不須要更改下拉項。

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false"> 深色下拉菜單 </button>
        <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2"> <li><a class="dropdown-item active" href="#">Action選項1</a></li> <li><a class="dropdown-item" href="#">選項2</a></li> <li><a class="dropdown-item" href="#">選項3</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">選項4</a></li> </ul> </div>
複製代碼

23.5.2 含深色下拉列表的導航

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid"> <a class="navbar-brand" href="#">品牌</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDarkDropdown"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 深色下拉菜單 </a> <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2"> <li><a class="dropdown-item active" href="#">Action選項1</a></li> <li><a class="dropdown-item" href="#">選項2</a></li> <li><a class="dropdown-item" href="#">選項3</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">選項4</a></li> </ul> </li> </ul> </div> </div> </nav>
複製代碼

23.6 菜單項彈出方向

下拉菜單默認的選項默認是向下彈出的，經過在下拉菜單的容器中添加dropup、dropstart、dropend，能夠分別設置向上、向左、向右彈出。

這幾個類的用法很簡單，直接加在容器上便可。須要注意的是，這幾個方向設置都是在空間足夠狀況下說的，若是向上彈出，可是上面空間不夠，則會自動改成向下彈出。向左、向右也是如此

<div class="text-center">
      <br><br><br><br><br><br>
      <div class="dropdown dropup"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> 向上 </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item active" href="#">子菜單1</a></li> <li><a class="dropdown-item" href="#">子菜單2</a></li> <li><a class="dropdown-item" href="#">子菜單3</a></li> </ul> </div> <br><br><br>

     <div class="dropdown dropstart"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false"> 向左 </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2"> <li><a class="dropdown-item active" href="#">子菜單1</a></li> <li><a class="dropdown-item" href="#">子菜單2</a></li> <li><a class="dropdown-item" href="#">子菜單3</a></li> </ul> </div>
     <br><br><br>
     <div class="dropdown dropend"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false"> 向右 </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton3"> <li><a class="dropdown-item active" href="#">子菜單1</a></li> <li><a class="dropdown-item" href="#">子菜單2</a></li> <li><a class="dropdown-item" href="#">子菜單3</a></li> </ul> </div>
    </div>
複製代碼

23.7 菜單項

23.7.1 使用其餘內容

在過去下拉菜單內容必須是個連接，但Bootstrap5再也不是這樣。如今您能夠選擇在下拉菜單中使用button元素，而不是僅使用a。

也可使用dropdown-item文本建立非交互式下拉項。您能夠隨意使用自定義CSS或文本工具進一步設計樣式。默認狀況下，使用連接和按鈕選項，鼠標懸停在選項上會有陰影，文本選項五陰影效果。

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false"> 其餘選項下拉菜單 </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2"> <li><button class="dropdown-item" type="button">按鈕選項1</button></li> <li><button class="dropdown-item" type="button">按鈕選項2</button></li> <li><span class="dropdown-item-text">文本選項</span></li> </ul>
        </div>
複製代碼

23.7.2 激活禁用

將active添加到下拉列表中的項以將其設置爲活動樣式。將disabled添加到下拉列表中的項以將其樣式設置爲禁用。

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false"> 下拉菜單 </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2"> <li><a class="dropdown-item active" href="#">激活選項</a></li> <li><a class="dropdown-item" href="#">普通選項</a></li> <li><a class="dropdown-item disabled" href="#">禁用選項</a></li> </ul>
        </div>
複製代碼

23.7.3 菜單項右對齊

默認狀況下，下拉菜單自動定位在距父菜單頂部100%的位置，並沿父菜單的左側。你能夠將dropdown-menu-end添加到dropdown-menu以右對齊下拉菜單。

<div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> 菜單項右對齊 過短了看不出 </button>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1"> <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> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">子菜單4</a></li> </ul> </div>
複製代碼

23.7.4 菜單項響應式右對齊

若是要使用響應式對齊，請經過在button添加 data-bs-display="static"屬性禁用動態定位，並使用響應式變量類。在dropdown-menu添加dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>下拉菜單</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button"  data-bs-toggle="dropdown"  data-bs-display="static" aria-expanded="false">
            菜單項響應式右對齊，改變瀏覽器大小觀看
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton1">
        <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>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">子菜單4</a></li>
        </ul>
        </div>
        
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
複製代碼

這個在lg斷點前左對齊，斷點後右對齊，比較簡單就不演示了，提供完整代碼，有興趣的試一下。

23.7.5 菜單項放入表單

將表單放入下拉菜單中，或將其放入下拉菜單中，而後使用邊距或填充實用程序爲其提供所需的負空間。

<div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> 菜單項包含登陸表單 </button>
        <div class="dropdown-menu">
            <form class="px-4 py-3">
            <div class="mb-3">
            <label for="exampleDropdownFormEmail1" class="form-label">電子郵箱</label>
            <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
            </div>
            <div class="mb-3">
            <label for="exampleDropdownFormPassword1" class="form-label">密碼</label>
            <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
            </div>
            <div class="mb-3">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="dropdownCheck">
              <label class="form-check-label" for="dropdownCheck">
                記住狀態
              </label>
            </div>
            </div>
            <button type="submit" class="btn btn-primary">登陸</button>
            </form>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">還沒帳戶，點此註冊</a>
            <a class="dropdown-item" href="#">忘記密碼</a>
        </div>
        </div>
複製代碼

限於篇幅，本文對下拉菜單作了簡要介紹，通常狀況下足夠日常的使用了，若是你須要更詳細的瞭解下拉菜單用法，請參考Bootstrap中文文檔 >組件 >下拉菜單相關章節。

今天的課程就到這裏，請關注我，及時學習俺老劉原創的《Bootstrap5零基礎到精通》第24節 Bootstrap5分頁導航Pagination組件用法，從字面也能夠看出，按鈕組就是多個按鈕的組合。

若是這篇文章對你有幫助，記得隨手點贊哦！

《Bootstrap5零基礎到精通》第23節 Bootstrap5下拉菜單組件用法