Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
in English

Fa'aoga API

O le aoga API o se meafaigaluega fa'avae Sass e fa'atupu ai vasega aoga.

I luga o lenei itulau

Bootstrap utilities o loʻo faʻatupuina i la matou aoga API ma e mafai ona faʻaoga e sui pe faʻalautele a matou seti le aoga o vasega aoga e ala i Sass. O la matou aoga API e faʻavae i luga o se faasologa o faʻafanua Sass ma galuega mo le fausiaina o aiga o vasega ma filifiliga eseese. Afai e te le masani i faafanua Sass, faitau i luga ole Sass pepa aloaia e amata ai.

O le $utilitiesfa'afanua o lo'o iai uma a matou mea aoga ma mulimuli ane tu'ufa'atasia ma lau $utilitiesfa'afanua masani, pe a iai. O le fa'afanua aoga o lo'o i ai se lisi autu o vaega fa'aoga e talia filifiliga nei:

Filifiliga Ituaiga Fa'amatalaga
property Manaomia Igoa o le meatotino, e mafai ona avea ma se manoa po'o se fa'asologa o manoa (fa'ata'ita'iga, fa'alava fa'alava po'o pito).
values Manaomia Lisi o tau, po'o se fa'afanua pe afai e te le mana'o ia tutusa le igoa o le vasega ma le tau. Afai nulle fa'aaogaina e fai ma fa'afanua ki, e le'o tu'ufa'atasia.
class Filifili Fesuia'i mo le igoa ole vasega pe a e le mana'o ia tutusa ma le meatotino. I le tulaga e te le tuʻuina atu le classki ma propertyo le ki o se faʻasologa o manoa, o le igoa o le vasega o le elemene muamua o le propertylaina.
state Filifili Lisi o pseudo-vasega ese'ese pei :hoverpe :focusfa'atupu mo le aoga. Leai se tau faaletonu.
responsive Filifili Boolean e fa'ailoa mai ai pe mana'omia ona fa'atupu vasega tali mai. falsee ala i le faaletonu.
rfs Filifili Boolean e mafai ai ona toe fa'aleleia le sua. Va'ai ile itulau RFS e su'e ai pe fa'apefea ona fa'aogaina. falsee ala i le faaletonu.
print Filifili Boolean o lo'o fa'ailoa mai ai pe mana'omia ona fa'atupu vasega lolomi. falsee ala i le faaletonu.
rtl Filifili Boolean o lo'o fa'ailoa mai pe tatau ona fa'atumauina le fa'aoga ile RTL. truee ala i le faaletonu.

API faʻamatalaina

O fesuiaiga aoga uma e fa'aopoopo i le $utilitiesfesuiaiga i totonu o la tatou _utilities.scsssitaili. O vaega taʻitasi o faʻaoga e foliga mai e pei o lenei:

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

Le mea e maua ai mea nei:

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

Prefix vasega masani

Fa'aoga le classfilifiliga e sui ai le fa'auluuluga o le vasega o lo'o fa'aaogaina i le CSS tu'ufa'atasia:

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

Fuafuaga:

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

Setete

Fa'aaogā le statefilifiliga e fa'atupu ai suiga fa'atusa. Faataitaiga pseudo-vasega o :hoverma :focus. A tu'uina atu se lisi o setete, e faia igoa o vasega mo lena pseudo-vasega. Mo se faʻataʻitaʻiga, e sui le opacity i luga o le faʻafefe, faʻaopoopo state: hoverma e te maua .opacity-hover:hoveri lau CSS tuʻufaʻatasia.

Manaomia ni pseudo-vasega se tele? Fa'aaogā se lisi va'ava'ai o setete: state: hover focus.

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

Fuafuaga:

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

Uunaiga tali

Fa'aopoopo le responsiveboolean e fa'atupu ai mea fa'aoga tali (fa'ata'ita'iga, .opacity-md-25) i va'aiga uma .

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

Fuafuaga:

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

