Faaali atu meatotino

Fa'atopetope ma fa'afoliga fa'asolo le fa'aaliga taua o vaega ma isi mea fa'atasi ma a tatou fa'aoga fa'aaliga. E aofia ai le lagolago mo nisi o tau masani, faʻapea foʻi ma nisi faʻaopoopoga mo le puleaina o faʻaaliga pe a lolomi.

E faapefea ona galue

Suia le tau o le displaymea totino i a matou vasega faʻaalia faʻaalia. Matou te lagolagoina ma le loto i ai na'o se vaega itiiti o mea taua uma e mafai mo display. E mafai ona tu'ufa'atasia vasega mo a'afiaga eseese e te mana'omia.

Notation

Fa'aali vasega fa'aoga e fa'atatau i va'aiga uma , mai xsi le xl, e leai se fa'apu'upu'u va'aiga i totonu. E mafua ona o na vasega o loʻo faʻaoga mai min-width: 0;ma luga, ma o lea e le o noatia i se fesili a le aufaasālalau. Ae peitai, o vaega o totoe, e aofia ai se faapuupuuga.

E pei o lea, ua faaigoaina vasega e faʻaaoga ai le faatulagaga:

.d-{value}moxs
.d-{breakpoint}-{value}mo sm, md, lgma xl.

Ole tau ole tasi ole:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

O fesili fa'asalalau e fa'aaafia ai le lautele o lau fa'atasi ma le va'aiga ua tu'uina atu pe lapopoa . Mo se faʻataʻitaʻiga, .d-lg-noneseti display: none;i luga o le lua lgma xllau.

Faataitaiga

d-i totonu

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

o-poloka o-poloka

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

Natia elemene

Mo le televave o le atinaʻeina o fesoʻotaʻiga feaveaʻi, faʻaaoga vasega faʻaalia tali mo le faʻaalia ma le nanaina o elemene i masini. Aloese mai le faia o ni fa'aliliuga 'ese'ese atoa o le 'upega tafa'ilagi e tasi, nai lo le natia o elemene fa'afoliga mo lau mata ta'itasi.

Ina ia nana elemene na o le faʻaaogaina o le .d-nonevasega poʻo se tasi o .d-{sm,md,lg,xl}-nonevasega mo soʻo se fesuiaiga o lau tali.

Ina ia faʻaalia se elemene i luga o se vaeluaga o le tele o lau e mafai ona e tuʻufaʻatasia le tasi .d-*-nonevasega ma se .d-*-*vasega, mo se faʻataʻitaʻiga .d-none .d-md-block .d-xl-noneo le a natia ai le elemene mo lapopoa uma sei vagana ai luga o masini feololo ma tetele.

Tele lau	Vasega
Natia i mea uma	`.d-none`
Natia na'o le xs	`.d-none .d-sm-block`
Natia i luga ole sm	`.d-sm-none .d-md-block`
Natia na'o le md	`.d-md-none .d-lg-block`
Natia i luga ole lg	`.d-lg-none .d-xl-block`
Natia na'o le xl	`.d-xl-none`
Va'aia i tagata uma	`.d-block`
E na'o le xs e iloa ai	`.d-block .d-sm-none`
E na'o le sm	`.d-none .d-sm-block .d-md-none`
E na'o le md	`.d-none .d-md-block .d-lg-none`
E na'o le lg	`.d-none .d-lg-block .d-xl-none`
Na'o le xl e iloa ai	`.d-none .d-xl-block`

hide on screens wider than lg

natia i lau laititi nai lo lg

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Fa'aali ile lolomi

Suia le displaytaua o elemene pe a lolomi ma a matou vasega faʻaaliga faʻaalia lomitusi. E aofia ai le lagolago mo displaytulaga tutusa ma a tatou .d-*mea faʻaoga tali.

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

E mafai ona tu'ufa'atasia vasega lolomi ma fa'aaliga.

Na'o le Mata (Natia ile lolomi)

Print Only (Hide on screen only)

Natia i luga ole lau, ae fa'aali pea ile lolomi

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>