in English

Тематичний Bootstrap

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

вступ

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

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

Сасс

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

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

За можливості уникайте змінення основних файлів 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

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

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

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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 включає !defaultпрапорець, який дозволяє вам змінити значення змінної за замовчуванням у вашому власному Sass, не змінюючи вихідний код Bootstrap. Скопіюйте та вставте змінні за потреби, змініть їхні значення та видаліть !defaultпозначку. Якщо змінну вже було призначено, їй не буде повторно призначено значення за замовчуванням у Bootstrap.

Ви знайдете повний список змінних Bootstrap у scss/_variables.scss. Для деяких змінних встановлено значення null, ці змінні не виводять властивості, якщо їх не перевизначено у вашій конфігурації.

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

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

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

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

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

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

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

Почніть роботу з Bootstrap через npm за допомогою нашого стартового проекту! Перейдіть до репозиторію шаблонів twbs/bootstrap-npm-starter , щоб дізнатися, як створити та налаштувати Bootstrap у вашому власному проекті npm. Включає компілятор Sass, Autoprefixer, Stylelint, PurgeCSS і піктограми 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`
}

Вихід SVG

Ми використовуємо цю escape-svgфункцію для екранування <символів >і #для фонових зображень SVG. Ці символи потрібно екранувати, щоб правильно відтворити фонові зображення в IE. Під час використання escape-svgфункції URI даних повинні бути взяті в лапки.

Функції додавання та віднімання

Ми використовуємо функції addта subtractдля обгортання функції CSS calc. Основна мета цих функцій — уникнути помилок, коли у вираз 0передається «безодиничне» значення . calcВирази типу calc(10px - 0)повертатимуть помилку в усіх браузерах, незважаючи на те, що вони математично правильні.

Приклад, коли розрахунок дійсний:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Приклад недійсного обчислення:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Параметри 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стилі для різних компонентів. Не впливає на box-shadows, які використовуються для станів фокусування.
$enable-gradients trueабо false(за замовчуванням) Вмикає попередньо визначені градієнти за допомогою background-imageстилів на різних компонентах.
$enable-transitions true(за замовчуванням) абоfalse Вмикає попередньо визначені transitions для різних компонентів.
$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 Установіть значення, falseщоб приховати попередження під час використання будь-яких застарілих міксинів і функцій, які планується видалити в v5.

колір

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

Всі кольори

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

$синій #007bff
$indigo #6610f2
$фіолетовий #6f42c1
$рожевий #e83e8c
$червоний #dc3545
$апельсин #fd7e14
$жовтий #ffc107
$зелений #28a745
$teal #20c997
$блакитний #17a2b8

Ось як ви можете використовувати їх у своєму 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файлі Bootstrap.

$основний #007bff
$вторинний #6c757d
$успіх #28a745
$небезпека #dc3545
$попередження #ffc107
$info #17a2b8
$світло #f8f9fa
$темний #343a40

сірі

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

сірий-100$ #f8f9fa
сірий-200$ #e9ecef
сірий-300$ #dee2e6
сірий-400$ #ced4da
сірий-500$ #adb5bd
сірий-600$ #6c757d
сірий-700$ #495057
сірий-800$ #343a40
сірий-900$ #212529

У 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, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --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);
  }
}