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 утилиталары жоқ па, әлде басқа атау конвенциясына қолдандыңыз ба? API утилиталарын classберілген қызметтік бағдарламаның нәтижесін қайта анықтау үшін пайдалануға болады, мысалы, .ms-*утилиталардың атын oldish деп өзгерту үшін .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утилиталарымызды жою үшін a $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 ішінде ештеңе шығармайды .