Source

Vis egenskab

Skift hurtigt og responsivt visningsværdien af ​​komponenter og mere med vores skærmværktøjer. Inkluderer understøttelse af nogle af de mere almindelige værdier, samt nogle ekstrafunktioner til styring af display ved udskrivning.

Hvordan det virker

Skift værdien af display​​ejendommen med vores responsive display utility-klasser. Vi understøtter med vilje kun en delmængde af alle mulige værdier for display. Klasser kan kombineres til forskellige effekter efter behov.

Notation

Vis hjælpeklasser, der gælder for alle breakpoints , fra xstil xl, har ingen breakpoint-forkortelse i sig. Dette skyldes, at disse klasser anvendes fra min-width: 0;og op, og derfor ikke er bundet af en medieforespørgsel. De resterende brudpunkter inkluderer dog en brudpunktforkortelse.

Som sådan er klasserne navngivet ved hjælp af formatet:

  • .d-{value}tilxs
  • .d-{breakpoint}-{value}for sm, md, lg, og xl.

Hvor værdien er en af:

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

Medieforespørgslerne påvirker skærmbredder med det givne brudpunkt eller større . For eksempel .d-lg-nonesæt display: none;på både lgog xlskærme.

Eksempler

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>

Skjul elementer

For hurtigere mobilvenlig udvikling skal du bruge responsive displayklasser til at vise og skjule elementer efter enhed. Undgå at oprette helt forskellige versioner af det samme websted, skjul i stedet element responsivt for hver skærmstørrelse.

For at skjule elementer skal du blot bruge .d-noneklassen eller en af .d-{sm,md,lg,xl}-none​​klasserne til enhver responsiv skærmvariation.

For kun at vise et element på et givet interval af skærmstørrelser kan du kombinere en .d-*-noneklasse med en .d-*-*klasse, for eksempel .d-none .d-md-block .d-xl-noneskjuler elementet for alle skærmstørrelser undtagen på mellemstore og store enheder.

Skærmstørrelse Klasse
Skjult på alle .d-none
Skjult kun på xs .d-none .d-sm-block
Skjult kun på sm .d-sm-none .d-md-block
Skjult kun på md .d-md-none .d-lg-block
Skjult kun på lg .d-lg-none .d-xl-block
Skjult kun på xl .d-xl-none
Synlig på alle .d-block
Kun synlig på xs .d-block .d-sm-none
Kan kun ses på sm .d-none .d-sm-block .d-md-none
Kun synlig på md .d-none .d-md-block .d-lg-none
Kan kun ses på lg .d-none .d-lg-block .d-xl-none
Kan kun ses på xl .d-none .d-xl-block
hide on screens wider than lg
skjul på skærme mindre end 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>

Vises på tryk

Skift displayværdien af ​​elementer, når du udskriver med vores udskriftsvisningsværktøjsklasser. Inkluderer støtte til de samme displayværdier som vores responsive .d-*hjælpeprogrammer.

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

Tryk- og displayklasserne kan kombineres.

Kun skærm (Skjul kun på print)
Print Only (Hide on screen only)
Skjul op til stor på skærmen, men vis altid på print 
<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>