Bootstrap - CSS Variables: A Beginner's Guide
Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в чудесный мир CSS переменных в Bootstrap. Не волнуйтесь, если вы новички; я проведу вас через каждый шаг, как будто мы сидим вместе в уютной аудитории. Давайте начнем это увлекательное путешествие!
Что такое CSS Переменные?
Прежде чем мы перейдем к переменным, специфичным для Bootstrap, давайте поймем, что такое CSS переменные. CSS переменные, также известные как пользовательские свойства CSS, позволяют вам хранить определенные значения для их повторного использования в вашем стилевом файле. Представьте их как маленькие контейнеры, удерживающие ваши любимые цвета, размеры или любые другие значения CSS.
Корневые Переменные
В Bootstrap корневые переменные являются основой всей системы переменных. Они определены в селекторе :root, который представляет собойhighest уровень вашей иерархии документов.
: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>), эти переменные перезаписывают свои аналоги в светлом режиме, instantaneously transforming your site into dark mode. Круто, правда?
Переменные Компонентов
Компоненты 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;
}Эти переменные контролируют каждый аспект внешнего вида.primary button. Хотите изменить цвет при наведении? Просто измените --bs-btn-hover-bg!
Префикс
Bootstrap использует префикс bs- для всех своих переменных, чтобы избежать конфликтов с вашими пользовательскими переменными или переменными из других библиотек. Если вы создаете свои переменные, рекомендуется использовать свой префикс.
:root {
--my-awesome-color: #ff69b4;
}Примеры
Давайте применим наши знания на нескольких примерах:
- Изменение основного цвета:
:root {
--bs-primary: #ff69b4; /* Hot pink is the new blue! */
}- Создание пользовательской кнопки:
.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; /* Deeper pink on hover */
--bs-btn-hover-border-color: #ff1493;
}- Настройка фона тела в темном режиме:
[data-bs-theme="dark"] {
--bs-body-bg: #000; /* Pitch black background */
}Переменные для Фокусных Состояний
Bootstrap также предоставляет переменные для фокусных состояний, обеспечивая доступность по всему вашему сайту:
:root {
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}Эти переменные контролируют appearance of focus rings around interactive elements.
Пробелы Сетки
Последнее, но не менее важное, responsive grid system 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;
}Эти переменные определяют widths at which your layout will change to accommodate different screen sizes.
Итог
Вот quick reference table των main types of CSS variables, которые мы рассмотрели:
| Тип Переменной | Назначение | Пример |
|---|---|---|
| Корневые Переменные | Определяют основные значения | --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; |
И вот вы уже сделали свои первые шаги в мир CSS переменных в Bootstrap. Помните, ключ к овладению этим - практика. Попробуйте изменить эти переменные в своих проектах и посмотрите, как они влияют на ваш дизайн. Удачи в кодировании и не забывайте получать удовольствие!
Credits: Image by storyset