API Utility

API-и утилита як абзори ба Sass асосёфта барои тавлиди синфҳои коммуналӣ мебошад.

Дар ин саҳифа

Утилитҳои Bootstrap бо API утилитаи мо тавлид мешаванд ва онҳоро барои тағир додан ё васеъ кардани маҷмӯи пешфарзии синфҳои утилитаҳои мо тавассути Sass истифода бурдан мумкин аст. API-и хидматрасонии мо ба як қатор харитаҳои Sass ва функсияҳо барои тавлиди оилаҳои синфҳо бо имконоти гуногун асос ёфтааст. Агар шумо бо харитаҳои Sass шинос набошед, барои оғоз кардани ҳуҷҷатҳои расмии Sass мутолиа кунед .

Харита $utilitiesдорои тамоми хидматҳои мо мебошад ва баъдтар бо $utilitiesхаритаи фармоишии шумо, агар мавҷуд бошад, якҷоя карда мешавад. Харитаи хидматрасонӣ рӯйхати калидии гурӯҳҳои коммуналиро дар бар мегирад, ки имконоти зеринро қабул мекунанд:

Варианти	Навъи	Арзиши пешфарз	Тавсифи
`property`	Талаб карда мешавад	–	Номи амвол, ин метавонад сатр ё массиви сатр бошад (масалан, бандҳои уфуқӣ ё маржа).
`values`	Талаб карда мешавад	–	Рӯйхати арзишҳо ё харита, агар шумо нахоҳед, ки номи синф бо арзиш якхела бошад. Агар `null`ҳамчун калиди харита истифода шавад, он тартиб дода намешавад.
`class`	Ихтиёрӣ	нул	Номи синфи тавлидшуда. Агар таъмин нашуда бошад ва `property`массиви сатр бошад, `class`пешфарз ба унсури якуми массив муқаррар карда `property`мешавад.
`css-var`	Ихтиёрӣ	`false`	Мантиқӣ барои тавлиди тағирёбандаҳои CSS ба ҷои қоидаҳои CSS.
`local-vars`	Ихтиёрӣ	нул	Харитаи тағирёбандаҳои маҳаллии CSS барои тавлиди илова ба қоидаҳои CSS.
`state`	Ихтиёрӣ	нул	Рӯйхати вариантҳои псевдосинфи (масалан, `: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,
)

Ҳамчун як тағирёбандаи Sass, ки рӯйхат ё харитаро муқаррар мекунад, ба монанди positionхидматҳои мо :

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

Утилитҳои тағирёбандаи CSS

Опсияи css-varлогикиро ба танзим гузоред ва API ба ҷои қоидаҳои trueмуқаррарӣ тағирёбандаҳои маҳаллии CSS-ро барои селектори додашуда тавлид мекунад . Хидматҳои property: valueморо ба назар гиред :.text-opacity-*

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

Натиҷа:

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }

Тағйирёбандаҳои маҳаллии CSS

local-varsИмкониятро барои муайян кардани харитаи Sass истифода баред , ки тағирёбандаҳои маҳаллии CSS-ро дар маҷмӯи қоидаҳои синфи хидматрасон тавлид кунад. Лутфан қайд кунед, ки он метавонад кори иловагиро барои истеъмоли он тағирёбандаҳои маҳаллии 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/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хидматҳои мо, эҷод кунед ва дар дохили он $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 */

Ба шарофати директиваи назорати RTLCSSremove , ин дар RTL чизе намедиҳад .