标题: Bootstrap 5 图像 [打印本页]

---

作者: vicky.yu    时间: 2022-6-10 12:10     标题: Bootstrap 5 图像

图像形状

圆角
.rounded 类为图像添加圆角：

实例
<img src="flower.jpg" class="rounded" alt="Cinque Terre">
亲自试一试
圆形
.rounded-circle 类将图像塑造为圆形：

实例
<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">
亲自试一试
缩略图
.img-thumbnail 类将图像塑造为缩略图（带边框）：

实例
<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">
亲自试一试
对齐图像
使用 .float-start 类将图像向左浮动，或使用 .float-end 向右浮动：

实例

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">
亲自试一试
居中图像
为了使图像居中，我们通过向图像添加了 utility 类 .mx-auto (margin:auto) 和 .d-block (display:block)：

实例

<img src="tulip.jpg" class="mx-auto d-block">
亲自试一试
响应式图像
图像有各种尺寸。屏幕也是如此。响应式图像会自动调整以适应屏幕尺寸。

通过将 .img-fluid 类添加到 <img> 标签来创建响应式图像。然后图像将很好地缩放到父元素内。

.img-fluid 类为图像应用 max-width: 100%; 和 height: auto; ：

实例
<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">
亲自试一试
BS5 表格
BS5 Jumbotron


JavaScript 测验


W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随

---

欢迎光临 赛捷软件论坛 (http://sagesoft.cn/bbs/)

Powered by Discuz! 7.2