🔥 Bootstrap 的 4 种简单自定义格式
您可以使用多种 Bootstrap 定制技术，使用 CSS 项目和 Sass 项目。
苏马里奥
Meu projeto usa só HTML 和 CSS 🔗
E eu usei um <link>pra incluir or bootstrap.min.cssno meu HTML
我正在使用 Bootstrap 5 🔗
Bootstrap 的版本 5 使用了 CSS 的可变组件，作为可变组件的基础，:root而不是作为特定组件的声明。 O .btn-primary，例如：
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #0d6efd;
--bs-btn-border-color: #0d6efd;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
--bs-btn-focus-shadow-rgb: 49, 132, 253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #0a58ca;
--bs-btn-active-border-color: #0a53be;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #0d6efd;
--bs-btn-disabled-border-color: #0d6efd;
}
您可以通过 CSS 来表示各种变化的新核心，但它可能会导致变化，并且会重复出现。
首先，我们将使用 Bootstrap 的新标志，最后，我们将使用 CSS 来优先使用 Bootstrap：
<!-- Folha de estilos do BS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Sua folha de estilos -->
<link rel="stylesheet" href="style.css" />
改变您的勇气，并优先使用各种不同的垫子，然后使用复制品来复制我们的元素或主题。
.btn-primary {
--bs-btn-color: var(--primary-text-base);
--bs-btn-bg: var(--primary-bg-base);
--bs-btn-border-color: var(--primary-border-base);
--bs-btn-hover-color: var(--primary-text-base);
/* ... etc ... */
}
我正在使用 Bootstrap 4 🔗
com CSS 是您可以使用特定的具体内容或类的连续内容。由于 Bootstrap 类的功能与类的实用性、语义相互依赖、具体化0.0.1.0，因此在类之外声明的内容可能与其他类无关。
💡 Caso especicidade ainda seja um missério pra você, recomendo esse artigo sobre especicidade and cascata da Amelia Wanttenberger, em inglês
Bootstrap 的类将基础类作为不同属性的属性，以及特定属性的外部属性。
示例
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.alert-primary {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
Sabendo disso，você pode criar uma classe com um 命名空间，例如：.custom-alert-primarycom estilos sobrescrevendo o tema do .alert。
例如：
<div class="alert custom-alert-primary" role="alert">
A simple primary alert—check it out!
</div>
◾使用现代 CSS 🔗
我们可以使用不同的级联层或 Bootstrap 或 CSS 来实现不同的功能，但是可以优先考虑自动的功能。
Abaixo，是 Stephanie Eckles 使用 Bootstrap 的例子，英语
@layer bootstrap, base, application;
@import url(bootstrap.css) layer(bootstrap);
@layer base {
body {...}
.alert {...}
.btn-primary {...}
}
使用@layer和定义优先顺序、优先级、优先级和其他优先级，是与 Bootstrap 一样的特定目的。
CSS 图层的全局兼容性为 93%，其次是 Caniuse。
 |
 |
 |
 |
|---|---|---|---|
| 99 | 99 | 97 | 15.4 |
Meu projeto usa Sass 🔗
使用@import "bootstrap"Bootstrap 配置
Estou usando Bootstrap 4 ou 5 🔗
Bootstrap 5文档中没有自定义 → 变量默认值的说明，您可以重新声明配置中的变量，以便variables.scss在不重要的情况下重新声明（一般情况index.scss）。关于 Bootstrap 4 的过程，请参阅有关各种声明和声明的文档。
// Requerido
@import "../node_modules/bootstrap/scss/functions";
/* Sobrescreve os valores padrão das variáveis padrão */
$body-bg: #000;
$body-color: #111;
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
/* Remove do objeto $theme-colors do arquivo
variables.scss as chaves de 'info', 'light' e 'dark' */
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Componentes opcionais
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
可以自定义，因为声明的字体没有 Bootstrap são marcadas pela flag 的字体!default。这意味着 Bootstrap之前的各种声明variables.scss是有意义的，并且您可以更改其勇敢程度。
一个标志
!default允许您在不存在的情况下进行各种操作，可以详细说明，或在 Sass 文档中使用英语。
Poderia ser melhor 🔗
Nossa，mas dá mais trabalho que Tailwind！？
Sim、definitivamente、porém são casos de uso differenterentes。 Bootstrap 使用21% dos 网站映射 W3Techs，可提供6 个下载教程，然后在 npm 网站上进行。在 2011 Bootstrap 的基础上进行了全面的操作，以实现前端开发的基本系列和概念。
由于 Bootstrap 是 HTML 和 CSS 资源的站点，Wordpress 的页面是 PHP 的，SPA 是现代的 com 框架，所以 Bootstrap 的开发是为了向后兼容和鲁棒性。
除此之外，Tailwind 还提供了一些与 PostCSS 相关的编译工具，这些项目依赖于Webpack、Rollup 或 Vite 等项目构建工具，这是绝对必要的。
开始使用 Javascript，可以使用不需要的功能，最好选择加入，允许使用 BS 技术，包括 HTML 和 CSS 项目。
人们认为定制方面存在困难，因此对于项目的极端必要性、必要性、技术之外的问题。 O uneco acoplamento do Bootstrap é com o seu design system, as vezes não irá compensar forçar o seu, caso haja.
文章来源：https://dev.to/lixeletto/4-formas-simples-de-customizar-o-bootstrap-4hpm