Vis eiendom

Veksle raskt og responsivt visningsverdien til komponenter og mer med våre skjermverktøy. Inkluderer støtte for noen av de mer vanlige verdiene, samt noen tilleggsfunksjoner for å kontrollere displayet ved utskrift.

På denne siden

Hvordan det fungerer

Endre verdien på displayeiendommen med våre responsive display-verktøyklasser. Vi støtter med vilje bare en delmengde av alle mulige verdier for display. Klassene kan kombineres for ulike effekter etter behov.

Notasjon

Vis verktøyklasser som gjelder for alle bruddpunkter , fra xstil xxl, har ingen bruddpunktforkortelse i seg. Dette er fordi disse klassene brukes fra min-width: 0;og oppover, og dermed ikke er bundet av en mediespørring. De resterende bruddpunktene inkluderer imidlertid en bruddpunktforkortelse.

Som sådan er klassene navngitt ved å bruke formatet:

.d-{value}tilxs
.d-{breakpoint}-{value}for sm, md, lg, xlog xxl.

Hvor verdien er en av:

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

Visningsverdiene kan endres ved å endre $displaysvariabelen og rekompilere SCSS.

Mediespørringene påvirker skjermbredder med det gitte bruddpunktet eller større . For eksempel .d-lg-nonesetter display: none;på lg, xl, og xxlskjermer.

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

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

Skjuler elementer

For raskere mobilvennlig utvikling, bruk responsive skjermklasser for å vise og skjule elementer etter enhet. Unngå å lage helt forskjellige versjoner av det samme nettstedet, skjul i stedet elementer responsivt for hver skjermstørrelse.

For å skjule elementer, bruk bare .d-noneklassen eller en av .d-{sm,md,lg,xl,xxl}-noneklassene for en hvilken som helst responsiv skjermvariasjon.

For å vise et element kun på et gitt intervall med skjermstørrelser kan du kombinere en .d-*-noneklasse med en .d-*-*klasse, for eksempel .d-none .d-md-block .d-xl-none .d-xxl-nonevil elementet skjules for alle skjermstørrelser bortsett fra på mellomstore og store enheter.

Skjerm størrelse	Klasse
Skjult på alle	`.d-none`
Skjult bare på xs	`.d-none .d-sm-block`
Skjult kun på sm	`.d-sm-none .d-md-block`
Skjult bare 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 bare på xxl	`.d-xxl-none`
Synlig på alle	`.d-block`
Bare synlig på xs	`.d-block .d-sm-none`
Syns kun på sm	`.d-none .d-sm-block .d-md-none`
Synlig kun på md	`.d-none .d-md-block .d-lg-none`
Synlig kun på lg	`.d-none .d-lg-block .d-xl-none`
Kun synlig på xl	`.d-none .d-xl-block .d-xxl-none`
Bare synlig på xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

gjemme seg på skjermer mindre enn 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å trykk

Endre displayverdien på elementer når du skriver ut med våre utskriftsvisningsverktøyklasser. Inkluderer støtte for de samme displayverdiene som våre responsive .d-*verktøy.

.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

Trykk- og visningsklassene kan kombineres.

Bare skjerm (kun skjul på utskrift)

Print Only (Hide on screen only)

Skjul opp til stor på skjermen, men vis alltid på trykk

<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

Visningsverktøy er deklarert i vår verktøy-API i scss/_utilities.scss. Lær hvordan du bruker 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
    ),