Bootstrap5 图像形状
Bootstrap5 图像形状
Bootstrap5提供了许多图像形状类，这些类可以让我们方便地改变图片的形状，让图片更加美观。本文将介绍Bootstrap5中常见的图像形状类和使用方法。
常规形状
.rounded
.rounded类可以将图片变成圆形或者圆角矩形。该类有5个不同的版本：.rounded、.rounded-top、.rounded-end、.rounded-bottom、.rounded-start，分别表示全圆角、顶部圆角、右侧圆角、底部圆角、左侧圆角。
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-end">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-start">
.rounded-circle
.rounded-circle类可以将图片变成圆形。
<img src="..." alt="..." class="rounded-circle">
.rounded-pill
.rounded-pill类可以将图片变成胶囊形状。
<img src="..." alt="..." class="rounded-pill">
边框形状
.border
.border类为图片添加边框。
<img src="..." alt="..." class="border">
.border-0
.border-0类为图片去除边框。
<img src="..." alt="..." class="border-0">
.border-top
.border-top类为图片添加顶部边框。
<img src="..." alt="..." class="border-top">
.border-end
.border-end类为图片添加右侧边框。
<img src="..." alt="..." class="border-end">
.border-bottom
.border-bottom类为图片添加底部边框。
<img src="..." alt="..." class="border-bottom">
.border-start
.border-start类为图片添加左侧边框。
<img src="..." alt="..." class="border-start">
图片缩放相关类
.img-fluid
.img-fluid类可以让图片在容器中自适应缩放。
<img src="..." alt="..." class="img-fluid">
.img-thumbnail
.img-thumbnail类可以将图片变成缩略图。
<img src="..." alt="..." class="img-thumbnail">
总结
Bootstrap5提供了许多图像形状类，可以让开发者方便地改变图片的形状和样式。我们可以根据需要选择不同的类来实现想要的效果，为项目带来更加美观的体验。