Utility API

Utility API ke sesebelisoa se thehiloeng ho Sass ho hlahisa lihlopha tsa lisebelisoa.

Leqepheng lena

Lisebelisoa tsa Bootstrap li hlahisoa ka lisebelisoa tsa rona tsa API 'me li ka sebelisoa ho fetola kapa ho atolosa lihlopha tsa rona tsa kamehla tsa lisebelisoa ka Sass. API ea rona ea ts'ebeliso e ipapisitse le letoto la limmapa tsa Sass le mesebetsi ea ho hlahisa malapa a litlelase ka likhetho tse fapaneng. Haeba o sa tloaelane le limmapa tsa Sass, bala ho litokomane tsa semmuso tsa Sass ho qala.

' $utilitiesMapa o na le lisebelisoa tsohle tsa rona, 'me hamorao o kopantsoe le' mapa oa hau $utilities, haeba o teng. 'Mapa oa ts'ebeliso o na le lenane la linotlolo la lihlopha tsa lisebelisoa tse amohelang likhetho tse latelang:

Khetho	Mofuta	Tlhaloso
`property`	Ho hlokahala	Lebitso la thepa, ena e ka ba khoele kapa mefuta e mengata ea likhoele (mohlala, li-paddings tse tšekaletseng kapa mathoko).
`values`	Ho hlokahala	Lenane la boleng, kapa 'mapa haeba u sa batle hore lebitso la sehlopha le tšoane le boleng. Haeba `null`e sebelisoa e le senotlolo sa 'mapa, ha e ea hlophisoa.
`class`	Taba ea boikhethelo	E feto-fetoha bakeng sa lebitso la sehlopha haeba u sa batle hore le tšoane le thepa. Haeba u sa fane ka `class`senotlolo mme `property`senotlolo ke letoto la likhoele, lebitso la sehlopha e tla ba ntho ea pele ea `property`sehlopha.
`state`	Taba ea boikhethelo	Lethathamo la mefuta ea pseudo-class e ratang `:hover`kapa `:focus`e ka hlahisoang bakeng sa ts'ebeliso. Ha ho boleng ba kamehla.
`responsive`	Taba ea boikhethelo	Boolean e bonts'a hore na lihlopha tse arabelang li hloka ho hlahisoa. `false`ka ho sa feleng.
`rfs`	Taba ea boikhethelo	Boolean ho etsa hore mokelikeli o fokotsehe. Sheba leqephe la RFS ho fumana hore na sena se sebetsa joang. `false`ka ho sa feleng.
`print`	Taba ea boikhethelo	Boolean e bonts'a hore na litlelase tsa khatiso li hloka ho hlahisoa. `false`ka ho sa feleng.
`rtl`	Taba ea boikhethelo	Boolean e bonts'a hore na ts'ebeliso e tlameha ho bolokoa ho RTL. `true`ka ho sa feleng.

API e hlalositse

Mefuta eohle ea lisebelisoa e kenyellelitsoe ho $utilitiesfeto-fetoha kahare ho leqephe la rona la _utilities.scsssetaele. Sehlopha se seng le se seng sa lisebelisoa se shebahala tjena:

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

E hlahisang tse latelang:

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

Sehlongoapele sa sehlopha sa tloaelo

Sebelisa classkhetho ho fetola sehlomathiso sa sehlopha se sebelisitsoeng ho CSS e hlophisitsoeng:

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

Sephetho:

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

Linaha

Sebelisa statekhetho ho hlahisa liphapang tsa pseudo-class. Mehlala ea pseudo-class ke :hoverle :focus. Ha ho fanoa ka lethathamo la linaha, mabitso a litlelase a etsoa bakeng sa sehlopha seo sa pseudo. Mohlala, ho fetola opacity ho hover, eketsa state: hover'me u tla kena .opacity-hover:hoverho CSS ea hau e hlophisitsoeng.

U hloka litlelase tse ngata tsa pseudo? Sebelisa lethathamo la libaka tse arohaneng tsa libaka: state: hover focus.

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

Sephetho:

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

Lisebelisoa tse arabelang

