Source

Тхеминг Боотстрап

Прилагодите Боотстрап 4 помоћу наших нових уграђених Сасс варијабли за глобалне преференције стила за лаку промену тема и компоненти.

Увод

У Боотстрап-у 3, обликовање тема је углавном било вођено заменама променљивих у ЛЕСС-у, прилагођеним ЦСС-ом и засебном таблицом стилова теме коју смо укључили у наше distдатотеке. Уз мало труда, могло би се потпуно редизајнирати изглед Боотстрапа 3 без додиривања основних датотека. Боотстрап 4 пружа познат, али мало другачији приступ.

Сада се теме постижу помоћу Сасс променљивих, Сасс мапа и прилагођеног ЦСС-а. Нема више наменске табеле стилова теме; уместо тога, можете да омогућите уграђену тему да додате градијенте, сенке и још много тога.

Сасс

Користите наше изворне Сасс датотеке да бисте искористили предности променљивих, мапа, миксина и још много тога. У нашој верзији смо повећали Сасс прецизност заокруживања на 6 (подразумевано је 5) да бисмо спречили проблеме са заокруживањем прегледача.

Структура датотеке

Кад год је то могуће, избегавајте да мењате основне датотеке Боотстрапа. За Сасс, то значи да направите сопствену листу стилова која увози Боотстрап тако да можете да га мењате и проширите. Под претпоставком да користите менаџер пакета као што је нпм, имаћете структуру датотеке која изгледа овако:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Ако сте преузели наше изворне датотеке и не користите менаџер пакета, пожелећете да ручно подесите нешто слично тој структури, држећи изворне датотеке Боотстрапа одвојене од ваших.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Увоз

У свој custom.scss, увезћете изворне Сасс датотеке Боотстрапа. Имате две опције: укључите цео Боотстрап или изаберите делове који су вам потребни. Подстичемо ово друго, иако имајте на уму да постоје неки захтеви и зависности међу нашим компонентама. Такође ћете морати да укључите неки ЈаваСцрипт за наше додатке.

// 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";

Са тим подешавањем, можете почети да мењате било коју од Сасс променљивих и мапа у вашем custom.scss. Такође можете почети да додајете делове Боотстрапа испод // Optionalодељка по потреби. Предлажемо да користите комплетан стек увоза из наше bootstrap.scssдатотеке као полазну тачку.

Променљиве подразумеване вредности

Свака Сасс променљива у Боотстрап-у 4 укључује !defaultознаку која вам омогућава да замените подразумевану вредност променљиве у свом сопственом Сасс-у без модификације изворног кода Боотстрапа. Копирајте и налепите променљиве по потреби, измените њихове вредности и уклоните !defaultознаку. Ако је променљива већ додељена, она неће бити поново додељена подразумеваним вредностима у Боотстрапу.

Наћи ћете комплетну листу Боотстрап-ових варијабли у scss/_variables.scss.

Замена променљивих унутар исте Сасс датотеке може доћи пре или после подразумеваних променљивих. Међутим, када се замењују Сасс датотеке, ваше замене морају доћи пре него што увезете Боотстрап-ове Сасс датотеке.

Ево примера који мења background-colorи colorза <body>при увозу и компајлирању Боотстрапа преко нпм-а:

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Поновите по потреби за било коју променљиву у Боотстрапу, укључујући глобалне опције испод.

Мапе и петље

Боотстрап 4 укључује прегршт Сасс мапа, парова кључних вредности који олакшавају генерисање породица повезаних ЦСС-а. Користимо Сасс мапе за наше боје, тачке прекида мреже и још много тога. Баш као и Сасс променљиве, све Сасс мапе укључују !defaultзаставу и могу се заменити и проширити.

Неке од наших Сасс мапа су подразумевано спојене у празне. Ово се ради како би се омогућило лако проширење дате Сасс мапе, али долази по цену да се уклањање ставки са мапе учини мало тежим.

Измените мапу

Да бисте изменили постојећу боју на нашој $theme-colorsмапи, додајте следеће у своју прилагођену Сасс датотеку:

$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";
...

Обавезни кључеви

Боотстрап претпоставља присуство неких специфичних кључева унутар Сасс мапа како смо их сами користили и проширивали. Док прилагођавате укључене мапе, можете наићи на грешке када се користи одређени кључ Сасс мапе.

На пример, користимо тастере primary, success, и dangerод $theme-colorsза везе, дугмад и стања обрасца. Замена вредности ових кључева не би требало да представља проблеме, али њихово уклањање може изазвати проблеме са компилацијом Сасс-а. У овим случајевима, мораћете да измените Сасс код који користи те вредности.

Функције

Боотстрап користи неколико Сасс функција, али само подскуп је применљив на опште теме. Укључили смо три функције за добијање вредности из мапа боја:

@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);
}

Ово вам омогућава да изаберете једну боју са Сасс мапе, слично као што бисте користили променљиву боје из в3.

.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);
}

Додатне функције би се могле додати у будућности или ваш сопствени прилагођени Сасс да бисте креирали функције нивоа за додатне Сасс мапе, или чак генеричку ако желите да будете опширнији.

Контраст боја

