Source

Theming 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 ворид шавад.

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

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

Тағйирёбанда	Арзишҳо	Тавсифи
`$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`	s-и пешакӣ муайяншударо `transition`дар ҷузъҳои гуногун фаъол мекунад.
`$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файл дастрасанд. Ин дар релизҳои хурди минбаъда васеъ карда мешавад, то сояҳои иловагӣ илова карда шавад, ба монанди палитраи хокистарранг , ки мо аллакай дохил кардаем.

Кабуд

Индиго

Бунафш

Гулобӣ

Сурх

норанҷӣ

Зард

Сабз

Teal

Сиан

Ин аст, ки чӣ тавр шумо метавонед инҳоро дар 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);
  }
}