Bootstrap学习--下拉菜单

最新推荐文章于 2024-09-01 16:17:05 发布

风火一回

最新推荐文章于 2024-09-01 16:17:05 发布

阅读量1.6k

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap 下拉菜单按钮下拉菜单

本文链接：https://blog.csdn.net/mafan121/article/details/47170723

版权

Bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Bootstrap拥有自己独立的下拉菜单，下面详细介绍一下它的下拉菜单。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="dropdown">
		<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" id="dropMenu1">
			菜鸟学习
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu" aria-labelledby="dropMenu1">
			<li role="presentation" class="dropdown-header">前端学习</li>
			<li role="presentation">
				<a role="menuitem"  href="#">html</a>
			</li>
			<li role="presentation">
				<a  href="#">css</a>
			</li>
			<li role="presentation">
				<a role="menuitem" href="#">js</a>
			</li>
			<li  role="presentation" class="divider"></li>
			<li  class="dropdown-header">后端学习</li>
			<li ><a role="menuitem" href="#">java</a></li>
			<li ><a role="menuitem" href="#">c#</a></li>
		</ul>
	</div>
</body>
</html>

dropdown是下拉菜单的标识样式

.dropdown-toggle:focus {
outline: 0
}

data-toggle="dropdown"是用于切换下拉菜单的，是下拉菜单的触发器，若没有这个属性，那么下拉菜单将不能下拉。

<span class="caret"></span>这段话的意思是显示下拉菜单的三角符号，没有这句话这不显示下拉三角符号，如图：

ul包裹的部分是菜单内容，其中dropdown-menu样式作用于菜单。

role的作用是描述一个非标准tag的实际作用，例如role=“menu”，说明这是一个菜单。

aria-*的作用就是描述这个tag在可视化的情境中的具体信息。

例如：aria-labelledby="dropMenu1"，说明这个标签是依赖于id为“dropMenu1”的元素。

dropdown-header：该样式说明这是一个菜单头，相当于菜单标题

divider：该样式是一条横线，可将菜单分割为2部分

pull-right：该样式一般用于ul上，作用是让菜单内容靠右显示

、

偶尔你会看到tabindex属性，该属性的作用是让tab切换键生效。

默认tabindex=0，当值越大，则越优先切换。

当tabindex=-1，说明该元素不能通过tab键选中。

当多个tabindex的值相同时，按html中的先后顺序一次切换。

下拉菜单可以是一个按钮，也可以不是，当下拉菜单为按钮下拉菜单时，可以不用class="dropdown"。而使用class="btn-group"，btn-group表示一个按钮组，即一个按钮下拉菜单。

在btn-group下可实现按钮的分割。只需在定义button时定义2个button即可，一个用于展示内容，一个用于下拉。

<button type="button" class="btn btn-default">菜鸟学习</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropMenu1">
	<span class="caret"></span>
	<span class="sr-only">切换下拉菜单</span>
</button>

效果如：