Bootstrap Utilities Responsive
Bootstrap fournit des classes d'aide afin d'atteindre le développement pour les appareils mobiles plus rapides convivial. Ces requêtes peuvent combiner des équipements grand, les petites et moyennes entreprises à travers les médias, pour réaliser le contenu de l'appareil pour afficher ou masquer.
L'utilisation de ces outils doivent être prudents pour éviter de créer un complètement différentes versions d'un même site.utilitaire Responsive est actuellement disponible uniquement dans les blocs etlacommutation de table.
| Ultra-petit écran Téléphone (<768px) | petit écran Tablet (≥768px) | Screen Medium Desktop (≥992px) | Le grand écran Desktop (≥1200px) | |
|---|---|---|---|---|
| .visible-XS- * | visible | cacher | cacher | cacher |
| .visible-sm * | cacher | visible | cacher | cacher |
| .visible-MD- * | cacher | cacher | visible | cacher |
| .visible-lg- * | cacher | cacher | cacher | visible |
| -xs .hidden | cacher | visible | visible | visible |
| .hidden-sm | visible | cacher | visible | visible |
| .hidden-md | visible | visible | cacher | visible |
| .hidden-lg | visible | visible | visible | cacher |
De v3.2.0 libération, en forme de .visible - * - * taille de la classe pour chaque écran dispose de trois variantes, chacune pour une liste de propriétés d'affichage CSS différente est la suivante:
| Clusters | CSS display |
|---|---|
| .visible - * - bloc | display: block; |
| .visible - * - en ligne | display: inline; |
| .visible - * - inline-block | display: inline-block; |
Par conséquent, l'ultra-petit écran (xs), par exemple, .visible disponible - * - * classes sont: .Visible-xs-bloc, .Visible-xs-ligne et .Visible-xs-inline-block.
.Visible-xs, .visible-sm, .visible-md et les classes .Visible-lg existent également. Mais à partir de la version à partir de v3.2.0 est plus recommandée. Dans des cas particuliers <table> éléments liés à l'extérieur, ils .Visible - * - même bloc.
Imprimer la catégorie
Le tableau suivant présente la catégorie d'impression. Utilisez-les pour changer le contenu d'impression.
| classe | Navigateur | imprimeur |
|---|---|---|
| .visible-print-bloc .visible-print-ligne .visible-print-inline-block | cacher | visible |
| .hidden-print | visible | cacher |
Exemples
L'exemple suivant illustre l'utilisation de la liste ci-dessus classe d'aide. Ajuster la taille de la fenêtre du navigateur, ou charger des cas sur des appareils différents, le test réactif classe utilitaire.
Exemples
Essayez »
Les résultats sont les suivants:
Checkmark (✔) indique que l'élément est visible dans la fenêtre courante.