用Bootstrap框架制作下拉列表

最新推荐文章于 2025-06-04 09:10:20 发布

原创最新推荐文章于 2025-06-04 09:10:20 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

33 篇文章

订阅专栏

Bootstrap

6 篇文章

订阅专栏

本文详细介绍了如何使用Bootstrap创建下拉菜单，包括基本结构、对齐方式、标题、分割线和禁用菜单项等特性，并提供了实例代码和交互性的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap下拉菜单

用于显示链接列表的可切换、有上下文的菜单。

实例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative;的元素。然后加入组成菜单的 HTML 代码。
在这里插入图片描述

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。
在这里插入图片描述

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

标题

在任何下拉菜单中均可通过添加标题来标明一组动作。
在这里插入图片描述

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

分割线

为下拉菜单添加一条分割线，用于将多个链接分组。
在这里插入图片描述

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

禁用的菜单项

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。
在这里插入图片描述

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4</title>
	<link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css">
	<script src="../bootstrap-3.3.7/js/jquery-3.4.1.min.js"></script>
	<script src="../bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<br>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				Hobbies
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li class="dropdown-header">Interesting</li>
				<li class="active"><a href="#">Studying</a></li>
				<li><a href="#">Running</a></li>
			    <li><a href="#">Playing basketball</a></li>
			    <li class="disabled"><a href="#">Playing game</a></li>
			    <li role="separator" class="divider"></li>
			    <li><a href="#">Eating food</a></li>
			    <li><a href="#">Sleeping</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

在浏览器上打开:
在这里插入图片描述
但此时点击相应的选项 button 按钮里的文本并不会随之改变，所以我们需要用 js 来让它具有了交互性。

<script>
		$(function(){
			//点击li获取它的内部文本
			$('.dropdown li').click(function(){
				$('.dropdown button').html($(this).text()+' <span class="caret"></span>');
			});
		});
	</script>

运行效果：
在这里插入图片描述