Bootstrap5 下拉菜單

2023-07-10 17:39 更新

下拉菜單可以是單選下拉菜單,也可以是多選的下拉菜單。

單選下拉菜單:


多選下拉菜單:

在 Bootstrap5 中下拉菜單 <select> 元素可以使用 .form-select 類來渲染 :

<!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="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" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>下拉菜單</h2>
  <p>在 Bootstrap5 中下拉菜單 select 元素可以使用 .form-select 類來渲染 :</p>
  <form action="">
    <label for="sel1" class="form-label">單選下拉菜單:</label>
    <select class="form-select" id="sel1" name="sellist1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
    <br>
    
    <label for="sel2" class="form-label">多選下拉菜單:</label>
    <select multiple class="form-select" id="sel2" name="sellist2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

</body>
</html>

下拉菜單通過 .form-select-lg 或 .form-select-sm 類來修改大?。?br>

<!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="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" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>下拉菜單</h2>
  <p>下拉菜單通過 .form-select-lg 或 .form-select-sm 類來修改大?。?lt;/p>
  <form action="">
    <label for="sel1" class="form-label">大號下拉菜單:</label>
    <select class="form-select form-select-lg" id="sel1" name="sellist1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
    <br>
    
    <label for="sel2" class="form-label">正常下拉菜單:</label>
    <select class="form-select" id="sel2" name="sellist2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
	  
	<label for="sel3" class="form-label">小號下拉菜單:</label>
	<select class="form-select form-select-sm" id="sel3" name="sellist3">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

</body>
</html>

效果如下圖:


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="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" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>禁用下拉菜單</h2>
  <p>disabled 屬性可以禁止下拉菜單被選擇:</p>
  <form action="">
    <label for="sel" class="form-label">禁用下拉菜單:</label>
    <select class="form-select" id="sel" name="sellist" disabled>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

</body>
</html>

數(shù)據(jù)列表

Bootstrap 也可以通過 datalist 標簽為 <input> 元素設置下拉菜單:

以下實例從列表中選擇一個網(wǎ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="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" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>數(shù)據(jù)列表</h2>
  <form action="/action_page.php">
	<label for="browser" class="form-label">選擇你喜歡的網(wǎng)站:</label>
	<input class="form-control" list="sites" name="site" id="site">
	<datalist id="sites">
	  <option value="Google">
	  <option value="Runoob">
	  <option value="Taobao">
	  <option value="Wiki">
	  <option value="Zhihu">
	</datalist>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

</body>
</html>

效果如下圖:



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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號