Mavzu bo'yicha yuklash

Bootstrap 4-ni yangi o'rnatilgan Sass o'zgaruvchilari bilan oson mavzularni 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

Sass-ni o'z aktivlar quvuringizdan foydalangan holda kompilyatsiya qilishda 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

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

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'dagi har bir Sass o'zgaruvchisi !defaultBootstrap manba kodini o'zgartirmasdan o'z Sass'ingizda 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. Ba'zi o'zgaruvchilar ga o'rnatilgan null, bu o'zgaruvchilar konfiguratsiyangizda bekor qilinmaguncha xususiyatni chiqarmaydi.

O'zgaruvchilarni bekor qilish funksiyalarimiz, o'zgaruvchilarimiz va miksinlarimiz import qilinganidan keyin, ammo qolgan importlardan oldin kelishi kerak.

Bootstrap-ni npm orqali import qilish va kompilyatsiya qilishda va background-colorni coloro'zgartiradigan misol :<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-dagi har qanday o'zgaruvchi, jumladan quyidagi global parametrlar uchun kerak bo'lganda takrorlang.

Xaritalar va tsikllar

Bootstrap 4 bir nechta Sass xaritalarini, tegishli CSS oilalarini yaratishni osonlashtiradigan 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 darajalar 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 parametrga o'tasiz: 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 funktsiya rang kontrasti funktsiyasidir 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`
}

SVGdan qochish

Biz SVG fon tasvirlari uchun , va belgilardan escape-svgqochish funksiyasidan foydalanamiz. IE da fon tasvirlarini to'g'ri ko'rsatish uchun bu belgilardan qochish kerak. Funktsiyadan foydalanganda ma'lumotlar URI'lari kotirovka qilinishi kerak.<>#escape-svg

Qo'shish va ayirish funktsiyalari

Biz CSS funktsiyasini o'rash uchun addva funksiyalaridan foydalanamiz . Ushbu funktsiyalarning asosiy maqsadi ifodaga "birliksiz" qiymat berilganda xatolarga yo'l qo'ymaslikdir . Kabi iboralar matematik jihatdan to'g'ri bo'lishiga qaramay, barcha brauzerlarda xatolikni qaytaradi.subtractcalc0calccalc(10px - 0)

Hisob to'g'ri bo'lgan misol:

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

Hisob noto'g'ri bo'lgan misol:

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

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 .

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.

Mavzu ranglari

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

Kulrang

Kulrang oʻzgaruvchilarning keng toʻplami va scss/_variables.scssloyihangiz boʻylab kul rangning izchil soyalari uchun Sass xaritasi. E'tibor bering, bular neytral kulrang emas, balki nozik ko'k rangga moyil bo'lgan "sovuq kulrang".

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 .

Komponent va barcha fon yordam dasturlari $theme-colorsuchun modifikatorlarni 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'rovi bilan aralashtirgan 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

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

Misollar

CSS o'zgaruvchilari Sass o'zgaruvchilariga o'xshash moslashuvchanlikni taklif qiladi, ammo brauzerga taqdim etilishidan oldin kompilyatsiya qilish kerak emas. Masalan, 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 (masalan, --breakpoint-md) to'xtash nuqtalarini qo'shgan bo'lsak ham, 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);
  }
}