数据
图形-Bootstrap 5和Material Design 2.0
用于显示带有图形组件的相关图像和文本的文档和示例 MDB。
基本例子
每当您需要显示内容(例如带有可选标题的图像)时,
考虑使用 <figure>
.
使用随附的 .figure
, .figure-img
和
.figure-caption
类可为HTML5提供一些基线样式
<figure>
和 <figcaption>
元素。图片中的图像
没有明确的大小,因此请确保将 .img-fluid
类添加到您的
<img>
使它响应。

<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>
我们可以轻松地将人物的标题对齐 文字工具.

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