Тэматызацыя Bootstrap

Наладзьце 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, і для спасылак, кнопак і станаў формы. Замена значэнняў гэтых ключоў не павінна выклікаць праблем, але іх выдаленне можа выклікаць праблемы пры кампіляцыі Sass. У гэтых выпадках вам трэба будзе змяніць код Sass, які выкарыстоўвае гэтыя значэнні.danger$theme-colors

Функцыі

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	Вызначае значэнне пракладкі па змаўчанні для праграмнага стварэння нашых утыліт распоркі .
`$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. Яны забяспечваюць лёгкі доступ да часта выкарыстоўваных значэнняў, такіх як колеры нашай тэмы, кропкі разрыву і асноўныя стэкі шрыфтоў пры працы ў інспектары вашага браўзера, пясочніцы кода або агульным прататыпаванні.

Даступныя зменныя

Вось зменныя, якія мы ўключаем (звярніце ўвагу, што :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);
  }
}