Onetsani katundu
Sinthani mwachangu komanso moyenera mawonekedwe azinthu ndi zina ndi zida zathu zowonetsera. Zimaphatikizansopo zina mwazinthu zodziwika bwino, komanso zina zowonjezera pakuwongolera mawonedwe posindikiza.
Momwe zimagwirira ntchito
Sinthani mtengo display
wanyumbayo ndi makalasi athu ogwiritsa ntchito omvera. Timathandizira dala gulu laling'ono lazinthu zonse zomwe zingatheke display
. Makalasi amatha kuphatikizidwa pazotsatira zosiyanasiyana momwe mungafunire.
Kuzindikira
Onetsani makalasi ofunikira omwe amagwira ntchito ku breakpoints zonse , kuyambira xs
mpaka xl
, alibe chidule cha breakpoint mwa iwo. Izi ndichifukwa choti makalasiwo amagwiritsidwa ntchito kuchokera min-width: 0;
ndi mmwamba, motero samamangidwa ndi funso lazama media. Zotsalira zotsalira, komabe, zikuphatikiza chidule cha breakpoint.
Chifukwa chake, makalasi amatchulidwa pogwiritsa ntchito mawonekedwe:
.d-{value}
zaxs
.d-{breakpoint}-{value}
zasm
,,, ndi .md
_lg
xl
Pomwe mtengo ndi umodzi mwa:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Makhalidwe owonetsera amatha kusinthidwa mwa kusintha $displays
kusintha ndi kubwezeretsanso SCSS.
Mafunso atolankhani amakhudza kukula kwa chinsalu ndi choduka chomwe mwapatsidwa kapena chokulirapo . Mwachitsanzo, .d-lg-none
amaika display: none;
pa onse lg
ndi xl
zowonetsera.
Zitsanzo
<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>
Kubisa zinthu
Kuti muzitha kugwiritsa ntchito mafoni mwachangu, gwiritsani ntchito makalasi omvera kuti muwonetse ndi kubisa zinthu pazida. Pewani kupanga mitundu yosiyana kwambiri ya tsamba lomwelo, m'malo mwake bisani zinthu moyenera pa saizi iliyonse ya sikirini.
Kuti mubise zinthu, ingogwiritsani ntchito .d-none
kalasi kapena gulu limodzi .d-{sm,md,lg,xl}-none
pazosintha zilizonse zomvera.
Kuti muwonetse chinthu pakanthawi kochepa ka makulidwe a sikirini mutha kuphatikiza .d-*-none
kalasi imodzi ndi .d-*-*
kalasi, mwachitsanzo .d-none .d-md-block .d-xl-none
, mutha kubisa chinthucho pamasaizi onse a zenera kupatula pazida zapakati ndi zazikulu.
Kukula kwa Screen | Kalasi |
---|---|
Zobisika zonse | .d-none |
Zobisika pa xs zokha | .d-none .d-sm-block |
Zobisika pa sm yokha | .d-sm-none .d-md-block |
Zobisika pa md | .d-md-none .d-lg-block |
Zobisika pa lg | .d-lg-none .d-xl-block |
Zobisika pa xl zokha | .d-xl-none |
Zowoneka kwa onse | .d-block |
Zimawoneka pa xs zokha | .d-block .d-sm-none |
Zowoneka pa sm yokha | .d-none .d-sm-block .d-md-none |
Zowoneka pa md | .d-none .d-md-block .d-lg-none |
Zimangowoneka pa lg | .d-none .d-lg-block .d-xl-none |
Zimawoneka pa xl pokha | .d-none .d-xl-block |
<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>
Kuwonetsa mosindikiza
Sinthani display
mtengo wazinthu posindikiza ndi makalasi athu osindikizira ogwiritsira ntchito. Kuphatikizirapo chithandizo cha zinthu zomwezo display
monga zida zathu .d-*
zoyankhira.
.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
Makalasi osindikizira ndi owonetsera akhoza kuphatikizidwa.
<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>