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, шумо файлҳои манбаи Sass-и Bootstrap-ро ворид мекунед. Шумо ду интихоб доред: ҳамаи 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. Шумо инчунин метавонед ба илова кардани қисмҳои Bootstrap дар // Optionalқисмати зарурӣ оғоз кунед. Мо тавсия медиҳем, ки стеки пурраи воридотро аз bootstrap.scssфайли мо ҳамчун нуқтаи ибтидоии худ истифода барем.

Пешфарзҳои тағирёбанда

Ҳар як тағирёбандаи Sass дар Bootstrap дорои !defaultпарчамест, ки ба шумо имкон медиҳад, ки арзиши пешфарзи тағирёбандаро дар Sass-и худ бе тағир додани коди ибтидоии Bootstrap бекор кунед. Ҳангоми зарурат тағирёбандаҳоро нусхабардорӣ ва часбонед, арзишҳои онҳоро тағир диҳед ва !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`
}

Фирор аз SVG

Мо ин escape-svgфунксияро барои фирор аз аломатҳои <, >ва #барои тасвирҳои заминаи SVG истифода мебарем. Барои дуруст нишон додани тасвирҳои пасзамина дар IE, ин аломатҳоро наҷот додан лозим аст. Ҳангоми истифодаи escape-svgфунксия, URI-ҳои маълумот бояд иқтибос оварда шаванд.

Функсияҳои Илова ва Тарҳ

Мо функсияҳои варо барои addпечонидани функсияи subtractCSS истифода мебарем 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-ро бо файли дарунсохташудаи тағирёбандаҳои фармоишии мо фармоиш диҳед ва афзалиятҳои глобалии CSS-ро бо $enable-*тағирёбандаҳои нави Sass ба осонӣ иваз кунед. Қимати тағирёбандаро бекор кунед ва npm run testдар ҳолати зарурӣ бо он дубора тартиб диҳед.

Шумо метавонед ин тағирёбандаҳоро барои имконоти асосии глобалӣ дар scss/_variables.scssфайли Bootstrap пайдо кунед ва танзим кунед.

Ранги

Бисёре аз ҷузъҳо ва хидматҳои гуногуни 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 дар scss/_variables.scssфайли Bootstrap низ дастрасанд.

Хокистарӣ

Маҷмӯи васеъи тағирёбандаҳои хокистарӣ ва харитаи 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 бо @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", "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), онҳо дар дархостҳои медиа дастгирӣ намешаванд , аммо онҳо то ҳол метавонанд дар дохили маҷмӯи қоидаҳо дар дархостҳои медиа истифода шаванд. Ин тағирёбандаҳои нуқтаи қатъшуда дар CSS-и тартибдодашуда барои мутобиқати ақиб боқӣ мемонанд, зеро онҳо метавонанд тавассути JavaScript истифода шаванд. Бештар дар мушаххасот маълумот гиред .

Ин аст мисоли он чизе, ки дастгирӣ намешавад:

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

Ва ин аст як мисоли он чизе, ки дастгирӣ мешавад:

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