实例
<!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="../lib/dist/css/bootstrap.css">
<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
<style>
button{
margin-top: 50px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-warning" id="dropdownMenu" data-toggle="dropdown" >
位置
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li><a href="">后卫</a></li>
<li><a href="">前锋</a></li>
<li><a href="">中锋</a></li>
<!--分割线-->
<li role="separator" class="divider"></li>
<li><a href="">替补</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="btn-group">
<button type="button" class="btn btn-info">分区排名</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">大西洋赛区</a></li>
<li><a href="#">东南赛区</a></li>
<li><a href="#">西南赛区</a></li>
<li><a href="#">中部赛区</a></li>
<li><a href="#">太平洋赛区</a></li>
<li><a href="#">西北赛区</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
