Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
in English

API sèvis piblik

API sèvis piblik la se yon zouti ki baze sou Sass pou jenere klas sèvis piblik yo.

Nan paj sa a

Itilite Bootstrap yo pwodwi ak API sèvis piblik nou an epi yo ka itilize pou modifye oswa pwolonje seri klas sèvis piblik nou yo atravè Sass. API sèvis piblik nou an baze sou yon seri kat ak fonksyon Sass pou jenere fanmi klas ak divès opsyon. Si ou pa abitye ak kat Sass, li sou dokiman ofisyèl Sass yo pou kòmanse.

Kat $utilitiesjeyografik la gen tout sèvis piblik nou yo epi pita fizyone ak kat koutim ou $utilitiesa, si li prezan. Kat sèvis piblik la gen yon lis kle gwoup sèvis piblik ki aksepte opsyon sa yo:

Opsyon Kalite Deskripsyon
property Obligatwa Non pwopriyete a, sa a kapab yon fisèl oswa yon etalaj de fisèl (egzanp, padding orizontal oswa marges).
values Obligatwa Lis valè, oswa yon kat si ou pa vle non klas la menm ak valè a. Si nullyo itilize kòm kle kat jeyografik, li pa konpile.
class Si ou vle Varyab pou non klas la si ou pa vle li menm ak pwopriyete a. Nan ka ou pa bay classkle a ak propertykle se yon etalaj de fisèl, non klas la pral premye eleman nan propertyetalaj la.
state Si ou vle Lis variants pseudo-klas tankou :hoveroswa :focuspou jenere pou sèvis piblik la. Pa gen valè default.
responsive Si ou vle Boolean ki endike si klas ki reponn yo bezwen pwodwi. falsepa defo.
rfs Si ou vle Boolean pou pèmèt re-echèl likid. Gade nan paj RFS la pou w konnen kijan sa fonksyone. falsepa defo.
print Si ou vle Boolean ki endike si klas enprime yo bezwen pwodwi. falsepa defo.
rtl Si ou vle Boolean ki endike si sèvis piblik yo ta dwe kenbe nan RTL. truepa defo.

API eksplike

Tout varyab sèvis piblik yo ajoute nan $utilitiesvaryab la nan fèy style nou an _utilities.scss. Chak gwoup sèvis piblik sanble yon bagay tankou sa a:

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

Ki pwodui sa ki annapre yo:

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

Prefiks klas koutim

Sèvi ak classopsyon pou chanje prefiks klas yo itilize nan CSS konpile a:

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

Sòti:

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

Etazini

Sèvi ak stateopsyon pou jenere varyasyon pseudo-klas. Egzanp pseudo-klas yo se :hoverak :focus. Lè yo bay yon lis eta, yo kreye non klas pou pseudo-klas sa a. Pou egzanp, chanje opakite sou hover, ajoute state: hoverepi w ap jwenn .opacity-hover:hovernan CSS konpile ou a.

Bezwen plizyè pseudo-klas? Sèvi ak yon lis eta ki separe ak espas: state: hover focus.

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

Sòti:

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

Itilite ki reponn

Ajoute responsiveboolean an pou jenere sèvis piblik (egzanp, .opacity-md-25) atravè tout pwen rupture .

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

Sòti:

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

Chanje sèvis piblik yo

Ranplase sèvis piblik ki deja egziste lè w itilize menm kle a. Pou egzanp, si ou vle plis klas sèvis piblik ki reponn, ou ka fè sa:

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

Pèmèt printopsyon a pral jenere tou klas sèvis piblik pou enprime, ki aplike sèlman nan @media print { ... }rechèch medya a.

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

Sòti:

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

Enpòtans

Tout sèvis piblik ki te pwodwi pa API a gen ladan !importantyo asire yo pase sou konpozan ak klas modifye jan sa vle di. Ou ka aktive paramèt sa a globalman ak $enable-important-utilitiesvaryab la (default nan true).

Sèvi ak API a

Kounye a ke w konnen ki jan API sèvis piblik yo fonksyone, aprann kijan pou ajoute pwòp klas ou yo epi modifye sèvis piblik nou yo.

Ajoute sèvis piblik yo

Nouvo sèvis piblik yo ka ajoute nan $utilitieskat default la ak yon map-merge. Asire w ke dosye Sass obligatwa nou yo epi _utilities.scssyo enpòte an premye, Lè sa a, sèvi ak map-mergepou ajoute sèvis piblik adisyonèl ou yo. Pou egzanp, men ki jan yo ajoute yon cursorsèvis piblik ki reponn ak twa valè.

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

Modifye sèvis piblik yo

$utilitiesModifye sèvis piblik ki egziste deja nan kat la default map-getak map-mergefonksyon. Nan egzanp ki anba a, nou ap ajoute yon valè adisyonèl nan widthsèvis piblik yo. Kòmanse ak yon inisyal map-mergeak Lè sa a, presize ki sèvis piblik ou vle modifye. "width"Soti nan la, chache kat jeyografik la enbrike ak map-getaksè ak modifye opsyon ak valè sèvis piblik la.

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

Pèmèt reponn

Ou ka aktive klas ki reponn pou yon seri sèvis piblik ki deja egziste ki pa reponn kounye a pa default. Pa egzanp, pou rann borderklas yo reponn:

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

Sa a pral kounye a jenere varyasyon reponn nan .borderak .border-0pou chak breakpoint. CSS ou te pwodwi ap sanble sa a:

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

Chanje non sèvis piblik yo

Manke sèvis piblik v4, oswa itilize nan yon lòt konvansyon nonmen? Yo ka itilize API pou sèvis piblik yo pou pase sou desizyon classyon sèvis piblik bay yo—pa egzanp, pou chanje non .ms-*sèvis piblik yo an 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 ),
    ),
  )
);

Retire sèvis piblik yo

Retire nenpòt nan sèvis piblik default yo lè w mete kle gwoup la sou null. Pou egzanp, retire tout widthsèvis piblik nou yo, kreye yon $utilities map-mergeepi ajoute "width": nullnan.

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

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

Retire sèvis piblik nan RTL

Gen kèk ka kwen fè stil RTL difisil , tankou kase liy nan arab. Se konsa, sèvis piblik yo ka tonbe nan pwodiksyon RTL lè w mete rtlopsyon a false:

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

Sòti:

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

Sa a pa bay anyen nan RTL, gras a direktiv kontwòl RTLCSSremove la .