Gå til hovedinnhold Hopp til dokumentnavigering
in English

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.

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;lg, xl, og xxlskjermer.

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-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
skjul 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
    ),