W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 图片



图片形状

圆角:

Cinque Terre

圈:

Cinque Terre

缩略图:

Cinque Terre

圆角

.img-rounded 类可以为图片添加圆角样式(请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。):

Example

<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
尝试一下 »

.img-circle 类可以为图片添加圈样式(请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。):

Example

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
尝试一下 »

缩略图

.img-thumbnail 类可以为图片添加缩略图样式:

Example

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
尝试一下 »

响应式图片

在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;height: auto;display: block; 属性,从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center

Example

<img class="img-responsive" src="img_chania.jpg" alt="Chania">
尝试一下 »
Note 在 Internet Explorer 8-10 中,设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题,在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性,因为这会导致其他图像格式出现错乱。

图像画廊

你也可以使用 Bootstrap 的网格系统与 .thumbnail 类一起创建一个图像画廊:

Example

 <div class="row">
  <div class="col-md-4">
    <a href="pulpitrock.jpg" class="thumbnail">
      <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
      <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="moustiers-sainte-marie.jpg" class="thumbnail">
      <p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".</p>
      <img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="cinqueterre.jpg" class="thumbnail">
      <p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>
      <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
    </a>
  </div>
</div>
尝试一下 »

Complete Bootstrap Image Reference

For a complete reference of all image classes, go to our complete Bootstrap Image Reference.