Bootstrap 圖片

在本章中，我們將學(xué)習(xí) Bootstrap 對圖片的支持。Bootstrap 提供了三個可對圖片應(yīng)用簡單樣式的 class：

創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計公司的優(yōu)秀設(shè)計人員和策劃人員組成的一個具有豐富經(jīng)驗的團隊，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計師、平面廣告設(shè)計師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站改版、網(wǎng)頁設(shè)計制作、網(wǎng)站建設(shè)與維護、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。

• .img-rounded：添加 border-radius:6px 來獲得圖片圓角。
• .img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
• .img-thumbnail：添加一些內(nèi)邊距（padding）和一個灰色的邊框。

請看下面的實例演示：

實例

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/06/download.png
"

class
=
"
img-rounded
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/06/download.png
"

class
=
"
img-circle
"
>

<
img

decoding
=
"
async
"

src
=
"
/wp-content/uploads/2014/06/download.png
"

class
=
"
img-thumbnail
"
>

嘗試一下 ?

結(jié)果如下所示：

類

以下類可用于任何圖片中。

類	描述	實例
.img-rounded	為圖片添加圓角 (IE8 不支持)	嘗試一下
.img-circle	將圖片變?yōu)閳A形 (IE8 不支持)	嘗試一下
.img-thumbnail	縮略圖功能	嘗試一下
.img-responsive	圖片響應(yīng)式 (將很好地擴展到父元素)	嘗試一下

響應(yīng)式圖片

通過在 標(biāo)簽添加 .img-responsive 類來讓圖片支持響應(yīng)式設(shè)計。 圖片將很好地擴展到父元素。

.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應(yīng)用在圖片上：

實例

<
img
src=
"cinqueterre.jpg"
class=
"img-responsive"
alt=
"Cinque Terre"
>

嘗試一下 ?

當(dāng)前文章：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap圖片
文章地址：http://www.dlmjj.cn/article/coeghjg.html