Dans cet article, je vais vous présenter les classes CSS Bootstrap clés pour construire des mises en page avec le système de grille Bootstrap.
Bootstrap 4 utilise Flexbox comme base pour son système de grille. Je vais expliquer les propriétés CSS de Flexbox qui sous-tendent la fonctionnalité de la nouvelle grille, et définir comment les classes d'utilitaires flexibles Bootstrap fonctionnent pour vous aider à créer des mises en pages impressionnantes rapidement et sans douleur. Flexbox . Il représente flex ible boîte et c'est un système de mise en page CSS de pointe qui permet de créer facilement des mises en page pour des tailles d'écran dynamiques ou inconnues. (Le conteneur flexible a la capacité d'ajuster et de contrôler la taille de ses éléments enfants pour s'adapter à différentes fenêtres.)
Vous pouvez facilement créer une mise en page Flexbox en utilisant un ensemble de propriétés CSS conçues pour cette tâche. il est encore plus facile de créer des mises en page basées sur Flexbox en fournissant un ensemble de classes wrapper au-dessus des propriétés Flexbox, que vous pouvez simplement appliquer à votre balisage pour obtenir le résultat souhaité.
Introduction au système de grille Bootstrap
sont un élément important d'un framework CSS, car construire des mises en page complexes sans système de grille puissant et flexible peut être une tâche intimidante.
Parmi les nouvelles fonctionnalités du dernier système de grille Bootstrap vous trouverez le point d'arrêt de grille xl (extra large), correspondant à une taille d'écran extra large, et l'utilisation de Flexbox à la place des flottants comme mécanisme de mise en page sous-jacent.
Classes de clés du système de grille Bootstrap 11] Vous pouvez construire une mise en page en utilisant le système de grille Bootstrap en appliquant un tas de classes Bootstrap: .container .row et .col - * - * . (Le premier * de .col - * - * doit être remplacé par le spécificateur de point de rupture – tel que xs, sm, md, lg, xl – et le second * doit La somme de toutes les colonnes doit être égale à 12.)
Voyons maintenant les composants principaux de la grille Bootstrap.
Container
Le conteneur est l'enveloppe externe de la disposition de la grille. C'est un div qui a la classe .container pour une largeur fixe ou .container-fluid pour une 100% pleine largeur. [19659015] Row
Une ligne sert de conteneur logique pour les colonnes
Colonne
Une colonne est ce qui fait un bloc dans la grille. Elle devrait être contenue dans une rangée.
Le système de grille Bootstrap fournit ces classes de colonnes supplémentaires:
.col-xs - *: conçu pour les petits écrans de moins de largeur 576px.col-sm - *: conçu pour les petits écrans dont la largeur est égale ou supérieure à 576px.col-md - *: conçu pour les écrans de taille moyenne avec la largeur> = 768px.col-lg - *: conçu pour les grands écrans avec la largeur> = 992px.col-xl - *: conçu pour les écrans extra-larges dont la largeur est égale ou supérieure à 1200px .
Vous n'avez pas besoin d'ajouter plusieurs classes si vous souhaitez spécifier la même largeur pour un écran différent tailles; ajoutez simplement la classe avec le plus petit point d'arrêt. Ainsi, par exemple, au lieu de .col-sm-6 et .col-md-6 il vous suffit d'appliquer .col-sm-6
Bootstrap Grid Layouts avec Flexbox vs Floats
Merci à Flexbox, vous pouvez facilement réaliser des choses comme des colonnes de même hauteur ou des colonnes de même largeur, que vous ne pouviez accomplir avec les hacks CSS avant.
CSS ] float et clearfix les techniques de construction de mises en page ont été parmi ces hacks, ce qui rendait difficile la construction et le débogage de mises en page complexes.
Par exemple, considérons une disposition en deux colonnes. Si vous construisez cette mise en page avec Bootstrap 3, elle ressemblera à ceci:
Voir le stylo Bootstrap 3 Mise en page 2 colonnes par SitePoint ( @SitePoint ) le CodePen .
Si vous construisez la même mise en page avec Bootstrap 4, voici ce que vous avez:
Voir le stylo Bootstrap 4 Mise en page 2 colonnes par SitePoint ( @SitePoint ) CodePen .
Avec Bootstrap 4 et sa grille à base de flexbox, vous obtenez une colonne plus réaliste (comme dans une table), car les colonnes d'une même rangée auront la même hauteur .
Nous allons aborder les dispositions de colonnes de même largeur. Grâce à Flexbox, vous pouvez facilement diviser l'espace disponible entre plusieurs colonnes d'une même ligne. Si vous créez une disposition de grille avec plusieurs colonnes sans spécifier la largeur de la colonne (c'est-à-dire en utilisant les classes .col - * ), l'espace disponible sera automatiquement et également réparti entre ces colonnes.
et exemple rapide:
.col
.col
.col
.col
Les quatre occurrences de .col-sm seront chacune automatiquement 25% de largeur à partir du petit point de rupture.
Avec un style minimal, voici ce que vous obtenez:
Flexbox avec marges automatiques
La combinaison de Flexbox avec des marges automatiques donne quelques astuces cool
.mr-auto à l'élément, qui correspond à margin-right: auto; en CSS standard, ou positionne également certains éléments à gauche d'un élément spécifié en utilisant la classe Bootstrap .ml-auto ( margin-left: auto; dans CSS standard). Vous pouvez voir cela comme déplaçant l'élément avec les classes .mr-auto ou .ml-auto vers la position la plus à droite ou la plus à gauche, respectivement, et les autres éléments de la
Voir le stylo Bootstrap 4 Flexbox avec des astuces de marges automatiques par SitePoint ( @SitePoint ) sur CodePen .
Vous pouvez accomplir ce résultat soit horizontalement ou verticalement. Pour atteindre le même comportement en déplaçant les éléments flexibles vers le haut ou le bas (plutôt que vers la droite ou vers la gauche), vous devez utiliser mb-auto ( margin-bottom: auto; ]) et mt-auto ( margin-top: auto; ), définissez flex-direction à colonne et appliquez le ] align-items- (début | fin) classe .
Voir le stylo Bootstrap 4 Flexbox avec astuces de marges automatiques par SitePoint ( @SitePoint ) le
Bootstrap 4 utilise des classes d'utilitaire flex spécifiques ce qui peut sembler quelque peu ésotérique à quelqu'un qui n'a jamais entendu parler de Flexbox ou de doesn ' Par exemple, Bootstrap applique maintenant la propriété Il existe également des classes réactives telles que Cependant, si vous ne savez pas ce qu'est un conteneur flexible et comment il affecte ses éléments enfants, utilisez l'utilitaire Bootstrap flex les cours pourraient être un peu problématiques. La même chose pourrait être dite de tous les autres utilitaires flex comme Passons en revue rapidement le fonctionnement de Flexbox. Il est très probable que vous le trouverez utile lors de la gestion des classes d'utilitaires flexibles Bootstrap Flexbox définit un conteneur flexible en appliquant la propriété La classe d'utilitaire Bootstrap flex pour créer un conteneur flexible est Chaque élément enfant direct d'un conteneur flexible est transformé en un Vous pouvez définir la direction des éléments flex en utilisant la propriété CSS Bootstrap utilise les classes En outre, Flexbox vous permet de modifier explicitement l'ordre visuel d'éléments flex spécifiques en utilisant la propriété Bootstrap propose ses propres classes d'utilitaires de commande pour créer un élément flexible en premier, en dernier ou pour réinitialiser la propriété order à l'ordre DOM par défaut. Par exemple, pour faire apparaître un élément flexible en premier par rapport à ses frères et sœurs, ajoutez Flexbox facilite l'alignement des éléments flexibles Par exemple, la propriété Les classes d'utilitaire Bootstrap pour appliquer les valeurs Le Flexbox Les valeurs possibles pour Vous pouvez appliquer rapidement ce comportement aux classes Bootstrap suivantes: Consultez le code de ce stylo pour un exemple de comment vous pouvez appliquer des classes d'utilitaires flexibles Bootstrap: Voir le stylo Bootstrap 4 Alignement vertical par SitePoint ( @SitePoin t ) le CodePen . Vous pouvez trouver d'autres utilitaires disponibles dans le document Bootstrap flex docs . Dans cet article, nous avons examiné comment Flexbox rend le système de grille Bootstrap plus polyvalent, avec des fonctionnalités telles que des dispositions automatiques de même largeur et des colonnes de même hauteur. Nous avons ensuite examiné certaines propriétés de Flexbox qui sont essentielles pour maîtriser les classes d'utilitaires flexibles Bootstrap et tirer le meilleur parti de leurs capacités de mise en page puissantes. Si vous avez entendu parler de Bootstrap, trop compliqué, alors jouez à travers notre cours Introduction à Bootstrap 4 pour une introduction rapide et amusante au pouvoir de Bootstrap. display: flex à ses éléments de conteneur de grille. En outre, Bootstrap vous permet de transformer n'importe quel conteneur HTML en un conteneur flexible en appliquant simplement la classe .d-flex à votre élément choisi. .d- sm-flex et .d-md-flex etc. .flex-row .flex-row-reverse .flex-colonne et .flex-column-reverse . Flex Containers
display avec le flex ou valeurs de inline-flex : .mycontainer {
affichage: flex;
}
d-flex . Éléments Flex
flex-direction avec l'une des valeurs suivantes: row ] row-reverse colonne et column-reverse .
row définit la direction horizontale de gauche à droite row-reverse définit la direction horizontale de droite à gauche La colonne définit la direction verticale de haut en bas L'inversion de colonne définit la direction verticale de bas en haut. ] ligne de flexion flex-row-reverse flex-colonne et flex-colonne-inverse pour déterminer la direction des éléments flex. order qui par défaut est zéro: .item {
commande: 1;
}
order-1 au balisage Alignement des éléments Flex
justify-content sur le conteneur flexible vous permet d'aligner des éléments flexibles sur l'axe principal (l'axe des x par défaut, que vous pouvez modifier en le définissant la flex-direction à la colonne ). Les valeurs disponibles sont:
flex-start : il s'agit de la valeur initiale et alignera les éléments au début du conteneur flex-end aligne les éléments à la fin de l'élément parent [19659021] center aligne les éléments au centre du conteneur space-between crée un espace entre les éléments flex après qu'ils ont été disposés space-around crée une quantité égale justify-content aux éléments sont les suivantes:
justify-content-start contenu-fin justify-content-centre justify-contenu-entre justify-content-around align-items propriété vous permet de modifier l'alignement des éléments flex dans l'axe croisé. (Si vous définissez l'axe principal comme étant horizontal, l'axe transversal sera vertical, et vice versa.) align-items sont:
stretch : ceci est la valeur initiale, qui amène les éléments flex à s'étendre à la hauteur de leurs plus grands éléments frères flex-start aligne les éléments au début du conteneur flexible flex-end les éléments situés à la fin du conteneur flexible center sont responsables du centrage de l'élément flexible dans son conteneur.
align-items-stretch aligner-éléments-commencer align-items-fin aligner-items-centre Conclusion
Source link
