上QQ阅读APP看书，第一时间看更新
4.3 Bootstrap按钮
Bootstrap框架为按钮增强了多种表现样式，任何为<a>或<button>标签添加的．btn系列类均可在页面中呈现出风格多样的按钮，本节我们详细介绍各种样式的按钮。
4.3.1 默认样式按钮
使用Bootstrap框架中默认按钮样式非常简单，仅需要在按钮<button>标签内添加一系列．btn相关类即可，下面看一段代码示例。
【代码4-25】是一个默认按钮样式的设计（详见源代码ch04目录中ch04.defaultButton.html文件）：
01 <div class="bs-docs-example">
02 <table class="table table-bordered table-striped">
03 <thead>
04 <tr>
05 <th>按钮外形</th>
06 <th>样式（class）</th>
07 </tr>
08 </thead>
09 <tbody>
10 <tr>
11 <td><button type="button" class="btn">默认</button></td>
12 <td><code>btn</code></td>
13 </tr>
14 <tr>
15 <td><button type="button" class="btn btn-primary">主
要</button></td>
16 <td><code>btn btn-primary</code></td>
17 </tr>
18 <tr>
19 <td><button type="button" class="btn btn-info">信息
</button></td>
20 <td><code>btn btn-info</code></td>
21 </tr>
22 <tr>
23 <td><button type="button" class="btn btn-success">成
功</button></td>
24 <td><code>btn btn-success</code></td>
25 </tr>
26 <tr>
27 <td><button type="button" class="btn btn-warning">警
告</button></td>
28 <td><code>btn btn-warning</code></td>
29 </tr>
30 <tr>
31 <td><button type="button" class="btn btn-danger">危险
</button></td>
32 <td><code>btn btn-danger</code></td>
33 </tr>
34 <tr>
35 <td><button type="button" class="btn btn-inverse">反
向</button></td>
36 <td><code>btn btn-inverse</code></td>
37 </tr>
38 <tr>
39 <td><button type="button" class="btn btn-link">链接
</button></td>
40 <td><code>btn btn-link</code></td>
41 </tr>
42 </tbody>
43 </table>
44 </div>
上面的代码展示了一个Bootstrap默认按钮样式的表格，左侧一列为按钮外观，右侧一列为按钮所使用的样式类，页面效果如图4.25所示。
图4.25 默认按钮样式
4.3.2 按钮大小样式
如果想定义按钮的尺寸大小也非常简单，仅需要在按钮<button>标签内添加．btn-large、.btn-small和．btn-mini三个类即可，下面看一段代码示例。
【代码4-26】是一个应用按钮大小样式的设计（详见源代码ch04目录中ch04.sizeButton.html文件）：
01 <div class="bs-docs-example">
02 <table class="table table-bordered table-striped">
03 <thead>
04 <tr>
05 <th>按钮外观</th>
06 <th>样式（class）</th>
07 </tr>
08 </thead>
09 <tbody>
10 <tr>
11 <td><button class="btn btn-mini" type="button">Mini
button</button></td>
12 <td><code>btn btn-mini</code></td>
13 </tr>
14 <tr>
15 <td><button type="button" class="btn btn-small">Small
button</button></td>
16 <td><code>btn btn-small</code></td>
17 </tr>
18 <tr>
19 <td><button type="button" class="btn btn-
primary">Default button</button></td>
20 <td><code>btn btn-primary</code></td>
21 </tr>
22 <tr>
23 <td><button type="button" class="btn btn-large">Large
button</button></td>
24 <td><code>btn btn-large</code></td>
25 </tr>
26 </tbody>
27 </table>
28 </div>
上面的代码显示了一个Bootstrap按钮大小样式的表格，左侧一列为按钮外观，右侧一列为按钮所使用的样式类，页面效果如图4.26所示。
图4.26 按钮大小样式
4.3.3 特殊样式按钮
本小节介绍两个特殊样式的按钮，一个是块级（.btn-blobk）按钮，另一个是禁用样式按钮（disabled）按钮，下面看一段代码示例。
【代码4-27】是两个特殊样式按钮的设计（详见源代码ch04目录中ch04.specButton.html文件）：
01 <div class="bs-docs-example">
02 <table class="table table-bordered table-striped">
03 <thead>
04 <tr>
05 <th>按钮外观</th>
06 <th>样式（class）</th>
07 </tr>
08 </thead>
09 <tbody>
10 <tr>
11 <td><button type="button" class="btn btn-block">Block
level button</button></td>
12 <td><code>btn btn-block</code></td>
13 </tr>
14 <tr>
15 <td><button type="button" class="btn disabled">disabled
button</button></td>
16 <td><code>btn disabled</code></td>
17 </tr>
18 </tbody>
19 </table>
20 </div>
【代码4-27】中第11行代码使用．btn-block样式的按钮将会填充整个父级元素，而第15行代码中使用disabled样式的按钮将处于禁用状态，以上页面效果如图4.27所示。
图4.27 特殊样式按钮