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	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, ew nayê berhev kirin.
`class`	Bixwe	Guherbar ji bo navê polê heke hûn nexwazin ku ew wekî xwedê be. Ger hûn `class`mifteyê peyda nekin û `property`mifteyek rêzek rêzan be, navê polê dê bibe hêmana yekem a `property`rêzê.
`state`	Bixwe	Lîsteya guhertoyên pseudo-class mîna `:hover`an `:focus`ku ji bo kargêriyê çêbikin. No nirxa xwerû.
`responsive`	Bixwe	Boolean destnîşan dike ka dersên bersivdar hewce ne ku werin çêkirin. `false`bi xweber.
`rfs`	Bixwe	Boolean ji bo vejandina şikilê çalak bike. Li rûpela RFS binihêrin da ku hûn fêr bibin ka ev çawa dixebite. `false`bi xweber.
`print`	Bixwe	Boolean destnîşan dike ka dersên çapkirinê hewce ne ku bêne çêkirin. `false`bi xweber.
`rtl`	Bixwe	Boolean destnîşan dike ka pêdivî ye ku karûbar di RTL de bimîne. `true`bi xweber.

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

Pêşgira çîna Custom

Vebijarkê bikar bînin classda ku pêşgira pola ku di CSS-ya berhevkirî de hatî bikar anîn biguhezînin:

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

Karûabr:

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

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

Karûbarên bersivdar

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

Guhertina utilities

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ûbarên çapkirinê

Ç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û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/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

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/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

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/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

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/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

Karûbarên jêbirin

Bi danîna mifteya komê li ser yek ji karûbarên xwerû rakin null. Mînakî, ji bo rakirina hemî widthkarûbarên me, a biafirînin $utilities map-mergeû tê de lê zêde "width": nullbikin.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

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 .