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	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 sari-tany dia tsy voaangona.
`class`	tsy voatery	Variable ho an'ny anaran'ny kilasy raha tsy tianao ny hitovy amin'ny fananana. Raha toa ka tsy manome ny `class`fanalahidy ianao ary `property`ny fanalahidy dia andian-tady, ny anaran'ny kilasy dia ho singa voalohany amin'ny `property`array.
`state`	tsy voatery	Lisitry ny variana pseudo-class toa `:hover`na `:focus`hamokatra ho an'ny utility. Tsy misy sanda default.
`responsive`	tsy voatery	Boolean manondro raha mila mamorona kilasy mandray andraikitra. `false`amin'ny alàlan'ny default.
`rfs`	tsy voatery	Boolean ahafahan'ny rescaling fluid. Tsidiho ny pejy RFS hahitana ny fomba fiasan'izany. `false`amin'ny alàlan'ny default.
`print`	tsy voatery	Boolean manondro raha mila mamorona kilasy fanontana. `false`amin'ny alàlan'ny default.
`rtl`	tsy voatery	Boolean manondro raha tokony hotehirizina ao amin'ny RTL ny utility. `true`amin'ny alàlan'ny default.

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

Prefix kilasy manokana

Ampiasao ny classsafidy hanovana ny prefix kilasy ampiasaina amin'ny CSS natambatra:

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

Fivoahana:

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

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

Utiliti responsive

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

Fanovana fitaovana

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

Fitaovana fanontana

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.

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

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

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

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

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

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

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

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

Esory ny fitaovana ilaina

Esory ny iray amin'ireo fitaovana ampiasaina amin'ny alàlan'ny fametrahana ny fanalahidin'ny vondrona amin'ny null. Ohatra, mba hanesorana ny widthfampiasantsika rehetra, mamorona $utilities map-mergeary ampio "width": nullao anatiny.

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

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

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 .