3.2Bootstrap学习组件篇之按钮组

按钮组

用按钮组把一组按钮放在同一行里。通过使用我们的按钮插件，可以设置为单选框或多选框样式及行为。

按钮组中的工具提示和弹出框需要特别的设置

当为.btn-group中的元素应用工具提示或弹出框时，必须指定container: 'body'选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。（这个是毛线？）

基本案例：

把一系列的.btn按钮放入.btn-group。

代码段：

<div class="btn-group">
		<button type="button" class="btn btn-default">left</button>
		<button type="button" class="btn btn-default">Middle</button>
		<button type="button" class="btn btn-default">Right</button>
	</div>

预览：

按钮工具栏

把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件。

代码段：

<div class="btn-toolbar" role="toolbar">
		<div class="btn-group">
			<button type="button" class="btn btn-default">1</button>
			<button type="button" class="btn btn-default">2</button>
			<button type="button" class="btn btn-default">3</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default">4</button>
			<button type="button" class="btn btn-default">5</button>
			<button type="button" class="btn btn-default">6</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default">7</button>
			<button type="button" class="btn btn-default">8</button>
			<button type="button" class="btn btn-default">9</button>
		</div>
		
	</div>

预览效果：

尺寸

只要给.btn-group加上.btn-group-*，而不是给组中每个按钮都应用大小类。

代码段：

<div class="btn-group btn-group-lg">
		<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">
		<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 btn-group-sm">
		<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 btn-group-xs">
		<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>

预览效果：

嵌套

想要把下拉菜单混合到一系列按钮中，就把.btn-group放入另一个.btn-group中。

代码段：

<h1 class="page-header">嵌套</h1>
	<div class="btn-group">
		<button type="button" class="btn btn-default">1</button>
		<button type="button" class="btn btn-default">2</button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			下拉菜单
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">下拉链接</a></li>
			<li><a href="#">下拉链接</a></li>
			<li><a href="#">下拉链接</a></li>
		</ul>
	</div>

预览：

垂直排列

让一组按钮竖直显示而不是水平显示。

代码段：

<h1 class="page-header">垂直排列</h1>
	<div class="btn-group-vertical">
		<button type="button" class="btn btn-default">1</button>
		<button type="button" class="btn btn-default">2</button>
				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			下拉菜单
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">下拉链接</a></li>
			<li><a href="#">下拉链接</a></li>
			<li><a href="#">下拉链接</a></li>
		</ul>
	</div>

两端对齐的链接排列

让一组按钮拉长为相同的尺寸，适应父元素的宽度。对于按钮组中的按钮下拉菜单也同样适用。

特定元素的用法

这只适用 <a> 元素，因为 <button> 元素不能应用这些样式并将其所包含的内容两端对齐（就像display: table-cell;之类的表现形式）。

代码段：

<h1 class="page-header">两端对齐的链接排列</h1>
	<div class="btn-group btn-group-justified">
		<a href="#" class="btn btn-default" role="button">Link</a>
		<a href="#" class="btn btn-default" role="button">Link</a>
		<a href="#" class="btn btn-default" role="button">Link</a>
	</div>

预览：

按钮式下拉菜单

把任何按钮放入.btn-group然后加入正确的菜单标记，就可以做成下拉菜单触发器。

插件需求

按钮下拉菜单需要你的版本的Bootstrap的下拉菜单插件。

单按钮下拉菜单

只要改变一些基本的标记，就能把按钮变成下拉菜单开关。

代码段：

<h1 class="header">单按钮下拉菜单</h1>
	<div class="btn-group">
		<button type="button" class="btn btn-default">按钮</button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		下拉按钮<span class="caret"></span>	
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">链接</a></li>
			<li><a href="#">链接</a></li>
			<li><a href="#">链接</a></li>
			<li class="divider"></li>
			<li><a href="#">链接</a></li>
		</ul>
			
	</div>

预览效果

分裂式按钮下拉菜单

相似地，分裂式按钮下拉菜单也需要同样的改变标记，但只要多一个分开的按钮。

代码段:

<h1 class="page-header">分列式按钮下拉菜单</h1>
	<div class="btn-group">
		<button type="button" class="btn btn-danger">Action</button>
		<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">Action</a></li>
			<li><a href="#">Action</a></li>
			<li><a href="#">Action</a></li>
			<li class="divider"></li>
			<li><a href="#">Action</a></li>
		</ul>
	
	</div>

预览：

尺寸

下拉菜单按钮适用所有尺寸的按钮。

代码段：

<h1 class="page-header">下拉菜单按钮适合所有尺寸的按钮</h1>
	<div class="btn-group">
		<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" type="button">
		Large button
		<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">链接1</a></li>
			<li><a href="#">链接1</a></li>
			<li><a href="#">链接1</a></li>
			<li><a href="#">链接1</a></li>
		</ul>
	</div>
	<div class="btn-group">
		<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" type="button">
		Small button
		<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">链接1</a></li>
			<li><a href="#">链接1</a></li>
			<li><a href="#">链接1</a></li>
			<li><a href="#">链接1</a></li>
		</ul>
	</div>
	
	<div class="btn-group">
		<button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" type="button">
		Extra small button
		<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">链接1</a></li>
			<li><a href="#">链接1</a></li>
			<li><a href="#">链接1</a></li>
			<li><a href="#">链接1</a></li>
		</ul>
	</div>

预览：

向上弹出式菜单

给父元素添加.dropup就能使触发的下拉菜单在元素上方。

代码段：

<div class="btn-group dropup">
		<button type="button" class="btn btn-default">向上弹出式按钮菜单</button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			<span class="caret"></span>
			<span class="sr-only"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">链接1</a></li>
			<li><a href="#">链接2</a></li>
			<li><a href="#">链接3</a></li>
			<li><a href="#">链接4</a></li>
		</ul>
		
	</div>

预览：