Utility API

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

Бул бетте

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

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

Опция	Type	Description
`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. _utilities.scssБиздин талап кылынган Sass файлдары жана алгач импорттолгондугун текшериңиз , андан кийин 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 утилиталары жетишпей калдыбы же башка ат коюу конвенциясына көнүп калдыңызбы? API утилиталарын берилген утилитанын натыйжасын жокко чыгаруу үчүн колдонсо болот , мисалы, утилиталардын classатын eskish деп өзгөртүү үчүн :.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 */

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