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