Bootstrap 3 表格

Bootstrap 3 Jumbotron

Bootstrap 图片

Bootstrap 图片形状

圆角:

Cinque Terre

原型:

Cinque Terre

缩略图:

圆角图片

.img-rounded 类向图像添加圆角（IE8 不支持圆角）:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>圆角图片</h2>
  <p>.img-rounded 类向图像添加圆角（IE8 不支持圆角）:</p>
  <img src="/images/cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>

圆形图片

.img-circle 类将图像显示为圆形（IE8 不支持圆角）:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>圆形图片</h2>
  <p>.img-circle 类将图像显示为圆形（IE8 不支持圆角）:</p>
  <img src="/images/cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>

缩略图

.img-thumbnail 类将图像显示为缩略图:

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>缩略图</h2>
  <p>.img-thumbnail 类将图像显示为缩略图:</p>
  <img src="/images/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>

响应式图片

图片有各种尺寸，屏幕也是如此。响应式图像会自动调整以适应屏幕大小。

通过添加一个 .img-responsive 类对 <img> 标记进行响应，然后，图像将很好地缩放到与父元素相对于的合适尺寸。

.img-responsive 类对图片应用勒 display: block; 和 max-width: 100%; 和 height: auto; 样式:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>Image</h2>
  <p>.img-responsive 类使很好地缩放到与父元素相对于的合适尺寸（调整浏览器窗口的大小以查看效果）:</p>
  <img class="img-responsive" src="/images/img_chania.jpg" alt="Chania" width="460" height="345">
</div>
</body>
</html>

图片画廊

您还可以将 Bootstrap 的网格系统与 .thumbnail 一起使用来创建图片画廊。

极光

大自然

峡湾

注意：在本教程的后面部分，您将了解有关网格系统的更多信息（如何创建具有不同列数的布局）。

实例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>图片画廊</h2>
  <p>.thumbnail 类可用于显示图片画廊</p>
  <p>.caption 类为缩略图中的文本添加适当的填充和深灰色</p>
  <p>点击图片放大</p>
  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="/znadmin/md/4593/3.jpg" target="_blank">
          <img src="/znadmin/md/4593/3.jpg" alt="Lights" style="width:100%">
          <div class="caption">
            <p>极光</p>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="/znadmin/md/4593/4.jpg" target="_blank">
          <img src="/znadmin/md/4593/4.jpg" alt="Nature" style="width:100%">
          <div class="caption">
            <p>大自然</p>
          </div>
        </a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <a href="/znadmin/md/4593/5.jpg" target="_blank">
          <img src="/znadmin/md/4593/5.jpg" alt="Fjords" style="width:100%">
          <div class="caption">
            <p>峡湾</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
</body>
</html>

响应式 Embed 标签

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

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

下面的示例通过添加。将响应项类嵌入到 <iframe> 标记中（然后视频将很好地缩放相对于父元素的尺寸）。包含的 <div> 定义了视频的高宽比：

实例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>响应式 Embed 标签</h2>
  <p>创建一个响应式的视频，并以 16:9 的高宽比将其缩放到相对于父元素的合适尺寸</p>
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  </div>
</div>
</body>
</html>

什么是高宽比?

图像的高宽比描述了其宽度和高度之间的比例关系。两种常见的视频高宽比分别为 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 图片参考

有关所有图像类的完整参考，请访问本站的完整 Bootstrap 图片参考。

Bootstrap 3 表格

Bootstrap 3 Jumbotron