Source

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 displaywanyumbayo 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 xsmpaka 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}za sm,,, ndi . md_lgxl

Pomwe mtengo ndi umodzi mwa:

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

Mafunso atolankhani amakhudza kukula kwa chinsalu ndi malo opumira omwe aperekedwa kapena okulirapo . Mwachitsanzo, .d-lg-noneamaika display: none;pa onse lgndi xlzowonetsera.

Zitsanzo

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>

Kubisa zinthu

Kuti muzitha kugwiritsa ntchito mafoni mwachangu, gwiritsani ntchito makalasi omvera kuti muwonetse ndi kubisa zinthu pazida. Pewani kupanga mitundu yosiyana kwambiri yatsamba lomwelo, m'malo mwake bisani zinthu moyenera pakukula kwa sikirini iliyonse.

Kuti mubise zinthu, ingogwiritsani ntchito .d-nonekalasi kapena gulu limodzi .d-{sm,md,lg,xl}-nonepazosintha zilizonse zomvera.

Kuti muwonetse chinthu pakanthawi kochepa ka makulidwe a sikirini mutha kuphatikiza .d-*-nonekalasi 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`

hide on screens wider than lg

bisani pazithunzi zazing'ono kuposa 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>

Kuwonetsa mosindikiza

Sinthani displaymtengo wazinthu posindikiza ndi makalasi athu osindikizira ogwiritsira ntchito. Kuphatikizirapo chithandizo cha zinthu zomwezo displaymonga 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.

Screen Only (Bisani pazosindikiza zokha)

Print Only (Hide on screen only)

Bisani mpaka zazikulu pazenera, koma nthawi zonse ziwonetseni pazosindikiza

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