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.

På denne side

Hvordan det virker

Skift værdien af displayejendommen 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 xxl, 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, xlog xxl.

Hvor værdien er en af:

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

Visningsværdierne kan ændres ved at ændre $displaysvariablen og genkompilere SCSS.

Medieforespørgslerne påvirker skærmbredder med det givne brudpunkt eller større . For eksempel .d-lg-noneindstiller display: none;til lg, xl, og xxlskærme.

Eksempler

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 elementer responsivt for hver skærmstørrelse.

For at skjule elementer skal du blot bruge .d-noneklassen eller en af .d-{sm,md,lg,xl,xxl}-noneklasserne 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-none .d-xxl-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 .d-xxl-block`
Skjult kun på xxl	`.d-xxl-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 .d-xxl-none`
Kun synlig på xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

skjul på skærme mindre end lg

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

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

Sass

Hjælpeprogrammer API

Visningsværktøjer er deklareret i vores hjælpeprogrammer API i scss/_utilities.scss. Lær, hvordan du bruger utilities 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
    ),