Share
I den här handledningen visar jag dig hur du snabbt bygger upp layouter med Bootstraps 4s responsiva flexboxverktyg. För att få en bättre förståelse för dessa verktyg, undersöker vi fyra olika exempel.
Notera: Denna handledning förutsätter att du är bekant med Bootstrap 4 samt flexbox. Ta en titt på dessa kurser för att få dig att gå i rätt riktning.
Innan vi går igenom våra exempel, låt oss först titta på Bootstraps mediefrågor. Ramverket definierar fem pixelbaserade brytpunkter för gallerkolumner, vilka visas i följande tabell:
| Skärm | Viewport Storlek | Klassprefix |
|---|---|---|
| Extra liten | < 576px | .sam- * |
| Små | ≥ 576px | .col-SM-* |
| Medium | ≥ 768px | .col-MD- * |
| Stor | ≥ 992px | .col-lg- * |
| Extra stor | ≥ 1200px | .col-XL- * |
Ner till affärer! I det första exemplet är vårt mål att horisontellt och vertikalt centrera innehållet i ett avsnitt, så här:
Här är vår HTML:
Observera att vi har använt ett antal Bootstraps flexbox-relaterade klasser. Vi anger till exempel att sektion elementet är en flexbehållare genom att ge den d-flex klass. Dessutom, för att centrera innehållet i .rad element (som vanligtvis är en flexbehållare) i båda riktningarna använder vi ALIGN-objekt-centrum och motivera-innehålls center klasser.
Här är den associerade CSS:
sektion minhöjd: 70vh; bakgrundsfärg: rgba (86,61,124,15);
Och Codepen demo:
I det andra exemplet är vårt mål att bygga följande layout med block som innehåller text som är anpassat till botten och toppen av var och en.
Det här är önskad layout för stora skärmar (när visningsbredd ≥ 1200px). Kontrollera demoen och ändra storlek på webbläsarfönstret för att se hur layouten ändras vid smalare skärmstorlekar.
Vi börjar med denna typiska Bootstrap-markup:
...............
Initialt kommer vi att fokusera på markeringen som ställer in layouten för kolumnernas innehåll. Inne i vart och ett av våra kolumner lägger vi till följande markering:
......
Återigen, i koden ovan har vi använt ett antal Bootstraps inbyggda flexboxrelaterade klasser:
Accentsconagua
d-flex: Att skapa en flexbehållare, som omvandlar direkta barnelement till flexobjektflex-kolonn: Att ställa in en vertikal riktningALIGN-objekt-end: att justera flex-objekt till slutet av (i detta fall på grund av kolumnriktningen) x-axelnmotivera-innehålls mellan: för att motivera föremålen med lika avstånd mellanCSS behövs för vår layout:
kropp margin-top: 30px; a, a: svävar färg: # 212529; a: svävar text-decoration: none; .block height: 350px; bakgrund: rgba (86,61,124,15); marginalbotten: 30px; .label font-size: .85rem; font-weight: bold;
Codepen demo:
Bara för träning, låt oss ta en minut och tänka på två alternativa flexbox-sätt för att uppnå samma layout för kolumnernas innehåll.
Först tar vi bort motivera-innehålls mellan klass från länken och lägg till mb-auto klass till elementet med klassen av .märka. Alternativt kan vi ha ändrat .beskrivning element genom att ge den klassen av mt-auto.
Den uppdaterade HTML:
......
Nu, låt oss kolla igen demo:
Resultatet ser likadant ut, rätt?
För ett andra försök kunde vi ersätta några rader i vår markering med den här nya koden:
......
Vid denna tidpunkt kontrollerar vi den uppdaterade demo:
Återigen är den genererade layouten exakt vad vi vill ha!
I det tredje exemplet börjar vi med en layout som liknar föregående exempel. Vårt mål denna gång är att manipulera ordern i den tredje och fjärde kolumnen beroende på visningsportstorleken.
När visningsporten är minst 1200px bred ska kolumnernas ordning vara följande:
I annat fall ändras kolumnernas order; det tredje elementet bör komma efter den fjärde:
Markeringen som definierar rutnätlayouten:
...............
Lägg märke till ordning-* klasser som visas i tredje, fjärde och femte kolumnerna.
Tänk på att även om vi vill ändra ordern i den tredje och fjärde kolumnen måste vi också ange ordningen för den femte kolumnen. Om vi inte gör det, kommer den sista kolumnen alltid att följa den andra.
Inne i var och en av kolumnerna centrerar vi innehållet i båda riktningarna med följande kända verktygsklasser:
Här är den associerade CSS:
kropp margin-top: 30px; .block height: 250px; färg: # 212529; bakgrund: rgba (86,61,124,15); marginalbotten: 30px;
Och, naturligtvis, Codepen demo:
I det sista exemplet är vårt mål att bygga en responsiv header.
När webbläsarfönstret är minst 768px bredt ska huvudet se ut så här:
På mindre skärmar ändras dess layout enligt följande:
För att se menyn klickar vi på knappen som finns i det högra hörnet.
Vår HTML ser ut så här:
I det här fallet använder vi en kombination av anpassade klasser tillsammans med Bootstraps klasser.
Tack vare ml-auto klass flyttar vi den andra listan till det högra hörnet av förälderbehållaren.
En del av erforderlig CSS visas nedan:
.nav-top bakgrund: 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); övergång: färg 0,2s; .list li li: hover color: rgba (0, 0, 0, 0.7); text-dekoration: ingen; @medias skärm och (maxbredd: 767px) .list-top position: absolute; topp: 70px; vänster: 0; höger: 0; transformera: translateX (-100%); marginal-vänster: 0; vaddering: 1rem; övergång: transformera 0,3s; .nav-top.is-aktiv .list-top transform: none; .list-top li flex-grow: 1;
Här är JavaScript ansvarigt för att växla synligheten på mobilmenyn:
const toggleMenu = document.querySelector (". växla-menyn"); const navTop = document.querySelector (". nav-top"); toggleMenu.addEventListener ("click", () => navTop.classList.toggle ("är aktiv"););Och den sista demo:
I denna djupgående handledning omfattade vi fyra verkliga exempel som utnyttjar Bootstrap 4s responsiva flexboxverktyg. Jag hoppas att du haft det vi byggde här och de har motiverat dig att tillämpa det du har lärt dig i dina kommande Bootstrap-projekt.
Som alltid, om du har några frågor, låt mig veta i kommentarerna nedan.
