Propietat de visualització

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 alterar canviant els displayvalors definits $utilitiesi recompilant l'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

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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.

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

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