Utility API

API-ya karûbar amûrek Sass-ê ye ku dersên kargêriyê çêdike.

Li ser vê rûpelê

Karûbarên Bootstrap bi API-ya meya bikêrhatî têne çêkirin û dikarin werin bikar anîn da ku bi navgîniya Sass koma meya xwerû ya dersên kargêriyê biguhezînin an dirêj bikin. API-ya meya karûbar li ser rêzek nexşe û fonksiyonên Sass-ê ye ku ji bo afirandina malbatên çînan bi vebijarkên cihêreng ve girêdayî ye. Heke hûn bi nexşeyên Sass nizanin, li ser belgeyên fermî yên Sass bixwînin ku dest pê bikin.

Nexşe $utilitieshemî karûbarên me dihewîne û heke hebe paşê bi $utilitiesnexşeya weya xwerû re tê yek kirin. Nexşeya karûbar navnîşek kilîtkirî ya komên bikêr heye ku vebijarkên jêrîn qebûl dikin:

Dibe	Awa	Nirxa standard	Terîf
`property`	Required	–	Navê milkê, ev dikare bibe xêzek an rêzek rêzan (mînak, pêlên horizontî an marjînal).
`values`	Required	–	Lîsteya nirxan, an nexşeyek heke hûn nexwazin ku navê polê wekî nirxê be. Ger `null`wekî mifteya nexşeyê were bikar anîn, `class`ji navê polê re nayê pêşandan.
`class`	Bixwe	null	Navê çîna çêkirî. Heke neyê peyda kirin û `property`rêzek rêzan be, `class`dê hêmana yekem a `property`rêzê vebir bike. Heke neyê peyda kirin û `property`rêzek be, `values`ji bo `class`navan kilît têne bikar anîn.
`css-var`	Bixwe	`false`	Boolean ku li şûna qaîdeyên CSS-ê guherbarên CSS-ê çêbike.
`css-variable-name`	Bixwe	null	Navê xwerû yê ne-pêşgir ji bo guhêrbara CSS di hundurê rêziknameyê de.
`local-vars`	Bixwe	null	Nexşeya guhêrbarên CSS yên herêmî ku ji bilî qaîdeyên CSS-ê têne çêkirin.
`state`	Bixwe	null	Lîsteya guhertoyên pseudo-class (mînak, `:hover`an `:focus`) ku têne çêkirin.
`responsive`	Bixwe	`false`	Boolean destnîşan dike ka dersên bersivdar divê bêne çêkirin.
`rfs`	Bixwe	`false`	Boolean ku bi RFS -ê ji nû ve pîvandina şilavê çalak bike .
`print`	Bixwe	`false`	Boolean destnîşan dike ka dersên çapkirinê hewce ne ku bêne çêkirin.
`rtl`	Bixwe	`true`	Boolean destnîşan dike ka pêdivî ye ku karûbar di RTL de bimîne.

API diyar kir

$utilitiesHemî guhêrbarên bikêrhatî li guhêrbara di nav şêwaza me de têne zêdekirin _utilities.scss. Her grûpek karûbar bi vî rengî xuya dike:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Ku encamên jêrîn derdixe:

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

Mal

Pêdivî ye ku propertymifteya pêwîst ji bo her karûbarek were danîn, û divê ew taybetmendiyek CSS ya derbasdar hebe. Ev taybetmendî di qaîdeyên kargêriya hilberandî de tê bikar anîn. Dema ku classkilît tê derxistin, ew di heman demê de wekî navê pola xwerû jî kar dike. Vebijêrk bifikirin text-decoration:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

Karûabr:

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

Nirxên

Bişkojkê bikar bînin valuesda ku diyar bikin ka kîjan nirxên diyarkirî propertydivê di nav û qaîdeyên pola çêkirî de werin bikar anîn. Dikare navnîşek an nexşeyek be (di nav karûbaran de an di guhêrbarek Sass de hatî danîn).

Wekî navnîşek, mîna bi text-decorationkarûbaran :

values: none underline line-through

Wekî nexşeyek, mîna bi opacitykarûbaran :

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

Wekî guhêrbarek Sass-ê ku navnîş an nexşeyê destnîşan dike, wekî di positionkarûbarên me de :

values: $position-values

Sinif

Vebijarkê bikar bînin classda ku pêşgira pola ku di CSS-ya berhevkirî de hatî bikar anîn biguhezînin. Ji bo nimûne, ji bo guhertina ji .opacity-*bo .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Karûabr:

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

Ger class: null, ji bo her yek ji bişkojkan dersan valuesçêdike:

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

Karûabr:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

Karûbarên guherbar ên CSS

Vebijarka css-varboolean saz bikin trueû API dê li şûna rêgezên asayî guhêrbarên CSS-ê yên herêmî ji bo hilbijêra property: valuediyarkirî biafirîne. Vebijarkek zêde css-variable-namebikin ku ji navê polê navekî guhêrbar CSS-ê cûda saz bikin.

Karûbarên me bifikirin .text-opacity-*. Ger em css-variable-namevebijarkê lê zêde bikin, em ê hilberek xwerû bistînin.

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

Karûabr:

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

Guherbarên CSS yên herêmî

