Утилити АПИ

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

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

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

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

Опција	Тип	Опис
`property`	Потребан	Име својства, ово може бити стринг или низ стрингова (нпр. хоризонтални допуни или маргине).
`values`	Потребан	Листа вредности или мапа ако не желите да име класе буде исто као и вредност. Ако `null`се користи као кључ мапе, не компајлира се.
`class`	Опционо	Променљива за име класе ако не желите да буде исто као својство. У случају да не наведете `class`кључ, а `property`кључ је низ стрингова, име класе ће бити први елемент `property`низа.
`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; }

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

Користите classопцију да промените префикс класе који се користи у преведеном ЦСС-у:

$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у свој преведени ЦСС.

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

Значај

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

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

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

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

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

.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/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опције на 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контролној директиви .