<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>图标菜单和按钮组件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<!--图标参考官网-->
<i class="glyphicon glyphicon-star"></i>
<button class="btn btn-default btn-sm glyphicon glyphicon-star"></button>
<!--
dropdown 下拉菜单头
data-toggle="dropdown" 下拉菜单js样式
dropdown-menu 下拉菜单
dropdown-menu-right 下拉菜单左边显示
dropdown-header 下拉菜单头
divider 分割线
disabled 禁用项
-->
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" >
<li class="dropdown-header">网站导航</li>
<li>
<a href="#">1</a>
</li>
<li class="divider"></li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4 </a>
</li>
</ul>
</div>
<!--按钮组件
btn-group
dropdown-toggle 嵌套下拉菜单需要用此组件
btn-toolbar 大的群组组件
btn-group-vertical 垂直排列
btn-group-justified 两端对齐<适用于a标签和分组后的button>
-->
<div class="btn-group-justified">
<a class="btn btn-default">1</a>
<a class="btn btn-default">1</a>
<a class="btn btn-default">1</a>
</div>
<div class="btn-group-justified">
<div class="btn-group">
<button class="btn btn-default">1</button>
</div>
<div class="btn-group">
<button class="btn btn-default">2</button>
</div>
<div class="btn-group">
<button class="btn btn-default">3</button>
</div>
</div>
<div class="btn-group-vertical">
<div class="btn-group">
<button class="btn btn-default">1</button>
</div>
<div class="btn-group">
<button class="btn btn-default">2</button>
</div>
<div class="btn-group">
<button class="btn btn-default">3</button>
</div>
</div>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" >
<li class="dropdown-header">网站导航</li>
<li>
<a href="#">1</a>
</li>
<li class="divider"></li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4 </a>
</li>
</ul>
</div>
</div>
<!--分组式下拉菜单-->
<div class="btn-group">
<button class="btn btn-group">下拉菜单</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" >
<li class="dropdown-header">网站导航</li>
<li>
<a href="#">1</a>
</li>
<li class="divider"></li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4 </a>
</li>
</ul>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</body>
</html>