Source

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

Наладзьце Bootstrap 4 з дапамогай нашых новых убудаваных зменных Sass для глабальных налад стылю для лёгкай змены тэмаў і кампанентаў.

Уводзіны

У Bootstrap 3 тэматызацыя ў асноўным абумоўлівалася перавызначэннем зменных у LESS, карыстальніцкім CSS і асобнай табліцай стыляў тэмы, якую мы ўключылі ў нашы distфайлы. Прыклаўшы пэўныя намаганні, можна цалкам перарабіць знешні выгляд Bootstrap 3, не закранаючы асноўныя файлы. Bootstrap 4 забяспечвае знаёмы, але крыху іншы падыход.

Цяпер тэматычная тэматыка выконваецца з дапамогай зменных Sass, карт Sass і карыстальніцкага CSS. Няма больш спецыяльнай табліцы стыляў тэмы; замест гэтага вы можаце ўключыць убудаваную тэму, каб дадаць градыенты, цені і многае іншае.

Сас

Выкарыстоўвайце нашы зыходныя файлы Sass, каб скарыстацца перавагамі зменных, карт, міксінаў і іншага. У нашай зборцы мы павялічылі дакладнасць акруглення Sass да 6 (па змаўчанні гэта 5), каб прадухіліць праблемы з акругленнем у браўзеры.

Структура файла

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

Перавызначэнне зменных у адным файле 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`
}

Escape SVG

Мы выкарыстоўваем escape-svgфункцыю для экраніравання <сімвалаў >і #для фонавых малюнкаў SVG. Для належнага адлюстравання фонавых малюнкаў у IE гэтыя сімвалы павінны быць экранаваны.

Функцыі складання і аднімання

Мы выкарыстоўваем функцыі addі subtractдля абгортвання calcфункцыі CSS. Асноўная мэта гэтых функцый - пазбегнуць памылак, калі ў выраз перадаецца 0значэнне без адзінкі calc. Выразы накшталт calc(10px - 0)будуць вяртаць памылку ва ўсіх браўзерах, нягледзячы на ​​тое, што яны матэматычна правільныя.

Прыклад, калі calc сапраўдны:

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

Пераменная Каштоўнасці Апісанне
$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 Уключае прадвызначаныя transitions на розных кампанентах.
$enable-prefers-reduced-motion-media-query true(па змаўчанні) абоfalse Уключае prefers-reduced-motionмедыя-запыт , які адхіляе пэўныя анімацыі/пераходы ў залежнасці ад налад браўзера/аперацыйнай сістэмы карыстальніка.
$enable-hover-media-query trueабо false(па змаўчанні) Састарэла
$enable-grid-classes true(па змаўчанні) абоfalse Дазваляе генераваць класы CSS для сістэмы сеткі (напрыклад, .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(па змаўчанні) Усталюйце значэнне, trueкаб паказваць папярэджанні пры выкарыстанні любых састарэлых міксінаў і функцый, якія плануецца выдаліць у v5.

Колер

Многія з розных кампанентаў і ўтыліт 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файле Bootstrap.

Першасны
Другасны
Поспех
Небяспека
Папярэджанне
Інфармацыя
Святло
Цёмны

Шэрыя

Шырокі набор шэрых зменных і карта 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, "Noto 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);
  }
}