in English

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.

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

Gdje je vrijednost jedno od:

  • none
  • inline
  • inline-block
  • block
  • 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 oba lgi xlekranima.

Primjeri

d-linijski
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}-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, 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
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
sakriti na lg i širim zaslonima
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-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)
Samo ispis (Sakrij samo na ekranu)
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>