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

Makhalidwe owonetsera amatha kusinthidwa mwa kusintha $displayskusintha ndi kubwezeretsanso SCSS.

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
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 ya tsamba lomwelo, m'malo mwake bisani zinthu moyenera pa saizi iliyonse ya sikirini.

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 lg and wider screens
bisani pazithunzi zazing'ono kuposa 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>

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>