Bootstrap 框架-表单（按钮/图像）

Bootstrap 框架的按钮也是一个独立部分，我们同样在不同的版本之中能找到对应的代码：

• LESS版本：查看源文件 buttons.less
• Sass版本：查看源文件 _buttons.scss
• 已编译版本：查看源文件 bootstrap.css 文件第1992行～第2353行

基本按钮

Bootstrap 框架中考虑了不同浏览器的解析差异，进行了比较安全的兼容性处理，使按钮效果在不同的浏览器中所呈现的效果基本相同。

Bootstrap 框架的按钮使用非常的简单，使用方式如下：

<button class="btn" type="button">我是一个基本按钮</button>

默认按钮

Bootstrap 框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。

使用默认按钮风格也非常的简单，只需要在基础按钮“btn”的基础上增加类名“btn-default”即可：

<button class="btn btn-default" type="button">默认按钮</button>

多标签支持

一般制作按钮除了使用 <button> 标签元素之外，还可以使用 <input type="submit"> 和 <a> 标签等。同样，在 Bootstrap 框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

注意：虽然在 Bootstrap 框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题，强烈建议使用 button 或 a 标签来制作按钮。

定制风格

在 Bootstrap 框架中除了默认的按钮风格之外，还有其他六种按钮风格，每种风格的其实都一样，不同之处就是按钮的背景颜色、边框颜色和文本颜色。

在 Bootstrap 框架中不同的按钮风格都是通过不同的类名来实现，在使用过程中，开发者只需要选择不同的类名即可：