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.
Promijenite vrijednost display
svojstva 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.
Prikaži uslužne klase koje se primjenjuju na sve tačke prekida , od xs
do 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}
zasm
,md
,lg
, ixl
.
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-none
setovi i display: none;
na ekranima.lg
xl
<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>
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-none
klasu ili jednu od .d-{sm,md,lg,xl}-none
klasa za bilo koju varijaciju ekrana koja reaguje.
Da biste prikazali element samo na datom intervalu veličina ekrana, možete kombinirati jednu .d-*-none
klasu 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 |
<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>
Promijenite display
vrijednost elemenata prilikom ispisa pomoću naših uslužnih klasa print display. Uključuje podršku za iste display
vrijednosti 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.
<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>