Source

Тематичний Bootstrap

Налаштуйте Bootstrap 4 за допомогою наших нових вбудованих змінних Sass для глобальних налаштувань стилю для легкої зміни тем і компонентів.

вступ

У Bootstrap 3 створення тем значною мірою керувалося заміною змінних у LESS, власним CSS і окремою таблицею стилів теми, яку ми включили в наші distфайли. Доклавши певних зусиль, можна повністю змінити зовнішній вигляд Bootstrap 3, не торкаючись основних файлів. Bootstrap 4 пропонує знайомий, але трохи інший підхід.

Тепер тематизація досягається за допомогою змінних Sass, карт Sass і спеціального CSS. Більше немає спеціальної таблиці стилів теми; замість цього ви можете ввімкнути вбудовану тему, щоб додати градієнти, тіні тощо.

Сасс

Використовуйте наші вихідні файли Sass, щоб скористатися перевагами змінних, карт, міксинів тощо. У нашій збірці ми збільшили точність округлення Sass до 6 (за замовчуванням це 5), щоб запобігти проблемам із округленням у браузері.

Структура файлу

За можливості уникайте змінення основних файлів Bootstrap. Для Sass це означає створення власної таблиці стилів, яка імпортує Bootstrap, щоб ви могли її змінювати та розширювати. Якщо припустити, що ви використовуєте менеджер пакетів, наприклад npm, у вас буде структура файлу, яка виглядає так:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Якщо ви завантажили наші вихідні файли та не використовуєте менеджер пакунків, ви захочете вручну налаштувати щось подібне до цієї структури, зберігаючи вихідні файли Bootstrap окремо від ваших власних.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Імпорт

У свій файл custom.scssви імпортуєте вихідні файли Sass Bootstrap. У вас є два варіанти: включити весь Bootstrap або вибрати ті частини, які вам потрібні. Ми заохочуємо останнє, хоча майте на увазі, що наші компоненти мають певні вимоги та залежності. Вам також потрібно буде включити трохи JavaScript для наших плагінів.

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

З цими налаштуваннями ви можете почати змінювати будь-які змінні та карти Sass у вашому custom.scss. Ви також можете почати додавати частини Bootstrap у // Optionalрозділ за потреби. Ми пропонуємо використовувати повний стек імпорту з нашого bootstrap.scssфайлу як відправну точку.

Змінні за замовчуванням

Кожна змінна Sass у Bootstrap 4 містить !defaultпрапорець, який дозволяє вам змінити значення змінної за замовчуванням у вашому власному Sass, не змінюючи вихідний код Bootstrap. Скопіюйте та вставте змінні за потреби, змініть їхні значення та видаліть !defaultпозначку. Якщо змінну вже було призначено, їй не буде повторно призначено значення за замовчуванням у Bootstrap.

Ви знайдете повний список змінних Bootstrap у scss/_variables.scss.

Перевизначення змінних у тому самому файлі Sass може бути до або після змінних за замовчуванням. Однак під час перевизначення між файлами Sass ваші перевизначення мають бути перед тим, як ви імпортуєте файли Sass Bootstrap.

Ось приклад, який змінює background-colorі colorдля під <body>час імпортування та компіляції Bootstrap через npm:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

За потреби повторіть для будь-якої змінної в Bootstrap, включаючи глобальні параметри нижче.

Карти та петлі

Bootstrap 4 містить кілька карт Sass, пар ключів і значень, які полегшують створення сімейства пов’язаних CSS. Ми використовуємо карти Sass для наших кольорів, точок розриву сітки тощо. Так само, як і змінні Sass, усі карти Sass включають !defaultпрапорець і можуть бути перевизначені та розширені.

Деякі з наших карт Sass типово об’єднані в порожні. Це робиться для того, щоб дозволити легко розширювати дану карту Sass, але відбувається за рахунок того, що видалення елементів з карти стає дещо складнішим.

Змінити карту

Щоб змінити існуючий колір на нашій $theme-colorsкарті, додайте наступне до свого спеціального файлу Sass:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Додати на карту

Щоб додати новий колір до $theme-colors, додайте новий ключ і значення:

$theme-colors: (
  "custom-color": #900
);

Видалити з карти

Щоб видалити кольори з $theme-colorsабо будь-якої іншої карти, використовуйте map-remove. Майте на увазі, що ви повинні вставити його між нашими вимогами та параметрами:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Необхідні ключі

Bootstrap передбачає наявність певних ключів у картах Sass, які ми використовували, і розширюємо їх самі. Коли ви налаштовуєте включені карти, ви можете зіткнутися з помилками, коли використовується певний ключ карти Sass.

Наприклад, ми використовуємо клавіші primary, success, та для посилань, кнопок і станів форм. Заміна значень цих ключів не повинна викликати проблем, але їх видалення може спричинити проблеми компіляції Sass. У цих випадках вам потрібно буде змінити код Sass, який використовує ці значення.danger$theme-colors

Функції

Bootstrap використовує кілька функцій Sass, але лише частина їх застосовна до загальної тематики. Ми включили три функції для отримання значень із кольорових карт:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Вони дозволяють вам вибрати один колір із карти Sass, подібно до того, як ви використовуєте змінну кольору з v3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

У нас також є інша функція для отримання певного рівня кольору з $theme-colorsкарти. Від’ємні значення рівня освітлять колір, а вищі рівні – темніють.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

На практиці ви викликаєте функцію та передаєте два параметри: назву кольору $theme-colors(наприклад, основний або небезпека) і числовий рівень.

.custom-element {
  color: theme-color-level(primary, -10);
}

Додаткові функції можуть бути додані в майбутньому або ваш власний Sass, щоб створити функції рівня для додаткових карт Sass, або навіть загальну, якщо ви хочете бути більш докладним.

