CSS 如何更改 Bootstrap 主色

在本文中，我们将介绍如何使用 CSS 修改 Bootstrap 框架的主色。

阅读更多：CSS 教程

什么是 Bootstrap 主色?

Bootstrap 是一种流行的前端开发框架，它提供了许多预定义的样式和组件。其中一个重要的特性是其主色。Bootstrap 主色用于定义页面中的主要元素，如导航栏、按钮和链接等。

默认情况下，Bootstrap 主色是蓝色（#007bff）。

如何修改 Bootstrap 主色?

修改 Bootstrap 主色可以通过下面两种方法实现。

方法一：使用 SASS 变量重新编译 Bootstrap

Bootstrap 框架是用 Sass 编写的，因此我们可以直接修改 _variables.scss 文件中的主色变量，然后重新编译整个 Bootstrap。

首先，找到 _variables.scss 文件。这个文件通常位于 Bootstrap 的源代码中的 scss/ 目录下。打开这个文件，你将看到类似下面的代码：

// Colors
blue: #007bff;indigo: #6610f2;
$purple: #6f42c1;
...

在这个文件中， $blue 变量定义了 Bootstrap 的主色。将其修改为你想要的颜色值，保存文件。

接下来，你需要重新编译 Bootstrap。如果你已经设置好了 Sass 的开发环境，可以使用 Sass 的命令行工具编译整个 Bootstrap。

sass scss/bootstrap.scss dist/css/bootstrap.css

重新编译完成后，你会得到一个新的 bootstrap.css 文件，其中包含了你修改后的主色。将这个文件链接到你的页面中，即可应用新的主色。

方法二：使用 CSS 重写样式

如果你不想重新编译整个 Bootstrap，还可以使用 CSS 来重写特定的样式，以实现修改主色的效果。

首先，在你的 HTML 文件中，引入一个自定义的 CSS 文件。在这个文件中，我们将重写 Bootstrap 中的样式。

<link rel="stylesheet" href="custom.css">

然后，在 custom.css 文件中，添加以下代码：

/* 修改按钮的背景色 */
.btn-primary {
    background-color: #ff0000; /* 将这个颜色值修改为你想要的颜色 */
}

这样，所有使用 .btn-primary 类的按钮元素的背景色都会被修改为你指定的颜色。

你还可以修改其他元素的样式，比如导航栏、链接等。只需要找到相应的类或选择器，并在 custom.css 文件中进行修改。

示例说明

下面是一个示例演示如何修改 Bootstrap 的主色。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="custom.css">
  <title>修改 Bootstrap 主色示例</title>
</head>
<body>
  <nav class="navbar navbar-expand-md navbar-light bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container mt-5">
    <h1 class="text-primary">Hello, World!</h1>
    <p>This is a paragraph with primary text color.</p>
    <button class="btn btn-primary">Click me</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中，我们使用了自定义的 custom.css 文件来修改了导航栏和按钮的样式。导航栏的背景色被修改为蓝色（#007bff），按钮的背景色被修改为红色（#ff0000）。