和Bootstrap CSS.，您可以更快地开发响应网站，而不是从头构建网站。这是因为这个开源工具包提供预先设计的模板和组件，因此您可以使用重要的设计元素构建布局bootstrap ravbars.那启动按钮而不是必须从头开始构建它们的形式。

然而，该过程并不像复制和粘贴这些重复使用代码的块一样简单。您需要自定义引导模板和组件，以确保您的网站反映您的独特品牌。

例如，您可能希望添加自定义颜色，而不是使用引导程序提供的10个颜色实用程序类。或者您可能希望更改引导网格布局的断点。或者您可能希望添加像.btn-custom类这样的自定义类以创建完全唯一的按钮。

在此帖子中，我们将通过如何自定义Bootstrap CSS（以及如何不是)。让我们开始吧。

如何编辑引导CSS

您可以直接编辑Bootstrap的核心文件，以对您的网站进行更改 - 但不建议使用。

直接更改默认样式表将很快变得难以维护。它不仅更难跟踪您所做的更改，而且还使升级到一个新的Bootstrap版本更加痛苦。当升级时，您将不得不替换核心文件，因此您的所有自定义将丢失。

好消息是有一种方法raybetapp可以在不编辑源代码的情况下进行更改。让我们仔细看看下面这个过程。

你能覆盖引导CSS吗?

如果要自定义Bootstrap站点，则可以将源代码留下，并且只需在外部样式表中添加自定义代码。此外部样式表中的代码将覆盖现有样式 - 只要它正确设置。此设置过程略有不同，具体取决于您在您的网站上加载的引导方式。

有几种不同的方式开始使用bootstrap。你可以使用BootstrapCDN交付一个缓存版本的Bootstrap的已编译的CSS和JS到你的项目，或者你可以下载Bootstrap的预编译或源代码版本。

下面我们会走过这些引导版本的每个引导版本的过程。

如何覆盖引导CSS

您可以使用两种可能的方法覆盖Bootstrap元素的默认样式。第一种方法-使用CSS覆盖-适用于使用BootstrapCDN或Bootstrap预编译版本的站点。第二个——使用Sass变量——适用于使用Bootstrap源代码版本的站点。

每种方法都是不同用例的理想选择。在使用CSS覆盖的同时更简单，它也更耗时，难以扩展。另一方面，使用SASS变量非常适合在您的网站上进行更广泛的更改 - 但它为更高级用户设计。让我们仔细看看下面的两种方法

如何覆盖引导使用CSS覆盖

无论你是使用BootstrapCDN还是预编译版本，你都将从一个基本的HTML5文档类型开始，如下所示:

< !doctype html >
<头>
<标题>你好，世界！
身体< >
你好，世界！

这将是您的index.html文件。下一步是加载引导到您的网站。

如果您要使用BootStrapcdn，则无需下载任何文件。只需将以下代码添加到部分中：

<链接rel =“stylesheet”href =“https：///stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css”Integrity =“sha384-vkoo8x4cgso3 + hhxv8t / q5paxtkktu6ug5toenv6gbifewpgfn9muhof23q9ifjh”Crossorigin =“Anonymous”>

这将在你的网站上加载Bootstrap CSS。请注意，如果你想加载Bootstrap Javascript，那么你必须添加一些代码到部分。因为这个覆盖方法不需要这样做，所以我们将跳过这一步。

如果你使用的是Bootstrap的编译版本，那么你必须下载编译后的CSS文件，并将它们保存到index.html文件的同一个文件夹中。然后将以下代码添加到index.html文件的部分:

<链接rel =“stylesheet”href =“bootstrap / css / bootstrap.min.css”>

一旦您完成了这一步，您将成功地链接到Bootstrap的默认样式表。现在是创建自己的样式表的时候了。

为此，只需在与index.html文件中创建另一个文件。您可以调用此文件“custom.css”。这是您将在哪里放置自定义CSS。

但是在开始添加此文件之前，请返回index.html文件并在链接到默认样式表之后添加以下代码行。

