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	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 foydalanilsa, u kompilyatsiya qilinmaydi.
`class`	Ixtiyoriy	Agar siz uning mulk bilan bir xil bo'lishini xohlamasangiz, sinf nomi uchun o'zgaruvchi. Agar siz `class`kalitni bermasangiz va `property`kalit qatorlar qatori bo'lsa, sinf nomi massivning birinchi elementi bo'ladi `property`.
`state`	Ixtiyoriy	Yordamchi dastur uchun yaratiladigan `:hover`yoki psevdo-sinf variantlari ro'yxati . `:focus`Standart qiymat yo'q.
`responsive`	Ixtiyoriy	Boolean javob beruvchi sinflarni yaratish zarurligini ko'rsatadi. `false`avvalboshdan.
`rfs`	Ixtiyoriy	Suyuqlikni o'zgartirishni yoqish uchun mantiqiy. Bu qanday ishlashini bilish uchun RFS sahifasiga qarang. `false`avvalboshdan.
`print`	Ixtiyoriy	Chop etish sinflarini yaratish zarurligini ko'rsatadigan mantiqiy. `false`avvalboshdan.
`rtl`	Ixtiyoriy	Mantiqiy dastur RTLda saqlanishi kerakligini ko'rsatadi. `true`avvalboshdan.

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

Maxsus sinf prefiksi

Kompilyatsiya qilingan CSS-da ishlatiladigan sinf prefiksini o'zgartirish uchun classopsiyadan foydalaning:

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

Chiqish:

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

Shtatlar

statePseudo-klass o'zgarishlarini yaratish uchun opsiyadan foydalaning . Pseudo-sinflarga misol :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; }

Javob beruvchi yordamchi dasturlar

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

Utilitlarni o'zgartirish

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,
  ),
);

Chop etish uchun yordamchi dasturlar

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.

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

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

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

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

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

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

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

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

Utilitlarni olib tashlang

Guruh tugmachasini ga o'rnatish orqali har qanday standart yordamchi dasturlarni olib tashlang null. Masalan, barcha widthyordamchi dasturlarimizni o'chirish uchun a yarating $utilities map-mergeva ichiga qo'shing "width": null.

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

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

RTL-da yordamchi dasturni olib tashlang

Ba'zi chekka holatlar RTL uslubini qiyinlashtiradi , masalan, arab tilidagi qatorlar. 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 .