覆盖 Bootstrap CSS

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

覆盖 Bootstrap CSS

作者：迹忆客最近更新：2023/04/27 浏览次数：

本文介绍的是著名的 CSS UI 框架 Bootstrap。我们将讨论使用自定义样式覆盖 Bootstrap CSS 的过程。

Bootstrap 概述

与单独使用纯 CSS 相比，使用 Bootstrap CSS 可以更快、更轻松地创建响应式网站。

这是因为这个开源工具包提供了预先设计的模板和组件，使您能够使用 Bootstrap 按钮、表单和表格等关键设计组件快速轻松地创建布局。

但是这个过程并不像复制和粘贴这些可重用代码那样简单。首先，您应该自定义 Bootstrap 模板和组件，以确认该网站准确地代表了您的独特品牌。

例如，您可能更喜欢自定义颜色而不是 Bootstrap 的十个颜色实用程序类之一。或者，您可能想在 Bootstrap 中修改网格布局的断点。

您可能还想包含自定义类，例如用于唯一按钮的 .btn-cstm 类。虽然不可取，但您可以直接编辑 Bootstrap 核心文件来对您的网站进行调整。

修改 Bootstrap CSS

直接修改 Bootstrap 默认样式表将变得具有挑战性。这让你更难回忆起你的更改，也让更新到 Bootstrap 的改进版本变得更加困难。

由于升级时必须替换核心文件，因此所有个性化设置都将丢失。但是，可以在不修改 Bootstrap 源代码的情况下进行更改。

让我们更详细地看一下该过程。

覆盖 Bootstrap 样式

如果您的网站需要添加 Bootstrap 以外的自定义样式，请添加另一个外部样式表。它将根据您加载两个样式表的方式将这些覆盖的样式应用于您的类和 id 选择器：

带有Bootstrap。
带有自定义样式表。

例如，在 Bootstrap 中有一个用于按钮的类，即 btn-primary。对于该类，Bootstrap CSS 设置的字体大小为 16px。如果我们需要将字体大小更改为 21px，我们可以在自定义样式表中覆盖此类。

第一步是制作自定义样式表，比如 customStyles.css 。样式表将如下所示：

.btn-primary{
    font-size:21px;
}

在包含 Bootstrap CSS 之后，您可以将此工作表包含在 HTML 页面中，如下所示：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="customStyling.css">
    </head>
    <body>
        <h1>Custom Bootstrap demo</h1>
        <button class="btn-primary">Demo</button>
    </body>
</html>