Једна додатна функција коју укључујемо у Боотстрап је функција контраста боја, color-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`
}

Сасс опције

Прилагодите Боотстрап 4 помоћу наше уграђене датотеке са прилагођеним варијаблама и лако мењајте глобалне ЦСС поставке помоћу нових $enable-*Сасс променљивих. Замените вредност променљиве и поново компајлирајте са npm run testпо потреби.

Можете пронаћи и прилагодити ове променљиве за кључне глобалне опције у Боотстрап scss/_variables.scssдатотеци.

Променљива	Вредности	Опис
`$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`с на различитим компонентама.
`$enable-prefers-reduced-motion-media-query`	`true`(подразумевано) или`false`	Омогућава `prefers-reduced-motion`медијски упит који потискује одређене анимације/прелазе на основу преференција претраживача/оперативног система корисника.
`$enable-hover-media-query`	`true`или `false`(подразумевано)	Застарела
`$enable-grid-classes`	`true`(подразумевано) или`false`	Омогућава генерисање ЦСС класа за мрежни систем (нпр. `.container`, `.row`, `.col-md-1`, итд.).
`$enable-caret`	`true`(подразумевано) или`false`	Омогућава псеудо елемент царт на `.dropdown-toggle`.
`$enable-print-styles`	`true`(подразумевано) или`false`	Омогућава стилове за оптимизацију штампања.
`$enable-validation-icons`	`true`(подразумевано) или`false`	Омогућава `background-image`иконе у текстуалним уносима и неке прилагођене обрасце за стања валидације.

Боја

Многе од Боотстрап-ових различитих компоненти и услужних програма изграђене су кроз низ боја дефинисаних у Сасс мапи. Ова мапа се може окретати у Сасс-у да би се брзо генерисала серија скупова правила.

Све боје

Све боје доступне у Боотстрап 4, доступне су као Сасс променљиве и Сасс мапа у scss/_variables.scssдатотеци. Ово ће бити проширено у наредним мањим издањима како би се додале додатне нијансе, слично палети сивих тонова коју већ укључујемо.

Плави

Индиго

Љубичаста

Пинк

Црвени

Оранге

Жута

Зелен

Теал

Циан

Ево како их можете користити у свом Сасс-у:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Корисне класе боја су такође доступне за подешавање colorи background-color.

У будућности ћемо настојати да обезбедимо Сасс мапе и варијабле за нијансе сваке боје као што смо урадили са бојама у сивим тоновима испод.

Боје теме

Користимо подскуп свих боја да креирамо мању палету боја за генерисање шема боја, такође доступне као Сасс променљиве и Сасс мапа у Боотстрапс-овој scss/_variables.scssдатотеци.

Примарни

Секундарни

Успех

Опасност

Упозорење

Инфо

Светлост

Дарк

Греис

Експанзиван скуп сивих варијабли и Сасс мапа scss/_variables.scssза конзистентне нијансе сиве у вашем пројекту. Имајте на уму да су то „хладне сиве“, које теже суптилном плавом тону, а не неутралним сивим.

100

200

300

400

500

600

700

800

900

Унутар scss/_variables.scss, наћи ћете Боотстрап-ове променљиве боја и Сасс мапу. Ево примера $colorsСасс мапе:

$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;

Додајте, уклоните или измените вредности унутар мапе да бисте ажурирали начин на који се користе у многим другим компонентама. Нажалост, у овом тренутку, не користи свака компонента ову Сасс мапу. Будућа ажурирања ће настојати да то побољшају. До тада, планирајте да користите ${color}варијабле и ову Сасс мапу.

Компоненте

Многе Боотстрап компоненте и услужни програми су изграђени са @eachпетљама које се понављају преко Сасс мапе. Ово је посебно корисно за генерисање варијанти компоненте од стране нашег $theme-colorsи креирање прилагодљивих варијанти за сваку тачку прекида. Док прилагођавате ове Сасс мапе и поново компајлирате, аутоматски ћете видети своје промене које се одражавају у овим петљама.

Модификатори

Многе Боотстрап компоненте су изграђене са приступом класе базних модификатора. То значи да је највећи део стила садржан у основној класи (нпр. .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);
}

Респонсиве

Ни ове Сасс петље нису ограничене на мапе боја. Такође можете да генеришете прилагодљиве варијације својих компоненти или услужних програма. Узмимо за пример наше помоћне програме за поравнавање текста где ми мешамо @eachпетљу за $grid-breakpointsСасс мапу са медијским упитом који укључује.

@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, ваше промене ће се применити на све петље које се понављају преко те мапе.

ЦСС променљиве

Боотстрап 4 укључује око двадесетак ЦСС прилагођених својстава (променљивих) у свом преведеном ЦСС-у. Они омогућавају лак приступ често коришћеним вредностима као што су наше боје теме, тачке прекида и примарни скупови фонтова када радите у Инспецтор-у вашег претраживача, заштићеном окружењу кода или општем прототипу.

Доступне варијабле

Ево променљивих које укључујемо (имајте на уму да :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;
}

Примери

ЦСС променљиве нуде сличну флексибилност као и Сасс-ове варијабле, али без потребе за компилацијом пре него што се сервирају у претраживач. На пример, овде ресетујемо фонт и стилове везе на нашој страници помоћу ЦСС променљивих.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Променљиве тачке прекида

Иако смо првобитно укључили тачке прекида у наше ЦСС варијабле (нпр. --breakpoint-md), оне нису подржане у медијским упитима , али се и даље могу користити у оквиру скупова правила у медијским упитима. Ове променљиве тачке прекида остају у преведеном ЦСС-у ради компатибилности уназад с обзиром да их ЈаваСцрипт може користити. Сазнајте више у спецификацији .

Ево примера онога што није подржано:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

А ево примера шта је подржано:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}