Aperçu

Composants et options pour la mise en page de votre projet Bootstrap, y compris les conteneurs d'emballage, un système de grille puissant, un objet multimédia flexible et des classes utilitaires réactives.

Conteneurs

Les conteneurs sont l'élément de mise en page le plus basique dans Bootstrap et sont nécessaires lors de l'utilisation de notre système de grille par défaut . Les conteneurs sont utilisés pour contenir, remplir et (parfois) centrer le contenu qu'ils contiennent. Bien que les conteneurs puissent être imbriqués, la plupart des mises en page ne nécessitent pas de conteneur imbriqué.

Bootstrap est livré avec trois conteneurs différents :

• .container, qui définit un max-widthà chaque point d'arrêt réactif
• .container-fluid, qui est width: 100%à tous les points d'arrêt
• .container-{breakpoint}, c'est- à-dire width: 100%jusqu'au point d'arrêt spécifié

Le tableau ci-dessous illustre comment chaque conteneur se max-widthcompare à l'original .containeret .container-fluidà travers chaque point d'arrêt.

Voyez-les en action et comparez-les dans notre exemple Grid .

Tout en un

Notre .containerclasse par défaut est un conteneur réactif à largeur fixe, c'est-à-dire ses max-widthmodifications à chaque point d'arrêt.

<div class="container">
  <!-- Content here -->
</div>

Fluide

À utiliser .container-fluidpour un conteneur pleine largeur, couvrant toute la largeur de la fenêtre.

<div class="container-fluid">
  ...
</div>

Sensible

Les conteneurs réactifs sont nouveaux dans Bootstrap v4.4. Ils vous permettent de spécifier une classe large de 100 % jusqu'à ce que le point d'arrêt spécifié soit atteint, après quoi nous appliquons max-widths pour chacun des points d'arrêt supérieurs. Par exemple, .container-smest large de 100 % pour commencer jusqu'à ce que le point d' smarrêt soit atteint, où il augmentera avec md, lget xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Points d'arrêt réactifs

É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.

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.

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

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Puisque nous écrivons notre CSS source en Sass, toutes nos requêtes média sont disponibles via les mixins Sass :

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

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

Nous utilisons occasionnellement des requêtes média qui vont dans l'autre sens (la taille d'écran donnée ou plus petite ) :

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

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Encore une fois, ces media queries sont également disponibles via les mixins Sass :

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

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.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Ces requêtes multimédias sont également disponibles via les mixins Sass :

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

De même, les requêtes multimédias peuvent s'étendre sur plusieurs largeurs de point d'arrêt :

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Le mixin Sass pour cibler la même plage de taille d'écran serait :

@include media-breakpoint-between(md, xl) { ... }

Indice Z

Plusieurs composants Bootstrap utilisent z-index, la propriété CSS qui permet de contrôler la mise en page en fournissant un troisième axe pour organiser le contenu. Nous utilisons une échelle d'index z par défaut dans Bootstrap qui a été conçue pour superposer correctement la navigation, les info-bulles et les popovers, les modaux, etc.

Ces valeurs plus élevées commencent à un nombre arbitraire, suffisamment élevé et spécifique pour idéalement éviter les conflits. Nous avons besoin d'un ensemble standard de ceux-ci dans nos composants en couches - info-bulles, popovers, barres de navigation, listes déroulantes, modaux - afin que nous puissions être raisonnablement cohérents dans les comportements. Il n'y a aucune raison pour laquelle nous n'aurions pas pu utiliser 100+ ou 500+.

Nous n'encourageons pas la personnalisation de ces valeurs individuelles ; si vous en changez un, vous devrez probablement tous les changer.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Pour gérer les bordures qui se chevauchent dans les composants (par exemple, les boutons et les entrées dans les groupes d'entrées), nous utilisons des z-indexvaleurs faibles à un chiffre de 1, 2et 3pour les états par défaut, survolé et actif. Sur hover/focus/active, nous apportons un élément particulier au premier plan avec une z-indexvaleur plus élevée pour montrer leur bordure sur les éléments frères.