Кольоровий контраст

Однією додатковою функцією, яку ми включаємо в Bootstrap, є функція колірного контрасту, color-yiq. Він використовує колірний простір YIQ для автоматичного повернення світлого ( #fff) або темного ( #111) контрастного кольору на основі вказаного основного кольору. Ця функція особливо корисна для міксинів або циклів, де ви створюєте кілька класів.

Наприклад, щоб створити зразки кольорів із нашої $theme-colorsкарти:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Його також можна використовувати для одноразових контрастних потреб:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Ви також можете вказати базовий колір за допомогою наших функцій карти кольорів:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Параметри 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-print-styles`	`true`(за замовчуванням) або`false`	Вмикає стилі для оптимізації друку.
`$enable-validation-icons`	`true`(за замовчуванням) або`false`	Вмикає `background-image`піктограми в текстових введеннях і деякі спеціальні форми для станів перевірки.

колір

Багато різноманітних компонентів і утиліт Bootstrap створені за допомогою серії кольорів, визначених у карті Sass. Цю карту можна зациклювати в Sass, щоб швидко створити ряд наборів правил.

Всі кольори

Усі кольори, доступні в Bootstrap 4, доступні як змінні Sass і карта Sass у scss/_variables.scssфайлі. Це буде розширено в наступних незначних випусках, щоб додати додаткові відтінки, подібно до палітри градацій сірого , яку ми вже включаємо.

Синій

Індиго

Фіолетовий

Рожевий

Червоний

Помаранчевий

Жовтий

Зелений

Чирок

Блакитний

Ось як ви можете використовувати їх у своєму Sass:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Класи корисності кольору також доступні для налаштування colorта background-color.

У майбутньому ми постараємося надати карти та змінні Sass для відтінків кожного кольору, як ми зробили з кольорами градацій сірого нижче.

Кольори теми

Ми використовуємо підмножину всіх кольорів, щоб створити меншу кольорову палітру для генерації колірних схем, також доступну як змінні Sass і карту Sass у scss/_variables.scssфайлі Bootstraps.

Первинний

Вторинний

Успіх

Небезпека

УВАГА

Інформація

світло

Темний

сірі

Широкий набір сірих змінних і карта Sass scss/_variables.scssдля узгоджених відтінків сірого у вашому проекті. Зауважте, що це «холодні сірі відтінки», які мають тенденцію до тонкого блакитного тону, а не до нейтральних сірих.

100

200

300

400

500

600

700

800

900

У scss/_variables.scssньому ви знайдете колірні змінні Bootstrap і карту Sass. Ось приклад $colorsкарти Sass:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Додайте, видаліть або змініть значення на карті, щоб оновити спосіб їх використання в багатьох інших компонентах. На жаль, зараз не кожен компонент використовує цю карту Sass. Подальші оновлення намагатимуться покращити це. До того часу плануйте використовувати ${color}змінні та цю карту Sass.

компоненти

Багато компонентів і утиліт Bootstrap побудовані з @eachциклами, які повторюють карту Sass. Це особливо корисно для генерації варіантів компонента нашими $theme-colorsта створення адаптивних варіантів для кожної точки зупину. Коли ви налаштовуєте ці карти Sass і перекомпілюєте, ви автоматично побачите свої зміни, відображені в цих циклах.

Модифікатори

Багато компонентів Bootstrap створено за допомогою підходу класу базового модифікатора. Це означає, що основна частина стилів міститься в базовому класі (наприклад, .btn), тоді як варіації стилів обмежуються класами-модифікаторами (наприклад, .btn-danger). Ці класи модифікаторів створені на основі $theme-colorsкарти, щоб налаштувати кількість і назву наших класів модифікаторів.

Ось два приклади того, як ми проходимо по $theme-colorsкарті, щоб створити модифікатори для .alertкомпонента та всіх наших .bg-*фонових утиліт.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Чуйний

Ці цикли Sass також не обмежуються кольоровими картами. Ви також можете створювати адаптивні варіанти своїх компонентів або утиліт. Візьмемо, наприклад, наші адаптивні утиліти вирівнювання тексту, де ми змішуємо @eachцикл для $grid-breakpointsкарти Sass із медіа-запитом.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Якщо вам знадобиться змінити ваш $grid-breakpoints, ваші зміни будуть застосовані до всіх циклів, що виконуються по цій карті.

Змінні CSS

Bootstrap 4 включає близько двох десятків настроюваних властивостей (змінних) CSS у свій скомпільований CSS. Вони забезпечують легкий доступ до часто використовуваних значень, таких як кольори нашої теми, точки зупину та основні стеки шрифтів під час роботи в інспекторі вашого браузера, ізольованому програмному середовищі чи загальному прототипуванні.

Доступні змінні

Ось змінні, які ми включаємо (зауважте, що :rootобов’язковий). Вони знаходяться в нашому _root.scssфайлі.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Приклади

Змінні CSS пропонують таку ж гнучкість, як і змінні Sass, але не потребують компіляції перед подачею в браузер. Наприклад, тут ми скидаємо шрифт нашої сторінки та стилі посилань за допомогою змінних CSS.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Змінні точки зупину

Хоча ми спочатку включили точки зупину в наші змінні CSS (наприклад, --breakpoint-md), вони не підтримуються в медіа-запитах , але їх можна використовувати в наборах правил у медіа-запитах. Ці змінні точки зупину залишаються в скомпільованому CSS для зворотної сумісності, оскільки вони можуть використовуватися JavaScript. Дізнайтеся більше в специфікації .

Ось приклад того , що не підтримується:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

І ось приклад того , що підтримується:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}