Theming Bootstrap

Bootstrap 4ти жаңы орнотулган Sass өзгөрмөлөрү менен ыңгайлаштырыңыз, темаларды жана компоненттерди оңой өзгөртүү үчүн глобалдык стилдин артыкчылыктары.

Киришүү

Bootstrap 3те тематика негизинен LESSтеги өзгөрмөлөрдү жокко чыгаруулар, ыңгайлаштырылган CSS жана distфайлдарыбызга кошкон өзүнчө тема стили жадыбалынан келип чыккан. Бир аз күч-аракет менен, Bootstrap 3тин көрүнүшүн негизги файлдарга тийбестен толугу менен өзгөртүүгө болот. Bootstrap 4 тааныш, бирок бир аз башкача ыкманы камсыз кылат.

Эми тематика Sass өзгөрмөлөрү, Sass карталары жана ыңгайлаштырылган CSS аркылуу ишке ашат. Мындан ары арналган тема стилдер жадыбалы жок; анын ордуна градиенттерди, көлөкөлөрдү жана башкаларды кошуу үчүн камтылган теманы иштете аласыз.

Sass

Өз активиңизди колдонуп Sass түзүүдө өзгөрмөлөрдүн, карталардын, микстердин жана башкалардын артыкчылыктарын алуу үчүн биздин 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, сиз Bootstrap булагы Sass файлдарын импорттойсуз. Сизде эки вариант бар: бардык Bootstrap камтыңыз же керектүү бөлүктөрүңүздү тандаңыз. Биз акыркыны кубаттайбыз, бирок биздин компоненттерибизде кээ бир талаптар жана көз карандылыктар бар. Ошондой эле биздин плагиндерибиз үчүн JavaScript кошушуңуз керек болот.

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

Ошол орнотуу менен, сиз Sass өзгөрмөлөрүнүн жана карталарыңыздын каалаганын өзгөртө баштасаңыз болот custom.scss. // OptionalОшондой эле зарыл болгон бөлүмдүн астына Bootstrap бөлүктөрүн кошо баштасаңыз болот . bootstrap.scssБаштапкы чекит катары биздин файлдан толук импорттук стекти колдонууну сунуштайбыз .

Variable демейки

Bootstrap'теги ар бир Sass өзгөрмөлөрү !defaultBootstrap'тын баштапкы кодун өзгөртпөстөн, өз Sassдагы өзгөрмөнүн демейки маанисин жокко чыгарууга мүмкүндүк берген желекти камтыйт. Керек болсо өзгөрмөлөрдү көчүрүңүз жана чаптаңыз, алардын маанилерин өзгөртүңүз жана !defaultжелекти алып салыңыз. Эгерде өзгөрмө мурунтан эле дайындалган болсо, анда ал Bootstrap ичиндеги демейки маанилер боюнча кайра дайындалбайт.

Bootstrap өзгөрмөлөрүнүн толук тизмесин scss/_variables.scss. Кээ бир өзгөрмөлөр орнотулган null, бул өзгөрмөлөр конфигурацияңызда жокко чыгарылмайынча касиетти чыгарбайт.

Өзгөрмөлөрдү жокко чыгаруу функцияларыбыз, өзгөрмөлөрүбүз жана аралашмалар импорттолгондон кийин, бирок калган импорттон мурун келиши керек.

Бул жерде Bootstrapти npm аркылуу импорттоо жана компиляциялоо 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

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`
}

Escape SVG

SVG фон сүрөттөрү үчүн , жана символдорунан escape-svgкачуу үчүн функцияны колдонобуз . Фондук сүрөттөрдү IEде туура көрсөтүү үчүн бул символдордон качуу керек. Функцияны колдонууда маалыматтардын URI'лери цитаталанышы керек.<>#escape-svg

Кошуу жана кемитүү функциялары

Биз addжана subtractфункцияларын CSS 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);
}

Sass параметрлери

Bootstrap 4ти биздин орнотулган жеке өзгөрмөлөр файлыбыз менен ыңгайлаштырыңыз жана жаңы $enable-*Sass өзгөрмөлөрү менен глобалдык CSS артыкчылыктарын оңой которуштуруу. Өзгөрмөнүн маанисин жокко чыгарып npm run test, керек болсо кайра компиляциялаңыз.

scss/_variables.scssBootstrap файлындагы негизги глобалдык параметрлер үчүн бул өзгөрмөлөрдү таап, ыңгайлаштыра аласыз .

Түс

Bootstrap'тин ар кандай компоненттеринин жана утилиталарынын көбү Sass картасында аныкталган түстөрдүн сериясы аркылуу курулган. Бир катар эрежелер топтомун тез түзүү үчүн бул картаны Sass'та айлантса болот.

Бардык түстөр

Bootstrap 4те жеткиликтүү бардык түстөр Sass өзгөрмөлөрү жана scss/_variables.scssфайлдагы Sass картасы катары жеткиликтүү. Бул биз киргизген боз палитрага окшоп, кошумча көлөкөлөрдү кошуу үчүн кийинки кичинекей чыгарылыштарда кеңейтилет .

Буларды Sassыңызда кантип колдонсоңуз болот:

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

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

Түстүү пайдалуу класстар да жөндөө colorжана background-color.

Тема түстөр

Биз түс схемаларын түзүү үчүн кичирээк түс палитрасын түзүү үчүн бардык түстөрдүн бир бөлүгүн колдонобуз, ошондой эле Sass өзгөрмөлөрү жана Bootstrap scss/_variables.scssфайлында Sass картасы катары жеткиликтүү.

Боз

Боз өзгөрмөлөрдүн кенен топтому жана Sass картасы scss/_variables.scssсиздин долбооруңуз боюнча ырааттуу боз түстөр үчүн. Көңүл буруңуз, бул нейтралдуу боз түскө караганда, назик көк тонго умтулган "муздак боз боз".

ичинде 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тин көптөгөн компоненттери жана утилиталары @eachSass картасынын үстүнөн кайталануучу циклдер менен курулган. Бул биздин компоненттин $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 илмектери түстүү карталар менен эле чектелбейт. Сиз ошондой эле компоненттериңиздин же утилиталарыңыздын жооп берүүчү вариацияларын түзө аласыз. Мисалы, биздин жооп берүүчү текстти тегиздөө утилиталарын алалы, анда биз Sass картасы үчүн @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, сиздин өзгөртүүлөрүңүз ошол картада кайталануучу бардык циклдерге колдонулат.

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", "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;
}

Мисалдар

CSS өзгөрмөлөрү Sass'тын өзгөрмөлөрүнө окшош ийкемдүүлүктү сунуштайт, бирок браузерге кызмат кылуудан мурун компиляцияны талап кылбастан. Мисалы, бул жерде биз баракчабыздын шрифттерин жана CSS өзгөрмөлөрү менен шилтеме стилдерин баштапкы абалга келтирип жатабыз.

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

Үзүлүүчү өзгөрмөлөр

Адегенде биз CSS өзгөрмөлөрүбүзгө үзүлүүчү чекиттерди кошконубуз менен (мисалы, --breakpoint-md), алар медиа сурамдарда колдоого алынбайт , бирок алар медиа сурамдарында эрежелер топтомунда дагы эле колдонулушу мүмкүн . Бул үзүлүүчү өзгөрмөлөр JavaScript тарабынан колдонулушу мүмкүн болгон шартта артка шайкештик үчүн компиляцияланган CSSде кала берет. спецификациядан көбүрөөк маалымат алыңыз .

Бул жерде колдоого алынбаган нерселердин мисалы :

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

Бул жерде колдоого алынган мисал :

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