上QQ阅读APP看书，第一时间看更新
5.2 Bootstrap按钮组
本节介绍Bootstrap按钮组，主要包括基本按钮组、工具栏按钮组和垂直按钮组等方面的内容。
5.2.1 基本按钮组
基本按钮组设计最简单，就是把一组按钮放在同一个．btn-group类按钮组容器中，下面看一段代码示例。
【代码5-7】是一个基本按钮组样式的设计（详见源代码ch05目录中ch05.basicBtnGroup.html文件）：
01 <div class="bs-docs-example">
02 <div class="btn-group">
03 <button class="btn">Left</button>
04 <button class="btn">Middle</button>
05 <button class="btn">Right</button>
06 </div>
07 </div>
【代码5-7】中第02行代码通过．btn-group类展示了一个基本按钮组，页面效果如图5.7所示。
图5.7 基本按钮组
5.2.2 工具栏按钮组
工具栏按钮组是在基本按钮组的基础上，将多个基本按钮组组合成类似工具栏的样式设计，具体是通过．btn-toolbar类来实现的，下面看一段代码示例。
【代码5-8】是一个工具栏按钮组样式的设计（详见源代码ch05目录中ch05.toolbarBtnGroup.html文件）：
01 <div class="bs-docs-example">
02 <div class="btn-toolbar" role="toolbar">
03 <div class="btn-group">
04 <button type="button" class="btn btn-default">TB1-
1</button>
05 <button type="button" class="btn btn-default">TB1-
2</button>
06 <button type="button" class="btn btn-default">TB1-
3</button>
07 </div>
08 <div class="btn-group">
09 <button type="button" class="btn btn-default">TB2-
1</button>
10 <button type="button" class="btn btn-default">TB2-
2</button>
11 </div>
12 <div class="btn-group">
13 <button type="button" class="btn btn-default">TB3-
1</button>
14 </div>
15 </div>
16 </div>
【代码5-8】中第02行代码通过．btn-toolbar类定义了一个工具栏按钮组；其中，第03～07行代码、第08～11行代码和第12～14行代码通过．btn-group类分别定义了三组基本按钮组；页面效果如图5.8所示。
图5.8 工具栏按钮组
5.2.3 垂直按钮组
顾名思义，垂直按钮组是将按钮垂直排列成组的设计样式，具体是通过．btn-group-vertical类来实现的，下面看一段代码示例。
【代码5-9】是一个垂直按钮组样式的设计（详见源代码ch05目录中ch05.verticalBtnGroup.html文件）：
01 <div class="bs-docs-example">
02 <div class="btn-group btn-group-vertical">
03 <button type="button" class="btn btn-default">button
top</button>
04 <button type="button" class="btn btn-default">button
middle</button>
05 <button type="button" class="btn btn-default">button
bottom</button>
06 </div>
07 </div>
【代码5-9】中第02行代码通过．btn-group-vertical类定义了一个垂直按钮组，页面效果如图5.9所示。
图5.9 垂直按钮组