Share
Dans ce tutoriel, je vais vous montrer comment construire rapidement des dispositions avec les utilitaires flexbox réactifs de Bootstraps 4. Pour mieux comprendre ces utilitaires, examinons quatre exemples différents..
Remarque: ce didacticiel suppose que vous connaissez Bootstrap 4 et Flexbox. Jetez un coup d'œil à ces cours pour vous mettre dans la bonne direction.
Avant de passer en revue nos exemples, examinons d’abord les requêtes des médias de Bootstrap. La structure définit cinq points d'arrêt basés sur les pixels pour les colonnes de la grille, présentés dans le tableau suivant:
| Écran | Taille de la fenêtre | Préfixe de classe |
|---|---|---|
| Super petit | < 576px | .col- * |
| Petit | ≥ 576px | .col-sm- * |
| Moyen | ≥ 768px | .col-md- * |
| Grand | ≥ 992px | .col-lg- * |
| Extra large | ≥ 1200px | .col-xl- * |
Au travail! Dans le premier exemple, notre objectif est de centrer le contenu horizontalement et verticalement dans une section, comme ceci:
Voici notre HTML:
Notez que nous avons utilisé un certain nombre de classes liées à la flexbox de Bootstrap. Par exemple, nous notons que le section l'élément est un conteneur flex en lui donnant la d-flex classe. De plus, pour centrer le contenu de la .rangée élément (qui est par défaut un conteneur flex) dans les deux sens, nous utilisons le aligner-items-center et justifier-centre de contenu Des classes.
Voici le CSS associé:
section hauteur minimale: 70vh; couleur de fond: rgba (86, 61, 124, .15);
Et la démo de Codepen:
Dans le deuxième exemple, notre objectif est de construire la mise en page suivante avec des blocs contenant du texte aligné en bas et en haut de chacun..
C'est la disposition souhaitée pour les grands écrans (lorsque la largeur de la fenêtre d'affichage est supérieure ou égale à 1200 pixels). Consultez la démo et redimensionnez la fenêtre du navigateur pour voir comment la disposition change à des tailles d'écran plus étroites..
Nous commençons avec ce balisage Bootstrap typique:
……………
Dans un premier temps, nous nous concentrerons sur le balisage qui définit la disposition du contenu des colonnes. Dans chacune de nos colonnes, nous ajoutons le balisage suivant:
……
De nouveau, dans le code ci-dessus, nous avons utilisé un certain nombre de classes intégrées liées à flexbox dans Bootstrap:
Accentsconagua
d-flex: créer un conteneur flex en transformant des éléments enfants directs en éléments flexcolonne flexible: Pour définir une direction verticalealign-items-end: pour aligner les éléments flexibles à la fin de l'axe des x (dans ce cas, en raison de la direction de la colonne)justifier-contenu-entre: pour justifier les articles avec un espacement égal entreLe CSS nécessaire pour notre mise en page:
corps margin-top: 30px; a, a: survol color: # 212529; a: hover text-decoration: none; .block height: 350px; arrière-plan: rgba (86, 61, 124, 0,15); marge inférieure: 30 px; .label font-size: .85rem; poids de police: gras;
La démo de Codepen:
Juste pour vous entraîner, prenons une minute et réfléchissons à deux manières alternatives de flexbox de réaliser la même présentation pour le contenu des colonnes.
Tout d'abord, nous retirons le justifier-contenu-entre classe à partir du lien et ajoutez le mb-auto classe à l'élément avec la classe de .étiquette. Sinon, nous aurions pu modifier le .la description élément en lui donnant la classe de mt-auto.
Le code HTML mis à jour:
……
Maintenant, vérifions encore la démo:
Le résultat est identique?
Pour une seconde tentative, nous pourrions remplacer certaines lignes de notre balisage par ce nouveau code:
……
À ce stade, nous vérifions la démo mise à jour:
Encore une fois, la mise en page générée est exactement ce que nous voulons!
Dans le troisième exemple, nous commencerons par une mise en page similaire à l'exemple précédent. Notre objectif cette fois-ci est de manipuler l'ordre des troisième et quatrième colonnes en fonction de la taille de la fenêtre d'affichage..
Lorsque la fenêtre a au moins 1200 pixels de large, l'ordre des colonnes devrait être le suivant:
Dans les autres cas, l'ordre des colonnes change; le troisième élément devrait venir après le quatrième:
Le balisage qui définit la disposition de la grille:
……………
Remarquez le ordre-* les classes qui apparaissent dans les troisième, quatrième et cinquième colonnes.
N'oubliez pas que même si nous souhaitons modifier l'ordre des troisième et quatrième colonnes, nous devons également spécifier l'ordre de la cinquième colonne. Si nous ne le faisons pas, la dernière colonne suivra toujours la deuxième.
Dans chacune des colonnes, nous centrons le contenu dans les deux sens avec les classes d’utilitaires bien connues suivantes:
Voici le CSS associé:
corps margin-top: 30px; .block height: 250px; couleur: # 212529; arrière-plan: rgba (86, 61, 124, 0,15); marge inférieure: 30 px;
Et bien sûr, la démonstration de Codepen:
Dans le dernier exemple, notre objectif est de créer un en-tête responsive..
Lorsque la fenêtre du navigateur a au moins 768 pixels de large, l'en-tête doit ressembler à ceci:
Sur les écrans plus petits, sa disposition change comme suit:
Pour voir le menu, on clique sur le bouton situé dans le coin droit.
Notre HTML ressemble à ceci:
Dans ce cas, nous utilisons une combinaison de classes personnalisées avec les classes de Bootstrap..
Grace à ml-auto classe on déplace la deuxième liste dans le coin droit du conteneur parent.
Une partie du CSS requis est indiquée ci-dessous:
.nav-top background: rgba (86, 61, 124, 0,15); .container-fluid max-width: 1200px; .list-top margin-left: 50px; .list li: not (: last-child) marge-droite: 15px; .list li a color: rgba (0, 0, 0, 0.5); transition: couleur 0.2s; .list li a: survol couleur: rgba (0, 0, 0, 0,7); texte-décoration: aucun; Écran multimédia et (largeur maximale: 767px) .list-top position: absolute; en haut: 70 px; gauche: 0; à droite: 0; transformer: translateX (-100%); marge gauche: 0; rembourrage: 1rem; transition: transformer 0,3 s; .nav-top.is-active .list-top transform: none; .list-top li flex-grow: 1;
Voici le JavaScript responsable de l'activation de la visibilité du menu mobile:
const toggleMenu = document.querySelector (". toggle-menu"); const navTop = document.querySelector (". nav-top"); toggleMenu.addEventListener ("click", () => navTop.classList.toggle ("est actif"););Et la démo finale:
Dans ce didacticiel approfondi, nous avons présenté quatre exemples concrets tirant parti des utilitaires responsive de flexbox de Bootstrap 4. J'espère que vous avez apprécié ce que nous avons construit ici et qu'ils vous ont motivé à appliquer ce que vous avez appris dans vos prochains projets Bootstrap.
Comme toujours, si vous avez des questions, faites le moi savoir dans les commentaires ci-dessous.
