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

1、img-rounded

.img-rounded{border-radius:6px;}

效果：

2、img-circle

.img-circle{border-radius:50%;}

效果(因為本圖片的寬高大小不同，所以呈現(xiàn)出橢圓，如果將width和height設(shè)置相同，那么會呈現(xiàn)出一個圓)：

3、img-thumbnail

.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;
background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;}

效果：

4、img-responsize

.img-responsive{display:block;max-width:100%;height:auto;}

效果(img中的width屬性值被忽略)：

以上內(nèi)容分步驟給大家介紹了Bootstrap四種圖片樣式的相關(guān)知識，希望大家喜歡。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com