学习 Bootstrap 5 之 Images 和 Figure

学习 Bootstrap 5 之 图片

图片 (Images)

Bootstrap 5 官方文档

1. 响应式图片

(1). 原理

通过设置图片的 max-width: 100%, height: auto, 使其随父元素的宽度一起变化

(2). 使用 class = “img-fluid” 响应式图片

.img-fluid 类

<img src="图片路径" class="img-fluid" alt="响应式图片">

(3). 图片简易边框 class = “img-thumbnail”

.img-thumbnail 类

未使用边框
在这里插入图片描述
使用边框
在这里插入图片描述

<img src="https://v5.bootcss.com/docs/5.1/assets/img/favicons/apple-touch-icon.png" class="img-fluid img-thumbnail" alt="响应式图片">

(4). 图片排版

1). 左对齐 class = “rounded float-start”

使用浮动定位机制, 左浮动, 即 float: left
在这里插入图片描述

<img src="..." class="rounded float-start" alt="...">

2). 右对齐 class = “rounded float-end”

使用浮动定位机制, 右浮动, 即 float: right
在这里插入图片描述

<img src="..." class="rounded float-end" alt="...">

Figure

通过figure组件来显示相关联的图片和文本
在这里插入图片描述

  <figure class="figure">
    <img src="https://v5.bootcss.com/docs/5.1/assets/img/favicons/apple-touch-icon.png" class="figure-img img-fluid" alt="...">
    <figcaption class="figure-caption">标题</figcaption>
  </figure>
版权声明：本文为qq_37354060原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。