Bootstrap3 下拉菜单（Dropdown）

最新推荐文章于 2025-06-20 15:24:56 发布

凌冰_

最新推荐文章于 2025-06-20 15:24:56 发布

阅读量7.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap3

本文链接：https://blog.youkuaiyun.com/hlx20080808/article/details/87608141

Bootstrap3 专栏收录该内容

6 篇文章

订阅专栏

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

文档：http://www.runoob.com/bootstrap/bootstrap-dropdowns.html

使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。

效果图：

源代码：

必须加入bootstrap样式,主题，JS和jquery!

	<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
			<!--必须在bootstrap.js之前，否则无效果!-->
	    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				padding: 10px;
			}
		</style>

<div class="dropdown">
			<!--data-toggle="dropdown" 默认是隐藏哦,自动的触发事件下拉;-->
			<a href="#" class="btn btn-lg btn-success" data-toggle="dropdown">下拉菜单<i class="caret"></i></a>
			<ul class="dropdown-menu">
				<li>
					<a href="#">aaa</a>
				</li>
				<li>
					<a href="#">bbb</a>
				</li>
				<li>
					<a href="#">ccc</a>
				</li>
			</ul>
		</div>

		<p></p>
	<!--	<p>可以是超链接或按钮</p>-->
		<div class="dropdown">
			<a href="#" data-toggle="dropdown">请激活下拉列表</a>
			<ul class="dropdown-menu">
				<!--<ul class="dropdown-menu pull-right">-->
				<li class="dropdown-header">姓名1</li>
				<li>
					<a href="#">mike</a>
				</li>
				<li class="disabled">
					<a href="#" >john禁用</a>
				</li>
				<!--分割线-->
				<li class="divider">
				</li>
				<li class="dropdown-header">姓名2</li>
				<li >
					<a href="#">back</a>
				</li>
			</ul>
		</div>