在本章中，我們將學(xué)習(xí) Bootstrap 對(duì)圖片的支持。Bootstrap 提供了三個(gè)可對(duì)圖片應(yīng)用簡(jiǎn)單樣式的 class：
-
.img-rounded：添加 border-radius:6px 來獲得圖片圓角。
-
.img-circle：添加 border-radius:50% 來讓整個(gè)圖片變成圓形。
-
.img-thumbnail：添加一些內(nèi)邊距（padding）和一個(gè)灰色的邊框。
請(qǐng)看下面的實(shí)例演示：
實(shí)例
<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded"> <img src="/wp-content/uploads/2014/06/download.png" class="img-circle"> <img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">
嘗試一下 ?
結(jié)果如下所示：
<img> 類
以下類可用于任何圖片中。
|
類
|
描述
|
實(shí)例
|
|
.img-rounded
|
為圖片添加圓角 (IE8 不支持)
|
嘗試一下
|
|
.img-circle
|
將圖片變?yōu)閳A形 (IE8 不支持)
|
嘗試一下
|
|
.img-thumbnail
|
縮略圖功能
|
嘗試一下
|
|
.img-responsive
|
圖片響應(yīng)式 (將很好地?cái)U(kuò)展到父元素)
|
嘗試一下
|
響應(yīng)式圖片
通過在 <img> 標(biāo)簽添加 .img-responsive 類來讓圖片支持響應(yīng)式設(shè)計(jì)。 圖片將很好地?cái)U(kuò)展到父元素。
.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應(yīng)用在圖片上：
實(shí)例
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">
嘗試一下 ?
