Bootstrap4 颜色指南

原创于 2025-03-02 06:01:41 发布 · 633 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

Bootstrap4 颜色指南

引言

Bootstrap 4 是一个流行的开源前端框架，它为开发者提供了丰富的工具和组件来构建响应式和移动优先的网站。在 Bootstrap 4 中，颜色是构建视觉吸引力的重要组成部分。本文将详细探讨 Bootstrap 4 中可用的颜色及其用法，帮助开发者更好地使用这一框架。

Bootstrap 4 颜色概述

Bootstrap 4 提供了一系列的颜色类，这些类可以被应用到文本、背景以及其他元素上。以下是 Bootstrap 4 中一些常见的颜色：

主色调（Primary）：蓝色
次要色调（Secondary）：灰色
成功色调（Success）：绿色
危险色调（Danger）：红色
警告色调（Warning）：橙色
信息色调（Info）：浅蓝色

每个颜色都有其对应的类名，例如 .btn-primary 表示蓝色按钮。

颜色类使用方法

文本颜色

Bootstrap 4 提供了多种文本颜色类，以下是一些示例：

<h1 class="text-primary">主色调标题</h1>
<p class="text-secondary">次要色调文本</p>
<p class="text-success">成功色调文本</p>
<p class="text-danger">危险色调文本</p>
<p class="text-warning">警告色调文本</p>
<p class="text-info">信息色调文本</p>

背景颜色

背景颜色类同样丰富，以下是一些示例：

<button class="btn btn-primary">主色调按钮</button>
<button class="btn btn-secondary">次要色调按钮</button>
<button class="btn btn-success">成功色调按钮</button>
<button class="btn btn-danger">危险色调按钮</button>
<button class="btn btn-warning">警告色调按钮</button>
<button class="btn btn-info">信息色调按钮</button>

边框颜色

边框颜色类可以用于突出显示元素：

<div class="border border-primary"></div>
<div class="border border-secondary"></div>
<div class="border border-success"></div>
<div class="border border-danger"></div>
<div class="border border-warning"></div>
<div class="border border-info"></div>

颜色扩展

Bootstrap 4 还允许开发者自定义颜色。可以通过以下方式实现：

<style>
    .custom-color {
        color: #123456; /* 自定义颜色值 */
    }
</style>

然后，可以在 HTML 中使用 .custom-color 类：

<p class="custom-color">自定义颜色文本</p>

颜色组合

在实际开发中，颜色往往需要组合使用以创造视觉效果。以下是一些颜色组合的例子：

<div class="bg-primary text-white p-3">主色调背景，白色文本</div>
<div class="bg-success text-white p-3">成功色调背景，白色文本</div>
<div class="bg-danger text-white p-3">危险色调背景，白色文本</div>
<div class="bg-warning text-black p-3">警告色调背景，黑色文本</div>
<div class="bg-info text-white p-3">信息色调背景，白色文本</div>