Bootstrap 简明教程

Bootstrap - Figures

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

This chapter discusses about the figure component of Bootstrap. Consider utilizing the <figure> element whenever you have a need to exhibit content, such as an image that may be accompanied by an optional caption.

<figure> element is used to markup a photo or an image in a document and <figcaption> is used to define a caption to that photo.
The .figure class is used to create a responsive container for images, videos, or other media objects.
It provides a way to wrap media content along with optional captions and other related elements.
The classes .figure, .figure-img and .figure-caption provide baseline styles for the <figure> and <figcaption>.
Use .img-fluid class to your <img>, in order to make it responsive; as the images in figures have no explicit size.

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

Let us see an example of .figure class:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 ）来更改标题的对齐方式。

The alignment of the caption can be changed using the text utilities, such as .text-start, .text-center or .text-end.

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

Let us see an example for changing the alignment of caption:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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