Тематичен 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 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`
}

Бягство от 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.

Цвят

Много от различните компоненти и помощни програми на 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 карта във scss/_variables.scssфайла на Bootstrap.

Сивите

Обширен набор от сиви променливи и Sass карта scss/_variables.scssза последователни нюанси на сивото във вашия проект. Обърнете внимание, че това са „студени сиви нюанси“, които клонят към фин син тон, а не към неутрални сиви нюанси.

Вътре 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);
  }
}