Svojstvo prikaza

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

Na ovoj stranici

Kako radi

Promijenite vrijednost displaysvojstva s našim responzivnim klasama uslužnih programa. Namjerno podržavamo samo podskup svih mogućih vrijednosti za display. Klase se mogu kombinirati za različite efekte prema vašim potrebama.

Notacija

Klase korisnih programa za prikaz koje se primjenjuju na sve prijelomne točke , od xsdo xxl, u sebi nemaju kraticu prijelomne točke. To je zato što se te klase primjenjuju od min-width: 0;i prema gore i stoga nisu vezane medijskim upitom. Međutim, preostale prijelomne točke uključuju kraticu prijelomne točke.

Kao takve, klase su imenovane koristeći format:

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

Gdje je vrijednost jedno od:

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

Prikazane vrijednosti mogu se mijenjati promjenom $displaysvarijable i ponovnim kompajliranjem SCSS-a.

Medijski upiti utječu na širine zaslona s danom prijelomnom točkom ili većom . Na primjer, .d-lg-nonepostavlja display: none;na lg, xli xxlzaslone.

Primjeri

d-linijski

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

Skrivanje elemenata

Za brži razvoj prilagođen mobilnim uređajima koristite klase responzivnog zaslona za prikazivanje i skrivanje elemenata po uređaju. Izbjegavajte stvaranje potpuno različitih verzija iste web-lokacije, umjesto toga sakrijte elemente za svaku veličinu zaslona.

Za skrivanje elemenata jednostavno upotrijebite .d-noneklasu ili jednu od .d-{sm,md,lg,xl,xxl}-noneklasa za bilo koju varijaciju responzivnog zaslona.

Da biste prikazali element samo u određenom intervalu veličina zaslona, možete kombinirati jednu .d-*-noneklasu s .d-*-*klasom, na primjer .d-none .d-md-block .d-xl-none .d-xxl-none, sakrit će element za sve veličine zaslona osim na srednjim i velikim uređajima.

Veličina ekrana	Klasa
Skriveno na svim	`.d-none`
Skriven samo na xs	`.d-none .d-sm-block`
Skriven samo na sm	`.d-sm-none .d-md-block`
Skriven samo na md	`.d-md-none .d-lg-block`
Skriven samo na lg	`.d-lg-none .d-xl-block`
Skriveno samo na xl	`.d-xl-none .d-xxl-block`
Skriveno samo na xxl	`.d-xxl-none`
Vidljivo na svim	`.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`

hide on lg and wider screens

sakriti na zaslonima manjim od LG-a

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

Promijenite displayvrijednost elemenata prilikom ispisa s našim klasama uslužnih programa za prikaz ispisa. Uključuje podršku za iste displayvrijednosti kao i naši responzivni .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 ispisa i prikaza mogu se kombinirati.

Samo zaslon (Sakrij samo pri ispisu)

Print Only (Hide on screen only)

Sakrij do velikog na zaslonu, ali uvijek prikaži na ispisu

<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

API za pomoćne programe

Pomoćni programi za prikaz deklarirani su u našem API-ju za pomoćne programe u scss/_utilities.scss. Naučite kako koristiti API uslužnih programa.

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