以下是 Bootstrap 4 中常用的颜色类:
1. 背景颜色:
- .bg-primary
- .bg-secondary
- .bg-success
- .bg-danger
- .bg-warning
- .bg-info
- .bg-light
- .bg-dark
- .bg-white
示例:
<div class="bg-primary text-white">This is a primary background.</div>
上述例子中,bg-primary 类设置了背景颜色为主题色,text-white 类设置了文本颜色为白色。
2. 文本颜色:
- .text-primary
- .text-secondary
- .text-success
- .text-danger
- .text-warning
- .text-info
- .text-light
- .text-dark
- .text-muted
- .text-white
示例:
<p class="text-danger">This is a danger text.</p>
上述例子中,text-danger 类设置了文本颜色为危险色。
3. 边框颜色:
- .border
- .border-primary
- .border-secondary
- .border-success
- .border-danger
- .border-warning
- .border-info
- .border-light
- .border-dark
- .border-white
示例:
<div class="border border-primary">This has a primary border.</div>
上述例子中,border 类设置了默认边框样式,border-primary 类设置了边框颜色为主题色。
4. 警告颜色:
Bootstrap 提供了一些特殊用途的颜色类,用于表示状态或警告信息:
- .alert
- .alert-primary
- .alert-secondary
- .alert-success
- .alert-danger
- .alert-warning
- .alert-info
- .alert-light
- .alert-dark
示例:
<div class="alert alert-success" role="alert">
This is a success alert.
</div>
上述例子中,alert 类设置了警告框的基本样式,alert-success 类设置了成功状态的颜色。
以上是 Bootstrap 4 中颜色设置的一些常见类。你可以根据具体的需求在不同的元素上应用这些类来调整颜色样式。确保查阅 [Bootstrap 4 文档中的 Colors 部分](https://getbootstrap.com/docs/4.6/utilities/colors/) 以获取更多详细的信息和选项。
转载请注明出处:http://www.pingtaimeng.com/article/detail/5484/Bootstrap