首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

图片区 | Figures

文档和示例,用于显示相关的图像和文本,并在Bootstrap中使用图形组件。

每当您需要显示一段内容时--比如带有可选标题的图像--请考虑使用<figure>...

使用包含的.figure,,,.figure-img.figure-caption类为HTML 5提供一些基线样式。<figure><figcaption>元素。图中的图像没有显式大小,因此请确保添加.img-fluid给您的<img>让它有反应。

代码语言:javascript
复制
<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>

对齐图形的标题与我们的文本实用程序...

代码语言:javascript
复制
<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>
代码语言:txt
复制
 © 2011–2017 Twitter, Inc.

© 2011–2017 The Bootstrap Authors

根据MIT许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。

扫码关注腾讯云开发者

领取腾讯云代金券