<链接rel =“stylesheet”类型=“text / css”href =“custom.css”>

对custom.css的引用必须在bootstrap.css之后，这样这个CSS覆盖自定义方法才能工作。为什么?因为特殊性的规则。如果HTML元素被具有相同特性的多个CSS选择器作为目标，那么最后一个选择器将覆盖其他选择器，并且只应用其样式属性。因此，通过在默认样式表之后链接到自定义样式表，可以赋予它更高级别的专一性。

通过此添加，这里是您的index.html文件如果使用bootstrapcdn。

< !doctype html >
<头>
<链接rel =“stylesheet”href =“https：///stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css”Integrity =“sha384-vkoo8x4cgso3 + hhxv8t / q5paxtkktu6ug5toenv6gbifewpgfn9muhof23q9ifjh”Crossorigin =“Anonymous”>
<链接rel =“stylesheet”类型=“text / css”href =“custom.css”>
<标题>你好，世界！
身体< >
你好，世界！

这是你的index.html文件的样子如果你使用预编译的Bootstrap。

< !doctype html >
<头>
<链接rel =“stylesheet”href =“bootstrap / css / bootstrap.min.css”>
<链接rel =“stylesheet”类型=“text / css”href =“custom.css”>
<标题>你好，世界！
身体< >
你好，世界！

现在可以向custom.css文件添加任何必要的更改。

如何使用CSS覆盖自定义Bootstrap按钮

假设您想要在网站上制作按钮文本的字体大小。在Bootstrap中，.btn类的默认字体大小为16px，如下所示。

源

您可以使用样式表中的CSS字体大小属性更改为20px。使用类选择器，可以使用以下代码将“BBTN类”下的所有元素的字体大小更改为20PX。

.btn {
字体大小:20 px
}

这是结果：

源

遵循相同的过程，您可以根据需要进行任意多的更改，以完全转换Bootstrap站点。只要确保使用CSS选择器这与比 - 或更具体的特定于 - Bootstrap.css文件中的特定。

完成更改后，只需保存custom.css文件。在任何时候，您都可以编辑或删除任何自定义CSS，以恢复到Bootstrap的默认样式或重新设计您的站点。您也可以轻松升级到Bootstrap的另一个版本(只要是较小的版本，比如4.3到4.4)，方法是替换对index.html文件中先前样式表的引用。

既然我们了解这种自定义选项及其优势，让我们看看使用Bootstrap的源代码版本适用于站点所有者的其他自定义选项。

如何覆盖引导使用Sass

下载Bootstrap的源代码版本是在您的网站上加载Bootstrap最困难的方法，因为它需要其他工具来设置Bootstrap的官方编译版本等源文件。这是因为Bootstrap 4和所有次要版本（V4.x）都以SASS编写，这是一个必须编译成CSS的样式表语言，用于浏览器以理解和正确渲染。

您需要一个SASS编译器和AutoPrefixer来执行此操作，但是，在您投入设置此版本的Bootstrap时，您将完全控制您的代码和引导程序的代码。这就是为什么这种方法吸引更高级用户。

假设你选择使用像npm这样的包管理器来下载Bootstrap源代码，然后你将解压该文件夹并看到如下结构。

你的项目/

├──scss

│└──自定义

└──node_modules /

└──举止

├──JS.

└──scss

请注意，标有“自定义”的文件夹 - 它将充当您自己的样式表 - 与Bootstrap / SCSS文件夹分开 - 这是默认的样式表。值得注意的是，如果您未使用包管理器，则只需手动设置类似的文件结构，该结构可让Bootstrap的源文件与您自己分开。

与其他自定义方法一样，您仍然避免修改Bootstrap的核心文件。Sass的不同之处在于，在您自己的样式表中，您将导入Bootstrap Sass文件，以便您可以修改它们。

所以你会去你的自定义.css文件。您可以通过在以下代码中导入所有引导程序的源SASS。

@ import“. . / node_modules /引导/ scss /引导”;

或者您可以挑选并选择所需的文件。以下代码导入自定义所需的文件。

