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 `null`e sebelisoa e le senotlolo sa 'mapa, `class`ha e bue ka lebitso la sehlopha.
`class`	Taba ea boikhethelo	lefeela	Lebitso la sehlopha se hlahisitsoeng. Haeba e sa fanoe 'me `property`e le mefuta e mengata ea likhoele, `class`e tla lula e le karolo ea pele ea `property`sehlopha. Haeba e sa fanoe mme `property`e le khoele, `values`linotlolo li sebelisoa bakeng sa `class`mabitso.
`css-var`	Taba ea boikhethelo	`false`	Boolean ho hlahisa mefuta-futa ea CSS sebakeng sa melao ea CSS.
`css-variable-name`	Taba ea boikhethelo	lefeela	Lebitso la tloaelo le sa hlophisoang bakeng sa phapang ea CSS ka har'a melaoana.
`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, `:hover`kapa `: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 tlameha ho bolokoa ho RTL.

API e hlalositse

Mefuta eohle ea lisebelisoa e kenyellelitsoe ho $utilitiesfeto-fetoha ka har'a 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 lintlha life tse boletsoengproperty lokelang 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; }

Haeba class: null, e hlahisa litlelase bakeng sa valueslinotlolo ka 'ngoe:

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

Sephetho:

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

Lisebelisoa tse fapaneng tsa CSS

Beha css-varkhetho ea boolean ho true'me API e tla hlahisa mefuta e fapaneng ea CSS ea sebaka sa mokhethoa ho e-na le property: valuemelao e tloaelehileng. Eketsa khetho css-variable-nameea ho seta lebitso le fapaneng la CSS ho feta la sehlopha.

Nahana ka .text-opacity-*lisebelisoa tsa rona. Haeba re eketsa css-variable-namekhetho, re tla fumana tlhahiso e ikhethileng.

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

Sephetho:

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

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

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

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

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

Tlosa lisebelisoa

Tlosa lisebelisoa life kapa life tsa kamehla ka tšebetso ea map-remove()Sass .

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

U ka sebelisa ts'ebetso ea map-merge()Sass 'me u seta konopo ea sehlopha nullho tlosa ts'ebeliso.

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

Eketsa, tlosa, fetola

O ka eketsa, oa tlosa le ho fetola lits'ebeletso tse ngata ka nako e le 'ngoe ka tšebetso ea map-merge()Sass . Mona ke kamoo o ka kopanyang mehlala e fetileng ho etsa 'mapa o le mong o moholoanyane.

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

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 .