在Bootstrap的上面的全局CSS中按钮样式和图片的样式

按钮样式

我们最常用的按钮的三种方式：分别是a标签设置的按钮、button按钮和input上面的type上的button属性和submit属性

将a标签，input标签上面的button属性和submit属性和button标签设置成按钮的样式的方法的class的名字是btn btn-default
使用方法是：

<a  href="#" role="button" class="btn btn-default">Link</a>
<button  type="submit" class="btn btn-default">Button</button>
<input  type="button" value="Input" class="btn btn-default">
<input  type="submit" value="Submit" class="btn btn-default">

下面的这个是这个的效果图：

针对组件的注意事项：

1、虽然按钮类可以应用到 和 元素上，但是，导航和导航条组件只支持 元素。
2、如果 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=“button” 属性。
3、阻止我们为基于 元素所创建的按钮设置 line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。

我在Bootstrap的上面有着对这个暗流的颜色的不同，寓意同样也不同，例：

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

下面的就是这些代码的的效果图如下：

按钮的大小

例：

<a href="#" class="btn btn-success btn-xs">超小号</a>
<a href="#" class="btn btn-success btn-sm">小号</a>
<a href="#" class="btn btn-success btn-lg">超大号</a>

当按钮处于激活状态时的样式：
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 元素，是通过 :active 状态实现的。对于 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 上，并通过编程的方式使其处于激活状态。

button 元素
由于 :active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加 .active 类。

<button type="button" class="btn btn-default btn-lg active">Button</button>

下面的这个图片是上面这个代码所创建的按钮点击后出现的效果，原来默认点击的效果是不会出现蓝色选中边框的，还有按钮只有鼠标浮上去的时候才会出现的效果的，现在在点击之后才出现的这个效果，而且这个是会长期在上面的，除非你点击了；另外的一个按钮的时候，之前点击的按钮就恢复到原来的样式。

在这里还要注意的是，在Bootstrap上面提供的所有的能够实现的按钮上面加上了class选择器的名为active都会出现下面的图片的这个效果。

警用状态

要使button按钮处于不可用的状态的方式给button按钮加上disabled=“disabled”属性，要使a标签能够和button按钮一样的可以让他变成警用的按钮，那就像相面的代码一样使用：

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

我们把 .disabled 作为工具类使用，就像 .active 类一样，因此不需要增加前缀。

链接的原始功能不受影响
上面提到的类只是通过设置 pointer-events: none 来禁止 元素作为链接的原始功能，但是，这一 CSS 属性并没有被标准化，并且 Opera 18 及更低版本的浏览器并没有完全支持这一属性，同样，Internet Explorer 11 也不支持。因此，为了安全起见，建议通过 JavaScript 代码来禁止链接的原始功能。

响应式图片

在Bootstrap上面给了提供了一些图片给出的一些样式：
让一张图片变成圆角，例：

<!-- 图片带圆角 -->
<img src="img/txt07.jpg" alt="" class="img-rounded">

显示的效果图，如下：

使图片变成圆形，例：

<!-- 图片变成圆形图片 -->
<img src="img/txt07.jpg" alt="" class="img-circle">

例子出现的效果：

图片带有可见边框，例;

<!-- 带边框的图片 -->
<img src="img/txt07.jpg" alt="" class="img-thumbnail">

上面的代码形成的效果图：

这两点的内容上面要注意的几点;
1、图片响应式的上面要注意对图片的变成的圆角和圆形的这两个属性在IE8以下的版本里面是不会有效果的。
2、要设置成响应式的时候就要在div上面的class选择器的值为container的。