@import“../node_modules/bootstrap/scss/functions”;
@ import“. . / node_modules /引导/ scss /变量”;
@import“../node_modules/bootstrap/scss/mixins”;

下面的代码用于导入可选文件。您可以在以后开始自定义时添加此代码或其他代码。

@import“../node_modules/bootstrap/scss/reboot”;
@import“../node_modules/bootstrap/scss/type”
@import“../node_modules/bootstrap/scss/images”;
@ import“. . / node_modules /引导/ scss /代码”;
@ import“. . / node_modules /引导/ scss /网格”;

设置此内容后，您可以开始进行更改。无需在index.html文件中添加对样式表的引用，以便您留在您的自定义.css文件中。

您将修改任何一个方法，而不是在其他方法中添加自定义CSS500个SASS变量和Bootstrap 4中的地图。完整列表可以在SCSS / _Variables.scs文件中找到，但让我们在两个使用的特定示例中磨合Bootstrap的官方文档。

如何自定义SASS变量

例如，Bootstrap 4中元素的SASS变量为：

$ body-bg：$ white！默认;
$ body-color：$ gray-900！默认;

这意味着默认情况下，背景颜色为白色，颜色为灰色。让我们说你想改变这些颜色。

看看两个变量有什么！默认标志？这允许您在您自己的SASS中覆盖变量的默认值，而无需修改Bootstrap的源代码。您只需复制和粘贴您的自定义中的文件中的变量，更改它们的值，然后删除！默认标志。

因此，如果我想改变元素的背景色和颜色分别为黑色和深灰色，我将添加以下内容到我的自定义。scss文件。

$ body-bg: # 000;
美元的体色:# 111;

为了成功地覆盖Sass文件，我必须通过在变量后添加以下代码来完成Bootstrap的Sass文件的导入:

@ import“. . / node_modules /引导/ scss /引导”;

这类似于您必须在以前的方法中包含对index.html文件的 标记之间的样式表之间的引用。

将此全部绑在一起，这就是您的自定义.cocs文件的内容如果您导入所有引导文件，那么

@ import“. . / node_modules /引导/ scss /引导”;
$ body-bg: # 000;
美元的体色:# 111;
@ import“. . / node_modules /引导/ scss /引导”;

如何自定义SASS地图

Bootstrap 4还包括SASS映射，基本上是SASS变量组。例如，Bootstrap中的颜色和网格断点有Sass Maps。像Sass变量一样，SASS地图包括！默认标志，因此可以在不修改Bootstrap源代码的情况下覆盖它们。

例如，Bootstrap 4中的颜色的SASS映射为：

主题颜色:美元()!违约;
/ / stylelint-disable-next-line scss / dollar-variable-default
美元的主题颜色:map-merge (
（
“主”:$主
“次要”：$次要，
“成功”：$成功，
“信息”：$ INFO，
“警告”：$警告，
“危险”：$危险，
“光”：$灯，
“黑暗”:$黑暗
），
美元的主题颜色
);

使用SASS地图，您有两个选项。您可以修改地图或您可以添加到它。所以让我们说你想在$主题映射中更改现有颜色。然后，您只需复制和粘贴地图键，并仅包含要在您的自定义中更改的变量。然后更改其值并删除！默认标志。

所以如果你想把原色改成青蓝，你需要在你的自定义Sass文件中添加以下内容:

$主题颜色：（
“主”:# 0074 d9,
);

这将在CSS上更改主题颜色，因此.Alert-Primary，.text-primary，.bg-miginy，以及更多将受到影响。

如果您想向$theme-colors映射添加一个新颜色，那么您需要添加一个新键，使用变量“custom-color”，并为它赋值。以下内容将为地图添加一个深红色。

$主题颜色：（
“定制颜色”：＃990000，
);

无论您是使用CSS覆盖还是SASS变量，您都可以在Bootstrap中解锁数百个自定义选项。这样，您不仅可以构建一个响应的网站 - 您也可以设计它以适应您的品牌。您只需要对HTML和CSS感到满意。