阅读(727) 书签赞(0) 我要纠错

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 href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" 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 类来修改大小：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" 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 类来修改大小：</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 href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" 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>

数据列表

Bootstrap 也可以通过 datalist 标签为 <input> 元素设置下拉菜单：

以下实例从列表中选择一个网站：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" 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>
  <form action="/action_page.php">
	<label for="browser" class="form-label">选择你喜欢的网站：</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>

效果如下图：

以上内容是否对您有帮助：

← Bootstrap5 表单

Bootstrap5 复选框与单选框 →

写笔记

我要补充