Utility API

Пайдалуу API - бул пайдалуу класстарды түзүү үчүн Sass негизиндеги курал.

Бул бетте

Bootstrap утилиталары биздин API пайдалуу программабыз менен түзүлөт жана Sass аркылуу биздин демейки утилита класстарыбызды өзгөртүү же кеңейтүү үчүн колдонулушу мүмкүн. Биздин API пайдалуу программабыз ар кандай варианттары бар класстардын үй-бүлөлөрүн түзүү үчүн Sass карталарынын жана функцияларынын сериясына негизделген. Эгер сиз Sass карталары менен тааныш эмес болсоңуз, баштоо үчүн расмий Sass документтерин окуп чыгыңыз.

Карта биздин бардык коммуналдык кызматтарыбызды камтыйт жана $utilitiesкийинчерээк $utilities, эгер бар болсо, сиздин жеке картаңыз менен бириктирилет. Пайдалуу карта төмөнкү опцияларды кабыл алган пайдалуу топтордун негизги тизмесин камтыйт:

Опция	Type	Демейки маани	Description
`property`	Талап кылынат	–	Менчиктин аталышы, бул сап же саптардын массиви болушу мүмкүн (мисалы, горизонталдык толтургучтар же четтер).
`values`	Талап кылынат	–	Маанилердин тизмеси, же класстын аталышы мааниге окшош болушун каалабасаңыз, карта. Эгер `null`карта ачкычы катары колдонулса, `class`класстын аталышынын алдына коюлбайт.
`class`	Кошумча	нөл	Түзүлгөн класстын аталышы. Эгерде берилбесе жана `property`саптардын массиви болсо, `class`демейки массивдин биринчи элементи болуп калат `property`. Эгерде берилбесе жана `property`сап болсо, `values`баскычтар `class`ысымдар үчүн колдонулат.
`css-var`	Кошумча	`false`	CSS эрежелеринин ордуна CSS өзгөрмөлөрүн түзүү үчүн логикалык.
`css-variable-name`	Кошумча	нөл	Эрежелер топтомунун ичиндеги CSS өзгөрмөсү үчүн префикссиз ыңгайлаштырылган аталыш.
`local-vars`	Кошумча	нөл	CSS эрежелерине кошумча түзүү үчүн жергиликтүү CSS өзгөрмөлөрүнүн картасы.
`state`	Кошумча	нөл	Жасалуучу псевдокласс варианттарынын тизмеси (мисалы, `:hover`же `:focus`).
`responsive`	Кошумча	`false`	Жооптуу класстарды түзүү керекпи же жокпу көрсөтүүчү логикалык.
`rfs`	Кошумча	`false`	RFS менен суюктуктун масштабын өзгөртүү үчүн логикалык .
`print`	Кошумча	`false`	Басып чыгаруу класстарын түзүү керек болсо, буль.
`rtl`	Кошумча	`true`	Бул утилитаны RTLде сактоо керекпи же жокпу көрсөтөт.

API түшүндүрдү

$utilitiesБардык пайдалуу өзгөрмөлөр биздин _utilities.scssстилдер жадыбалыбыздагы өзгөрмөгө кошулат . Утилиталардын ар бир тобу төмөнкүдөй көрүнөт:

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

Төмөнкүлөрдү чыгарат:

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

Менчик

Керектүү propertyачкыч ар кандай утилита үчүн коюлушу керек жана ал жарактуу CSS касиетин камтышы керек. Бул касиет түзүлгөн утилитанын эрежелер топтомунда колдонулат. Ачкыч алынып classсалынганда, ал класстын демейки аты катары да кызмат кылат. text-decorationПайдалуу программаны карап көрөлү :

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

Чыгуу:

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

баалуулуктар

Түзүлгөн класстын аталыштарында жана эрежелеринде valuesкөрсөтүлгөн маанилердин кайсынысын колдонуу керектигин аныктоо үчүн ачкычты колдонуңуз . propertyТизме же карта болушу мүмкүн (коммуналдык кызматтарда же Sass өзгөрмөсүндө коюлган).

Тизме катары, text-decorationкоммуналдык кызматтар сыяктуу :

values: none underline line-through

Карта катары, opacityкоммуналдык кызматтар сыяктуу :

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

positionБиздин утилиталарыбыздагыдай тизмени же картаны орнотуучу Sass өзгөрмөсү катары :

values: $position-values

Класс

classКомпиляцияланган CSSте колдонулган класс префиксин өзгөртүү үчүн опцияны колдонуңуз . Мисалы, төмөнкүгө өзгөртүү .opacity-*үчүн .o-*:

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

Чыгуу:

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

Эгерде class: null, ар бир баскыч үчүн класстарды жаратат values:

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

Чыгуу:

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

CSS өзгөрмө утилиталары

css-varЛогикалык параметрди коюңуз жана API кадимки эрежелердин trueордуна берилген селектор үчүн жергиликтүү CSS өзгөрмөлөрүн жаратат . Класстын аталышынан башка CSS өзгөрмө атын коюу үчүн property: valueкошумчаны кошуңуз .css-variable-name

Биздин .text-opacity-*коммуналдык кызматтарды карап көрөлү. Эгер опцияны кошсок css-variable-name, биз ыңгайлаштырылган чыгарууну алабыз.

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

Чыгуу:

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

