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.

Pa peji ino

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 xxl, haana breakpoint pfupiso mazviri. Izvi zvinodaro nekuti iwo makirasi anoshandiswa 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, xluye xxl.

Iko kukosha kune imwe ye:

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

Iwo maitiro ekuratidzira anogona kuchinjwa nekuchinja $displaysshanduko uye kudzorera iyo SCSS.

Mivhunzo yenhau inokanganisa upamhi hwescreen neiyo yakapihwa breakpoint kana yakakura . Semuenzaniso, .d-lg-noneseti display: none;pa lg, xl, uye xxlmasikirini.

Mienzaniso

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 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-nonekirasi kana imwe .d-{sm,md,lg,xl,xxl}-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 .d-xxl-none, inovanza chinhu kune ese masikirwo emasikirwo kunze kwepakati nepakati michina.

Sikirini saizi	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 .d-xxl-block`
Zvakavanzwa pa xxl chete	`.d-xxl-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 .d-xxl-none`
Inoonekwa pa xxl chete	`.d-none .d-xxl-block`

hide on lg and wider screens

viga pamascreens madiki pane 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>

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-grid
.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 zvakakura pachiratidziri, 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>

Sass

Purogiramu inonzi Utilities

Zvishandiso zvekuratidzira zvinoziviswa mune zvatinoshandisa API mu scss/_utilities.scss. Dzidza mashandisiro ezvishandiso API.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),