3.2Bootstrap学习组件篇之按钮组

待我称王封你为后i 2022-08-27 03:41 165阅读 0赞

**按钮组**

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

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

当为`.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>

预览： ![Center][]

按钮工具栏

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

代码段：

预览效果：

![20140504112817781][]

**尺寸**

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

代码段：

预览效果：

![Center 1][]

**嵌套**

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

**代码段：**

预览： ![20140504120545953][]

### 垂直排列 ###

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

代码段：

![20140504121820140][]

### 两端对齐的链接排列 ###

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

#### 特定元素的用法 ####

这只适用 `<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>

预览：

![20140504123113500][]

# 按钮式下拉菜单 #

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

#### 插件需求 ####

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

单按钮下拉菜单

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

代码段：

<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>

预览效果

![20140504124005078][]

### 分裂式按钮下拉菜单 ###

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

代码段:

<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>

预览：

![20140504124600718][]

### 尺寸 ###

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

代码段：

<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>

预览：

![20140504125229453][]

### 向上弹出式菜单 ###

给父元素添加`.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>

预览：

![20140504130410843][]

[Link 1]: http://v3.bootcss.com/javascript/#buttons
[Center]: /images/20220824/ab3c5efd84cd49118d1a8d6e4ee03506.png
[20140504112817781]: /images/20220824/a982d3616fb74a08954c9295cecfb8f9.png
[Center 1]: /images/20220824/184ca92199fc4b3d81e32cf53d2b496b.png
[20140504120545953]: /images/20220824/209b33fda03a459aa053285176f64d2a.png
[20140504121820140]: /images/20220824/721d0ec64d3c4c7492bb35b1346d9d63.png
[20140504123113500]: /images/20220824/93dc3cd3efc04101b0c530b50f6dfac8.png
[Link 2]: http://v3.bootcss.com/javascript/#dropdowns
[20140504124005078]: /images/20220824/4213bf319beb4c0fa0d2ea39093642dc.png
[20140504124600718]: /images/20220824/461028c7bde4453a85461faa9bd8d1cf.png
[20140504125229453]: /images/20220824/dd9557f56dc94be895b4adf47392044d.png
[20140504130410843]: /images/20220824/f909606d2060475fab70ec9af4f13ee0.png