编程一 , 标准下拉菜单
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<title>下拉菜单</title>
<style>
li{
text-align: center;
}
</style>
</head>
<body>
<script src="../jquery.js"></script>
<script src="../dist/js/bootstrap.js"></script>
<h3>普通下拉菜单</h3>
<div class="dropdown">
<button type="button" class="btn btn-default" data-toggle="dropdown">请选择您的爱好
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">我的爱好</li>
<li><a href="">吃大餐</a></li>
<li><a href="">唱KTV</a></li>
<li><a href="">游泳</a></li>
<li><a href="">打篮球</a></li>
<li class="divider"></li>
<li><a href="">写代码</a></li>
<li><a href="">玩游戏</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
编程二 , 分裂式下拉菜单
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<title>下拉菜单</title>
<style>
.btn-group{
margin-left: 100px;
}
li{
text-align: center;
}
</style>
</head>
<body>
<script src="../jquery.js"></script>
<script src="../dist/js/bootstrap.js"></script>
<h3>分裂式下拉菜单</h3>
<div class="btn-group">
<button type="button" class="btn btn-info">我的爱好</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<div class="caret"></div>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">我的爱好</li>
<li><a href="">吃大餐</a></li>
<li><a href="">唱KTV</a></li>
<li><a href="">游泳</a></li>
<li><a href="">打篮球</a></li>
<li class="divider"></li>
<li><a href="">写代码</a></li>
<li><a href="">玩游戏</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例