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	Valè default	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 `null`yo itilize kòm kle kat jeyografik la, `class`li pa anfas non klas la.
`class`	Si ou vle	nil	Non klas ki te pwodwi a. Si yo pa bay epi li `property`se yon etalaj de fisèl, `class`yo pral default nan premye eleman nan `property`etalaj la. Si yo pa bay epi li `property`se yon fisèl, `values`kle yo itilize pou `class`non yo.
`css-var`	Si ou vle	`false`	Boolean pou jenere varyab CSS olye pou yo règ CSS.
`css-variable-name`	Si ou vle	nil	Non koutim ki pa gen prefiks pou varyab CSS la andedan règ la.
`local-vars`	Si ou vle	nil	Kat varyab lokal CSS pou jenere anplis règ CSS yo.
`state`	Si ou vle	nil	Lis variants pseudo-klas (egzanp, `:hover`oswa `:focus`) pou jenere.
`responsive`	Si ou vle	`false`	Boolean ki endike si yo ta dwe pwodwi klas ki reponn.
`rfs`	Si ou vle	`false`	Boolean pou pèmèt re- echèl likid ak RFS .
`print`	Si ou vle	`false`	Boolean ki endike si klas enprime yo bezwen pwodwi.
`rtl`	Si ou vle	`true`	Boolean ki endike si sèvis piblik yo ta dwe kenbe nan RTL.

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

Pwopriyete

Kle obligatwa propertya dwe mete pou nenpòt sèvis piblik, epi li dwe genyen yon pwopriyete CSS valab. Pwopriyete sa a yo itilize nan regleman sèvis piblik ki te pwodwi a. Lè classkle a omisyon, li sèvi tou kòm non klas la default. Konsidere text-decorationsèvis piblik la:

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

Sòti:

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

Valè

Sèvi ak valueskle a pou presize ki valè pou yo espesifye propertyyo ta dwe itilize nan non klas yo ak règ yo pwodwi. Kapab yon lis oswa kat (mete nan sèvis piblik yo oswa nan yon varyab Sass).

Kòm yon lis, tankou ak text-decorationsèvis piblik :

values: none underline line-through

Kòm yon kat jeyografik, tankou ak opacitysèvis piblik :

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

Kòm yon varyab Sass ki mete lis la oswa kat jeyografik, tankou nan positionsèvis piblik nou yo :

values: $position-values

Klas

Sèvi ak classopsyon pou chanje prefiks klas yo itilize nan CSS konpile a. Pou egzanp, chanje soti .opacity-*nan .o-*:

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

Sòti:

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

Si class: null, jenere klas pou chak nan valueskle yo:

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

Sòti:

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

CSS sèvis piblik varyab

Mete css-varopsyon boolean an trueepi API a pral jenere varyab CSS lokal pou seleksyon yo bay olye pou yo property: valuerèg nòmal yo. Ajoute yon opsyonèl css-variable-namepou mete yon non varyab CSS diferan pase non klas la.

Konsidere .text-opacity-*sèvis piblik nou yo. Si nou ajoute css-variable-nameopsyon a, nou pral jwenn yon pwodiksyon koutim.

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

Sòti:

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

Varyab CSS lokal yo

Sèvi ak local-varsopsyon pou presize yon kat Sass ki pral jenere varyab CSS lokal yo nan règleman klas sèvis piblik la. Tanpri sonje ke li ka mande plis travay pou konsome varyab CSS lokal sa yo nan règ CSS ki te pwodwi yo. Pou egzanp, konsidere .bg-*sèvis piblik nou yo:

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

Sòti:

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

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

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

Enprime

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.

Pase sou 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,
  ),
);

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

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

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

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

Retire sèvis piblik yo

Retire nenpòt nan sèvis piblik default yo ak map-remove()fonksyon Sass la .

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

Ou kapab tou itilize map-merge()fonksyon Sass la epi mete kle gwoup la nullpou retire sèvis piblik la.

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

Ajoute, retire, modifye

Ou ka ajoute, retire, ak modifye anpil sèvis piblik tout an menm tan ak map-merge()fonksyon Sass la . Men ki jan ou ka konbine egzanp anvan yo nan yon sèl kat pi gwo.

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

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 .