Bootstrap 是一个流行的前端框架,它提供了多种类来帮助开发者快速实现响应式和美观的网页设计。在 Bootstrap 中,rounded
是用来给元素添加圆角的 CSS 类。
以下是一些常用的圆角类:
.rounded
:给元素的每个角添加一个小圆角。.rounded-top
:只给元素的顶部两个角添加圆角。.rounded-right
:只给元素的右侧两个角添加圆角。.rounded-bottom
:只给元素的底部两个角添加圆角。.rounded-left
:只给元素的左侧两个角添加圆角。.rounded-circle
:使元素的每个角都完全圆,形成一个圆形。.rounded-pill
:给元素的每个角添加一个大圆角,使其看起来像一个药丸形状。
你可以将这些类添加到任何 HTML 元素上,以改变其外观。例如:
<!-- 给按钮添加圆角 -->
<button class="btn btn-primary rounded">按钮</button>
<!-- 只给按钮的顶部添加圆角 -->
<button class="btn btn-secondary rounded-top">按钮</button>
<!-- 使按钮看起来像一个圆形 -->
<button class="btn btn-success rounded-circle">确定</button>
请注意,Bootstrap 的版本可能会影响可用的类和它们的行为。上述类在 Bootstrap 4 和 Bootstrap 5 中都是可用的,
但是在 Bootstrap 3 中,圆角类的命名可能略有不同。
如果你使用的是 Bootstrap 3,可以使用 .rounded
、.rounded-top
、.rounded-right
、.rounded-bottom
和 .rounded-left
类,但 .rounded-circle
和 .rounded-pill
类是不可用的。
发表回复