数据

图形-Bootstrap 5和Material Design 2.0

用于显示带有图形组件的相关图像和文本的文档和示例 MDB。

基本例子

每当您需要显示内容（例如带有可选标题的图像）时， 考虑使用 <figure>.

使用随附的 .figure ， .figure-img 和 .figure-caption 类可为HTML5提供一些基线样式 <figure>和 <figcaption> 元素。图片中的图像 没有明确的大小，因此请确保将 .img-fluid 类添加到您的 <img> 使它响应。

...
A caption for the above image.

          <figure class="figure">
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).webp"
              class="figure-img img-fluid rounded shadow-3 mb-3"
              alt="..."
            />
            <figcaption class="figure-caption">A caption for the above image.</figcaption>
          </figure>

我们可以轻松地将人物的标题对齐 文字工具.

...
A caption for the above image.

          <figure class="figure">
            <img
              src="https://mdbootstrap.com/img/new/standard/city/041.webp"
              class="figure-img img-fluid rounded shadow-3 mb-3"
              alt="..."
            />
            <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
          </figure>