Bootstrap5 下拉菜單

2023-06-26 16:33 更新

下拉菜單是可切換的，是以列表格式顯示鏈接的上下文菜單。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>Dropdowns</h2>
  <p>.dropdown 類用來指定一個下拉菜單。</p>
  <p>.dropdown-menu 類來設(shè)置實際下拉菜單。</p>
  <p>我們可以使用一個按鈕或鏈接來打開下拉菜單， 按鈕或鏈接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 屬性。</p>                                          
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜單按鈕
    </button>
    <ul class="dropdown-menu">
      <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>
</div>

</body>
</html>

實例解析

.dropdown 類用來指定一個下拉菜單。

我們可以使用一個按鈕或鏈接來打開下拉菜單， 按鈕或鏈接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 屬性。

<div> 元素上添加 .dropdown-menu 類來設(shè)置實際下拉菜單，然后在下拉菜單的選項中添加 .dropdown-item 類。

下拉菜單中的分割線

.dropdown-divider 類用于在下拉菜單中創(chuàng)建一個水平的分割線：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>下拉菜單中的分割線</h2>
  <p>.dropdown-divider 類用于在下拉菜單中創(chuàng)建一個水平的分割線：</p>                   
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜單按鈕
    </button>
    <ul class="dropdown-menu">
      <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>

</body>
</html>

下拉菜單中的標(biāo)題

.dropdown-header 類用于在下拉菜單中添加標(biāo)題：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>下拉菜單</h2>
  <p>.dropdown-header 類用于在下拉菜單中添加標(biāo)題：</p>

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜單按鈕
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">標(biāo)題 1</h5></li>
      <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><h5 class="dropdown-header">標(biāo)題 2</h5></li>
      <li><a class="dropdown-item" href="#">鏈接 4</a></li>
    </ul>
  </div>
</div>

</body>
</html>

下拉菜單中的可用項與禁用項

.active 類會讓下拉菜單的選項高亮顯示 (添加藍(lán)色背景)。

如果要禁用下拉菜單的選項，可以使用.disabled 類。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>下拉菜單</h2>
  <p>.active 類會讓下拉菜單的選項高亮顯示 (添加藍(lán)色背景)。</p>
  <p>如果要禁用下拉菜單的選項，可以使用.disabled 類。</p>
  
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜單
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">常規(guī)項</a></li>
      <li><a class="dropdown-item active" href="#">激活項</a></li>
      <li><a class="dropdown-item disabled" href="#">禁用項</a></li>
    </ul>
  </div>
</div>

</body>
</html>

下拉菜單的定位

如果我們想讓下拉菜單右對齊，可以在元素上的 .dropdown 類后添加 .dropend 或 .dropstart 類。

.dropend 是右對齊， .dropstart 是左對齊。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>下拉菜單</h2>
  <p>如果我們想讓下拉菜單右對齊，可以在元素上的 .dropdown 類后添加 .dropend 類。</p>

  <div class="dropdown dropend">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      右邊顯示菜單
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">常規(guī)項</a></li>
      <li><a class="dropdown-item active" href="#">激活項</a></li>
      <li><a class="dropdown-item disabled" href="#">禁用項</a></li>
    </ul>
  </div>
	
  <p>如果我們想讓下拉菜單左邊對齊，可以在元素上的 .dropdown 類后添加 .dropstart 類，同時我們將整個下拉菜單向右浮動。</p>

  <div class="dropdown dropstart text-end">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      左邊顯示菜單
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">常規(guī)項</a></li>
      <li><a class="dropdown-item active" href="#">激活項</a></li>
      <li><a class="dropdown-item disabled" href="#">禁用項</a></li>
    </ul>
  </div>
</div>

</body>
</html>

下拉菜單彈出方向設(shè)置

下拉菜單彈出方向默認(rèn)為向下，當(dāng)然我們也可以設(shè)置不同的方向。

指定向右彈出的下拉菜單

如果你希望下拉菜單向右下方彈出，可以在 div 元素上添加 .dropdown-menu-end 類:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>下拉菜單</h2>
  <p>在 .dropdown-menu 類后面添加 .dropdown-menu-end 類，讓下拉菜單向右下方彈出：</p>
                                    
  <div class="dropdown dropdown-menu-end">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜單右下方彈出
    </button>
    <ul class="dropdown-menu">
      <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>
</div>

</body>
</html>

指定向上彈出的上拉菜單

如果你希望上拉菜單向上彈出，可以在 div 元素上添加 "dropup" 類:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
  <h2>下拉菜單</h2>
  <p> .dropup 類讓下拉菜單向上彈出</p>
  <p>添加一些內(nèi)容，用于測試向上彈出效果。</p> 
  <p>添加一些內(nèi)容，用于測試向上彈出效果。</p>
  <div class="dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜單
    </button>
    <ul class="dropdown-menu">
      <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>
</div>

</body>
</html>

指定向左邊彈出的下拉菜單

如果你希望下拉菜單向上彈出，可以在 div 元素上添加 dropstart 類:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
  <h2>下拉菜單</h2>
  <p> .dropstart 類讓下拉菜單向上彈出</p>
  <div class="dropstart">
    添加一些內(nèi)容，用于測試向左邊彈出效果。<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    下拉菜單
    </button>
    <ul class="dropdown-menu">
      <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>
</div>

</body>
</html>

下拉菜單設(shè)置文本

.dropdown-item-text 類可以設(shè)置下拉菜單中的文本項：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
  <h2>下拉菜單</h2>
  <p>.dropdown-item-text 類可以設(shè)置下拉菜單中的文本項：</p>                                        

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜單
    </button>
    <ul class="dropdown-menu">
      <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><a class="dropdown-item-text" href="#">文本鏈接</a></li>
      <li><span class="dropdown-item-text">僅僅是文本</span></li>
    </ul>
  </div>
</div>

</body>
</html>

按鈕組中設(shè)置下拉菜單

我們可以在按鈕中添加下拉菜單：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
  <h2>內(nèi)嵌按鈕組</h2>
  <p>內(nèi)嵌按鈕組創(chuàng)建下拉菜單:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Tablet</a></li>
        <li><a class="dropdown-item" href="#">Smartphone</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>

垂直按鈕組帶下拉菜單：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container mt-3">
  <h2>垂直方向內(nèi)嵌按鈕組</h2>
  <p>垂直方向內(nèi)嵌按鈕組創(chuàng)建下拉菜單:</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Tablet</a></li>
        <li><a class="dropdown-item" href="#">Smartphone</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號