Bootstrap - 数字

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

  • <figure>元素用于标记文档中的照片或图像，<figcaption>用于定义该照片的标题。

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

  • 它提供了一种将媒体内容与可选标题和其他相关元素一起包装的方法。

  • .figure、.figure-img和.figure-caption类为<figure>和<figcaption>提供基线样式。

  • 在<img>中使用.img-fluid类，以使其具有响应能力；因为图中的图像没有明确的尺寸。

让我们看一个.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/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。

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

例子

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

<!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>