Suia mea aoga

Fa'asili mea fa'aoga o lo'o iai i le fa'aogaina o le ki lava e tasi. Mo se faʻataʻitaʻiga, afai e te manaʻo i isi vasega faʻaoga faʻafefe, e mafai ona e faia lenei mea:

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

O le fa'ataga o le printfilifiliga o le a fa'atupuina ai fo'i vasega aoga mo le lolomi, lea e fa'aoga i totonu @media print { ... }ole su'esu'ega fa'asalalau.

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

Fuafuaga:

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

Taua

O mea aoga uma e gaosia e le API e aofia !importantai le faʻamautinoa latou te faʻamalo vaega ma vasega faʻaleleia e pei ona faʻamoemoeina. E mafai ona e fesuia'i lenei tulaga i le lalolagi atoa ma le $enable-important-utilitiesfesuiaiga (fa'aletonu i true).

Faʻaaogaina le API

O lea la ua e masani ile aoga ole API, a'oa'o pe fa'afefea ona fa'aopoopo a oe lava vasega fa'ale-aganu'u ma fa'aleleia a tatou mea fa'aoga le aoga.

Fa'aopoopo mea fa'aoga

$utilitiesE mafai ona fa'aopoopo mea faigaluega fou i le fa'afanua fa'aletonu ma se map-merge. Ia mautinoa o matou faila Sass manaʻomia ma _utilities.scssfaʻaulufale muamua, ona faʻaoga lea map-mergee faʻaopoopo ai au faʻaoga faʻaopoopo. Mo se faʻataʻitaʻiga, o le auala lenei e faʻaopoopoina ai se faʻaoga tali cursorfaʻatasi ma ni tau e tolu.

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

Suia mea aoga

$utilitiesSuia mea aoga o lo'o i ai i le fa'afanua fa'aletonu map-getma map-mergegaluega. I le faʻataʻitaʻiga o loʻo i lalo, o loʻo matou faʻaopoopoina se tau faʻaopoopo i widthmea aoga. Amata i se amataga map-mergeona fa'ailoa lea po'o fea aoga e te mana'o e sui. Mai i'ina, aumai le fa'aputuga "width"fa'afanua map-gete fa'aoga ma fa'alelei ai filifiliga ma fa'atauga a le aoga.

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

Fa'agaoioi le tali atu

E mafai ona e fa'atagaina vasega tali mo se seti o mea aoga e le o tali mai i le taimi nei ona o le faaletonu. Mo se faʻataʻitaʻiga, ia faʻafeiloaʻi bordervasega:

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

Ole mea lea ole a fa'atupu ai suiga tali ole .borderma .border-0mo vaega ta'itasi. O lau CSS fa'atupuina o le a fa'apea:

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

Toe fa'aigoa mea faigaluega

O lo'o misi le v4 fa'aoga, pe fa'aaoga i se isi fa'aigoa igoa? E mafai ona fa'aogaina le API fa'aoga e fa'amalo ai le taunu'uga classo se fa'aoga tu'ufa'atasi-mo se fa'ata'ita'iga, toe fa'aigoa .ms-*mea aoga i le tuai .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 ),
    ),
  )
);

Aveese mea faigaluega

Aveese so'o se mea fa'aoga fa'aletonu e ala i le setiina o le ki fa'alapotopotoga i le null. Mo se faʻataʻitaʻiga, e aveese uma a matou widthmea aoga, fai se $utilities map-mergema faʻaopoopo "width": nulli totonu.

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

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

Aveese le aoga ile RTL

O nisi mata'upu e fa'afaigata ai le faiga o le RTL , e pei o le motusia laina i le gagana Arapi. O le mea lea e mafai ai ona faʻaumatia mea aoga mai le RTL e ala i le setiina o le rtlfilifiliga i false:

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

Fuafuaga:

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

E leai se mea e maua i le RTL, faʻafetai i le RTLCSS removepule faʻatonuga .