Тематичний Bootstrap
Налаштуйте Bootstrap 4 за допомогою наших нових вбудованих змінних Sass для глобальних налаштувань стилю для легкої зміни тем і компонентів.
вступ
У Bootstrap 3 створення тем значною мірою керувалося заміною змінних у LESS, власним CSS і окремою таблицею стилів теми, яку ми включили в наші dist
файли. Доклавши певних зусиль, можна повністю змінити зовнішній вигляд Bootstrap 3, не торкаючись основних файлів. Bootstrap 4 пропонує знайомий, але трохи інший підхід.
Тепер тематизація досягається за допомогою змінних Sass, карт Sass і спеціального CSS. Більше немає спеціальної таблиці стилів теми; замість цього ви можете ввімкнути вбудовану тему, щоб додати градієнти, тіні тощо.
Сасс
Використовуйте наші вихідні файли Sass, щоб скористатися перевагами змінних, карт, міксинів тощо. У нашій збірці ми збільшили точність округлення Sass до 6 (за замовчуванням це 5), щоб запобігти проблемам із округленням у браузері.
Структура файлу
За можливості уникайте змінення основних файлів Bootstrap. Для Sass це означає створення власної таблиці стилів, яка імпортує Bootstrap, щоб ви могли її змінювати та розширювати. Якщо припустити, що ви використовуєте менеджер пакетів, наприклад npm, у вас буде структура файлу, яка виглядає так:
Якщо ви завантажили наші вихідні файли та не використовуєте менеджер пакунків, ви захочете вручну налаштувати щось подібне до цієї структури, зберігаючи вихідні файли Bootstrap окремо від ваших власних.
Імпорт
У свій файл custom.scss
ви імпортуєте вихідні файли Sass Bootstrap. У вас є два варіанти: включити весь Bootstrap або вибрати ті частини, які вам потрібні. Ми заохочуємо останнє, хоча майте на увазі, що наші компоненти мають певні вимоги та залежності. Вам також потрібно буде включити трохи JavaScript для наших плагінів.
З цими налаштуваннями ви можете почати змінювати будь-які змінні та карти Sass у вашому custom.scss
. Ви також можете почати додавати частини Bootstrap у // Optional
розділ за потреби. Ми пропонуємо використовувати повний стек імпорту з нашого bootstrap.scss
файлу як відправну точку.
Змінні за замовчуванням
Кожна змінна Sass у Bootstrap 4 містить !default
прапорець, який дозволяє вам змінити значення змінної за замовчуванням у вашому власному Sass, не змінюючи вихідний код Bootstrap. Скопіюйте та вставте змінні за потреби, змініть їхні значення та видаліть !default
позначку. Якщо змінну вже було призначено, їй не буде повторно призначено значення за замовчуванням у Bootstrap.
Ви знайдете повний список змінних Bootstrap у scss/_variables.scss
. Для деяких змінних встановлено значення null
, ці змінні не виводять властивості, якщо їх не перевизначено у вашій конфігурації.
Перевизначення змінних у тому самому файлі Sass може бути до або після змінних за замовчуванням. Однак під час перевизначення між файлами Sass ваші перевизначення мають бути перед тим, як ви імпортуєте файли Sass Bootstrap.
Ось приклад, який змінює background-color
і color
для під <body>
час імпортування та компіляції Bootstrap через npm:
За потреби повторіть для будь-якої змінної в Bootstrap, включаючи глобальні параметри нижче.
Карти та петлі
Bootstrap 4 містить кілька карт Sass, пар ключів і значень, які полегшують створення сімейства пов’язаних CSS. Ми використовуємо карти Sass для наших кольорів, точок розриву сітки тощо. Так само, як і змінні Sass, усі карти Sass включають !default
прапорець і можуть бути перевизначені та розширені.
Деякі з наших карт Sass типово об’єднані в порожні. Це робиться для того, щоб дозволити легко розширювати дану карту Sass, але відбувається за рахунок того, що видалення елементів з карти стає дещо складнішим.
Змінити карту
Щоб змінити існуючий колір на нашій $theme-colors
карті, додайте наступне до свого спеціального файлу Sass:
Додати на карту
Щоб додати новий колір до $theme-colors
, додайте новий ключ і значення:
Видалити з карти
Щоб видалити кольори з $theme-colors
або будь-якої іншої карти, використовуйте map-remove
. Майте на увазі, що ви повинні вставити його між нашими вимогами та параметрами:
Необхідні ключі
Bootstrap передбачає наявність певних ключів у картах Sass, які ми використовували, і розширюємо їх самі. Коли ви налаштовуєте включені карти, ви можете зіткнутися з помилками, коли використовується певний ключ карти Sass.
Наприклад, ми використовуємо клавіші primary
, success
, та для посилань, кнопок і станів форм. Заміна значень цих ключів не повинна викликати проблем, але їх видалення може спричинити проблеми компіляції Sass. У цих випадках вам потріб��о буде змінити код Sass, який використовує ці значення.danger
$theme-colors
Функції
Bootstrap використовує кілька функцій Sass, але лише частина їх застосовна до загальної тематики. Ми включили три функції для отримання значень із кольорових карт:
Вони дозволяють вам вибрати один колір із карти Sass, подібно до того, як ви використовуєте змінну кольору з v3.
У нас також є інша функція для отримання певного рівня кольору з $theme-colors
карти. Від’ємні значення рівня освітлять колір, а вищі рівні – темніють.
На практиці ви викликаєте функцію та передаєте два параметри: назву кольору $theme-colors
(наприклад, основний або небезпека) і числовий рівень.
Додаткові функції можуть бути додані в майбутньому або ваш власний Sass, щоб створити функції рівня для додаткових карт Sass, або навіть загальну, якщо ви хочете бути більш докладним.
Кольоровий контраст
Додатковою функцією, яку ми включаємо в Bootstrap, є функція колірного контрасту, color-yiq
. Він використовує колірний простір YIQ для автоматичного повернення світлого ( #fff
) або темного ( #111
) контрастного кольору на основі вказаного основного кольору. Ця функція особливо корисна для міксинів або циклів, де ви створюєте кілька класів.
Наприклад, щоб створити зразки кольорів із нашої $theme-colors
карти:
Його також можна використовувати для одноразових контрастних потреб:
Ви також можете вказати базовий колір за допомогою наших функцій карти кольорів:
Вихід SVG
Ми використовуємо цю escape-svg
функцію для екранування <
символів >
і #
для фонових зображень SVG. Ці символи потрібно екранувати, щоб правильно відтворити фонові зображення в IE.
Функції додавання та віднімання
Ми використовуємо функції add
та subtract
для обгортання функції CSS calc
. Основна мета цих функцій — уникнути помилок, коли у вираз 0
передається «безодиничне» значення . calc
Вирази типу calc(10px - 0)
повертатимуть помилку в усіх браузерах, незважаючи на те, що вони математично правильні.
Приклад, коли розрахунок дійсний:
Приклад недійсного обчислення:
Параметри Sass
Налаштуйте Bootstrap 4 за допомогою нашого вбудованого файлу користувацьких змінних і легко перемикайте глобальні параметри CSS за допомогою нових $enable-*
змінних Sass. Перевизначте значення змінної та перекомпілюйте за npm run test
потреби.
Ви можете знайти та налаштувати ці змінні для ключових глобальних параметрів у scss/_variables.scss
файлі Bootstrap.
змінна | Цінності | опис |
---|---|---|
$spacer |
1rem (за замовчуванням) або будь-яке значення > 0 |
Визначає стандартне значення прокладки для програмного створення наших утиліт прокладки . |
$enable-rounded |
true (за замовчуванням) абоfalse |
Вмикає попередньо визначені border-radius стилі для різних компонентів. |
$enable-shadows |
true або false (за замовчуванням) |
Вмикає попередньо визначені box-shadow стилі для різних компонентів. |
$enable-gradients |
true або false (за замовчуванням) |
Вмикає попередньо визначені градієнти за допомогою background-image стилів на різних компонентах. |
$enable-transitions |
true (за замовчуванням) абоfalse |
Вмикає попередньо визначені transition s для різних компонентів. |
$enable-prefers-reduced-motion-media-query |
true (за замовчуванням) абоfalse |
Вмикає prefers-reduced-motion медіа-запит , який пригнічує певні анімації/переходи на основі налаштувань браузера/операційної системи користувачів. |
$enable-hover-media-query |
true або false (за замовчуванням) |
Застаріле |
$enable-grid-classes |
true (за замовчуванням) абоfalse |
Дозволяє генерувати класи CSS для сітки (наприклад, .container , .row , .col-md-1 тощо). |
$enable-caret |
true (за замовчуванням) абоfalse |
Вмикає каретку псевдоелемента на .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (за замовчуванням) абоfalse |
Додайте курсор «рука» до невимкнених елементів кнопки. |
$enable-print-styles |
true (за замовчуванням) абоfalse |
Вмикає стилі для оптимізації друку. |
$enable-responsive-font-sizes |
true або false (за замовчуванням) |
Вмикає адаптивні розміри шрифту . |
$enable-validation-icons |
true (за замовчуванням) абоfalse |
Вмикає background-image піктограми в текстових введеннях і деякі спеціальні форми для станів перевірки. |
$enable-deprecation-messages |
true або false (за замовчуванням) |
Установіть значення, true щоб відображати попередження під час використання будь-яких застарілих міксинів і функцій, які планується видалити в v5 . |
колір
Багато різноманітних компонентів і утиліт Bootstrap створені за допомогою серії кольорів, визначених у карті Sass. Цю карту можна зациклювати в Sass, щоб швидко створити ряд наборів правил.
Всі кольори
Усі кольори, доступні в Bootstrap 4, доступні як змінні Sass і карта Sass у scss/_variables.scss
файлі. Це буде розширено в наступних незначних випусках, щоб додати додаткові відтінки, подібно до палітри градацій сірого , яку ми вже включаємо.
Ось як ви можете використовувати їх у своєму Sass:
Класи корисності кольору також доступні для налаштування color
та background-color
.
У майбутньому ми постараємося надати карти та змінні Sass для відтінків кожного кольору, як ми зробили з кольорами градацій сірого нижче.
Кольори теми
Ми використовуємо підмножину всіх кольорів, щоб створити меншу кольорову палітру для генерації колірних схем, також доступну як змінні Sass і карту Sass у scss/_variables.scss
файлі Bootstrap.
сірі
Широкий набір сірих змінних і карта Sass scss/_variables.scss
для узгоджених відтінків сірого у вашому проекті. Зауважте, що це «холодні сірі відтінки», які мають тенденцію до тонкого блакитного тону, а не до нейтральних сірих.
У scss/_variables.scss
ньому ви знайдете колірні змінні Bootstrap і карту Sass. Ось приклад $colors
карти Sass:
Додайте, видаліть або змініть значення на карті, щоб оновити спосіб їх використання в багатьох інших компонентах. На жаль, зараз не кожен компонент використовує цю карту Sass. Подальші оновлення намагатимуться покращити це. До того часу плануйте використовувати ${color}
змінні та цю карту Sass.
компоненти
Багато компонентів і утиліт Bootstrap побудовані з @each
циклами, які повторюють карту Sass. Це особливо корисно для генерації варіантів компонента нашими $theme-colors
та створення адаптивних варіантів для кожної точки зупину. Коли ви налаштовуєте ці карти Sass і перекомпілюєте, ви автоматично побачите свої зміни, відображені в цих циклах.
Модифікатори
Багато компонентів Bootstrap створено за допомогою підходу класу базового модифікатора. Це означає, що основна частина стилів міститься в базовому класі (наприклад, .btn
), тоді як варіації стилів обмежуються класами-модифікаторами (наприклад, .btn-danger
). Ці класи модифікаторів створені на основі $theme-colors
карти, щоб налаштувати кількість і назву наших класів модифікаторів.
Ось два приклади того, як ми проходимо по $theme-colors
карті, щоб створити модифікатори для .alert
компонента та всіх наших .bg-*
фонових утиліт.
Чуйний
Ці цикли Sass також не обмежуються кольоровими картами. Ви також можете створювати адаптивні варіанти своїх компонентів або утиліт. Візьмемо, наприклад, наші адаптивні утиліти вирівнювання тексту, де ми змішуємо @each
цикл для $grid-breakpoints
карти Sass із медіа-запитом.
Якщо вам знадобиться змінити ваш $grid-breakpoints
, ваші зміни будуть застосовані до всіх циклів, що виконуються по цій карті.
Змінні CSS
Bootstrap 4 включає близько двох десятків настроюваних властивостей (змінних) CSS у свій скомпільований CSS. Вони забезпечують легкий доступ до часто використовуваних значень, таких як кольори нашої теми, точки зупину та основні стеки шрифтів під час роботи в інспекторі вашого браузера, ізольованому програмному середовищі чи загальному прототипуванні.
Доступні змінні
Ось змінні, які ми включаємо (зауважте, що :root
обов’язковий). Вони знаходяться в нашому _root.scss
файлі.
Приклади
Змінні CSS пропонують таку ж гнучкість, як і змінні Sass, але не потребують компіляції перед подачею в браузер. Наприклад, тут ми скидаємо шрифт нашої сторінки та стилі посилань за допомогою змінних CSS.
Змінні точки зупину
Хоча ми спочатку включили точки зупину в наші змінні CSS (наприклад, --breakpoint-md
), вони не підтримуються в медіа-запитах , але їх можна використовувати в наборах правил у медіа-запитах. Ці змінні точки зупину залишаються в скомпільованому CSS для зворотної сумісності, оскільки вони можуть використовуватися JavaScript. Дізнайтеся більше в специфікації .
Ось приклад того , що не підтримується:
І ось приклад того , що підтримується: