Source

Prikaži svojstvo

Brzo i brzo mijenjajte vrijednost prikaza komponenti i više s našim uslužnim programima za prikaz. Uključuje podršku za neke uobičajene vrijednosti, kao i neke dodatke za kontrolu prikaza prilikom ispisa.

Kako radi

Promijenite vrijednost displaysvojstva pomoću naših responzivnih uslužnih klasa prikaza. Namjerno podržavamo samo podskup svih mogućih vrijednosti za display. Klase se mogu kombinovati za različite efekte po potrebi.

Notacija

Prikaži uslužne klase koje se primjenjuju na sve tačke prekida , od xsdo xl, nemaju skraćenicu za tačku prekida. To je zato što se te klase primjenjuju od min-width: 0;i naviše i stoga nisu vezane medijskim upitom. Preostale tačke prekida, međutim, uključuju skraćenicu tačke prekida.

Kao takve, klase se imenuju koristeći format:

  • .d-{value}zaxs
  • .d-{breakpoint}-{value}za sm, md, lg, i xl.

Gdje je vrijednost jedna od:

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

Medijski upiti utiču na širinu ekrana sa datom tačkom prekida ili većom . Na primjer, .d-lg-nonesetovi i display: none;na ekranima.lgxl

Primjeri

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

Sakrivanje elemenata

Za brži razvoj prilagođen mobilnim uređajima, koristite responzivne klase prikaza za prikazivanje i skrivanje elemenata po uređaju. Izbjegavajte kreiranje potpuno različitih verzija iste stranice, umjesto toga sakrijte element na odgovarajući način za svaku veličinu ekrana.

Da biste sakrili elemente, jednostavno koristite .d-noneklasu ili jednu od .d-{sm,md,lg,xl}-noneklasa za bilo koju varijaciju ekrana koja reaguje.

Da biste prikazali element samo na datom intervalu veličina ekrana, možete kombinirati jednu .d-*-noneklasu sa .d-*-*klasom, na primjer .d-none .d-md-block .d-xl-none, sakriti ćete element za sve veličine ekrana osim na srednjim i velikim uređajima.

Veličina ekrana Klasa
Skriveno na svima .d-none
Skriven samo na xs .d-none .d-sm-block
Skriven samo na sm .d-sm-none .d-md-block
Skriveno samo na md .d-md-none .d-lg-block
Skriven samo na lg .d-lg-none .d-xl-block
Skriven samo na xl .d-xl-none
Vidljivo na svima .d-block
Vidljivo samo na xs .d-block .d-sm-none
Vidljivo samo na sm .d-none .d-sm-block .d-md-none
Vidljivo samo na md .d-none .d-md-block .d-lg-none
Vidljivo samo na lg .d-none .d-lg-block .d-xl-none
Vidljivo samo na xl .d-none .d-xl-block
hide on screens wider than lg
sakriti na ekranima manjim od 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>

Prikaz u štampi

Promijenite displayvrijednost elemenata prilikom ispisa pomoću naših uslužnih klasa print display. Uključuje podršku za iste displayvrijednosti kao i naši prilagodljivi .d-*uslužni programi.

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

Klase štampanja i prikaza mogu se kombinovati.

Samo ekran (sakrij samo na štampanju)
Print Only (Hide on screen only)
Sakrijte do većeg na ekranu, ali uvijek prikažite na štampi 
<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>