Utility API

Ny API Utility dia fitaovana mifototra amin'ny Sass hamoronana kilasy fampiasa.

Amin'ity pejy ity

Ny kojakoja Bootstrap dia noforonina miaraka amin'ny API fampiasantsika ary azo ampiasaina hanovana na hanitarana ny kilasin'ny fitaovana ampiasaina amin'ny alàlan'ny Sass. Ny API fampiasanay dia mifototra amin'ny andian-tsarintany Sass sy fiasa amin'ny famoronana fianakaviana kilasy misy safidy isan-karazany. Raha tsy zatra amin'ny sarintany Sass ianao dia vakio ny doka ofisialy Sass hanombohana.

Ny $utilitiessarintany dia mirakitra ny fampiasanay rehetra ary atambatra amin'ny $utilitiessari-tany mahazatra anao, raha misy. Ny sarintanin'ny utility dia misy lisitr'ireo vondrona fampiasa izay manaiky ireto safidy manaraka ireto:

SAFIDY	Type	Sanda default	Description
`property`	ilaina	–	Anaran'ny fananana, ity dia mety ho tady na tady maromaro (ohatra, padding marindrano na sisiny).
`values`	ilaina	–	Lisitry ny soatoavina, na sarintany raha tsy tianao ny hitovy amin'ny sanda ny anaran'ny kilasy. Raha `null`ampiasaina ho fanalahidin'ny sarintany, `class`dia tsy apetraka amin'ny anaran'ny kilasy.
`class`	tsy voatery	tohivakana foana	Anaran'ny kilasy novokarina. Raha tsy nomena ary `property`andian-tady, `class`dia ho default amin'ny singa voalohany amin'ny `property`array. Raha tsy omena ary `property`tady `values`dia ampiasaina amin'ny `class`anarana ny lakile.
`css-var`	tsy voatery	`false`	Boolean hamokatra varimbazaha CSS fa tsy fitsipika CSS.
`css-variable-name`	tsy voatery	tohivakana foana	Anarana tsy voatonona manokana ho an'ny fari-piainan'ny CSS ao anatin'ny fitambaran-dalàna.
`local-vars`	tsy voatery	tohivakana foana	Sarintanin'ny fari-piainan'ny CSS eo an-toerana mba hamokarana ankoatra ny fitsipika CSS.
`state`	tsy voatery	tohivakana foana	Lisitry ny pseudo-class variants (oh, `:hover`na `:focus`) hamokatra.
`responsive`	tsy voatery	`false`	Boolean manondro raha tokony hamorona kilasy mandray andraikitra.
`rfs`	tsy voatery	`false`	Boolean ahafahan'ny rescaling fluid amin'ny RFS .
`print`	tsy voatery	`false`	Boolean manondro raha mila mamorona kilasy fanontana.
`rtl`	tsy voatery	`true`	Boolean manondro raha tokony hotehirizina ao amin'ny RTL ny utility.

Nanazava ny API

Ampidirina amin'ny fari- $utilitiespiainana ao anatin'ny _utilities.scssstylesheet ny fari-piasa rehetra. Ny vondrona utilitaire tsirairay dia toa izao:

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

Izay mamoaka ireto manaraka ireto:

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

NY FANANANA

Ny propertyfanalahidy ilaina dia tsy maintsy apetraka amin'ny fitaovana rehetra, ary tsy maintsy misy fananana CSS manan-kery. Ity fananana ity dia ampiasaina amin'ny fitsipi-pifehezan'ny fitaovana novokarina. Rehefa classnesorina ny lakile, dia io ihany koa no anarana kilasy default. Diniho ny text-decorationutility:

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

Fivoahana:

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

soatoavina

Ampiasao ny valueslakile mba hamaritana izay soatoavina ho an'ny voatondro propertytokony hampiasaina amin'ny anaran'ny kilasy sy fitsipika novokarina. Mety ho lisitra na sarintany (apetraka amin'ny fitaovana na amin'ny fari-piadidiana Sass).

Toy ny lisitra, toy ny text-decorationfitaovana :

values: none underline line-through

Toy ny sarintany, toy ny opacityfitaovana :

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

Amin'ny maha variable Sass izay mametraka ny lisitra na sarintany, toy ny ao amin'ny positionfitaovanay :

values: $position-values

KILASY

Ampiasao ny classsafidy hanovana ny prefix kilasy ampiasaina amin'ny CSS natambatra. Ohatra, hiova avy .opacity-*amin'ny .o-*:

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

Fivoahana:

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

Raha class: null, dia miteraka kilasy ho an'ny valuesfanalahidy tsirairay:

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

Fivoahana:

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

CSS variable utility

Apetraho ny css-varsafidy boolean trueary ny API dia hamokatra fari-pitsipika CSS eo an-toerana ho an'ny mpifidy nomena fa tsy ny property: valuefitsipika mahazatra. Manampia safidy css-variable-namehametrahana anarana miovaova CSS hafa noho ny anaran'ny kilasy.

Diniho ny .text-opacity-*fampiasantsika. Raha manampy ny css-variable-namesafidy isika dia hahazo vokatra manokana.

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

Fivoahana:

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

Variable CSS eo an-toerana

