Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
in English

Utility API

Ny API fampiasa 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 nullampiasaina ho fanalahidin'ny sari-tany dia tsy voaangona.
class tsy voatery tohivakana foana Anaran'ny kilasy novokarina. Raha tsy nomena ary propertyandian-tady, classdia ho default amin'ny singa voalohany amin'ny propertyarray.
css-var tsy voatery false Boolean hamokatra varimbazaha CSS fa tsy fitsipika CSS.
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, :hoverna :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; }

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. Diniho ny .text-opacity-*fitaovana ampiasainay:

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

Fivoahana:

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

Variable CSS eo an-toerana

Ampiasao ny local-varssafidy mba hamaritana ny sarintany Sass izay hamokatra fari-piadidiana CSS eo an-toerana ao anatin'ny fitsipiky 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 ny lisitry ny fanjakana dia misy 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 ao anatin'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/utilities";

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

Manova fitaovana

Ovao 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 hovana. "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 mandray andraikitra 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, ny fitaovana ampiasaina dia azo alaina amin'ny famoahana RTL amin'ny alàlan'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 .