<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<div class="container" style="padding:40px;">
<!-- 1. 单一按钮组-->
<div class="btn-group">
<button type="button" class="btn btn-default">单一按钮组</button>
<button type="button" class="btn btn-default">单一按钮组</button>
<button type="button" class="btn btn-default">单一按钮组</button>
</div>
<!--2.按钮工具栏-->
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">工具栏组A</button>
<button type="button" class="btn btn-default">工具栏组A</button>
<button type="button" class="btn btn-default">工具栏组A</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">工具栏组B</button>
<button type="button" class="btn btn-default">工具栏组B</button>
<button type="button" class="btn btn-default">工具栏组B</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">工具栏组C</button>
<button type="button" class="btn btn-default">工具栏组C</button>
<button type="button" class="btn btn-default">工具栏组C</button>
</div>
</div>
<!--3.设置按钮组大小-->
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">大按钮</button>
<button type="button" class="btn btn-success">大按钮</button>
<button type="button" class="btn btn-warning">大按钮</button>
</div>
<div class="btn-group btn-group-md">
<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-success">默认按钮</button>
<button type="button" class="btn btn-warning">默认按钮</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">小按钮</button>
<button type="button" class="btn btn-success">小按钮</button>
<button type="button" class="btn btn-warning">小按钮</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">极小按钮</button>
<button type="button" class="btn btn-success">极小按钮</button>
<button type="button" class="btn btn-warning">极小按钮</button>
</div>
<!--4.按钮组嵌套-->
<div class="btn-group">
<button type="button" class="btn btn-default">嵌套按钮</button>
<button type="button" class="btn btn-default">嵌套按钮</button>
<div class="btn-group dropup">
<button type="button" class="btn btn-default 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>
</ul>
</div>
<!--5.垂直按钮组-->
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">垂直按钮</button>
<button type="button" class="btn btn-default">垂直按钮</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default 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>
</ul>
</div>
</div>
</div>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>显示效果：
