Source

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

Приспособете го 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	Ја одредува стандардната вредност на spacer за програмски да ги генерира нашите услужни програми за spacer .
`$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. Тие обезбедуваат лесен пристап до најчесто користените вредности како што се боите на нашите теми, точките на прекин и примарните купови на фонтови кога работите во 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, 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);
  }
}