Utility API

Услужниот API е алатка заснована на Sass за генерирање на класи на алатки.

На оваа страница

Услужните програми за Bootstrap се генерираат со нашето API за услужни програми и може да се користат за менување или проширување на нашиот стандарден сет на класи на алатки преку Sass. Нашето корисно API се заснова на серија Sass мапи и функции за генерирање семејства на класи со различни опции. Ако не сте запознаени со мапите на Sass, прочитајте ги официјалните документи на Sass за да започнете.

Картата $utilitiesги содржи сите наши алатки и подоцна се спојува со вашата приспособена $utilitiesкарта, доколку е присутна. Мапата на комуналните услуги содржи клучена листа на групи на алатки кои ги прифаќаат следните опции:

Опција	Тип	Опис
`property`	Задолжително	Име на имотот, ова може да биде низа или низа жици (на пр. хоризонтални облоги или маргини).
`values`	Задолжително	Список на вредности или мапа ако не сакате името на класата да биде исто со вредноста. Ако `null`се користи како клуч за мапа, тој не е компајлиран.
`class`	Изборен	Променлива за името на класата ако не сакате да биде исто како својството. Во случај да не го дадете `class`клучот, а `property`клучот е низа низи, името на класата ќе биде првиот елемент на `property`низата.
`state`	Изборен	Список на варијанти на псевдо-класа како `:hover`или `:focus`за генерирање за алатката. Нема стандардна вредност.
`responsive`	Изборен	Булова покажува дали треба да се генерираат одговорни класи. `false`стандардно.
`rfs`	Изборен	Булова за да се овозможи рескалирање на течноста. Погледнете ја страницата RFS за да дознаете како функционира ова. `false`стандардно.
`print`	Изборен	Булова покажува дали треба да се генерираат класи за печатење. `false`стандардно.
`rtl`	Изборен	Булова покажува дали алатката треба да се чува во RTL. `true`стандардно.

Објаснето 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; }

Прилагоден префикс за класа

Користете ја classопцијата за промена на префиксот на класата што се користи во компајлираниот CSS:

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

Излез:

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

држави

Користете ја 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; }
}

Менување на комуналните услуги

Отфрлете ги постоечките комунални услуги со користење на истиот клуч. На пример, ако сакате дополнителни респонзивни услужни класи за прелевање, можете да го направите ова:

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

Комунални услуги за печатење

Овозможувањето на 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мапа со map-merge. Проверете дали нашите потребни датотеки Sass _utilities.scssсе прво увезени, а потоа користете го за map-mergeда ги додадете вашите дополнителни алатки. На пример, еве како да додадете одговорна cursorалатка со три вредности.

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

Изменете ги комуналните услуги

Изменете ги постоечките алатки во стандардната $utilitiesмапа со map-getи map-mergeфункции. Во примерот подолу, додаваме дополнителна вредност на widthкомуналните услуги. Започнете со почетна map-mergeи потоа наведете која алатка сакате да ја измените. Оттаму, преземете ја вгнездената "width"карта со 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%),
        ),
      ),
    ),
  )
);

Овозможи одговор

Можете да овозможите одговорни класи за постоечки сет на услужни програми кои во моментов не одговараат стандардно. На пример, за да ги направите borderкласите одговорни:

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

Ова сега ќе генерира одговорни варијации на .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 комунални услуги или се користи за друга конвенција за именување? Utilities API може да се користи за да се отфрли резултатот classод дадена алатка - на пример, да се преименуваат .ms-*услужните програми во стари .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 ),
    ),
  )
);

Отстранете ги комуналните услуги

Отстранете која било од стандардните алатки со поставување на клучот за групата на null. На пример, за да ги отстраните сите наши widthкомунални услуги, креирајте $utilities map-mergeи додадете "width": nullвнатре.

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

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

Отстранете ја алатката во 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 */

Ова не емитува ништо во RTL, благодарение на контролната директива RTLCSSremove .