Utility API

Yordamchi API - yordam sinflarini yaratish uchun Sass-ga asoslangan vositadir.

Ushbu sahifada

Bootstrap yordam dasturlari bizning API yordamchi dasturimiz yordamida yaratiladi va ular Sass orqali standart yordamchi dasturlar to'plamini o'zgartirish yoki kengaytirish uchun ishlatilishi mumkin. Bizning yordamchi dasturimiz turli xil variantlarga ega sinflar oilalarini yaratish uchun Sass xaritalari va funktsiyalari seriyasiga asoslangan. Agar siz Sass xaritalari bilan tanish bo'lmasangiz, boshlash uchun rasmiy Sass hujjatlarini o'qing .

Xarita $utilitiesbarcha yordamchi dasturlarimizni o'z ichiga oladi va agar mavjud bo'lsa, keyinchalik sizning shaxsiy $utilitiesxaritangiz bilan birlashtiriladi. Yordamchi dasturlar xaritasi quyidagi variantlarni qabul qiladigan yordamchi dasturlarning kalitli ro'yxatini o'z ichiga oladi:

Variant	Turi	Standart qiymat	Tavsif
`property`	Majburiy	-	Xususiyat nomi, bu satr yoki qatorlar massivi bo'lishi mumkin (masalan, gorizontal to'ldirishlar yoki chekkalar).
`values`	Majburiy	-	Qiymatlar roʻyxati yoki sinf nomi qiymat bilan bir xil boʻlishini xohlamasangiz, xarita. Agar `null`xarita kaliti sifatida ishlatilsa, `class`sinf nomining oldiga qo'yilmaydi.
`class`	Ixtiyoriy	null	Yaratilgan sinf nomi. Agar taqdim etilmagan bo'lsa va `property`satrlar massivi bo'lsa, `class`sukut bo'yicha `property`massivning birinchi elementi bo'ladi. Agar taqdim etilmagan bo'lsa va `property`satr bo'lsa, kalitlar nomlar `values`uchun ishlatiladi .`class`
`css-var`	Ixtiyoriy	`false`	CSS qoidalari o'rniga CSS o'zgaruvchilarini yaratish uchun mantiqiy.
`css-variable-name`	Ixtiyoriy	null	Qoidalar toʻplami ichidagi CSS oʻzgaruvchisi uchun maxsus prefikssiz nom.
`local-vars`	Ixtiyoriy	null	CSS qoidalariga qo'shimcha ravishda yaratish uchun mahalliy CSS o'zgaruvchilari xaritasi.
`state`	Ixtiyoriy	null	Yaratiladigan psevdo-sinf variantlari roʻyxati (masalan, `:hover`yoki `:focus`).
`responsive`	Ixtiyoriy	`false`	Mantiqiy javob beruvchi sinflar yaratilishi kerakligini ko'rsatadi.
`rfs`	Ixtiyoriy	`false`	RFS bilan suyuqlikni qayta o'lchashni yoqish uchun mantiqiy .
`print`	Ixtiyoriy	`false`	Chop etish sinflarini yaratish zarurligini ko'rsatadigan mantiqiy.
`rtl`	Ixtiyoriy	`true`	Mantiqiy dastur RTLda saqlanishi kerakligini ko'rsatadi.

API tushuntirilgan

Barcha foydali o'zgaruvchilar uslublar $utilitiesjadvalimizdagi o'zgaruvchiga qo'shiladi . _utilities.scssUtilitlarning har bir guruhi quyidagicha ko'rinadi:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Quyidagilarni chiqaradi:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

Mulk

Kerakli propertykalit har qanday yordamchi dastur uchun o'rnatilishi kerak va u tegishli CSS xususiyatini o'z ichiga olishi kerak. Bu xususiyat yaratilgan yordam dasturining qoidalar to'plamida ishlatiladi. Kalit o'tkazib yuborilsa class, u standart sinf nomi sifatida ham xizmat qiladi. Yordamchi dasturni ko'rib chiqing text-decoration:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

Chiqish:

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

Qiymatlar

Yaratilgan sinf nomlari va qoidalarida valuesko'rsatilgan qiymatlar ishlatilishi kerakligini belgilash uchun kalitdan foydalaning. propertyRo'yxat yoki xarita bo'lishi mumkin (utilitalarda yoki Sass o'zgaruvchisida o'rnatilgan).

Ro'yxat sifatida, text-decorationyordam dasturlari kabi :

values: none underline line-through

opacityUtilitlar kabi xarita sifatida :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

Ro'yxat yoki xaritani o'rnatuvchi Sass o'zgaruvchisi sifatida, bizning positionyordamchi dasturlarimizdagi kabi :

values: $position-values

Sinf

Kompilyatsiya qilingan CSS-da ishlatiladigan sinf prefiksini o'zgartirish uchun classopsiyadan foydalaning. Masalan, dan ga o'zgartirish .opacity-*uchun .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Chiqish:

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

Agar , har bir kalit class: nulluchun sinflarni hosil qiladi :values

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

Chiqish:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

CSS o'zgaruvchan yordamchi dasturlari

css-varMantiqiy parametrni o'rnating trueva API odatdagi property: valueqoidalar o'rniga berilgan selektor uchun mahalliy CSS o'zgaruvchilarini yaratadi. css-variable-nameSinf nomidan boshqa CSS o'zgaruvchi nomini o'rnatish uchun ixtiyoriy qo'shing .

.text-opacity-*Kommunal xizmatlarimizni ko'rib chiqing . Agar biz css-variable-namevariantni qo'shsak, biz maxsus chiqishni olamiz.

