学习 Bootstrap 5 之 Images 和 Figure

Posted 2022-02-06 _DiMinisH

学习 Bootstrap 5 之 图片

• 图片 (Images)
• • 1. 响应式图片
  • • (1). 原理
    • (2). 使用 class = "img-fluid" 响应式图片
    • (3). 图片简易边框 class = "img-thumbnail"
    • (4). 图片排版
    • • 1). 左对齐 class = "rounded float-start"
      • 2). 右对齐 class = "rounded float-end"
• Figure

图片 (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>