Ratidza zvinhu
Kurumidza uye nekudaira shandura kukosha kwekuratidzira kwezvikamu uye nezvimwe nezvishandiso zvedu zvekuratidzira. Inosanganisira tsigiro yehumwe hunhu hwakajairika, pamwe nezvimwe zvekuwedzera pakudzora chiratidziro paunenge uchidhinda.
Zvinoshanda sei
Shandura kukosha display
kwechivakwa nemakirasi edu anoteerera ekushandisa. Isu tinotsigira nemaune chete chikamu chidiki chezvose zvinogoneka zvakakosha zve display
. Makirasi anogona kusanganiswa kune akasiyana mhedzisiro sezvaunoda.
Notation
Ratidza utility makirasi anoshanda kune ese mabreakpoints , kubva xs
kuenda kune xl
, haana breakpoint pfupiso mazviri. Izvi zvinodaro nekuti iwo makirasi anoiswa kubva min-width: 0;
nekukwira, uye nekudaro haana kusungwa nemubvunzo wenhau. Iwo asara mabreakpoints, zvisinei, anosanganisira chidimbu chebreakpoint.
Saka nekudaro, makirasi anopihwa mazita achishandisa iyo fomati:
.d-{value}
nokutixs
.d-{breakpoint}-{value}
nokutism
,md
,lg
, uyexl
.
Iko kukosha kune imwe ye:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Iwo maitiro ekuratidzira anogona kuchinjwa nekuchinja $displays
shanduko uye kudzorera iyo SCSS.
Mivhunzo yenhau inokanganisa hupamhi hwescreen neiyo yakapihwa breakpoint kana yakakura . Semuenzaniso, .d-lg-none
seti display: none;
pane ese ari maviri lg
uye xl
skrini.
Mienzaniso
<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>
Kuviga zvinhu
Kuti kukurumidza kusimudzira nharembozha, shandisa makirasi ekuratidzira ekuratidza uye kuviga zvinhu nemudziyo. Regedza kugadzira mavhezheni akasiyana esaiti imwe chete, panzvimbo pacho viga zvinhu zvinoteera kune yega yega skrini saizi.
Kuvanza zvinhu zvinongoshandisa .d-none
kirasi kana imwe .d-{sm,md,lg,xl}-none
yemakirasi kune chero inopindura skrini inosiyana.
Kuti uratidze chinhu pane imwe nguva yakapihwa yesaizi yescreen, unogona kusanganisa .d-*-none
kirasi imwe .d-*-*
nekirasi, semuenzaniso .d-none .d-md-block .d-xl-none
, inovanza chinhu kune ese masikirwo emasikirwo kunze kwepakati nepakati michina.
Screen Size | Kirasi |
---|---|
Zvakavanzwa pane zvose | .d-none |
Zvakavanzwa pa xs chete | .d-none .d-sm-block |
Zvakavigwa pa sm chete | .d-sm-none .d-md-block |
Zvakavigwa chete pa md | .d-md-none .d-lg-block |
Zvakavigwa palg chete | .d-lg-none .d-xl-block |
Zvakavigwa pa xl chete | .d-xl-none |
Inoonekwa kune vese | .d-block |
Inoonekwa pa xs chete | .d-block .d-sm-none |
Inoonekwa pa sm chete | .d-none .d-sm-block .d-md-none |
Inoonekwa chete pa md | .d-none .d-md-block .d-lg-none |
Inoonekwa chete palg | .d-none .d-lg-block .d-xl-none |
Inoonekwa pa xl chete | .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>
Ratidza mune zvakadhindwa
Shandura display
kukosha kwezvinhu paunenge uchidhinda nemakirasi edu ekushandisa. Inosanganisira tsigiro display
yetsika dzakafanana nedzedu dzinoteerera .d-*
.
.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
Makirasi ekudhinda uye ekuratidza anogona kusanganiswa.
<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>