Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
in English

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 Boleng ba kamehla 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 nulle sebelisoa e le senotlolo sa 'mapa, ha e ea hlophisoa.
class Taba ea boikhethelo lefeela Lebitso la sehlopha se hlahisitsoeng. Haeba e sa fanoe 'me propertye le mefuta e mengata ea likhoele, classe tla lula e le karolo ea pele ea propertysehlopha.
css-var Taba ea boikhethelo false Boolean ho hlahisa mefuta-futa ea CSS sebakeng sa melao ea CSS.
local-vars Taba ea boikhethelo lefeela 'Mapa oa mefuta-futa ea CSS ea lehae ho hlahisa ho phaella ho melao ea CSS.
state Taba ea boikhethelo lefeela Lethathamo la liphapang tsa pseudo-class (mohlala, :hoverkapa :focus) ho hlahisa.
responsive Taba ea boikhethelo false Boolean e bonts'a hore na lihlopha tse arabelang li lokela ho hlahisoa.
rfs Taba ea boikhethelo false Boolean ho thusa ho khutlisa metsi ka RFS .
print Taba ea boikhethelo false Boolean e bonts'a hore na litlelase tsa khatiso li hloka ho hlahisoa.
rtl Taba ea boikhethelo true Boolean e bonts'a hore na ts'ebeliso e lokela ho bolokoa ho RTL.

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

Thepa

Senotlolo se hlokahalang propertyse tlameha ho hlophisoa bakeng sa ts'ebeliso efe kapa efe, 'me se tlameha ho ba le thepa e nepahetseng ea CSS. Sehlahisoa sena se sebelisoa molemong oa lisebelisoa tse entsoeng. Ha classsenotlolo se siiloe, se boetse se sebetsa e le lebitso la sehlopha sa kamehla. Nahana ka text-decorationlisebelisoa:

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

Sephetho:

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

Litekanyetso

Sebelisa valuessenotlolo ho hlakisa hore na ke litekanyetso life tse boletsoeng tse propertylokelang ho sebelisoa mabitsong le melaong ea sehlopha se hlahisitsoeng. E ka ba lethathamo kapa 'mapa (e behiloeng lits'ebetsong kapa ka mofuta oa Sass).

Joalo ka lethathamo, joalo ka text-decorationlits'ebeletso :

values: none underline line-through

Joalo ka 'mapa, joalo ka opacitylits'ebeletso :

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

Joalo ka mofuta oa Sass o behang lenane kapa 'mapa, joalo ka positionlits'ebeletso tsa rona :

values: $position-values

Sehlopha

Sebelisa classkhetho ho fetola prefix ea sehlopha e sebelisitsoeng ho CSS e hlophisitsoeng. Ka mohlala, ho fetola ho tloha .opacity-*ho .o-*:

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

Sephetho:

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

Lisebelisoa tse fapaneng tsa CSS

Beha css-varkhetho ea boolean ho true'me API e tla hlahisa mefuta-futa ea CSS ea lehae bakeng sa mokhethoa ea fanoeng ho e-na le property: valuemelao e tloaelehileng. Nahana ka .text-opacity-*lisebelisoa tsa rona:

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

Sephetho:

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

Mefuta e fapaneng ea CSS ea lehae

Sebelisa local-varskhetho ho hlakisa 'mapa oa Sass o tla hlahisa mefuta e fapaneng ea CSS ka har'a melaoana ea sehlopha sa utility. Ka kopo hlokomela hore ho ka 'na ha hloka mosebetsi o eketsehileng ho sebelisa mefuta-futa ea CSS ea sebakeng seo melaong ea CSS e hlahisitsoeng. Ka mohlala, nahana ka .bg-*lisebelisoa tsa rona:

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

Sephetho:

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

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

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

Hatisa

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.

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

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 .