Vebijarkê bikar local-varsbînin ku nexşeyek Sass destnîşan bikin ku dê guhêrbarên CSS-ê yên herêmî di nav rêzika çîna kargêriyê de çêbike. Ji kerema xwe not bikin ku dibe ku ew hewce bike ku xebatek din hewce bike da ku ew guhêrbarên CSS-ê yên herêmî di qaîdeyên CSS-ê yên çêkirî de bikar bînin. Mînakî, .bg-*karûbarên me bifikirin:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

Karûabr:

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

Dewletên

Vebijêrk bikar bînin ku stateji bo guhertinên pseudo-class çêbikin. Nimûne pseudo-class in :hoverû :focus. Dema ku navnîşek dewletan tê peyda kirin, navên sinifê ji bo wê pseudo-polê têne afirandin. Mînakî, ji bo guheztina nezelaliyê li ser hoverê, lê zêde bike state: hoverû hûn ê .opacity-hover:hovertêkevin CSS-ya xweya berhevkirî.

Ji gelek pseudo-dersan re hewce ne? Bikar bînin lîsteyek cihê-veqetandî yên dewletên state: hover focus:.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Karûabr:

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

Pêrakirin

Boolean zêde bikin da ku karûbarên bersivdar (mînak, ) li hemî xalên responsiveveqetandinê biafirînin ..opacity-md-25

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Karûabr:

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

Çap

Çalakkirina printvebijarkê dê di heman demê de dersên karûbar ji bo çapkirinê jî çêbike, ku tenê di nav pirsa @media print { ... }medyayê de têne sepandin.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Karûabr:

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

Giringî

Hemî karûbarên ku ji hêla API-ê ve têne hilberandin di nav !importantxwe de bicîh dikin ku ew li gorî ku hatî armanc kirin beşan û çînên guhêrbar derbas dikin. Hûn dikarin vê mîhengê li seranserê cîhanê bi guhêrbarê biguhezînin $enable-important-utilities(wek guhêrbar true).

Bikaranîna API-ê

Naha ku hûn bi karûbarên API-ê çawa dizanin, fêr bibin ka meriv çawa dersên xwerû yên xwerû lê zêde bike û karûbarên meya xwerû biguhezîne.

Karûbarên serûber bikin

Karûbarên heyî bi karanîna heman mifteyê hilweşînin. Mînakî, heke hûn dersên karûbarên zêde yên bersivdar dixwazin, hûn dikarin vê yekê bikin:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Karûbaran zêde bikin

Karûbarên nû dikarin $utilitiesbi a map-merge. Piştrast bikin ku pelên me yên Sass-ê yên hewce ne û _utilities.scsspêşî têne import kirin, dûv re wê bikar bînin da map-mergeku karûbarên xweyên din zêde bikin. cursorMînakî, li vir e ku meriv çawa bi sê nirxan karûbarek bersivdar lê zêde bike .

@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";

Karûbaran biguherînin

Karûbarên heyî yên di $utilitiesnexşeya xwerû de bi map-getû map-mergefonksiyonan biguhezînin. Di mînaka jêrîn de, em nirxek zêde li ser widthkarûbaran zêde dikin. Bi destpêkek dest pê map-mergebikin û dûv re diyar bikin ka hûn dixwazin kîjan amûreyê biguherînin. Ji wir, "width"nexşeya hêlînê bi xwe re bistînin map-getda ku bigihîjin vebijark û nirxên kargêriyê û biguherînin.

@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";

Bersiv çalak bike

Hûn dikarin dersên bersivdar ji bo komek karûbarên heyî yên ku niha ji hêla xwerû ve ne bersivdar in çalak bikin. Mînakî, ji bo ku borderdersên bersivdar bikin:

@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";

Ev ê naha guhertoyên bersivdar .borderû .border-0ji bo her xala veqetandinê çêbike. CSS-ya weya çêkirî dê bi vî rengî xuya bike:

.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 { ... }
}

Navê karûbaran biguherînin

Karûbarên v4 winda ne, an ji bo peymanek navekî din tê bikar anîn? Karûbarên API-yê dikarin werin bikar anîn da ku encamên amûrek diyarkirî ji holê rakin class- mînakî, ji bo veguherandina .ms-*navên amûran bi kevn .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";

Karûbarên jêbirin

map-remove()Bi fonksiyona Sass re yek ji karûbarên xwerû rakin .

@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";

Her weha hûn dikarin map-merge()fonksiyona Sass bikar bînin û mifteya komê saz bikin nullda ku karûbar jêbirin.

@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";

Zêdekirin, rakirin, guherandin

map-merge()Hûn dikarin bi fonksiyona Sass bi yekcarî gelek amûran lê zêde bikin, jê bikin û biguherînin . Li vir e ku hûn çawa dikarin mînakên berê di nexşeyek mezin de tevlihev bikin.

@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";

Di RTL de karûbar jêbirin

Hin haletên qerax şêwaza RTL-ê dijwar dikin, wek xêzkirina di erebî de. rtlJi ber vê yekê karûbar dikarin bi danîna vebijarkê ji RTL-ê werin avêtin false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Karûabr:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Bi saya rêbernameya kontrolê ya RTLCSSremove , ev di RTL de tiştek dernakeve .