（一）響應式圖片：

在 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">

2、圖片形狀：通過為

跨瀏覽器兼容性 請時刻牢記：Internet Explorer 8 不支持 CSS3 中的圓角屬性。

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

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

　　<img src="..." alt="..." class="img-thumbnail">（有邊框的圓形，這個圖片要生效必須設置圖片有顏色，才能顯示出來）

3、輔助類

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 是兩個響應式表格和響應式圖片的類。

bootstrap 學習筆記（5）---- 圖片和響應式工具