Propietat de visualització

Commuteu de manera ràpida i sensible el valor de visualització dels components i més amb les nostres utilitats de visualització. Inclou suport per a alguns dels valors més habituals, així com alguns extres per controlar la visualització durant la impressió.

En aquesta pàgina

Com funciona

Canvieu el valor de la displaypropietat amb les nostres classes d'utilitat de visualització sensible. Admetem expressament només un subconjunt de tots els valors possibles per a display. Les classes es poden combinar per obtenir diversos efectes segons sigui necessari.

Notació

Mostra les classes d'utilitat que s'apliquen a tots els punts d' interrupció , de xsa xxl, no tenen cap abreviatura de punt d'interrupció. Això es deu al fet que aquestes classes s'apliquen des min-width: 0;i cap amunt i, per tant, no estan vinculades per una consulta de mitjans. Els punts d'interrupció restants, però, inclouen una abreviatura de punt d'interrupció.

Com a tal, les classes s'anomenen amb el format:

.d-{value}perxs
.d-{breakpoint}-{value}per a sm, md, lg, xli xxl.

On el valor és un de:

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

Els valors de visualització es poden modificar canviant la $displaysvariable i recompilant el SCSS.

Les consultes multimèdia afecten l'amplada de pantalla amb el punt d'interrupció donat o més gran . Per exemple, .d-lg-noneconfigura display: none;les pantalles lg, xl, i .xxl

Exemples

d-en línia

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

bloc d bloc d

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

Elements amagats

Per a un desenvolupament més ràpid per a mòbils, utilitzeu classes de visualització responsives per mostrar i amagar elements per dispositiu. Eviteu crear versions completament diferents del mateix lloc, en lloc d'amagar els elements de manera sensible per a cada mida de pantalla.

Per amagar elements, només cal que utilitzeu la .d-noneclasse o una de les .d-{sm,md,lg,xl,xxl}-noneclasses per a qualsevol variació de pantalla sensible.

Per mostrar un element només en un interval determinat de mides de pantalla, podeu combinar una .d-*-noneclasse amb una .d-*-*classe, per exemple .d-none .d-md-block .d-xl-none .d-xxl-none, amagarà l'element per a totes les mides de pantalla excepte en dispositius mitjans i grans.

Mida de la pantalla	Classe
Amagat a tots	`.d-none`
Amagat només en xs	`.d-none .d-sm-block`
Amagat només en sm	`.d-sm-none .d-md-block`
Amagat només a md	`.d-md-none .d-lg-block`
Amagat només a lg	`.d-lg-none .d-xl-block`
Amagat només en xl	`.d-xl-none .d-xxl-block`
Amagat només a xxl	`.d-xxl-none`
Visible a tots	`.d-block`
Visible només en xs	`.d-block .d-sm-none`
Visible només en sm	`.d-none .d-sm-block .d-md-none`
Visible només a md	`.d-none .d-md-block .d-lg-none`
Visible només a lg	`.d-none .d-lg-block .d-xl-none`
Visible només en xl	`.d-none .d-xl-block .d-xxl-none`
Visible només en xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

amagar en pantalles més petites que 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>

Mostra a la impressió

Canvieu el displayvalor dels elements quan imprimiu amb les nostres classes d'utilitat de visualització d'impressió. Inclou suport per als mateixos displayvalors que les nostres .d-*utilitats sensibles.

.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

Les classes d'impressió i visualització es poden combinar.

Només pantalla (amaga només a la impressió)

Print Only (Hide on screen only)

Amaga fins a gran a la pantalla, però sempre es mostra a la impressió

<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

Utilitats API

Les utilitats de visualització es declaren a la nostra API d'utilitats a scss/_utilities.scss. Apreneu a utilitzar l'API d'utilitats.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),