Bootstrap Grid: Master les propriétés Flexbox les plus utiles

Cet article explore le système de grille de Bootstrap, construit sur Flexbox, pour créer des dispositions réactives. Nous couvrirons les classes clés et les concepts Flexbox pour créer des conceptions efficaces et adaptables.

Concepts clés:

• Bootstrap 4 exploite Flexbox pour sa grille, simplifiant la création de disposition pour différentes tailles d'écran.
• Classes de base: .container, .row, et .col-*-* Fonder les fondements des grilles réactives.
• Flexbox, intégré à Bootstrap, crée facilement des colonnes à hauteur égale ou égale, éliminant le besoin de piratage CSS.
• Les classes d'utilité flexibles de Bootstrap (par exemple, .d-flex, .flex-row, .flex-column) fournissent un contrôle granulaire sur le contenu flexible et le comportement des éléments.

Comprendre Flexbox:

Flexbox (boîte flexible) est un système de disposition CSS moderne idéal pour les tailles d'écran dynamiques. Un conteneur flexion ajuste les tailles de ses enfants pour s'adapter à différentes fenêtres. Bootstrap simplifie l'utilisation de Flexbox avec les classes de wrapper.

Le système de grille bootstrap:

Les systèmes de grille sont cruciaux pour les dispositions complexes. La grille de bootstrap dispose d'un xl point d'arrêt pour les écrans extra-larges et utilise Flexbox au lieu de flotteurs.

Classes de grille de clés:

• .container: wrapper extérieur; Utilisez .container pour la largeur fixe, .container-fluid pour la pleine largeur.
• .row: conteneur logique pour les colonnes.
• .col-*-*: Définit la largeur de la colonne (par exemple, .col-md-6 pour une largeur à l'écran moyen, 6 colonnes). Utilisez le plus petit point de rupture nécessaire; .col-sm-6 s'applique à sm, md, lg et xl points d'arrêt.

GRID BOOTSTRAP avec Flexbox vs Flots:

Flexbox simplifie les tâches comme la création de colonnes de hauteur égal, nécessitant auparavant des hacks CSS (comme les flotteurs et ClearFix). La grille basée sur Bootstrap 4 se traduit par des colonnes plus réalistes en forme de table avec des hauteurs égales à l'intérieur d'une ligne. Les colonnes à largeur égale sont réalisées en utilisant simplement les classes .col-* sans spécifier les largeurs; L'espace disponible est automatiquement divisé.

Exemple: Colonnes à largeur égale

<code class="language-html"><div class="row">
  <div class="col-sm" style="min-height:200px;">.col</div>
  <div class="col-sm">.col</div>
  <div class="col-sm">.col</div>
  <div class="col-sm">.col</div>
</div></code>

Cela crée quatre colonnes de 25% de larges à partir du petit point d'arrêt vers le haut.

Marges flexibles et auto:

La combinaison de Flexbox avec les marges automatique permet un positionnement avancé. .mr-auto (marge-droite: auto) pousse un élément vers la droite, tandis que .ml-auto (marge-gauche: auto) le pousse vers la gauche. Un alignement vertical similaire est obtenu en utilisant des classes .mb-auto et .mt-auto avec flex-direction: column et les classes align-items appropriées.

Concepts Flexbox essentiels pour Bootstrap Flex Utilities:

• CONTUSTEURS FLEX: Créé en utilisant display: flex (ou .d-flex dans Bootstrap).
• Éléments flexibles: Enfants directs d'un conteneur flexible.
• flex-direction: contrôle la direction de l'élément (row, row-reverse, column, column-reverse). Bootstrap utilise des classes comme .flex-row et .flex-column.
• order: Contrôles l'ordre des éléments (Bootstrap utilise order-* classes).
• justify-content: Aligne des éléments sur l'axe principal (Bootstrap utilise justify-content-* classes).
• align-items: Aligne des éléments sur l'axe transversal (Bootstrap utilise align-items-* classes).

Conclusion:

La grille basée sur Flexbox de Bootstrap offre une approche puissante et flexible à la conception de disposition réactive. La maîtrise des concepts Flexbox améliore votre capacité à utiliser efficacement les cours d'utilité de bootstrap. Une exploration plus approfondie de la documentation et de la pratique de Bootstrap solidifiera votre compréhension.

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!