Afficher la propriété
Basculez rapidement et de manière réactive la valeur d'affichage des composants et plus encore avec nos utilitaires d'affichage. Inclut la prise en charge de certaines des valeurs les plus courantes, ainsi que des extras pour contrôler l'affichage lors de l'impression.
Comment ça fonctionne
Modifiez la valeur de la display
propriété avec nos classes d'utilitaires d'affichage réactifs. Nous ne prenons volontairement en charge qu'un sous-ensemble de toutes les valeurs possibles pour display
. Les classes peuvent être combinées pour différents effets selon vos besoins.
Notation
Les classes d'utilitaires d'affichage qui s'appliquent à tous les points d' arrêt, de xs
à xxl
, ne contiennent aucune abréviation de point d'arrêt. En effet, ces classes sont appliquées de min-width: 0;
haut en bas et ne sont donc pas liées par une requête multimédia. Cependant, les points d'arrêt restants incluent une abréviation de point d'arrêt.
Ainsi, les classes sont nommées au format :
.d-{value}
pourxs
.d-{breakpoint}-{value}
poursm
,md
,lg
,xl
, etxxl
.
Où la valeur est l'une des suivantes :
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Les valeurs d'affichage peuvent être modifiées en modifiant la $displays
variable et en recompilant le SCSS.
Les requêtes multimédias affectent les largeurs d'écran avec le point d'arrêt donné ou supérieur . Par exemple, .d-lg-none
définit display: none;
sur les écrans lg
, xl
, et xxl
.
Exemples
<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>
<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>
Cacher des éléments
Pour un développement plus rapide et adapté aux mobiles, utilisez des classes d'affichage réactives pour afficher et masquer les éléments par appareil. Évitez de créer des versions entièrement différentes du même site, mais masquez plutôt les éléments de manière réactive pour chaque taille d'écran.
Pour masquer des éléments, utilisez simplement la .d-none
classe ou l'une des .d-{sm,md,lg,xl,xxl}-none
classes pour toute variation d'écran réactif.
Pour afficher un élément uniquement sur un intervalle donné de tailles d'écran, vous pouvez combiner une .d-*-none
classe avec une .d-*-*
classe, par exemple .d-none .d-md-block .d-xl-none .d-xxl-none
masquera l'élément pour toutes les tailles d'écran sauf sur les appareils moyens et grands.
Taille de l'écran | Classe |
---|---|
Caché sur tout | .d-none |
Masqué uniquement sur xs | .d-none .d-sm-block |
Masqué uniquement sur sm | .d-sm-none .d-md-block |
Masqué uniquement sur md | .d-md-none .d-lg-block |
Masqué uniquement sur lg | .d-lg-none .d-xl-block |
Masqué uniquement sur xl | .d-xl-none .d-xxl-block |
Masqué uniquement sur xxl | .d-xxl-none |
Visible sur tous | .d-block |
Visible uniquement sur xs | .d-block .d-sm-none |
Visible uniquement sur sm | .d-none .d-sm-block .d-md-none |
Visible uniquement sur md | .d-none .d-md-block .d-lg-none |
Visible uniquement sur lg | .d-none .d-lg-block .d-xl-none |
Visible uniquement sur xl | .d-none .d-xl-block .d-xxl-none |
Visible uniquement sur xxl | .d-none .d-xxl-block |
<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>
Afficher à l'impression
Modifiez la display
valeur des éléments lors de l'impression avec nos classes utilitaires d'affichage d'impression. Inclut la prise en charge des mêmes display
valeurs que nos .d-*
utilitaires réactifs.
.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'impression et d'affichage peuvent être combinées.
<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
API utilitaires
Les utilitaires d'affichage sont déclarés dans notre API utilitaires au format scss/_utilities.scss
. Apprenez à utiliser l'API des utilitaires.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),