Утилити АПИ

Услужни АПИ је алатка заснована на Сасс-у за генерисање услужних класа.

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

Боотстрап услужни програми се генеришу помоћу нашег услужног АПИ-ја и могу се користити за измену или проширење нашег подразумеваног скупа услужних класа преко Сасс-а. Наш услужни АПИ је заснован на серији Сасс мапа и функција за генерисање породица класа са различитим опцијама. Ако нисте упознати са Сасс мапама, прочитајте званичне Сасс документе да бисте започели.

Мапа $utilitiesсадржи све наше услужне програме и касније се спаја са вашом прилагођеном $utilitiesмапом, ако постоји. Мапа услужних програма садржи кључну листу група услужних програма које прихватају следеће опције:

Опција	Тип	Задана вриједност	Опис
`property`	Потребан	–	Име својства, ово може бити стринг или низ стрингова (нпр. хоризонтални допуни или маргине).
`values`	Потребан	–	Листа вредности или мапа ако не желите да име класе буде исто као и вредност. Ако `null`се користи као кључ мапе, `class`не ставља се испред имена класе.
`class`	Опционо	нула	Име генерисане класе. Ако није наведен и `property`представља низ стрингова, `class`подразумевано ће бити први елемент `property`низа. Ако није наведен и `property`представља стринг, `values`кључеви се користе за `class`имена.
`css-var`	Опционо	`false`	Боолеан за генерисање ЦСС променљивих уместо ЦСС правила.
`css-variable-name`	Опционо	нула	Прилагођено име без префикса за ЦСС променљиву унутар скупа правила.
`local-vars`	Опционо	нула	Мапа локалних ЦСС променљивих за генерисање поред ЦСС правила.
`state`	Опционо	нула	Листа варијанти псеудокласа (нпр. `:hover`или `:focus`) за генерисање.
`responsive`	Опционо	`false`	Боолеан који показује да ли треба генерисати одговарајуће класе.
`rfs`	Опционо	`false`	Боолеан за омогућавање течности поновног скалирања помоћу РФС-а .
`print`	Опционо	`false`	Боолеан означава да ли треба генерисати класе за штампање.
`rtl`	Опционо	`true`	Боолеан који показује да ли услужни програм треба да се задржи у РТЛ-у.

АПИ објаснио

Све услужне променљиве се додају $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кључ мора бити подешен за било који услужни програм и мора садржати важеће ЦСС својство. Ово својство се користи у скупу правила генерисаног услужног програма. Када је 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треба да се користе у генерисаним именима класа и правилима. Може бити листа или мапа (подешена у услужним програмима или у Сасс променљивој).

Као листа, као са text-decorationуслужним програмима :

values: none underline line-through

Као мапа, као са opacityуслужним програмима :

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

Као Сасс променљива која поставља листу или мапу, као у нашим positionуслужним програмима :

values: $position-values

Класа

Користите classопцију да промените префикс класе који се користи у преведеном ЦСС-у. На пример, да промените са .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-varлогичку опцију на trueи АПИ ће генерисати локалне ЦСС променљиве за дати селектор уместо уобичајених 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; }

Локалне ЦСС променљиве

Користите local-varsопцију да наведете Сасс мапу која ће генерисати локалне ЦСС променљиве унутар скупа правила услужне класе. Имајте на уму да ће можда бити потребан додатни рад да се те локалне ЦСС варијабле користе у генерисаним ЦСС правилима. На пример, размотрите наше .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у свој преведени ЦСС.

Требате више псеудо-класа? Користите листу стања раздвојену размаком: 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; }
}

Значај

Сви услужни програми које генерише АПИ укључују !importantкако би се осигурало да они замењују компоненте и класе модификатора како је предвиђено. Ову поставку можете да промените глобално помоћу $enable-important-utilitiesпроменљиве (подразумевано на true).

Коришћење АПИ-ја

Сада када сте упознати са начином на који АПИ услужних програма функционише, научите како да додате сопствене прилагођене класе и измените наше подразумеване услужне програме.

Заобиђите услужне програме

Заобиђите постојеће услужне програме користећи исти кључ. На пример, ако желите додатне одговарајуће класе услужних програма за преливање, можете да урадите ово:

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

Додајте услужне програме

Нови услужни програми се могу додати на подразумевану $utilitiesмапу помоћу map-merge. Уверите се да _utilities.scssсу наше потребне Сасс датотеке и прво увезене, а затим користите 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за сваку тачку прекида. Ваш генерисани ЦСС ће изгледати овако:

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

Преименујте услужне програме

Недостају в4 услужни програми или сте навикли на другу конвенцију именовања? АПИ за услужне програме може да се користи да се замени резултат classдатог услужног програма—на пример, да се преименују .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()функцијом Сасс .

@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()Сасс и подесити групни кључ на 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()Сасс . Ево како можете да комбинујете претходне примере у једну већу мапу.

@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опције на 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 */

Ово не даје ништа у РТЛ-у, захваљујући РТЛЦСС removeконтролној директиви .