Les aides à l’affichage vous permettent de contrôler l’affichage du contenu. Cela inclut la visibilité conditionnelle en fonction de la fenêtre d'affichage actuelle ou du type d'affichage de l'élément actuel.
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
Spécifiez les propriétés des éléments display. Ces classes peuvent être appliquées à tous les points d'arrêt, de xs à xl et n'ont pas de point d'arrêt spécifié.
.d-{value}pourxs.d-{breakpoint}-{value}poursm,md,lgetxl
La propriété value est l'une de :
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
Lors de la configuration d'un point de rupture spécifique pour une classe d'aide à l'affichage, il s'appliquera à toutes les largeurs d'écran de la désignation et de la liste. Par exemple, d-lg-flex s'appliquera aux écrans de taille lg et xl.
Affiche un élément basé sur le viewport. Les classes d'utilitaires Breakpoint s'appliquent toujours de bas en haut. Cela signifie que si vous avez .d-none, il s'appliquera à tous les points d'arrêt. Cependant, .d-md-none s'appliquera à md et à haut.
| Screen Size | Class |
|---|---|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-flex |
| Hidden only on sm | .d-sm-none .d-md-flex |
| Hidden only on md | .d-md-none .d-lg-flex |
| Hidden only on lg | .d-lg-none .d-xl-flex |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-flex |
| Visible only on xs | .d-flex .d-sm-none |
| Visible only on sm | .d-none .d-sm-flex .d-md-none |
| Visible only on md | .d-none .d-md-flex .d-lg-none |
| Visible only on lg | .d-none .d-lg-flex .d-xl-none |
| Visible only on xl | .d-none .d-xl-flex |
De plus, vous pouvez également afficher un élément basé sur le viewport actuel en utilisant les classes d'aide latérale d'affichage. Ces classes peuvent être appliquées en utilisant le format suivant hidden-{breakpoint}-{condition}
La condition __ applique la base de classe sur :
only- masque l'élément uniquement surxspar les points d'arrêtxland-down- masque l'élément sur le point d'arrêt spécifié et en-dessous desmà travers les points d'arrêtlgand-up- masque l'élément sur le point d'arrêt spécifié et au-dessussmà travers les points d'arrêtlg
De plus, les types de média peuvent être ciblés en utilisant la condition only. hidden-screen-only ethidden-print-only sont actuellement pris en charge.
Vous pouvez également modifier la propriété d'affichage lors de l'impression.
.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'utilitaires d'impression peuvent également être combinées avec des utilitaires d'affichage sans impression.
Use the d-sr utility classes to conditionally hide content on all devices except screen readers.
d-sr-onlyvisually hides elements but will still announce to screen readers.d-sr-only-focusablevisually hides an element until it is focused. This is useful when implementing skip links.
Prêt pour plus ? Continuez la lecture avec :