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.

Na ovoj stranici

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 xxl, 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, xl, i xxl.

Gdje je vrijednost jedna od:

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

Prikazane vrijednosti se mogu mijenjati promjenom displayvrijednosti definiranih u $utilitiesSCSS-u i ponovnom kompajliranju.

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

Primjeri

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-blok d-blok

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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 elemente 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,xxl}-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 .d-xxl-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`
Skriveno samo na xxl	`.d-xxl-none .d-xxl-block`
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 .d-xxl-none`
Vidljivo samo na xxl	`.d-none .d-xxl-block`

sakriti na LG i širim ekranima

sakriti na ekranima manjim od lg

html

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

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-grid
.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)

Samo štampa (sakrij samo na ekranu)

Sakrijte do većeg na ekranu, ali uvijek prikažite na štampi

html

<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

Utilities API

Uslužni programi za prikaz deklarisani su u našem API-ju uslužnih programa u scss/_utilities.scss. Naučite kako koristiti uslužni 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
    ),