示例 1 : 按钮组
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
示例 2 : 按钮工具栏
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-toolbar" role="toolbar" aria-label="study">
<div class="btn-group" role="group" aria-label="java">
<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>
<div class="btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<div class="btn-group" role="group" aria-label="framework">
<button type="button" class="btn btn-default">Hiber</button>
<button type="button" class="btn btn-default">Struts</button>
<button type="button" class="btn btn-default">Spring</button>
</div>
</div>
示例 3 : 按钮组大小
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
br{
margin:20px;
}
</style>
<div class="btn-group btn-group-lg" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-xs" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
示例 4 : 垂直排列的按钮组
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group-vertical" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
示例 5 : 复选框
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="checkbox" checked>LOL(默认选中)
</label>
<label class="btn btn-default">
<input type="checkbox" > DOTA
</label>
<label class="btn btn-default">
<input type="checkbox" > WOW
</label>
</div>
示例 6 : 单选框
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked>LOL(默认选中)
</label>
<label class="btn btn-default">
<input type="radio" > DOTA
</label>
<label class="btn btn-default">
<input type="radio" > WOW
</label>
</div>