圖像在網頁制作中也是常要用到的元素，在Bootstrap框架中對于圖像的樣式風格提供以下幾種風格：
1、img-responsive：響應式圖片，主要針對于響應式設計
2、img-rounded：圓角圖片
3、img-circle：圓形圖片
4、img-thumbnail：縮略圖片
使用方法：
使用方法非常簡單，只需要在<img>標簽上添加對應的類名，如下代碼：
<img alt="140x140" src="http://placehold.it/140x140"> <img class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> <img class="img-circle" alt="140x140" src="http://placehold.it/140x140"> <img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> <img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">
運行效果如下或查看右側結果窗口：
每種狀態對應的源碼可以查閱bootstrap.css文件第306行～第335行：
img {
vertical-align: middle;
}
.img-responsive,
.thumbnail>img,
.thumbnail a >img,
.carousel-inner > .item >img,
.carousel-inner > .item > a >img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
.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;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
設置圖片大?。?/strong>
由于樣式沒有對圖片做大小上的樣式限制，所以在實際使用的時候，需要通過其他的方式來處理圖片大小。比如說控制圖片容器大小。（注意不可以通過css樣式直接修改img圖片的大小，這樣操作就不響應了）
注意：
對于圓角圖片和圓形圖片效果，因為是使用了CSS3的圓角樣式來實現的，所以注意對于IE8以及其以下版本不支持，是沒有圓角效果的。
Bootstrap框架為了大家更好的維護圖像的樣式，同樣將這部分樣式獨立出來：
1、LESS版本，可以查閱scaffolding.less
2、Sass版本，可以查閱_scaffolding.scss
大家可以修改其中之一，重新編譯就可以得到自己需要的圖片樣式效果。
我來試試，在代碼編輯器中為圖片設置大小。
這一小節沒有正確性驗證，請查看結果窗口從而判斷輸入代碼是否正確。
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報