学习 Bootstrap 5 之 图片
图片 (Images)
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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/122816.html