$utilities: (
  "text-opacity": (
    css-var: true,
    css-variable-name: text-alpha,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

Chiqish:

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 1; }

Mahalliy CSS o'zgaruvchilari

local-varsYordamchi dasturlar sinfining qoidalar to'plamida mahalliy CSS o'zgaruvchilarini yaratadigan Sass xaritasini belgilash uchun opsiyadan foydalaning . Yaratilgan CSS qoidalarida o'sha mahalliy CSS o'zgaruvchilarni iste'mol qilish uchun qo'shimcha ish talab qilinishi mumkinligini unutmang. Masalan, bizning .bg-*kommunal xizmatlarimizni ko'rib chiqing:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

Chiqish:

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

Shtatlar

statePseudo-klass o'zgarishlarini yaratish uchun opsiyadan foydalaning . Misol psevdo-sinflar :hoverva :focus. Holatlar ro'yxati taqdim etilganda, o'sha psevdosinf uchun sinf nomlari yaratiladi. Masalan, hoverda shaffoflikni o'zgartirish uchun qo'shing state: hoverva siz .opacity-hover:hoverkompilyatsiya qilingan CSS-ni olasiz.

Bir nechta pseudo-klasslar kerakmi? Holatlarning boʻsh joydan ajratilgan roʻyxatidan foydalaning: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Chiqish:

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

Javobgar

Barcha to'xtash nuqtalari bo'ylab responsivesezgir yordamchi dasturlarni (masalan, ) yaratish uchun mantiqiy qiymatni qo'shing ..opacity-md-25

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Chiqish:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

Chop etish

printVariantni yoqish, shuningdek , chop etish uchun faqat @media print { ... }media so'rovida qo'llaniladigan yordam sinflarini yaratadi.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Chiqish:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

Muhimligi

API tomonidan yaratilgan barcha yordamchi dasturlar !importantkomponentlar va modifikator sinflarini mo'ljallangan tarzda bekor qilishini ta'minlaydi. Siz ushbu sozlamani $enable-important-utilitieso'zgaruvchi bilan global miqyosda almashtirishingiz mumkin (birlamchi parametrlar true).

API dan foydalanish

Endi siz API yordam dasturlari qanday ishlashini bilganingizdan so'ng, o'zingizning shaxsiy sinflaringizni qanday qo'shish va standart yordamchi dasturlarimizni o'zgartirishni o'rganing.

Utilitalarni bekor qilish

Xuddi shu kalit yordamida mavjud yordamchi dasturlarni bekor qiling. Misol uchun, agar siz qo'shimcha sezgir to'lib-toshgan yordamchi dasturlar sinflarini xohlasangiz, buni qilishingiz mumkin:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Utilitlarni qo'shing

$utilitiesStandart xaritaga yangi yordam dasturlari bilan qo'shilishi mumkin map-merge. Kerakli Sass fayllarimiz _utilities.scssavval import qilinganligiga ishonch hosil qiling, so'ngra map-mergeqo'shimcha yordam dasturlaringizni qo'shish uchun foydalaning. Misol uchun, bu erda cursoruchta qiymatga ega sezgir yordamchi dasturni qanday qo'shish mumkin.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

Utilitlarni o'zgartirish

$utilitiesStandart xaritadagi mavjud yordamchi dasturlarni map-getva map-mergefunksiyalari bilan o‘zgartiring. Quyidagi misolda biz yordamchi dasturlarga qo'shimcha qiymat qo'shmoqdamiz width. Bosh harfdan boshlang map-mergeva keyin qaysi yordam dasturini o'zgartirmoqchi ekanligingizni belgilang. Yordamchi dastur parametrlari va qiymatlariga kirish va o'zgartirish uchun u yerdan o'rnatilgan "width"xaritani oling.map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Javob berishni yoqing

Siz hozirda sukut bo'yicha javob bermaydigan mavjud yordamchi dasturlar to'plami uchun javob beruvchi sinflarni yoqishingiz mumkin. Masalan, bordersinflarni sezgir qilish uchun:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Bu endi .borderva .border-0har bir to'xtash nuqtasi uchun javob beruvchi o'zgarishlarni yaratadi. Siz yaratgan CSS quyidagicha ko'rinadi:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

Utilitlarni qayta nomlash

v4 yordam dasturlari etishmayaptimi yoki boshqa nomlash konventsiyasiga o'rganib qolganmisiz? Utilitlar API-dan ma'lum bir yordam dasturining natijasini bekor qilish uchun foydalanish mumkin class, masalan, .ms-*yordamchi dasturlarning nomini eskish deb o'zgartirish uchun .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Utilitlarni olib tashlang

map-remove()Sass funktsiyasi bilan har qanday standart yordamchi dasturlarni olib tashlang .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

Yordamchi dasturni olib tashlash uchun map-merge()Sass funksiyasidan ham foydalanishingiz va guruh tugmachasini o'rnatishingiz mumkin .null

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

@import "bootstrap/scss/utilities/api";

Qo'shish, o'chirish, o'zgartirish

map-merge()Sass funksiyasi bilan bir vaqtning o'zida bir nechta yordamchi dasturlarni qo'shishingiz, o'chirishingiz va o'zgartirishingiz mumkin . Oldingi misollarni bitta kattaroq xaritaga qanday qilib birlashtirishingiz mumkin.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

RTL-da yordamchi dasturni olib tashlang

Ba'zi chekka holatlar RTL uslubini qiyinlashtiradi , masalan, arab tilidagi qator uzilishlari. rtlShunday qilib, quyidagi parametrni o'rnatish orqali yordam dasturlarini RTL chiqishidan chiqarib tashlash mumkin false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Chiqish:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Bu RTLCSS removeboshqaruv direktivasi tufayli RTL da hech narsa chiqarmaydi .