Тематски подигнувач

Приспособете го 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. Тие обезбедуваат лесен пристап до најчесто користените вредности како што се боите на нашите теми, точките на прекин и примарните купови на фонтови кога работите во Inspector на вашиот прелистувач, песокот за кодови или општите прототипови.

Достапни променливи

Еве ги променливите што ги вклучуваме (забележете дека тоа :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);
  }
}