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.
Ovay ny sandan'ny display
fananana 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.
Asehoy ireo kilasy fampiasa izay mihatra amin'ny teboka fiatoana rehetra , manomboka xs
amin'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'nysm
,md
,lg
aryxl
.
Ny sanda dia iray amin'ireo:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Ny fangatahan'ny haino aman-jery dia misy fiantraikany amin'ny sakan'ny efijery miaraka amin'ny teboka fiatoana nomena na lehibe kokoa . Ohatra, .d-lg-none
napetraka display: none;
amin'ny roa lg
sy ny xl
efijery.
<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>
<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>
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-none
kilasy na ny iray amin'ireo .d-{sm,md,lg,xl}-none
kilasy 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-*-none
kilasy iray amin'ny .d-*-*
kilasy iray, ohatra .d-none .d-md-block .d-xl-none
dia 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 |
<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>
Ovay ny display
sandan'ny singa rehefa manao pirinty miaraka amin'ireo kilasin'ny fitaovana fampirantiana fanontana. Ahitana fanohanana ireo display
soatoavina 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.
<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>