4.3　Bootstrap按钮

Bootstrap框架为按钮增强了多种表现样式，任何为<a>或<button>标签添加的.btn系列类，均可在页面中呈现出风格多样的按钮。本节我们详细介绍各种样式的按钮。

4.3.1　默认样式按钮

使用Bootstrap框架中默认按钮样式非常简单，仅需要在按钮<button>标签内添加一系列.btn相关类即可。下面看一段代码示例。

【代码4-23】一个默认按钮样式的设计（详见源代码ch04目录中ch04.defaultButton.html文件）

上面的代码展示了一个Bootstrap默认按钮样式的表格，左侧一列为按钮外观，右侧一列为按钮所使用的样式类，页面效果如图4.23所示。

4.3.2　按钮大小样式

定义按钮的尺寸大小也非常简单，只需在按钮<button>标签内添加.btn-lg、.btn-sm两个类即可。下面看一段代码示例。

【代码4-24】一个应用按钮大小样式的设计（详见源代码ch04目录中ch04.sizeButton.html文件）

上面的代码显示了一个Bootstrap按钮大小样式的表格，左侧一列为按钮外观，右侧一列为按钮所使用的样式类，页面效果如图4.24所示。

4.3.3　特殊样式按钮

本小节介绍两个特殊样式的按钮：一个是块级（.btn-block）按钮；另一个是禁用样式（disabled）按钮。下面看一段代码示例。

【代码4-25】两个特殊样式按钮的设计（详见源代码ch04目录中ch04.specButton.html文件）

第11行代码使用.btn-block样式的按钮将会填充整个父级元素，第15行代码使用disabled样式的按钮将处于禁用状态，页面效果如图4.25所示。