Bootstrap - CSS变量：初学者指南

你好，未来的网页开发者们！今天，我们将深入Bootstrap中的CSS变量的奇妙世界。如果你是新手，不用担心；我会像我们在温馨的课堂里一起学习一样，逐步引导你。让我们开始这段激动人心的旅程吧！

Bootstrap - CSS Variables

CSS变量是什么？

在我们跳入Bootstrap特定的变量之前，让我们先了解CSS变量是什么。CSS变量，也被称为CSS自定义属性，允许你存储特定的值，以便在样式表中重复使用。你可以把它们想象成存放你最喜欢的颜色、大小或其他CSS值的容器。

根变量

在Bootstrap中，根变量是整个变量系统的基石。它们在:root选择器中定义，代表你的文档树的最高层级。

:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
}

这些变量定义了Bootstrap中使用的核心颜色。例如，--bs-blue是Bootstrap的主要蓝色。你可以在自己的CSS中像这样使用这些变量：

.my-element {
color: var(--bs-blue);
}

默认变量

Bootstrap还提供了一套默认变量，用于设置各种组件的样式。这些变量通常引用我们刚刚看到的根变量。

:root {
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-gray-600);
--bs-success: var(--bs-green);
--bs-info: var(--bs-cyan);
--bs-warning: var(--bs-yellow);
--bs-danger: var(--bs-red);
--bs-light: var(--bs-gray-100);
--bs-dark: var(--bs-gray-900);
}

在这里，--bs-primary被设置为使用--bs-blue的值。这允许你轻松地进行主题定制，并保持项目的一致性。

暗模式变量

Bootstrap 5引入了内置的暗模式支持，使用CSS变量。这些变量在激活暗模式时改变它们的值。

[data-bs-theme="dark"] {
--bs-body-color: #adb5bd;
--bs-body-bg: #212529;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255,255,255;
}

当data-bs-theme="dark"属性应用于一个元素（通常是<html>或<body>）时，这些变量会覆盖它们的亮模式副本，立即将你的网站转换为暗模式。酷吧？

组件变量

Bootstrap组件也使用CSS变量进行样式设置。这使得你可以轻松地定制单个组件，而不影响其他组件。

.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
}

这些变量控制了主要按钮外观的各个方面。想要改变悬停颜色？只需修改--bs-btn-hover-bg！

前缀

Bootstrap为所有变量使用bs-前缀，以避免与你的自定义变量或其他库的变量冲突。如果你在创建自己的变量，使用自己的前缀是一个好习惯。

:root {
--my-awesome-color: #ff69b4;
}

示例

让我们通过几个示例来实践我们的知识：

改变主要颜色：

:root {
--bs-primary: #ff69b4; /* 热粉色是新蓝色！ */
}

创建一个自定义按钮：

.btn-awesome {
--bs-btn-color: #fff;
--bs-btn-bg: var(--my-awesome-color);
--bs-btn-border-color: var(--my-awesome-color);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #ff1493; /* 悬停时更深的粉色 */
--bs-btn-hover-border-color: #ff1493;
}

在暗模式下调整身体背景：

[data-bs-theme="dark"] {
--bs-body-bg: #000; /* 漆黑的背景 */
}

焦点变量

Bootstrap还提供了焦点状态的变量，确保你的网站的可访问性：

:root {
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}

这些变量控制交互元素周围焦点环的外观。

网格断点

最后但同样重要的是，Bootstrap的响应式网格系统也由CSS变量控制：

:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
--bs-breakpoint-md: 768px;
--bs-breakpoint-lg: 992px;
--bs-breakpoint-xl: 1200px;
--bs-breakpoint-xxl: 1400px;
}

这些变量定义了你的布局将在不同的屏幕尺寸下改变的宽度。

总结

以下是我们在本文中介绍的主要类型的CSS变量的快速参考表：

变量类型	目的	示例
根变量	定义核心值	`--bs-blue: #0d6efd;`
默认变量	设置主题颜色	`--bs-primary: var(--bs-blue);`
暗模式变量	控制暗主题	`--bs-body-bg: #212529;`
组件变量	定制特定组件	`--bs-btn-bg: var(--bs-primary);`
焦点变量	控制焦点状态	`--bs-focus-ring-width: 0.25rem;`
网格断点	定义响应式断点	`--bs-breakpoint-md: 768px;`

就这样！你已经迈入了Bootstrap CSS变量的世界。记住，掌握这个的关键是实践。尝试在你的项目中调整这些变量，看看它们如何影响你的设计。祝你编程愉快，别忘了享受乐趣！

Credits: Image by storyset