<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- 下拉菜单必须的三级结构：
<div class="dropdown">
<a data-toggle="dropdown">触发元素</a>
<ul class="dropdown-menu">菜单内容(隐藏元素)</ul>
</div>-->
<h1>下拉菜单</h1>
<!--下拉菜单插件dropdown-->
<div class="dropdown">
<!--data-toggle="dropdown"会被bootstrap.js选中，添加事件监听-->
<!--向链接或按钮添加data-toggle="dropdown"来切换下拉按钮-->
<!--dropdown-toggle是为了JS调用下拉框-->
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
<div class="dropdown-menu">
<!-- 标题：.dropdown-header
分割线：.dropdown-divider(块级元素)
禁用：.disabled
启用：.active-->
<h5 class="dropdown-header">列表标题</h5>
<!--dropdown-item下拉复选框-->
<a href="#" class="dropdown-item active">Link1</a>
<a href="#" class="dropdown-item disabled">Link2</a>
<div href="#" class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Link4</a>
<a href="#" class="dropdown-item">Link5</a>
</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/>
</body>
</html>
3439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