Eketsa responsiveboolean ho hlahisa lisebelisoa tse arabelang (mohlala, .opacity-md-25) libakeng tsohle tsa khefu .

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

Sephetho:

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

Ho fetola lisebelisoa

Tlosa lisebelisoa tse teng ka ho sebelisa senotlolo se le seng. Mohlala, haeba u batla litlelase tse ling tse arabelang tse fanang ka ts'ebeliso e ngata, u ka etsa sena:

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

Lisebelisoa tsa khatiso

Ho nolofalletsa printkhetho ho tla hlahisa litlelase tsa lisebelisoa bakeng sa khatiso, tse sebelisoang feela ka har'a @media print { ... }potso ea media.

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

Sephetho:

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

Bohlokoa

Lisebelisoa tsohle tse hlahisoang ke API li kenyelletsa !importantho netefatsa hore li feta likarolo le lihlopha tsa ho fetola kamoo li reriloeng kateng. U ka fetola tlhophiso ena lefats'eng ka bophara ka ho $enable-important-utilitiesfeto-fetoha (li-defaults ho true).

Ho sebelisa API

Kaha joale u se u tseba hore na API ea lisebelisoa e sebetsa joang, ithute ho eketsa litlelase tsa hau tsa tloaelo le ho fetola lisebelisoa tsa rona tsa kamehla.

Kenya lisebelisoa

Lisebelisoa tse ncha li ka eketsoa $utilities'mapeng oa kamehla ka map-merge. Etsa bonnete ba hore lifaele tsa rona tse hlokahalang tsa Sass 'me _utilities.scssli kentsoe kantle ho naha pele, ebe u sebelisa map-mergeho eketsa lisebelisoa tsa hau tse ling. Mohlala, mona ke mokhoa oa ho kenya cursorts'ebeliso e arabelang ka litekanyetso tse tharo.

@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,
    )
  )
);

Fetola lisebelisoa

Fetola lits'ebeletso tse teng $utilities'mapeng oa kamehla ka map-getle map-mergemesebetsi. Mohlaleng o ka tlase, re eketsa boleng ho widthlisebelisoa. Qala ka ho qala map-mergeebe u bolela hore na u batla ho fetola lisebelisoa life. Ho tloha moo, lata "width"'mapa o behiloeng sehlaheng map-getho fihlella le ho fetola likhetho le boleng ba lisebelisoa.

@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%),
        ),
      ),
    ),
  )
);

E nolofalletsa ho arabela

U ka lumella litlelase tse arabelang bakeng sa sehlopha se seng se ntse se le teng sa lisebelisuoa tse sa sebetseng ka mokhoa oa kamehla. Ka mohlala, ho etsa hore borderlihlopha li arabele:

@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 ),
    ),
  )
);

Hona joale sena se tla hlahisa liphapang tse arabelang .borderle .border-0bakeng sa khefu ka 'ngoe. CSS ea hau e hlahisitsoeng e tla shebahala tjena:

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

Reha lisebelisoa bocha

Lisebelisuoa tse sieo tsa v4, kapa li tloaetse kopano e 'ngoe ea mabitso? Lisebelisoa tsa API li ka sebelisoa ho hlakola sephetho classsa ts'ebeliso e fanoeng-mohlala, ho reha .ms-*lits'ebeletso ho 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 ),
    ),
  )
);

Tlosa lisebelisoa

Tlosa lisebelisoa life kapa life tsa kamehla ka ho seta konopo ea sehlopha ho null. Mohlala, ho tlosa widthlits'ebeletso tsohle tsa rona, theha $utilities map-merge'me u kenye "width": nullkahare.

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

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

Tlosa lisebelisoa ho RTL

Maqhubu a mang a etsa hore setaele sa RTL se be thata , joalo ka likheo tsa mela ka Searabia. Kahoo lisebelisoa li ka theoleloa ho tsoa ho RTL ka ho beha rtlkhetho ho false:

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

Sephetho:

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

Sena ha se hlahise letho ho RTL, ka lebaka la taelo ea taolo ea RTLCSSremove .