Puis-je personnaliser les points d'arrêt de Bootstrap 4 sans recompiler ?

Personnalisation des points d'arrêt de Bootstrap 4

Bootstrap 4 utilise un système de grille pour aider à positionner les éléments sur la page. Les points d'arrêt dans ce système de grille déterminent le moment où les éléments changent de disposition. Cependant, le point d'arrêt xl par défaut de 1 200 px peut ne pas convenir à certaines applications.

Les points d'arrêt de Bootstrap peuvent-ils être modifiés globalement sans recompiler les fichiers sources ?

Oui, c'est le cas. Il est possible de modifier globalement les points d'arrêt de Bootstrap sans recourir à la recompilation.

Comment remplacer les points d'arrêt de Bootstrap :

Pour remplacer les points d'arrêt par défaut de Bootstrap, vous devez procéder comme suit :

1. Définissez la variable $grid-breakpoints :

   • Définissez une nouvelle carte Sass ($grid-breakpoints) qui spécifie les points d'arrêt souhaités.

   • Par exemple :

     <code class="sass">$grid-breakpoints: (
       xs: 0,
       sm: 576px,
       md: 768px,
       lg: 992px,
       xl: 1280px
     );</code>

2. Définissez la variable $container-max-widths :

   • Définissez une nouvelle carte Sass ($container-max-widths) qui spécifie la largeur maximale des conteneurs à chaque point d'arrêt.
   • Cela garantit que les conteneurs restent dans les points d'arrêt souhaités.

3. Importer les sources Bootstrap avec remplacements :

   • Importez les sources Bootstrap après avoir défini les variables de remplacement.
   • Cela appliquera vos points d'arrêt personnalisés à l'échelle mondiale.

Exemple :

Vous trouverez ci-dessous un exemple de la façon de remplacer le point d'arrêt xl dans Bootstrap. en utilisant Sass :

<code class="sass">// Override default BT variables
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";</code>

En suivant ces étapes, vous pouvez personnaliser les points d'arrêt de Bootstrap en fonction des besoins spécifiques de votre application sans avoir à recompiler les fichiers sources.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!