Points d'arrêt

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 taille de fenêtre ou d'appareil particulière.

• Utilisez les requêtes multimédias pour structurer votre CSS par point d'arrêt. Les requêtes multimédias sont une fonctionnalité de 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-widthdans nos requêtes mé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 des styles pour ajuster cette conception aux appareils plus grands. Cela optimise votre CSS, améliore le temps de rendu et offre une excellente expérience à vos visiteurs.

Points d'arrêt disponibles

Bootstrap comprend 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.

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 de notre _variables.scssfeuille de style.

$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 exemple:

// 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, .02pxles soustraient et les utilisent comme max-widthvaleurs. Par exemple:

// 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

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 @include media-breakpoint-only(md) { ... }, cela se traduira par :

@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) { ... }