Bootstrap 简明教程

Bootstrap - Figures

本章讨论了 Bootstrap 的图形组件。每当您需要展示内容时，请考虑使用 <figure> 元素，例如可以附有可选标题的图像。

  1. &lt;figure&gt; 元素用于标记文档中的照片或图像， &lt;figcaption&gt; 用于定义该照片的标题。

  2. .figure 类用于创建图像、视频或其他媒体对象的响应式容器。

  3. 它提供了一种包装媒体内容以及可选标题和其他相关元素的方法。

  4. .figure, .figure-img 和 .figure-caption 类为 &lt;figure&gt; 和 &lt;figcaption&gt; 提供基线样式。

  5. 将 .img-fluid 类用于 &lt;img&gt; ，以使其响应式；由于图形中的图像没有明确的大小。

我们来看一个 .figure 类的示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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 ）来更改标题的对齐方式。

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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>