Bootstrap提供了四種用于<img>類的樣式,分別是:
.img-rounded:圓角 (IE8 不支持),添加 border-radius:6px 來獲得圖片圓角;
.img-circle:圓形 (IE8 不支持),添加 border-radius:50% 來讓整個(gè)圖片變成圓形。
.img-thumbnail:縮略圖功能,添加一些內(nèi)邊距(padding)和一個(gè)灰色的邊框。
.img-responsive:圖片響應(yīng)式 (將很好地?cái)U(kuò)展到父元素)。
使用:
將類樣式直接添加到class中即可:
<img class="img-circle" src="img.jpg" src="/uploads/allimg/161213/204222G25-0.png" />從圖中可以看到使用各種樣式得到的效果,處理起圖片來非常的簡單方便。有時(shí)候根據(jù)需要,比如我們需要用一個(gè)具有內(nèi)邊距和灰色邊框的圓形頭像時(shí),可以將circle和thumbnail兩個(gè)樣式疊加使用,效果如上圖circle thumbnail所示。
img-responsive使得我們的圖片具有響應(yīng)式的效果。所謂響應(yīng)式,就是變化的,隨著某一個(gè)元素的變化而變化,從而實(shí)現(xiàn)自適應(yīng)的效果。上圖中的responsive兩個(gè)圖片代碼如下:
<figure style="width: 150px;height: 150px;"> <figcaption>responsive(150*150)</figcaption> <img class="img-responsive " src="img.jpg" </figure> <figure style="width: 100px;height: 100px;"> <figcaption>responsive(100*100)</figcaption> <img class="img-responsive " src="img.jpg" </figure>在這里我們沒有設(shè)置圖片的大小,但是設(shè)置了包裹他的元素figure 的大小,無論figure為150px*150px或者100px*100px,圖片都能夠很好的擴(kuò)展到父元素figure。
以上所述是小編給大家介紹的Bootstrap Img 圖片樣式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對VeVb武林網(wǎng)網(wǎng)站的支持!
注:相關(guān)教程知識閱讀請移步到JavaScript/Ajax教程頻道。
新聞熱點(diǎn)
疑難解答