第十二章 按钮组件
类 作用
.btn-group 把按钮分成一小组
.btn-toolbar 把小组按钮分成一大组
.btn-group-lg, 超大组
.btn-group-sm, 小1号组
.btn-group-xs 超小号组
.btn-group-vertical 竖着排列的组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary">1</button>
<button class="btn btn-primary">2</button>
<button class="btn btn-primary">3</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-primary">1</button>
<button class="btn btn-primary">2</button>
<button class="btn btn-primary">3</button>
</div>
<div class="btn-group btn-group-xs">
<button class="btn btn-primary">1</button>
<button class="btn btn-primary">2</button>
<button class="btn btn-primary">3</button>
</div>
<p class="h1 page-header">竖着排列</p>
<div class="btn-group btn-group-vertical">
<button class="btn btn-primary">首页
<span class="caret"></span>
</button>
<button class="btn btn-primary">目录
<span class="glyphicon glyphicon-th-list"></span>
</button>
<button class="btn btn-primary">设置
<span class="glyphicon glyphicon-asterisk"></span>
</button>
</div>
</div>
</body>
</html>