图文框
使用Bootstrap中的.figure
图文框组件组合图象与文本的示例和文档。
如果你需要显示的内容区包括了一个图片和一个可选的标题,可使用.figure
样式定义。
Bootstrap的.figure
以及.figure-caption
类,为HTML5的<figure>
以及<figcaption>
元素提供了一个基准样式处理。默念认的图片系统不会定义明确的大小,因此请务必将该.img-fluid类添加到您的<img>
标签中才能实现与响应式的完美结合。
示例
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
结合我们的文本实用工具可以轻松对齐图文框的说明文字(比如右对齐、左对齐,只要引用.text-*
方法即可-译者注)。
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>