in English

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

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

Увод

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

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

Сасс

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

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

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

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

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

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

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

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

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

Замена променљивих мора доћи након увоза наших функција, променљивих и миксина, али пре остатка увоза.

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

@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

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

Започните са Боотстрапом преко нпм-а са нашим почетним пројектом! Идите на твбс/боотстрап-нпм-стартер спремиште шаблона да видите како да направите и прилагодите Боотстрап у свом сопственом нпм пројекту. Укључује Сасс компајлер, Аутопрефикер, Стилелинт, ПургеЦСС и Боотстрап иконе.

Мапе и петље

Боотстрап 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`
}

Есцапе СВГ

Користимо escape-svgфункцију за избегавање знакова <, >и #за СВГ позадинске слике. Ови знакови морају да се изађу да би се слике у позадини правилно приказале у ИЕ. Када користите escape-svgфункцију, УРИ података мора бити наведен.

Функције сабирања и одузимања

Користимо функције addи subtractда омотамо ЦСС 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);
}

Сасс опције

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

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

Променљива	Вредности	Опис
`$spacer`	`1rem`(подразумевано) или било која вредност > 0	Одређује подразумевану вредност одстојника за програмско генерисање наших услужних програма за размак .
`$enable-rounded`	`true`(подразумевано) или`false`	Омогућава унапред дефинисане `border-radius`стилове на различитим компонентама.
`$enable-shadows`	`true`или `false`(подразумевано)	Омогућава унапред дефинисане декоративне `box-shadow`стилове на различитим компонентама. Не утиче на `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-pointer-cursor-for-buttons`	`true`(подразумевано) или`false`	Додајте курсор „руке“ на елементе дугмета који нису онемогућени.
`$enable-print-styles`	`true`(подразумевано) или`false`	Омогућава стилове за оптимизацију штампања.
`$enable-responsive-font-sizes`	`true`или `false`(подразумевано)	Омогућава прилагодљиве величине фонта .
`$enable-validation-icons`	`true`(подразумевано) или`false`	Омогућава `background-image`иконе у текстуалним уносима и неке прилагођене обрасце за стања валидације.
`$enable-deprecation-messages`	`true`(подразумевано) или`false`	Поставите на да `false`бисте сакрили упозорења када користите било који од застарелих миксина и функција које се планирају уклонити у `v5`.

Боја

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

Све боје

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

$плаво #007бфф

$индиго #6610ф2

$пурпле #6ф42ц1

$пинк #е83е8ц

$ред #дц3545

$оранге #фд7е14

$иеллов #ффц107

$зелено #28а745

$теал #20ц997

$циан #17а2б8

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

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

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

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

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

Боје теме

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

$примари #007бфф

$секундарни #6ц757д

$суццесс #28а745

$опасност #дц3545

$варнинг #ффц107

$инфо #17а2б8

$лигхт #ф8ф9фа

$дарк #343а40

Греис

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

$сива-100 #ф8ф9фа

$сива-200 #е9ецеф

$сива-300 #дее2е6

$сива-400 #цед4да

$сива-500 #адб5бд

$сива-600 #6ц757д

$сива-700 #495057

$сива-800 #343а40

$сива-900 #212529

Унутар 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, "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;
}

Примери

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

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