在 Bootstrap 4 中,颜色设置主要通过预定义的颜色类来实现。Bootstrap 提供了一系列的颜色类,用于设置背景颜色、文本颜色等,使得页面元素具有一致的外观。

以下是 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