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 框架中不同的按钮风格都是通过不同的类名来实现，在使用过程中，开发者只需要选择不同的类名即可：

使用起来就很简单，就像前面介绍的默认按钮一样的使用方法，只需要在基础按钮“.btn”基础上追加对应的类名，就可以得到需要的按钮风格。

<button class="btn" type="button">基础按钮.btn</button>  
<button class="btn btn-default" type="button">默认按钮.btn-default</button> 
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
<button class="btn btn-success" type="button">成功按钮.btn-success</button> 

<button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
<button class="btn btn-link" type="button">链接按钮.btn-link</button> 

按钮大小

类似于 input 一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。

在 Bootstrap 框架中提供了三个类名来控制按钮大小：

在实际使用中，这几个类名可以配合按钮中其他颜色类名一起使用，但唯一一点不能缺少“.btn”类名：

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> 
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

块状按钮

Bootstrap 框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的 padding 和 margin 值。在实际当中，常把这种按钮称为块状按钮。

使用方法和前面的类似，只需要在原按钮类名上添加“.btn-block”类名，当然“.btn”类名是不可或缺的：

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button> 
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>   

按钮状态

在 Bootstrap 框架中针对按钮的状态效果主要分为两种：活动状态和禁用状态。

活动状态

Bootstrap 按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。

当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于 <button> 元素是通过“:active”伪类实现，而对于 <a> 这样的标签元素则是通过添加类名“.active”来实现。

禁用状态

禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity 的值从 100% 调整为 65%。

在 Bootstrap 框架中，要禁用按钮有两种实现方式：

• 在标签中添加 disabled 属性
• 在元素标签中添加类名“disabled”

两者的主要区别是：

“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过 JavaScript 这样的语言来处理。对于<a> 标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> 
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>

到此有关于按钮的基础知识就算是介绍完了，同样的，大家可以通过 buttons.less 或者 _buttons.scss 来自定义按钮风格。

图像

图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

• img-responsive：响应式图片，主要针对于响应式设计
• img-rounded：圆角图片
• img-circle：圆形图片
• img-thumbnail：缩略图片

使用方法非常简单，只需要在 <img> 标签上添加对应的类名，如下代码：

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <img   alt="140x140" src="http://placehold.it/140x140">
        <div>默认图片</div>
    </div>
    <div class="col-sm-4">
      <img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> 
        <div>圆角图片</div>
    </div>
    <div class="col-sm-4">
      <img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
        <div>圆形图片</div>
    </div>
      <div class="row">
        <div class="col-sm-6">
          <img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> 
            <div>缩略图</div>
        </div>
        <div class="col-sm-6">
          <img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140" /> 
          <div>响应式图片</div>
        </div>
      </div>
  </div>
</div> 

设置图片大小：

由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过 css 样式直接修改 img 图片的大小，这样操作就不响应了）

对于圆角图片和圆形图片效果，因为是使用了 CSS3 的圆角样式来实现的，所以注意对于 IE8 以及其以下版本不支持，是没有圆角效果的。

Bootstrap 框架为了大家更好的维护图像的样式，同样将这部分样式独立出来：

• LESS 版本，可以查阅 scaffolding.less
• Sass 版本，可以查阅 _scaffolding.scss

图标

在 Bootstrap 框架中也为大家提供了近 200 个不同的 icon 图片，而这些图标都是使用 CSS3 的@font-face 属性配合字体来实现的 icon 效果。

Bootstrap 框架中的图标都是字体图标，其实现原理就是通过 @font-face 属性加载了字体。

在 Bootstrap 框架中有一个 fonts 的目录，这个目录中提供的字体文件就是用于制作 icon 的字体文件。自定义完字体之后，需要对 icon 设置一个默认样式，在 Bootstrap 框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的 icon 编码：

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

所有 icon 都是以 glyphicon- 前缀的类名开始，然后后缀表示图标的名称。

请点击：http://getbootstrap.com/components/#glyphicons 链接查阅或根据bootstrap.css文件第2393行～第2992行查阅。