Source

Mavzu bo'yicha yuklash

Bootstrap 4-ni yangi o'rnatilgan Sass o'zgaruvchilari bilan oson mavzular va komponentlarni o'zgartirish uchun global uslub afzalliklari uchun sozlang.

Kirish

Bootstrap 3-da mavzular asosan LESS-dagi o'zgarmaydiganlarni bekor qilish, maxsus CSS va biz distfayllarimizga qo'shgan alohida mavzu uslublar jadvali bilan boshqarilgan. Bir oz harakat bilan, asosiy fayllarga tegmasdan Bootstrap 3 ko'rinishini butunlay qayta loyihalash mumkin. Bootstrap 4 tanish, ammo biroz boshqacha yondashuvni taqdim etadi.

Endi mavzular Sass o'zgaruvchilari, Sass xaritalari va maxsus CSS yordamida amalga oshiriladi. Boshqa maxsus mavzular jadvali yo'q; Buning o'rniga siz gradientlar, soyalar va boshqalarni qo'shish uchun o'rnatilgan mavzuni yoqishingiz mumkin.

Sass

O'zgaruvchilar, xaritalar, miksinlar va boshqalardan foydalanish uchun manba Sass fayllarimizdan foydalaning.

Fayl tuzilishi

Iloji bo'lsa, Bootstrap-ning asosiy fayllarini o'zgartirmang. Sass uchun bu Bootstrap-ni import qiladigan o'z uslublar jadvalingizni yaratishni anglatadi, shunda siz uni o'zgartirishingiz va kengaytirishingiz mumkin. Agar siz npm kabi paket menejeridan foydalanayotgan bo'lsangiz, sizda shunday ko'rinadigan fayl tuzilmasi bo'ladi:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Agar siz bizning manba fayllarimizni yuklab olgan bo'lsangiz va paket menejeridan foydalanmasangiz, Bootstrap-ning manba fayllarini o'zingizdan alohida saqlagan holda ushbu tuzilishga o'xshash narsani qo'lda sozlashni xohlaysiz.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Import qilinmoqda

Sizning custom.scss, siz Bootstrap-ning manba Sass fayllarini import qilasiz. Sizda ikkita variant bor: barcha Bootstrap-ni qo'shing yoki kerakli qismlarni tanlang. Biz ikkinchisini rag'batlantiramiz, ammo bizning komponentlarimizda ba'zi talablar va bog'liqliklar mavjudligini biling. Shuningdek, plaginlarimiz uchun JavaScript-ni qo'shishingiz kerak bo'ladi.

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

Ushbu o'rnatish joyida siz Sass o'zgaruvchilari va xaritalaringizdan istalganini o'zgartirishni boshlashingiz mumkin custom.scss. // OptionalBundan tashqari , kerak bo'lganda bo'lim ostida Bootstrap qismlarini qo'shishni boshlashingiz mumkin . bootstrap.scssBoshlanish nuqtasi sifatida faylimizdagi to'liq import stekidan foydalanishni tavsiya qilamiz .

O'zgaruvchan standart

Bootstrap 4-dagi har bir Sass o'zgaruvchisi !defaultBootstrap-ning manba kodini o'zgartirmasdan o'z Sass-dagi o'zgaruvchining standart qiymatini bekor qilish imkonini beruvchi bayroqni o'z ichiga oladi. Agar kerak bo'lsa, o'zgaruvchilardan nusxa ko'chiring va joylashtiring, ularning qiymatlarini o'zgartiring va !defaultbayroqni olib tashlang. Agar o'zgaruvchi allaqachon tayinlangan bo'lsa, u Bootstrap-dagi standart qiymatlar bo'yicha qayta tayinlanmaydi.

Bootstrap o'zgaruvchilarining to'liq ro'yxatini bo'limda topasiz scss/_variables.scss.

Xuddi shu Sass faylidagi o'zgaruvchilarni bekor qilish standart o'zgaruvchilardan oldin yoki keyin kelishi mumkin. Biroq, Sass fayllari bo'ylab bekor qilinganda, bekor qilishlaringiz Bootstrap's Sass fayllarini import qilishdan oldin kelishi kerak.

Bootstrapni npm orqali import qilish va kompilyatsiya qilishda va background-colorni coloro'zgartiradigan misol :<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Bootstrap-dagi har qanday o'zgaruvchi, jumladan quyidagi global parametrlar uchun kerak bo'lganda takrorlang.

Xaritalar va tsikllar

Bootstrap 4 tegishli CSS oilalarini yaratishni osonlashtiradigan bir nechta Sass xaritalarini, asosiy qiymat juftlarini o'z ichiga oladi. Biz Sass xaritalaridan ranglarimiz, to'rning uzilish nuqtalari va boshqalar uchun foydalanamiz. Xuddi Sass o'zgaruvchilari kabi, barcha Sass xaritalari !defaultbayroqni o'z ichiga oladi va ularni bekor qilish va kengaytirish mumkin.

Ba'zi Sass xaritalarimiz sukut bo'yicha bo'sh xaritalarga birlashtirilgan. Bu ma'lum bir Sass xaritasini oson kengaytirish uchun amalga oshiriladi, lekin xaritadan elementlarni olib tashlashni biroz qiyinlashtiradi.

Xaritani o'zgartirish

Xaritamizdagi mavjud rangni o'zgartirish uchun $theme-colorsSass faylingizga quyidagilarni qo'shing:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Xaritaga qo'shish

ga yangi rang $theme-colorsqo'shish uchun yangi kalit va qiymatni qo'shing:

$theme-colors: (
  "custom-color": #900
);

Xaritadan olib tashlash

$theme-colorsdan yoki boshqa xaritadan ranglarni olib tashlash uchun dan foydalaning map-remove. Shuni yodda tutingki, siz uni bizning talablarimiz va variantlarimiz orasiga kiritishingiz kerak:

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

Kerakli kalitlar

Bootstrap Sass xaritalarida ba'zi o'ziga xos kalitlar mavjudligini taxmin qiladi, chunki biz ularni o'zimiz ishlatgan va kengaytirganmiz. Qo'shilgan xaritalarni moslashtirganingizda, ma'lum bir Sass xaritasining kalitidan foydalanilganda xatolarga duch kelishingiz mumkin.

Masalan, havolalar, tugmalar va shakl holatlari uchun primary, success, va dangertugmalaridan foydalanamiz. $theme-colorsUshbu kalitlarning qiymatlarini almashtirish hech qanday muammo tug'dirmasligi kerak, ammo ularni olib tashlash Sass kompilyatsiyasi bilan bog'liq muammolarga olib kelishi mumkin. Bunday hollarda siz ushbu qiymatlardan foydalanadigan Sass kodini o'zgartirishingiz kerak bo'ladi.

Funksiyalar

Bootstrap bir nechta Sass funksiyalaridan foydalanadi, ammo umumiy mavzuga faqat kichik to'plam qo'llaniladi. Rangli xaritalardan qiymatlarni olish uchun biz uchta funktsiyani qo'shdik:

@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);
}

Bular sizga Sass xaritasidan bir rangni tanlash imkonini beradi, xuddi v3 dagi rang oʻzgaruvchisidan qanday foydalansangiz.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Xaritadan ma'lum bir rang darajasini olish uchun bizda yana bir funktsiya mavjud . $theme-colorsSalbiy daraja qiymatlari rangni ochadi, yuqori daraja esa qorayadi.

@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);
}

Amalda siz funktsiyani chaqirasiz va ikkita parametrni o'tkazasiz: rangning nomi $theme-colors(masalan, asosiy yoki xavfli) va raqamli daraja.

.custom-element {
  color: theme-color-level(primary, -10);
}

Kelajakda qo'shimcha funktsiyalar yoki qo'shimcha Sass xaritalari uchun darajali funktsiyalarni yaratish uchun o'zingizning shaxsiy Sassingiz qo'shilishi mumkin yoki agar siz batafsilroq bo'lishni istasangiz, hatto umumiy.

Rang kontrasti

Bootstrap-ga qo'shadigan qo'shimcha funktsiyalardan biri bu rang kontrasti funktsiyasi color-yiq. Belgilangan asosiy rang asosida ochiq ( ) yoki quyuq ( ) kontrast rangni avtomatik ravishda qaytarish uchun YIQ rang maydonidan foydalanadi. Bu funksiya, ayniqsa, bir nechta sinflarni yaratayotgan miksinlar yoki looplar uchun foydalidir.#fff#111

Masalan, xaritamizdan rang namunalarini yaratish uchun $theme-colors:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Bundan tashqari, bir martalik kontrast ehtiyojlari uchun ham foydalanish mumkin:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Rangli xarita funksiyalarimiz yordamida asosiy rangni ham belgilashingiz mumkin:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Sass variantlari

Bootstrap 4-ni o'rnatilgan maxsus o'zgaruvchilar faylimiz bilan sozlang va yangi $enable-*Sass o'zgaruvchilari bilan global CSS afzalliklarini osongina almashtiring. O'zgaruvchining qiymatini bekor qiling va npm run testkerak bo'lganda qayta kompilyatsiya qiling.

scss/_variables.scssBootstrap faylidagi asosiy global parametrlar uchun ushbu o'zgaruvchilarni topishingiz va sozlashingiz mumkin .

O'zgaruvchan	Qiymatlar	Tavsif
`$spacer`	`1rem`(standart) yoki istalgan qiymat > 0	Bizning spacer yordamchi dasturlarimizni dasturiy ravishda yaratish uchun standart spacer qiymatini belgilaydi .
`$enable-rounded`	`true`(standart) yoki`false`	`border-radius`Turli komponentlarda oldindan belgilangan uslublarni yoqadi .
`$enable-shadows`	`true`yoki `false`(standart)	`box-shadow`Turli komponentlarda oldindan belgilangan uslublarni yoqadi .
`$enable-gradients`	`true`yoki `false`(standart)	`background-image`Turli komponentlardagi uslublar orqali oldindan belgilangan gradientlarni yoqadi .
`$enable-transitions`	`true`(standart) yoki`false`	`transition`Turli komponentlarda oldindan belgilangan s ni yoqadi .
`$enable-hover-media-query`	`true`yoki `false`(standart)	Eskirgan
`$enable-grid-classes`	`true`(standart) yoki`false`	Grid tizimi uchun CSS sinflarini yaratishga ruxsat beradi (masalan, `.container`, `.row`, `.col-md-1`, va hokazo).
`$enable-caret`	`true`(standart) yoki`false`	Pseudo element karetini yoqadi `.dropdown-toggle`.
`$enable-print-styles`	`true`(standart) yoki`false`	Chop etishni optimallashtirish uchun uslublarni yoqadi.

Rang

Bootstrap-ning ko'plab turli komponentlari va yordamchi dasturlari Sass xaritasida aniqlangan bir qator ranglar orqali qurilgan. Tezda bir qator qoidalar to'plamini yaratish uchun ushbu xaritani Sassda aylantirish mumkin.

Barcha ranglar

Bootstrap 4 da mavjud bo'lgan barcha ranglar Sass o'zgaruvchilari va scss/_variables.scssfayldagi Sass xaritasi sifatida mavjud. Bu, biz allaqachon kiritgan kulrang palitraga o'xshab, qo'shimcha soyalarni qo'shish uchun keyingi kichik nashrlarda kengaytiriladi .

Moviy

Indigo

Siyohrang

Pushti

Qizil

apelsin

Sariq

Yashil

Teal

Moviy

Bularni Sass-da qanday ishlatishingiz mumkin:

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

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

colorSozlash va uchun rang yordamchi sinflari ham mavjud background-color.

Kelajakda biz quyida kul rangdagi ranglar bilan qilganimizdek, har bir rangning soyalari uchun Sass xaritalari va o‘zgaruvchilari bilan ta’minlashni maqsad qilamiz.

Mavzu ranglari

Rang sxemalarini yaratish uchun kichikroq rang palitrasini yaratish uchun barcha ranglarning kichik to'plamidan foydalanamiz, shuningdek, Bootstraps scss/_variables.scssfaylida Sass o'zgaruvchilari va Sass xaritasi sifatida mavjud.

Asosiy

Ikkilamchi

Muvaffaqiyat

Xavfli

Ogohlantirish

Ma'lumot

Nur

Qorong'i

Kulrang

Kulrang oʻzgaruvchilarning keng toʻplami va scss/_variables.scssloyihangiz boʻylab kul rangning izchil soyalari uchun Sass xaritasi.

100

200

300

400

500

600

700

800

900

ichida scss/_variables.scsssiz Bootstrap rang o'zgaruvchilari va Sass xaritasini topasiz. $colorsMana Sass xaritasiga misol :

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

Xarita ichidagi qiymatlarni qoʻshing, oʻchiring yoki oʻzgartiring, ular boshqa komponentlarda qanday ishlatilishini yangilang. Afsuski, hozirgi vaqtda har bir komponent ushbu Sass xaritasidan foydalanmaydi. Kelgusi yangilanishlar buni yaxshilashga intiladi. Ungacha ${color}o'zgaruvchilardan va ushbu Sass xaritasidan foydalanishni rejalashtiring.

Komponentlar

Bootstrap-ning ko'pgina komponentlari va yordamchi dasturlari @eachSass xaritasi bo'ylab takrorlanadigan tsikllar bilan qurilgan. Bu, ayniqsa, bizning komponentimiz $theme-colorsvariantlarini yaratish va har bir to'xtash nuqtasi uchun javob beruvchi variantlarni yaratish uchun foydalidir. Ushbu Sass xaritalarini moslashtirganingiz va qayta kompilyatsiya qilganingizdan so'ng, avtomatik ravishda o'zgartirishlaringiz ushbu tsikllarda aks ettirilganini ko'rasiz.

Modifikatorlar

Bootstrap-ning ko'pgina komponentlari asosiy modifikator sinfi yondashuvi bilan qurilgan. Bu shuni anglatadiki, uslubning asosiy qismi asosiy sinfga (masalan, .btn) kiritilgan, uslub o'zgarishlari esa modifikator sinflari bilan chegaralangan (masalan, .btn-danger). $theme-colorsUshbu modifikator sinflari bizning modifikator sinflarimiz soni va nomini sozlash uchun xaritadan qurilgan .

Komponentga $theme-colorsmodifikatorlar va barcha fon yordam dasturlarini yaratish uchun xaritani qanday aylantirishimiz haqida ikkita misol ..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);
}

Javobgar

Ushbu Sass halqalari ham rangli xaritalar bilan cheklanmaydi. Shuningdek, siz komponentlaringiz yoki yordamchi dasturlaringizning sezgir o'zgarishlarini yaratishingiz mumkin. @eachMasalan, biz Sass xaritasi uchun tsiklni $grid-breakpointsmedia so'rov bilan aralashtiradigan javob beruvchi matnni tekislash yordamchi dasturlarimizni olaylik .

@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; }
  }
}

Agar siz ni o'zgartirishingiz kerak bo'lsa, o'zgartirishlaringiz $grid-breakpointsushbu xaritada takrorlanadigan barcha tsikllarga qo'llaniladi.

CSS o'zgaruvchilari

Bootstrap 4 kompilyatsiya qilingan CSS-da yigirmaga yaqin CSS maxsus xususiyatlarini (o'zgaruvchilari) o'z ichiga oladi. Bular brauzeringiz Inspektorida, kod sinov muhitida yoki umumiy prototiplashda ishlaganda mavzu ranglari, to‘xtash nuqtalari va asosiy shrift steklari kabi keng tarqalgan foydalaniladigan qiymatlarga oson kirish imkonini beradi.

Mavjud o'zgaruvchilar

Bu erda biz o'z ichiga olgan o'zgaruvchilar ( :rootkerak ekanligini unutmang). Ular bizning faylimizda joylashgan _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;
}

Misollar

CSS o'zgaruvchilari Sass o'zgaruvchilariga o'xshash moslashuvchanlikni taklif qiladi, ammo brauzerga taqdim etilishidan oldin kompilyatsiya qilish kerak emas. Misol uchun, bu erda biz sahifamizning shriftini va CSS o'zgaruvchilari bilan bog'lanish uslublarini qayta o'rnatmoqdamiz.

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

To'xtash nuqtasi o'zgaruvchilari

Biz dastlab CSS o'zgaruvchilarimizga to'xtash nuqtalarini qo'shgan bo'lsak ham (masalan, --breakpoint-md), ular media so'rovlarida qo'llab-quvvatlanmaydi , lekin ular hali ham media so'rovlarida qoidalar to'plamida ishlatilishi mumkin . Ushbu to'xtash nuqtasi o'zgaruvchilari JavaScript tomonidan ishlatilishi mumkinligi sababli orqaga qarab muvofiqlik uchun kompilyatsiya qilingan CSS-da qoladi. Spetsifikatsiyada ko'proq bilib oling.

Qo'llab-quvvatlanmaydigan narsalarga misol :

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

Va bu erda qo'llab-quvvatlanadigan misol :

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