Тематичен Bootstrap

Персонализирайте Bootstrap 4 с нашите нови вградени Sass променливи за глобални стилови предпочитания за лесни промени на темата и компонентите.

Въведение

В Bootstrap 3 тематизирането до голяма степен се управляваше от замени на променливи в LESS, персонализиран CSS и отделна таблица със стилове на тема, която включихме в нашите distфайлове. С известно усилие човек може напълно да преработи външния вид на Bootstrap 3, без да докосва основните файлове. Bootstrap 4 предоставя познат, но малко по-различен подход.

Сега тематизирането се постига чрез променливи на Sass, карти на Sass и персонализиран CSS. Няма повече специален лист със стилове на теми; вместо това можете да активирате вградената тема за добавяне на градиенти, сенки и др.

дързък

Използвайте нашите изходни 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

@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и dangerот $theme-colorsза връзки, бутони и състояния на формуляри. Подмяната на стойностите на тези ключове не трябва да създава проблеми, но премахването им може да причини проблеми при компилирането на Sass. В тези случаи ще трябва да промените Sass кода, който използва тези стойности.

Функции

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-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`	Активира стилове за оптимизиране на печата.

Цвят

Много от различните компоненти и помощни програми на 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);
  }
}