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.

I luga o lenei itulau

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 xxl, 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, o vasega e faʻaigoaina e faʻaaoga ai le faatulagaga:

.d-{value}moxs
.d-{breakpoint}-{value}mo sm, md, lg, xlma xxl.

Ole tau ole tasi ole:

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

O faʻaaliga faʻaalia e mafai ona suia e ala i le suia o le $displaysfesuiaiga ma toe faʻapipiʻi le SCSS.

O fesili fa'asalalau e a'afia 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 lg, xl, ma xxllau.

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>

d-poloka d-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 e tali atu i 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,xxl}-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 mata 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-none .d-xxl-noneo le a natia le elemene mo lapoʻa 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 .d-xxl-block`
Natia i luga ole xxl	`.d-xxl-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 .d-xxl-none`
E na'o le xxl e iloa	`.d-none .d-xxl-block`

hide on lg and wider screens

natia i lau la'ititi nai lo lg

<div class="d-lg-none">hide on lg and wider screens</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-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

O vasega lolomi ma faʻaaliga e mafai ona tuʻufaʻatasia.

Na'o le Mata (Na'o 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>

Sass

Utilities API

Fa'aaliga fa'aoga o lo'o fa'aalia i totonu oa tatou mea aoga API i scss/_utilities.scss. A'oa'o pe fa'afefea ona fa'aoga mea aoga API.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),