Source

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 displaykwechivakwa 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 xskuenda kusvika 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}nokuti sm, md, lg, uye xl.

Iko kukosha kune imwe ye:

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

Iyo midhiya inobvunza inobata hupamhi hwescreen neiyo yakapihwa breakpoint kana yakakura . Semuenzaniso, .d-lg-noneseti display: none;pane ese ari maviri lguye xlskrini.

Mienzaniso

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>

Kuviga zvinhu

Kuti kukurumidza kusimudzira nharembozha, shandisa makirasi ekuratidzira anoteerera kuratidza uye kuviga zvinhu nemudziyo. Regedza kugadzira mavhezheni akasiyana esaiti imwe chete, panzvimbo pacho viga chinhu zvinoteera kune yega yega skrini saizi.

Kuvanza zvinhu zvinongoshandisa .d-nonekirasi kana imwe .d-{sm,md,lg,xl}-noneyemakirasi kune chero inopindura skrini inosiyana.

Kuti uratidze chinhu pane imwe nguva yakapihwa yesaizi yescreen, unogona kusanganisa .d-*-nonekirasi 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
hide on screens wider than lg
viga pamascreens madiki pane 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>

Ratidza mune zvakadhindwa

Shandura displaykukosha kwezvinhu paunenge uchidhinda nemakirasi edu ekushandisa. Inosanganisira tsigiro displayyetsika 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.

Sikirini Chete (Viga pane zvakadhindwa chete)
Print Only (Hide on screen only)
Viga kusvika kuhombe pachiratidziro, asi gara uchiratidzira pane zvakadhindwa 
<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>