Source

Theming Bootstrap

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

Киришүү

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

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

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

@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. // OptionalОшондой эле зарыл болгон бөлүмдүн астына Bootstrap бөлүктөрүн кошо баштасаңыз болот . bootstrap.scssБаштапкы чекит катары биздин файлдан толук импорттук стекти колдонууну сунуштайбыз .

Variable демейки

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

Bootstrap өзгөрмөлөрүнүн толук тизмесин scss/_variables.scss.

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

Бул жерде Bootstrapти npm аркылуу импорттоо жана компиляциялоо background-colorүчүн colorөзгөргөн мисал келтирилген :<body>

// 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, жана 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`
}

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

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

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

Variable	баалуулуктар	Description
`$spacer`	`1rem`(демейки) же кандайдыр бир маани > 0	Биздин spacer утилиталарын программалык түрдө түзүү үчүн демейки spacer маанисин көрсөтөт .
`$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 өзгөрмөлөрү жана scss/_variables.scssфайлдагы Sass картасы катары жеткиликтүү. Бул биз киргизген боз палитрага окшоп, кошумча көлөкөлөрдү кошуу үчүн кийинки кичинекей чыгарылыштарда кеңейтилет .

Көк

Индиго

Кызгылт көк

Кызгылт

Кызыл

Ачык күрөң

Сары

Жашыл

Teal

Сиан

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

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

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

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

Келечекте биз төмөндөгү боз түстөр менен кылгандай, ар бир түстүн көлөкөлөрү үчүн Sass карталарын жана өзгөрмөлөрүн берүүнү максат кылабыз.

Тема түстөр

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

Негизги

Экинчи

Ийгилик

коркунуч

Эскертүү

Маалымат

Жарык

Караңгы

Боз

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

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

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

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

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