Svetuka kune chikuru content Svetuka kuenda kudocs navigation
in English

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 xxl, 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, 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 hupamhi hwescreen neiyo yakapihwa breakpoint kana yakakura . Semuenzaniso, .d-lg-noneseti display: none;pa lg, xl, uye xxlmasikirini.

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

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