bootstrap 第十一章下拉菜单

最新推荐文章于 2023-09-10 20:57:04 发布

小涛涛啊！

最新推荐文章于 2023-09-10 20:57:04 发布

阅读量66

点赞数

分类专栏： Boostrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/t5555666/article/details/108908202

版权

Boostrap 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

第十一章下拉菜单

下拉菜单组件的使用事项：注意引入的顺序！！！
–先引入css
–引入jq
–引入js

	类								作用
	.dropdown						表示下拉菜单区域
	.caret							三角
	data-toggle='dropdown'			这个写法是为了和js代码进行交互，才有了下拉菜单交互功能
	.dropdown-menu					菜单的区域
	.pull-right 					右对齐下拉菜单
	.dropdown-header				下拉菜单的标签区域添加标题
	.dropup 						指定向上弹出的下拉菜单 	
	.disabled 						下拉菜单中的禁用项 	
	.divider 						下拉菜单中的分割线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
		<script src="../bs/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../bs/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container" style="margin: 200px 0;">
			<div class="dropdown">
				<button class="btn btn-warning" data-toggle='dropdown'>
					点击
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li class="dropdown-header"><a href="">周一的课程</a></li>
					<li><a href="">语文</a></li>
					<li><a href="">数学</a></li>
					<li><a href="">英语</a></li>
					<li class="disabled"><a href="">体育</a></li>
					<li class="divider"></li>
					<li class="dropdown-header"><a href="">周二的课程</a></li>
					<li><a href="">语文</a></li>
					<li><a href="">数学</a></li>
					<li><a href="">英语</a></li>
					<li class="disabled"><a href="">体育</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

小涛涛啊！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 第十一章下拉菜单

第十一章下拉菜单下拉菜单组件的使用事项：注意引入的顺序！！！–先引入css–引入jq–引入js 类作用 .dropdown 表示下拉菜单区域 .caret 三角 data-toggle='dropdown' 这个写法是为了和js代码进行交互，才有了下拉菜单交互功能 .dropdown-menu 菜单的区域 .pull-right 右对齐下拉菜单 .dropdown-header 下拉菜单的标签区域添加标题 .dro
复制链接

扫一扫