in English

Asehoy ny fananana

Ampifamadiho haingana sy mamaly ny sandan'ny fampiratiana ny singa sy ny maro hafa miaraka amin'ny fitaovana fampirantianay. Ahitana fanohanana ny sasany amin'ireo soatoavina mahazatra kokoa, ary koa ny fanampiny sasany amin'ny fanaraha-maso ny fampisehoana rehefa manonta.

Ahoana ny fiasan'izany

Ovay ny sandan'ny displayfananana miaraka amin'ireo kilasin'ny fitaovana fampirantiana mandray andraikitra. Ny ampahany kely amin'ny sanda rehetra azo atao ho an'ny display. Ny kilasy dia azo atambatra ho an'ny vokatra isan-karazany araka izay ilainao.

tarehimarika

Asehoy ireo kilasy fampiasa izay mihatra amin'ny teboka fiatoana rehetra , manomboka xsamin'ny xl, tsy misy fanafohezan-tohatra tapaka ao aminy. Izany dia satria ireo kilasy ireo dia ampiharina avy any min-width: 0;ambony, ary noho izany dia tsy voafatotry ny fangatahana media. Ny teboka sisa tavela anefa dia misy fanafohezan-teny.

Noho izany, nomena anarana ireo kilasy amin'ny alàlan'ny format:

  • .d-{value}HO AN'NYxs
  • .d-{breakpoint}-{value}ho an'ny sm, md, lgary xl.

Ny sanda dia iray amin'ireo:

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

Ny sanda aseho dia azo ovaina amin'ny alàlan'ny fanovana ny $displaysfari-piainana sy ny famerenana indray ny SCSS.

Misy fiantraikany amin'ny sakan'ny efijery amin'ny teboka fiatoana nomena na lehibe kokoa ny fanontaniana media . Ohatra, .d-lg-nonenapetraka display: none;amin'ny roa lgsy ny xlefijery.

OHATRA

d-inline
d-inline 
<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-block d-block 
<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>

Manafina singa

Mba hampivoarana haingana kokoa ho an'ny finday, ampiasao ny kilasin'ny fampisehoana mandray andraikitra hanehoana sy hanafenana singa amin'ny fitaovana. Fadio ny mamorona dikan-teny hafa tanteraka amin'ny tranokala iray ihany, fa afeno tsara ny singa isaky ny haben'ny efijery.

Mba hanafenana singa dia ampiasao fotsiny ny .d-nonekilasy na ny iray amin'ireo .d-{sm,md,lg,xl}-nonekilasy ho an'ny fiovaovan'ny efijery mamaly.

Mba hampisehoana singa iray ihany amin'ny elanelana misy ny haben'ny efijery dia azonao atao ny manambatra .d-*-nonekilasy iray amin'ny .d-*-*kilasy iray, ohatra .d-none .d-md-block .d-xl-nonedia hanafina ny singa ho an'ny habe rehetra afa-tsy amin'ny fitaovana antonony sy lehibe.

Haben'ny efijery KILASY
Miafina amin'ny rehetra .d-none
Afenina amin'ny xs ihany .d-none .d-sm-block
Afenina ao amin'ny sm .d-sm-none .d-md-block
Miafina ao amin'ny md .d-md-none .d-lg-block
Afenina ao amin'ny lg ihany .d-lg-none .d-xl-block
Afenina amin'ny xl ihany .d-xl-none
Hita amin'ny rehetra .d-block
Tsy hita afa-tsy amin'ny xs .d-block .d-sm-none
Tsy hita afa-tsy amin'ny sm .d-none .d-sm-block .d-md-none
Tsy hita afa-tsy amin'ny md .d-none .d-md-block .d-lg-none
Tsy hita afa-tsy amin'ny lg .d-none .d-lg-block .d-xl-none
Tsy hita afa-tsy amin'ny xl .d-none .d-xl-block
afeno amin'ny ecran lg sy midadasika kokoa
afeno amin'ny écran kely kokoa noho ny 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>

Asehoy amin'ny printy

Ovay ny displaysandan'ny singa rehefa manao pirinty miaraka amin'ireo kilasin'ny fitaovana fampirantiana fanontana. Ahitana fanohanana ireo displaysoatoavina mitovy amin'ny .d-*fampiasantsika mandray andraikitra.

  • .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

Ny kilasy fanontana sy fampisehoana dia azo atambatra.

Ecran Ihany (Afeno amin'ny printy ihany)
Print Only (Afeno eo amin'ny efijery ihany)
Afeno hatramin'ny lehibe eo amin'ny efijery, fa aseho amin'ny printy foana 
<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>