本文介绍了如何使用Bootstrap实现按钮式下拉菜单和分裂式按钮下拉菜单，并提供了完整的HTML代码示例。
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap-按钮式下拉菜单</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container bg-success">
<h1>Bootstrap-按钮式下拉菜单</h1>
<hr>
<h3>普通按钮式下拉菜单</h3>
<div class="dropdown">
<!--只是做了相对定位-->
<button class="btn btn-danger" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">菜单项1</a>
</li>
<li>
<a href="#">菜单项2</a>
</li>
<li>
<a href="#">菜单项3</a>
</li>
</ul>
</div>
<h3>分裂式按钮下拉菜单</h3>
<!--btn-group是做了相对定位的，所以可以直接替换dropdown -->
<!--dropdown-toggle可补全右边的圆角 -->
<div class="btn-group">
<button class="btn btn-danger">下拉菜单</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">菜单项1</a>
</li>
<li>
<a href="#">菜单项2</a>
</li>
<li>
<a href="#">菜单项3</a>
</li>
</ul>
</div>
<br>
<br>
</div>
</body>
</html>
结果如下：
扫一扫
13万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
