图文框

使用Bootstrap中的.figure图文框组件组合图象与文本的示例和文档。

如果你需要显示的内容区包括了一个图片和一个可选的标题，可使用.figure样式定义。

Bootstrap的.figure以及.figure-caption类，为HTML5的<figure>以及<figcaption>元素提供了一个基准样式处理。默念认的图片系统不会定义明确的大小，因此请务必将该.img-fluid类添加到您的<img>标签中才能实现与响应式的完美结合。

示例

A generic square placeholder image with rounded corners in a figure. — A caption for the above image.

<figure class="figure">
  <img src="..." 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>

文字对齐控制

结合我们的文本实用工具可以轻松对齐图文框的说明文字（比如右对齐、左对齐，只要引用.text-*方法即可-译者注）。

<figure class="figure">
  <img src="..." 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>