展示图片及其说明
如果需要显示带有标题的图像,请考虑使用<figure>
(一种全新的玩法)。
使用包含的 .figure
, .figure-img
和 .figure-caption
类为HTML5 <figure>
和 <figcaption>
元素提供一些基本样式。 <figure>
中的图像没有明确的大小,因此请务必将 .img-fluid
类添加到 <img>
以使其成为响应式设计的图像。
<figure class="figure">
<img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
使用文本工具可以轻松对齐 figure
中标题。
<figure class="figure">
<img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>