Share
In questo tutorial ti mostrerò come creare rapidamente layout con le utilissime utilità Flexbox di Bootstraps 4. Per ottenere una migliore comprensione di queste utility, esamineremo quattro diversi esempi.
Nota: questo tutorial presume che tu abbia familiarità con Bootstrap 4 e con Flexbox. Dai un'occhiata a questi corsi per farti andare nella giusta direzione.
Prima di esaminare i nostri esempi, diamo prima un'occhiata alle query multimediali di Bootstrap. Il framework definisce cinque punti di interruzione basati su pixel per le colonne della griglia, che sono mostrati nella seguente tabella:
| Schermo | Dimensione Viewport | Prefisso di classe |
|---|---|---|
| Piccolissimo | < 576px | .col-* |
| Piccolo | ≥ 576 px | .col-SM- * |
| medio | ≥ 768 px | .col-MD- * |
| Grande | ≥ 992 px | .col-LG- * |
| Extra large | ≥ 1200 px | .col-XL- * |
Giù al lavoro! Nel primo esempio, il nostro obiettivo è centrare orizzontalmente e verticalmente il contenuto all'interno di una sezione, in questo modo:
Ecco il nostro HTML:
Si noti che abbiamo utilizzato un certo numero di classi correlate a Flexbox di Bootstrap. Ad esempio, denotiamo che il sezione elemento è un contenitore flessibile dandogli il d-flex classe. Inoltre, per centrare il contenuto del .riga elemento (che di default è un contenitore flessibile) in entrambe le direzioni, usiamo il allineare-articoli-centro e justify-content-centro classi.
Ecco il CSS associato:
section min-height: 70vh; background-color: rgba (86,61,124, .15);
E la demo di Codepen:
Nel secondo esempio, il nostro obiettivo è creare il seguente layout con blocchi contenenti testo allineati alla parte inferiore e superiore di ciascuno.
Questa è la disposizione desiderata per gli schermi di grandi dimensioni (con larghezza della vista ≥ 1200px). Controlla la demo e ridimensiona la finestra del browser per vedere come il layout cambia a dimensioni dello schermo più strette.
Iniziamo con questo tipico markup di Bootstrap:
...............
Inizialmente ci concentreremo sul markup che imposta il layout per il contenuto delle colonne. All'interno di ciascuna delle nostre colonne, aggiungiamo il seguente markup:
......
Ancora una volta, nel codice qui sopra abbiamo usato un certo numero di classi correlate alla flexbox di Bootstrap:
Accentsconagua
d-flex: creare un contenitore flessibile, trasformando elementi figli diretti in elementi flessibiliflex-column: Per impostare una direzione verticaleallineare-articoli-end: per allineare gli elementi flessibili alla fine (in questo caso a causa della direzione della colonna) dell'asse xjustify-content-tra: per giustificare gli articoli con uguale spaziatura traIl CSS necessario per il nostro layout:
body margin-top: 30px; a, a: hover color: # 212529; a: hover text-decoration: none; .block height: 350px; sfondo: rgba (86,61,124, 0,15); margin-bottom: 30px; .label font-size: .85rem; font-weight: bold;
La demo di Codepen:
Solo per esercitarsi, prendiamoci un minuto e pensiamo a due modi alternativi di flexbox per ottenere lo stesso layout per il contenuto delle colonne.
Per prima cosa, rimuoviamo il justify-content-tra classe dal link e aggiungi il mb-auto classe all'elemento con la classe di .etichetta. In alternativa, potremmo aver modificato il file .descrizione elemento dandogli la classe di mt-auto.
L'HTML aggiornato:
......
Ora, ricontrolliamo la demo:
Il risultato sembra lo stesso, giusto?
Per un secondo tentativo, potremmo sostituire alcune righe del nostro markup con questo nuovo codice:
......
A questo punto controlliamo la demo aggiornata:
Ancora una volta il layout generato è esattamente ciò che vogliamo!
Nel terzo esempio, inizieremo con un layout simile all'esempio precedente. Questa volta il nostro obiettivo è di manipolare l'ordine della terza e della quarta colonna a seconda della dimensione del viewport.
Quando il viewport è largo almeno 1200 px, l'ordine delle colonne dovrebbe essere il seguente:
In ogni altro caso, l'ordine delle colonne cambia; il terzo elemento dovrebbe venire dopo il quarto:
Il markup che definisce il layout della griglia:
...............
Notare il ordine-* le classi che appaiono nella terza, quarta e quinta colonna.
Tieni presente che anche se vogliamo modificare l'ordine della terza e della quarta colonna, dobbiamo anche specificare l'ordine per la quinta colonna. Se non lo facciamo, l'ultima colonna seguirà sempre la seconda.
All'interno di ciascuna colonna, concentriamo il contenuto in entrambe le direzioni con le seguenti classi di utilità familiari:
Ecco il CSS associato:
body margin-top: 30px; .block height: 250px; colore: # 212529; sfondo: rgba (86,61,124, 0,15); margin-bottom: 30px;
E, ovviamente, la demo di Codepen:
Nell'ultimo esempio, il nostro obiettivo è creare un'intestazione reattiva.
Quando la finestra del browser è larga almeno 768px, l'intestazione dovrebbe apparire così:
Sugli schermi più piccoli, il suo layout cambia come segue:
Per vedere il menu, facciamo clic sul pulsante situato nell'angolo destro.
Il nostro codice HTML si presenta così:
In questo caso usiamo una combinazione di classi personalizzate insieme alle classi di Bootstrap.
Grazie al ml-auto classe spostiamo la seconda lista nell'angolo destro del contenitore genitore.
Di seguito è riportata una parte del CSS richiesto:
.nav-top background: rgba (86, 61, 124, 0.15); .container-fluid larghezza massima: 1200px; .list-top margin-left: 50px; .list li: not (: last-child) margin-right: 15px; .list li a color: rgba (0, 0, 0, 0.5); transizione: colore 0,2 s; .list li a: hover color: rgba (0, 0, 0, 0.7); decorazione del testo: nessuna; @media screen e (max-width: 767px) .list-top position: absolute; sopra: 70 px; a sinistra: 0; a destra: 0; transform: translateX (-100%); margin-left: 0; imbottitura: 1rem; transizione: trasformare 0,3 s; .nav-top.is-active .list-top transform: none; .list-top li flex-grow: 1;
Ecco il codice JavaScript responsabile per attivare la visibilità del menu mobile:
const toggleMenu = document.querySelector (". toggle-menu"); const navTop = document.querySelector (". nav-top"); toggleMenu.addEventListener ("click", () => navTop.classList.toggle ("is-active"););E la demo finale:
In questo approfondito tutorial, abbiamo coperto quattro esempi reali che sfruttano le utilissime utilità di flexbox di Bootstrap 4. Spero che ti sia piaciuto ciò che abbiamo costruito qui e ti hanno motivato ad applicare ciò che hai appreso nei tuoi prossimi progetti Bootstrap.
Come sempre, se avete domande, fatemelo sapere nei commenti qui sotto.