Ampiasao ny local-varssafidy mba hamaritana ny sarintany Sass izay hiteraka fari-piadidiana CSS eo an-toerana ao anatin'ny fehezin'ny kilasin'ny utility. Mariho fa mety mitaky asa fanampiny ny fampiasana ireo fari-piadidiana CSS eo an-toerana ao amin'ny fitsipika CSS noforonina. Diniho, ohatra, ny .bg-*fitaovana ampiasainay:

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

Fivoahana:

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

Hoy ny

Ampiasao ny statesafidy hamoronana fiovaovana pseudo-class. Ohatra pseudo-class dia :hoverary :focus. Rehefa omena lisitr'ireo fanjakana dia noforonina ny anaram-pianarana ho an'io pseudo-class io. Ohatra, raha hanova ny opacity amin'ny hover, ampio state: hoverary ho azonao .opacity-hover:hoverny CSS natambatrao.

Mila pseudo-kilasy maromaro? Mampiasà lisitry ny fanjakana misaraka amin'ny habaka: state: hover focus.

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

Fivoahana:

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

manaiky

Ampio ny responsiveboolean mba hamoronana kojakoja mamaly (oh, .opacity-md-25) amin'ny toerana tapaka rehetra .

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

Fivoahana:

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

pirinty

Ny fampandehanana ny printsafidy dia hiteraka kilasy fampiasa amin'ny fanontana ihany koa, izay ampiharina amin'ny @media print { ... }fangatahana media ihany.

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

Fivoahana:

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

MAHA ZAVA- DEHIBE

Ny fampitaovana rehetra novokarin'ny API dia misy !importantny miantoka fa manafoana ny singa sy ny kilasy modifier araka izay nokasaina. Azonao atao ny manodina an'ity sehatra ity eran-tany miaraka amin'ny $enable-important-utilitiesfari-piadidiana (default amin'ny true).

Mampiasa ny API

Ankehitriny rehefa fantatrao ny fomba fiasan'ny Utilities API, ianaro ny fomba hanampiana ireo kilasy mahazatra anao manokana ary ovay ny fitaovana ampiasainay.

Sokafy ny utility

Sokafy ny fitaovana efa misy amin'ny fampiasana ny fanalahidy mitovy. Ohatra, raha mila kilasin'ny utility overflow fanampiny ianao dia azonao atao izao:

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

Ampio fitaovana

Ny fitaovana vaovao dia azo ampiana amin'ny $utilitiessarintany default miaraka amin'ny map-merge. Ataovy azo antoka fa ny rakitra Sass ilainay _utilities.scssdia nafarana aloha, avy eo ampiasao ny map-mergehanampiana ireo fitaovana fanampiny anananao. Ohatra, ity ny fomba hanampiana fitaovana mandray andraikitra cursormisy soatoavina telo.

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

Manova fitaovana

Manova ny fitaovana efa misy ao amin'ny $utilitiessari-tany default miaraka amin'ny fiasa map-getsy map-mergeny fiasa. Amin'ny ohatra etsy ambany, dia manampy sanda fanampiny amin'ny widthfitaovana izahay. Atombohy amin'ny voalohany map-mergeary avy eo mamaritra izay fitaovana tianao ovaina. "width"Avy eo, alao ny sarintany misy akany map-getmba hidirana sy hanovana ny safidy sy ny sandany.

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

Alefaso mamaly

Azonao atao ny mamela ny kilasy mamaly ho an'ny vondron'asa efa misy izay tsy mamaly amin'ny alàlan'ny default. Ohatra, mba hamerenana ny borderkilasy:

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

Izany izao dia hiteraka fiovaovan'ny valiny .bordersy .border-0ho an'ny teboka tsirairay. Ny CSS noforoninao dia ho toy izao:

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

Avereno anarana ny utility

Tsy ampy fitaovana v4, sa efa zatra amin'ny fivoriambe nomena anarana hafa? Ny API Utilities dia azo ampiasaina hanilika ny vokatry classny fampiasa iray—ohatra, hanova ny anaran'ny .ms-*fitaovana ho tranainy .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";

Esory ny fitaovana ilaina

Esory ny iray amin'ireo fampiasa mahazatra miaraka amin'ny map-remove()fiasa 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";

Azonao atao koa ny mampiasa ny map-merge()asa Sass ary mametraka ny fanalahidin'ny vondrona nullhanesorana ny fitaovana.

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

Manampy, manala, manova

Azonao atao ny manampy, manala, ary manova fitaovana maro indray mandeha miaraka amin'ny map-merge()asa Sass . Ity ny fomba ahafahanao manambatra ireo ohatra teo aloha ho sarintany lehibe kokoa.

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

Esory ny fitaovana ao amin'ny RTL

Ny tranga sasany amin'ny sisiny dia manasarotra ny famolavolana RTL , toy ny fahatapahan'ny tsipika amin'ny teny Arabo. Noho izany dia azo esorina amin'ny famoahana RTL ny fitaovana ampiasaina amin'ny fametrahana ny rtlsafidy false:

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

Fivoahana:

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

Tsy mamoaka na inona na inona amin'ny RTL izany, noho ny torolàlana fanaraha-maso RTLCSSremove .