Points d'arrêt
Les points d'arrêt sont des largeurs personnalisables qui déterminent le comportement de votre mise en page réactive sur les tailles d'appareil ou de fenêtre d'affichage dans Bootstrap.
Concepts de base
-
Les points d'arrêt sont les éléments constitutifs de la conception réactive. Utilisez-les pour contrôler quand votre mise en page peut être adaptée à une fenêtre d'affichage ou à une taille d'appareil particulière.
-
Utilisez des requêtes multimédias pour structurer votre CSS par point d'arrêt. Les requêtes multimédias sont une fonctionnalité CSS qui vous permet d'appliquer des styles de manière conditionnelle en fonction d'un ensemble de paramètres de navigateur et de système d'exploitation. Nous utilisons le plus souvent
min-width
dans nos requêtes multimédias. -
Le mobile d'abord, la conception réactive est l'objectif. Le CSS de Bootstrap vise à appliquer le strict minimum de styles pour faire fonctionner une mise en page au plus petit point d'arrêt, puis à superposer les styles pour ajuster cette conception pour les gros appareils. Cela optimise votre CSS, améliore le temps de rendu et offre une excellente expérience à vos visiteurs.
Points d'arrêt disponibles
Bootstrap inclut six points d'arrêt par défaut, parfois appelés niveaux de grille, pour une construction réactive. Ces points d'arrêt peuvent être personnalisés si vous utilisez nos fichiers source Sass.
Point d'arrêt | Infix de classe | Dimensions |
---|---|---|
X-Small | None | <576px |
Small | sm |
≥576px |
Medium | md |
≥768px |
Large | lg |
≥992px |
Extra large | xl |
≥1200px |
Extra extra large | xxl |
≥1400px |
Chaque point d'arrêt a été choisi pour contenir confortablement des conteneurs dont la largeur est un multiple de 12. Les points d'arrêt sont également représentatifs d'un sous-ensemble de tailles d'appareils et de dimensions de fenêtres d'affichage courantes. Ils ne ciblent pas spécifiquement chaque cas d'utilisation ou appareil. Au lieu de cela, les gammes fournissent une base solide et cohérente sur laquelle s'appuyer pour presque tous les appareils.
Ces points d'arrêt sont personnalisables via Sass. Vous les trouverez dans une carte Sass dans notre feuille de style _variables.scss
.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Pour plus d'informations et d'exemples sur la façon de modifier nos cartes et variables Sass, veuillez vous référer à la section Sass de la documentation Grid .
Requêtes médias
Étant donné que Bootstrap est développé pour être d'abord mobile, nous utilisons une poignée de requêtes multimédias pour créer des points d'arrêt sensibles pour nos mises en page et nos interfaces. Ces points d'arrêt sont principalement basés sur des largeurs de fenêtre minimales et nous permettent d'agrandir les éléments au fur et à mesure que la fenêtre change.
Min-Largeur
Bootstrap utilise principalement les plages de requêtes multimédias suivantes (ou points d'arrêt) dans nos fichiers source Sass pour notre mise en page, notre système de grille et nos composants.
// Source mixins
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }
// Usage
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
Ces mixins Sass se traduisent dans notre CSS compilé en utilisant les valeurs déclarées dans nos variables Sass. Par example:
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
Largeur maximale
Nous utilisons occasionnellement des requêtes média qui vont dans l'autre sens (la taille d'écran donnée ou plus petite ) :
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
Ces mixins prennent ces points d'arrêt déclarés, en soustraient .02px
et les utilisent comme nos valeurs max-width
. Par example:
// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
min-
et < code>max- préfixes et fenêtres avec des largeurs fractionnaires (ce qui peut se produire dans certaines conditions sur les appareils à haute résolution, par exemple) en utilisant des valeurs avec une plus grande précision.
Point d'arrêt unique
Il existe également des requêtes multimédias et des mixins pour cibler un seul segment de tailles d'écran en utilisant les largeurs minimale et maximale des points d'arrêt.
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }
Par exemple, le @include media-breakpoint-only(md) { ... }
donnera :
@media (min-width: 768px) and (max-width: 991.98px) { ... }
Entre les points d'arrêt
De même, les requêtes multimédias peuvent s'étendre sur plusieurs largeurs de point d'arrêt :
@include media-breakpoint-between(md, xl) { ... }
Ce qui se traduit par :
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }