Share
In deze tutorial laat ik je zien hoe je snel lay-outs kunt bouwen met de responsieve flexbox-utilities van Bootstraps 4. Om een beter begrip van deze hulpprogramma's te krijgen, zullen we vier verschillende voorbeelden bekijken.
Notitie: deze tutorial gaat ervan uit dat je bekend bent met zowel Bootstrap 4 als flexbox. Bekijk deze cursussen om u op weg te helpen in de goede richting.
Voordat we onze voorbeelden doornemen, laten we eerst de mediaquery's van Bootstrap bekijken. Het kader definieert vijf op pixels gebaseerde onderbrekingspunten voor rasterkolommen, die in de volgende tabel worden weergegeven:
| Scherm | Grootte van weergave | Klasse voorvoegsel |
|---|---|---|
| Extra klein | < 576px | .col- * |
| Klein | ≥ 576px | .col-sm * |
| Medium | ≥ 768 px | .col-MD-* |
| Groot | ≥ 992px | .col-LG-* |
| Extra groot | ≥ 1200 px | .col-XL- * |
Aan de slag! In het eerste voorbeeld is ons doel om de inhoud in een sectie horizontaal en verticaal te centreren, zoals deze:
Dit is onze HTML:
Merk op dat we een aantal Bootstrap's aan flexbox gerelateerde klassen hebben gebruikt. We geven bijvoorbeeld aan dat het sectie element is een flex container door het de d-flex klasse. Bovendien, om de inhoud van de. Te centreren .rij element (dat standaard een flexcontainer is) in beide richtingen, gebruiken we de uitlijnen-items-center en rechtvaardigen content-center klassen.
Hier is de bijbehorende CSS:
sectie min-height: 70vh; achtergrondkleur: rgba (86,61,124, .15);
En de demo van Codepen:
In het tweede voorbeeld is ons doel de volgende lay-out te bouwen met blokken die tekst bevatten die is uitgelijnd aan de onder- en bovenzijde van elke lay-out.
Dit is de gewenste lay-out voor grote schermen (bij viewport width ≥ 1200px). Controleer de demo en wijzig het formaat van het browservenster om te zien hoe de lay-out verandert bij smallere schermformaten.
We beginnen met deze typische Bootstrap-markup:
...............
In eerste instantie richten we ons op de opmaak die de lay-out voor de inhoud van de kolommen instelt. In elk van onze kolommen voegen we de volgende markup toe:
......
Nogmaals, in de bovenstaande code hebben we een aantal Bootstrap's ingebouwde flexbox-gerelateerde klassen gebruikt:
Accentsconagua
d-flex: om een flexcontainer te maken, waarmee directe kinderelementen worden omgezet in flexitemsflex-kolom: Om een verticale richting in te stellenuitlijnen-items-end: om flexitems uit te lijnen met het einde van de x-as (in dit geval vanwege de kolomrichting)rechtvaardigen-inhoud tussen: om de items met gelijke tussenruimte te rechtvaardigenDe CSS die nodig is voor onze lay-out:
body margin-top: 30px; a, a: hover color: # 212529; a: hover text-decoration: none; .block height: 350px; achtergrond: rgba (86,61,124, .15); margin-bottom: 30px; .label font-size: .85rem; lettertype: vet;
De Codepen-demo:
Gewoon even oefenen, laten we even nadenken over twee alternatieve flexbox-manieren om dezelfde lay-out te bereiken voor de inhoud van de kolommen.
Eerst verwijderen we de rechtvaardigen-inhoud tussen klasse van de link en voeg de mb-auto klasse aan het element met de klasse van .label. Als alternatief kunnen we het .Omschrijving element door het de klasse van te geven mt-auto.
De bijgewerkte HTML:
......
Laten we nu de demo opnieuw bekijken:
Het resultaat ziet er hetzelfde uit, toch?
Voor een tweede poging kunnen we sommige regels van onze markup vervangen door deze nieuwe code:
......
Op dit punt controleren we de bijgewerkte demo:
Nogmaals, de gegenereerde lay-out is precies wat we willen!
In het derde voorbeeld beginnen we met een lay-out die lijkt op het vorige voorbeeld. Ons doel is deze keer om de volgorde van de derde en vierde kolom te manipuleren, afhankelijk van de viewport-grootte.
Als het kijkvenster ten minste 1200 px breed is, moet de volgorde van de kolommen als volgt zijn:
In alle andere gevallen veranderen de volgorde van de kolommen; het derde element zou na de vierde moeten komen:
De opmaak die de rasterlay-out bepaalt:
...............
Let op de bestellen-* klassen die voorkomen in de derde, vierde en vijfde kolom.
Houd er rekening mee dat, zelfs als we de volgorde van de derde en vierde kolom willen wijzigen, we ook de volgorde voor de vijfde kolom moeten opgeven. Als we dit niet doen, zal de laatste kolom altijd de tweede volgen.
In elk van de kolommen centreren we de inhoud in beide richtingen met de volgende vertrouwde hulpprogramma klassen:
Hier is de bijbehorende CSS:
body margin-top: 30px; .block height: 250px; kleur: # 212529; achtergrond: rgba (86,61,124, .15); margin-bottom: 30px;
En, natuurlijk, de Codepen-demo:
In het laatste voorbeeld is ons doel om een responsieve header te bouwen.
Wanneer het browservenster minimaal 768 px breed is, ziet de header er als volgt uit:
Op kleinere schermen verandert de indeling als volgt:
Om het menu te zien, klikken we op de knop in de rechterhoek.
Onze HTML ziet er zo uit:
In dit geval gebruiken we een combinatie van aangepaste klassen samen met Bootstrap's klassen.
Dankzij de mi-automatische klasse verplaatsen we de tweede lijst naar de rechterbovenhoek van de bovenliggende container.
Een deel van de vereiste CSS wordt hieronder weergegeven:
.nav-top background: rgba (86, 61, 124, 0.15); .container-fluid max-width: 1200px; .list-top margin-left: 50px; .list li: not (: last-child) margin-right: 15px; .list li a color: rgba (0, 0, 0, 0.5); overgang: kleur 0.2s; .list li a: hover color: rgba (0, 0, 0, 0.7); tekstdecoratie: geen; @media-scherm en (max-width: 767px) .list-top position: absolute; top: 70px; links: 0; rechts: 0; transformatie: translateX (-100%); marge links: 0; opvulling: 1rem; overgang: transformeren 0.3s; .nav-top.is-actief .list-top transform: none; .list-top li flex-grow: 1;
Hier is JavaScript verantwoordelijk voor het schakelen tussen de zichtbaarheid van het mobiele menu:
const toggleMenu = document.querySelector (". toggle-menu"); const navTop = document.querySelector (". nav-top"); toggleMenu.addEventListener ("click", () => navTop.classList.toggle ("is-active"););En de laatste demo:
In deze diepgaande zelfstudie hebben we vier voorbeelden uit de praktijk behandeld die gebruikmaken van de responsieve flexbox-hulpprogramma's van Bootstrap 4. Ik hoop dat je genoten hebt van wat we hier hebben gebouwd en dat ze je gemotiveerd hebben om toe te passen wat je hebt geleerd in je komende Bootstrap-projecten.
Zoals altijd, als je vragen hebt, laat het me weten in de reacties hieronder.
