Bootstrap 图像


Bootstrap 图像形状

圆角图片:

Cinque Terre

椭圆图片:

Cinque Terre

缩略图:

Cinque Terre

圆角图片

.img-rounded 类为图片添加圆角 (IE8 不支持):

实例

<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">
亲自试一试 »

Circle

.img-circle 类将图片变为椭圆 (IE8 不支持):

实例

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre">
亲自试一试 »

缩略图

.img-thumbnail 类用于设置图片缩略图(图片有边框):

实例

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
亲自试一试 »


图片对齐方式

图像有各种各样的尺寸,我们需要根据屏幕的大小自动适应。

我们可以通过在 <img> 标签中添加 .img-responsive 类来设置响应式图片。

.img-responsive 类对图片适用于 display: block; and max-width: 100%;height: auto;:

实例

<img class="img-responsive" src="img_chania.jpg" alt="Chania">
亲自试一试 »

图像库

您还可以将 Bootstrap 的网格系统与 .thumbnail 类结合使用来创建图像库。

注释: 在本教程的后面部分,您将了解有关网格系统的更多信息(如何创建具有不同列数的布局)。

实例

 <div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/lights.jpg">
        <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/nature.jpg">
        <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/fjords.jpg">
        <img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
</div>
亲自试一试 »

响应式嵌入

还可以让视频或幻灯片在任何设备上正确缩放。

类可以直接应用于 <iframe>, <embed>, <video>, 和 <object> 元素。

下面的示例通过向 <iframe> 标记添加 .embed-responsive-item 类来创建响应视频(然后视频将很好地缩放到父元素)。包含的 <div> 定义了视频的纵横比:

实例

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
亲自试一试 »

什么是纵横比?

图像的纵横比描述了其宽度和高度之间的比例关系。两种常见的视频纵横比分别为4:3(20世纪的通用视频格式)和16:9(高清电视和欧洲数字电视的通用视频格式)。

您可以在两个纵横比类别中进行选择:

<!-- 16:9 纵横比 -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 纵横比 -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
亲自试一试 »

学习训练

练习题:

使用 Bootstrap 类将图像塑造为椭圆形。

<img src="img_chania.jpg" alt="Chania" class=""> 

开始实验


完整 Bootstrap 图像参考

有关图像的完整参考,请访问我们 Bootstrap 图像参考