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

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 xl, 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, lgi xl.

On el valor és un de:

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

Les consultes multimèdia afecten l'amplada de pantalla amb el punt d'interrupció donat o més gran . Per exemple, .d-lg-noneconjunts display: none;a tots dos lgi xlpantalles.

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 l'element 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}-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, 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`
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`

hide on screens wider than lg

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

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