开发者学堂课程【前端开发框架 Bootstrap 使用教程：Bootstrap 组件_按钮组】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4240
Bootstrap 组件_按钮组
目录：
一、按钮组
二、基本实例
三、按钮工具栏
四、尺寸
五、嵌套
六、垂直排列
七、两端对齐排列的按钮组
一、按钮组
1.按钮组定义
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。
2.按钮组中的工具提示和弹出框需要特别的设置
当为. btn-group 中的元素应用工具提示或弹出框时,必须指定 container: 'body' 选项,这样可以避免不必要的副作用。(例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角)。
3.确保设置正确的 role 属性并提供一个 label 标签
为了向使用辅助技术-如屏幕阅读器-的用户正确传达一正确的按钮分组 ,需要提供一个合适的 role 属性。对于按钮组合,应该是 role="group" ，对于 toolbar (工具栏)应该是 role-"toolbar" 。
一个例外是按钮组合只包含一个单一的控制元素或一个下拉菜单(比如实际情况， 元素组成的两端对齐排列的按钮组) 或下拉菜单。
此外，按钮组和工具栏应给定一个明确的 label 标签 ，尽管设置了正确的 role 属性，但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中,我们使用 aria-label ，但是，aria-labelledby 也可以使用。
二、基本实例
Wrap a series of buttons with .btn in .btn-group
实例:
<div class="btn-group" role="group" arla- label="...."
<button type= "button" class="btn btn-default">Left</button>
<button type= "button" class="btn btn-default">Middlec/button>
<button type= "button" class= "btn btn-def au1t">Right</button>
</div>
1.设定基本按钮组
新建 buttongroup.html文件，编辑：
1<! DOCTYPE html>
2<html lang= "en">
3<head>
4<meta charset="UTF-8">
5<title>按钮组</title>
6<link href="bootstrap.min.css" rel="stylesheet"/>
7< /head>
8<body>
9<div class="container">
10<div class= "btn-group" role="group">
11<button type="button" class="btn btn- default">left< /button>
12<button type="button" class="btn btn-default">middle< /button>
13<button type="button" class="btn btn- default">right< /button>
14</div>
15</div>
16
17
18
19<script src="jquery-2.2.1.min.js"></script>
20<script src="bootstrap.min.js"></script
21< /body>
22< /html>
打开浏览器，可以看到三个按顺序并排排列的按钮组。
2.设定图标按钮组
继续编辑上边程序。
设置新的Bootstrap核心css文件:
<link re1="stylesheet" href=" //cdn. bootcss . com/bootstrap/3.3.5/css/bootstrap.min.css">
设置类名、属性及上下左右按钮图标值：
<div class= "btn- group" role="group"
<button type="button" class="btn btn-default'">
<span class="gLyphicon glyphicon- arrow- left"></span>
</button>
<button type="button" class="btn btn- defaut")
<span class="glyphicon glyphicon- arrow- up"></span>
< /button>
<button type="button" class="btn btn- default">
<span class="gLyphicon glyphicon- arrow-right"></span>
</button>
<button type="button" class="btn btn-defaultl">
<span class="gLyphicon glyphicon- arrow-down"></span>
</button>
刷新浏览器，可以看到左上右下的方向图标按钮。
三、按钮工具栏
把一组<div class-"btn-group">组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。
实例:
<div class="btn-toolbar" role="toolbar" aria-label-"...">
<div class="btn-group" role="group" aria-label-"...">...</div>
<div class="btn-group" role=" group" aria-label-"...">...</div>
<div class="btn-group" role="group" aria-label-"...">...</div>
</div>
打开buttongroup.html文件，将<div class-"btn-group">组合进<div class="btn-toolbar"> ：
<div class="btn- toolbar" role="toolbary">
刷新浏览器得到结果：可以看到两个分开的单独的组件按钮。
四、尺寸
只要给 .btn-group 加上 . btn-group-*类，就省去为按钮组中的每个按钮都赋予尺寸类了。如果包含了多个按钮组时也适用。
实例:
<div class="btn-group btn-group-1g" role=" group" aria-labe1="...*>...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role=" group" aria-labe1="...*>...</div>
<div class="btn-group btn-group-xs" role="group" aria-labe1="...">...</div>
打开buttonggroup.html文件,
将上边程序段<div class= "btn-group" role="group"> 改为：
<div class="btn-group btn-group-1g" role=" group">
依次设置其他三个不同大小，正常比例的，sm比例的，xs比例的。
刷新浏览器，可以看到四个大小不同的按钮。
五、嵌套
想要把下拉菜单混合到一系列按钮中，只须把 . btn-group放入另一个.btn-group 中。
实例：
<div class="btn-group" role-"group" aria-label=" ..
<button type- "button" classm"btn btn-default">1</button>
<button type- "button" classo"btn btn-def ault" >2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false" >
Dropdown
<span class-"caret"></span>
</button>
<ul classa" dropdown-menu">
<li><a href="#" >Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
打开buttongroup.html文件,重新编辑：
1<! DOCTYPE html>
2<html lang= "en">
3<head>
4 <meta charset="UT-8-">
5 <stitle>按钮组</title>
6<Link href= "bootstrap.min.css" re1="stylesheet"/>
7<link rel="stylesheet" href="//cdn. Bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
9< /head>
10<body>
11<div class="containerly">
12<div class="btn-group" role="group">
13<button type="button" class="btn btn-default dropdown- toggle" data- toggle="dr opdown" aria = expanded="false">
14<span class="caretl"< /span>
15</button>
16<ul class="dropdown- menu" role="menu">
17<li><a href="#">1</a> </li>
18<li><a href="#">2</a> </li>
19<li><a href="#">3</a> </li>
20<li><a href="#">4</a> </li>
21</ul>
22 </div>
23</div>
24
25
26
27<script src="jquery-2.2.1.min.js"></script>
28<script src="bootstrap.min. jsl"></scr ipta
29 < / body>
30</htmL>
打开浏览器刷新，可以看到一个有下拉选框的组件按钮。
六、垂直排列
让一组按钮重直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。
实例：
<div class="btn-group-vertical" role="group" aria-labe1."...">
</div>
打开 buttongroup.html 文件,将 <div class="btn-group" role="group"> 改为：
12<div class="btn-group-vertical" role="group">
13<button type="button" class="btn btn-default dropdown- toggle" data- toggle="dr opdown" aria = expanded="false">
14<span class="caretl"< /span>
15</button>
然后叠加两次。
刷新浏览器，可以看到三个叠加的均有下拉选框的按钮组。
七、两端对齐排列的按钮组
让一组按钮拉长为相同的尺寸,填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。
打开 buttongroup.html 文件,重新编辑：
1<! DOCTYPE html>
2<html lang= "en">
3<head>
4<meta charset="UT-8-">
5 <stitle>按钮组</title>
6<Link href= "bootstrap.min.css" re1="stylesheet"/>
7<link rel="stylesheet" href="//cdn. Bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
9< /head>
10<body>
11<div class="container">
12<div class="btn-group btn-group-justif1ed" role="group">
13 <div class="btn-group" role="group">
14 <button type="button" class="btn btn-default">left</button>
15</div>
16<div class="btn- group" role="gr oup">
17 <button type= "button" class= "btn btn- de fault">middle</button>
18 </div>
19 <div class="btn- group" role="group">
20 <button type= "button" class= "btn btn-de fault">r ight< /button>
21 </div>
22
23</div>
24 </div>
25
26
27<script src="jquery-2.2.1.min.js"></script>
28<script src="bootstrap.min. jsl"></scr ipta
29< / body>
30 </htmL>
刷新浏览器，可以看到三个长边框的按钮组件。
