Utility API

API қызметтік бағдарламасы утилита кластарын жасау үшін Sass негізіндегі құрал болып табылады.

Бұл бетте

Bootstrap утилиталары API утилитасымен жасалады және Sass арқылы әдепкі утилиталар жиынтығын өзгерту немесе кеңейту үшін пайдаланылуы мүмкін. Біздің API утилитасы әртүрлі опциялары бар сыныптар отбасыларын құруға арналған Sass карталары мен функцияларына негізделген. Sass карталарымен таныс болмасаңыз, бастау үшін ресми Sass құжаттарын оқыңыз .

Картада $utilitiesбіздің барлық утилиталарымыз бар және егер бар болса, кейінірек реттелетін $utilitiesкартаңызбен біріктіріледі. Қызметтік карта келесі опцияларды қабылдайтын утилиталар топтарының түйінді тізімін қамтиды:

Опция	Түр	Әдепкі мән	Сипаттама
`property`	Міндетті	–	Сипаттың атауы, бұл жол немесе жолдар жиымы болуы мүмкін (мысалы, көлденең толтырғыштар немесе шеттер).
`values`	Міндетті	–	Мәндер тізімі немесе сынып атауы мәнмен бірдей болуын қаламасаңыз, карта. Егер `null`карта кілті ретінде пайдаланылса, `class`сынып атауының алдына қойылмайды.
`class`	Қосымша	null	Жасалған сыныптың аты. Егер берілмесе және `property`жолдар жиымы болса, алаптың `class`бірінші элементіне әдепкі болады `property`. Егер берілмесе және `property`жол болса, `values`пернелер `class`атаулар үшін пайдаланылады.
`css-var`	Қосымша	`false`	CSS ережелерінің орнына CSS айнымалы мәндерін жасау үшін логикалық.
`css-variable-name`	Қосымша	null	Ережелер жинағындағы CSS айнымалысы үшін префиксі жоқ теңшелетін атау.
`local-vars`	Қосымша	null	CSS ережелеріне қосымша жасау үшін жергілікті CSS айнымалыларының картасы.
`state`	Қосымша	null	Жасалатын псевдокласс нұсқаларының тізімі (мысалы, `:hover`немесе `:focus`).
`responsive`	Қосымша	`false`	Жауапты сыныптарды жасау керек пе, жоқ па көрсететін логикалық.
`rfs`	Қосымша	`false`	RFS көмегімен сұйықтықты масштабтауды қосу үшін логикалық .
`print`	Қосымша	`false`	Басып шығару сыныптарын жасау қажеттігін көрсететін логикалық.
`rtl`	Қосымша	`true`	Утилитаны RTL-де сақтау керектігін көрсететін логикалық.

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; }

Меншік

Қажетті propertyкілт кез келген қызметтік бағдарлама үшін орнатылуы керек және ол жарамды CSS сипатын қамтуы керек. Бұл сипат жасалған қызметтік бағдарламаның ережелер жинағында пайдаланылады. 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Тізім немесе карта болуы мүмкін (утилитада немесе Sass айнымалысында орнатылған).

Тізім ретінде, text-decorationутилиталар сияқты :

values: none underline line-through

Карта ретінде, opacityутилиталар сияқты :

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

positionБіздің утилиталарымыздағыдай тізімді немесе картаны орнататын Sass айнымалысы ретінде :

values: $position-values

Сынып

classҚұрастырылған CSS-те қолданылатын класс префиксін өзгерту үшін опцияны пайдаланыңыз . Мысалы, келесіден өзгерту .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 айнымалы утилиталары

css-varЛогикалық опцияны орнатыңыз және API әдеттегі ережелердің trueорнына берілген селектор үшін жергілікті CSS айнымалы мәндерін жасайды . Сынып атауынан басқа CSS айнымалы атауын орнату үшін қосымшаны 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; }

Жергілікті CSS айнымалылары

local-varsҚызметтік сыныптың ережелер жинағында жергілікті CSS айнымалы мәндерін жасайтын Sass картасын көрсету үшін опцияны пайдаланыңыз . Жасалған CSS ережелеріндегі жергілікті CSS айнымалы мәндерін тұтыну үшін қосымша жұмыс қажет болуы мүмкін екенін ескеріңіз. Мысалы, біздің .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құрастырылған 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; }
}

Басып шығару

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: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Утилиталарды қосыңыз

$utilitiesЖаңа утилиталарды әдепкі картаға көмегімен қосуға болады map-merge. Алдымен біздің қажетті Sass файлдары импортталғанына көз жеткізіңіз _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әрбір тоқтау нүктесі үшін жауап беретін нұсқаларды жасайды. Жасалған 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/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()Sass функциясымен әдепкі утилиталардың кез келгенін жойыңыз .

@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()Sass функциясын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()Sass функциясы арқылы бірден көптеген утилиталарды қосуға, жоюға және өзгертуге болады . Міне, алдыңғы мысалдарды бір үлкен картаға біріктіру жолы.

@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 ішіндегі қызметтік бағдарламаны жойыңыз

Кейбір шеткі жағдайлар 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 ішінде ештеңе шығармайды .