首页 / 开发 / 前端开发 / Bootstrap教程

Bootstrap画像

Bootstrap教程

类型：前端开发

Bootstrap是一组用于网站和网络应用程序开发的开源前端框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。

百科词条 访问网站

Bootstrap 框架提供了画像（figure）组件，通过 Bootstrap 的画像组件来显示相关联的图片和文本。本教程包含了画像组件的说明和相关示例。

一、显示图片标题

任何时候需要显示一段内容（例如带有可选标题的图片），请使用 <figure> 标签。

.figure、.figure-img 和 .figure-caption 类为 HTML5 的 <figure> 和 <figcaption> 元素提供了一些基本样式。<figure> 标签内所包含的图片如果没有明确地设置尺寸的话，请务必为 <img>标签添加 .img-fluid 类，使其支持响应式布局。

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

二、文本对齐

通过使用 Bootstrap 提供的文本工具类可以轻松对齐 <figure> 所包含的标题。

<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>

广告合作

QQ群号：4114653