Жергиликтүү CSS өзгөрмөлөрү

local-varsПайдалуу класстын эрежелер топтомунда жергиликтүү CSS өзгөрмөлөрүн түзө турган Sass картасын көрсөтүү үчүн параметрди колдонуңуз . Түзүлгөн CSS эрежелеринде ошол жергиликтүү CSS өзгөрмөлөрүн колдонуу үчүн кошумча жумуш талап кылынышы мүмкүн экенин эске алыңыз. Мисалы, биздин .bg-*коммуналдык кызматтарыбызды карап көрөлү:

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

Чыгуу:

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

мамлекеттер

stateПсевдокласстагы вариацияларды түзүү үчүн опцияны колдонуңуз . Мисал псевдокласстар :hoverжана :focus. Мамлекеттердин тизмеси берилгенде, ал псевдокласс үчүн класс аттары түзүлөт. Мисалы, курсордун тунуктугун өзгөртүү үчүн, кошуңуз state: hover, ошондо сиз .opacity-hover:hoverкомпиляцияланган CSS-ке ээ болосуз.

Бир нече псевдокласстар керекпи? Боштук менен бөлүнгөн мамлекеттердин тизмесин колдонуңуз: state: hover focus.

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

Чыгуу:

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

Жооптуу

Бардык токтотуу чекиттериндеresponsive жооп берүүчү утилиталарды (мисалы, .opacity-md-25) түзүү үчүн логикалык маанини кошуңуз .

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

Чыгуу:

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

Басып чыгаруу

printОпцияны иштетүү басып чыгаруу үчүн пайдалуу класстарды да@media print { ... } жаратат, алар медиа суроонун ичинде гана колдонулат .

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

Чыгуу:

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

Маанилүүлүк

API тарабынан түзүлгөн бардык утилиталар !importantкомпоненттерди жана модификациялоочу класстарды каалагандай жокко чыгарууну камсыз кылууну камтыйт. Бул жөндөөнү глобалдык $enable-important-utilitiesөзгөрмө менен которуштурууга болот (демейки боюнча true).

API колдонуу

Эми сиз API утилиттеринин кантип иштээри менен таанышкандан кийин, өзүңүздүн жеке класстарыңызды кантип кошууну жана демейки утилиталарыбызды өзгөртүүнү үйрөнүңүз.

Утилиталарды жокко чыгаруу

Ошол эле баскычты колдонуу менен учурдагы утилиталарды жокко чыгарыңыз. Мисалы, эгер сиз кошумча жооп берүүчү кошумча класстарды кааласаңыз, муну кыла аласыз:

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

Утилиталарды кошуу

$utilitiesЖаңы утилиталарды демейки картага кошууга болот map-merge. _utilities.scssБиздин талап кылынган Sass файлдары жана алгач импорттолгондугун текшериңиз , андан кийин map-mergeкошумча утилиталарыңызды кошуу үчүн колдонуңуз. Мисалы, бул жерде cursorүч мааниси бар жооп берүүчү утилитаны кантип кошуу керек.

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

Утилиталарды өзгөртүү

Демейки $utilitiesкартадагы бар утилиталарды map-getжана map-mergeфункциялары менен өзгөртүңүз. Төмөндөгү мисалда биз widthкоммуналдык кызматтарга кошумча маани кошуп жатабыз. Баштапкы тамга менен баштаңыз, map-mergeанан кайсы утилитаны өзгөрткүңүз келгенин көрсөтүңүз. Ал жерден, утилитанын параметрлерине жана баалуулуктарына жетүү жана өзгөртүү үчүн уя салынган "width"картаны алып келиңиз.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";

Жооптуу иштетүү

Учурда демейки боюнча жооп бербеген утилиталардын учурдагы топтому үчүн жооп берүүчү класстарды иштете аласыз. Мисалы, borderкласстарды жоопко тартуу үчүн:

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

.borderБул эми ар бир үзүү чекити үчүн жооп берүүчү вариацияларды жаратат .border-0. Сиздин түзүлгөн CSS төмөнкүдөй болот:

.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 { ... }
}

Утилиталардын атын өзгөртүү

v4 утилиталары жетишпей калдыбы же башка ат коюу конвенциясына көнүп калдыңызбы? API утилиталарын берилген утилитанын натыйжасын жокко чыгаруу үчүн колдонсо болот , мисалы, утилиталардын classатын eskish деп өзгөртүү үчүн :.ms-*.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";

Утилиталарды алып салуу

map-remove()Sass функциясы менен демейки утилиталардын баарын алып салыңыз .

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

Сиз ошондой эле map-merge()Sass функциясын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";

Кошуу, алып салуу, өзгөртүү

map-merge()Sass функциясы менен бир эле учурда көптөгөн утилиталарды кошуп, алып салып жана өзгөртө аласыз . Бул жерде сиз мурунку мисалдарды бир чоң картага кантип бириктире аласыз.

@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деги утилитаны алып салуу

Кээ бир четтери RTL стилин кыйындатат , мисалы, араб тилиндеги сызыктар. Ошентип, утилиталарды RTL чыгаруусунан төмөнкү rtlпараметрди коюу менен өчүрүүгө болот false:

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

Чыгуу:

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

Бул RTLCSS removeбашкаруу директивасына рахмат, RTLде эч нерсе чыгарбайт .