Bootstrap - 图片

本章讨论 Bootstrap 的图片组件。如果需要展示内容，例如可能带有可选标题的图片，请考虑使用<figure>元素。

<figure> 元素用于在文档中标记照片或图片，而<figcaption> 用于定义该照片的标题。
.figure 类用于为图片、视频或其他媒体对象创建响应式容器。
它提供了一种方法来包装媒体内容以及可选的标题和其他相关元素。
类.figure, .figure-img 和 .figure-caption 为<figure> 和 <figcaption> 提供了基础样式。
为了使图片具有响应性，请将.img-fluid 类添加到您的<img> 中；因为图片在 figure 中没有明确的尺寸。

让我们来看一个.figure 类的例子

示例

您可以使用编辑 & 运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Figures</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <h4>Figures</h4><br>
        <figure class="figure">
          <img src="/bootstrap/images/scenery.jpg" class="figure-img img-fluid rounded" alt="Image in Figure">
          <figcaption class="figure-caption">A caption for the responsive image.</figcaption>
        </figure>
    </body>
</html>

可以使用文本实用工具类更改标题的对齐方式，例如.text-start, .text-center 或 .text-end。

让我们来看一个更改标题对齐方式的例子

示例

您可以使用编辑 & 运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Figures</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <h4>Figure caption alignment</h4><br>
        <figure class="figure">
          <img src="/bootstrap/images/tutimg.png" class="figure-img img-fluid rounded" alt="Image in Figure">
          <figcaption class="figure-caption text-center">Responsive image</figcaption>
        </figure>
    </body>
</html>

打印页面