图文框

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

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

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

示例

图文框 - 图1

  1. <figure class="figure">
  2. <img src="..." class="figure-img img-fluid rounded" alt="...">
  3. <figcaption class="figure-caption">A caption for the above image.</figcaption>
  4. </figure>

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

图文框 - 图2

  1. <figure class="figure">
  2. <img src="..." class="figure-img img-fluid rounded" alt="...">
  3. <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
  4. </figure>