bootstrap 学习笔记（5）---- 图片和响应式工具

（一）响应式图片：

在 Bootstrap 版本 3 中，经过为图片添加 .img-responsive 类能够让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

注意：若是须要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center

代码：<img src="..." class="img-responsive" alt="Responsive image">

二、图片形状：经过为 <img> 元素添加如下相应的类，能够让图片呈现不一样的形状。

   跨浏览器兼容性  请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。

代码：<img src="..." alt="..." class="img-rounded">（ 带弧度的正方形）

　　<img src="..." alt="..." class="img-circle">（圆形）

　　<img src="..." alt="..." class="img-thumbnail">（有边框的圆形，这个图片要生效必须设置图片有颜色，才能显示出来）

三、辅助类

a 情景文本颜色：经过颜色来展现意图，bootstrap提供了一组工具类。这个类能够应用于连接，而且在鼠标通过时颜色还能够加深，就像默认的连接同样。

代码：<p class="text-muted">...</p>

类名有：.text-muted 　　.text-primary　　.text-success　　.text-info　　.text-warning　　.text-danger

b 背景颜色：和情境文本颜色类同样，使用任意背景色类就能够设置元素的背景。连接组件在鼠标通过时颜色会加深，就像上面所讲的文本颜色类同样。

类名有：.bg-primary　　.bg-success　　.bg-info　　.bg-warning　　.bg-danger

c 关闭按钮：经过使用一个象征关闭的图标，能够让模态框和警告框消失。

代码：<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

 d 三角符号 : 经过使用三角符号能够指示某个元素具备下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。

代码：<span class="caret"></span>

e 清除浮动  经过为父元素添加 .clearfix 类能够很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还能够做为 mixin 使用。

代码：<div class="clearfix">...</div>

f 隐藏和显示 .show .hidden

(二)响应式工具

.img-responsive   .table-responsive  是两个响应式表格和响应式图片的类。