Passer au contenu principal Passer à la navigation dans les documents
Check
in English

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 displayproprié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}pour sm, md, lg, xlet xxl.

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 changeant les displayvaleurs définies dans $utilitieset 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-nonedéfinit display: none;sur les écrans lg, xlet .xxl

Exemples

d-en ligne
d-en ligne
html
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
d-bloc d-bloc
html
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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-noneclasse ou l'une des .d-{sm,md,lg,xl,xxl}-noneclasses 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-*-noneclasse avec une .d-*-*classe, par exemple .d-none .d-md-block .d-xl-none .d-xxl-nonemasquera l'élément pour toutes les tailles d'écran, sauf sur les appareils moyens et grands.

Taille de l'écran Classer
Caché sur tout .d-none
Masqué uniquement sur xs .d-none .d-sm-block
Caché uniquement sur sm .d-sm-none .d-md-block
Caché uniquement sur md .d-md-none .d-lg-block
Caché uniquement sur LG .d-lg-none .d-xl-block
Masqué uniquement sur xl .d-xl-none
Masqué uniquement sur xxl .d-xxl-none .d-xxl-block
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
masquer sur les écrans lg et plus larges
cacher sur les écrans plus petits que lg
html
<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 displayvaleur des éléments lors de l'impression avec nos classes utilitaires d'affichage d'impression. Inclut la prise en charge des mêmes displayvaleurs 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.

Écran uniquement (Masquer à l'impression uniquement)
Imprimer uniquement (Masquer à l'écran uniquement)
Masquer jusqu'à grand à l'écran, mais toujours afficher à l'impression
html
<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>

Toupet

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