圖像在網(wǎng)頁(yè)制作中也是常要用到的元素，在Bootstrap框架中對(duì)于圖像的樣式風(fēng)格提供以下幾種風(fēng)格：

1、img-responsive：響應(yīng)式圖片，主要針對(duì)于響應(yīng)式設(shè)計(jì)
2、img-rounded：圓角圖片
3、img-circle：圓形圖片
4、img-thumbnail：縮略圖片

使用方法：

使用方法非常簡(jiǎn)單，只需要在<img>標(biāo)簽上添加對(duì)應(yīng)的類名，如下代碼：

<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">

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

每種狀態(tài)對(duì)應(yīng)的源碼可以查閱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%;
}

設(shè)置圖片大?。?/strong>