Bootstrap 4 con formazione per editor. Classi di ordine degli elementi
Un articolo in cui analizzeremo la griglia Bootstrap 4, che viene utilizzata per creare layout di siti Web responsivi.
Scopo della grigliaIl framework a griglia Bootstrap 4 è progettato per creare layout di siti Web reattivi.
La griglia Bootstrap 4 si basa su CSS Flexbox e query multimediali CSS. Studiarli ti permetterà di capire più in dettaglio come funziona la griglia Bootstrap 4.
Un layout adattivo è un layout che può cambiare aspetto a seconda della larghezza dell'area principale (viewport) del browser. Ciò significa che con alcune larghezze di visualizzazione il layout reattivo potrebbe apparire in un modo, ma con altre potrebbe apparire completamente diverso.
In Bootstrap 4, la modifica dell'aspetto del layout viene implementata tramite query multimediali. Ogni richiesta multimediale in Bootstrap si basa sulla larghezza minima del viewport del browser (punto di interruzione, punto di interruzione, nome del dispositivo).
Il framework Bootstrap 4 ha 5 breakpoint o nomi di dispositivi (senza etichetta, sm, md, lg, xl) e quindi consente di creare un layout che può apparire diverso su ciascuno di essi.
In Bootstrap 4, rispetto a Bootstrap 3, il numero di breakpoint è stato modificato. In Bootstrap 3 ce n'erano quattro: xs, sm, md e lg.
Elementi della grigliaLa griglia Bootstrap 4 è composta dai seguenti elementi:
- Contenitori per imballaggio (contenitori e contenitori per liquidi);
- Righe (riga);
- Blocchi adattivi (col).
Un contenitore wrapper è un elemento della griglia Bootstrap 4 da cui inizia la creazione di una pagina reattiva o di un layout a blocchi. Al suo interno dovranno essere posizionati gli altri elementi della griglia (righe e blocchi adattivi).
Bootstrap 4 ha 2 tipi di wrapper di contenitori: reattivo-fisso e reattivo-fluido.
Markup HTML di un contenitore reattivo fisso:
...
Markup HTML del contenitore in gomma reattivo:
...
Il primo contenitore (responsive-fixed) viene utilizzato quando è necessario creare un layout con una larghezza che deve rimanere costante entro una determinata larghezza del viewport del browser.
La dipendenza della larghezza di un contenitore fisso adattivo dalla larghezza del viewport del browser è mostrata nella tabella:
Ciò significa che un contenitore con correzione adattiva avrà:
- Larghezza 100% per larghezza viewport fino a 576px;
- 540px con larghezza del viewport da 576 a 768px;
- 720px con larghezza del viewport da 768 a 992px, ecc.
Nella direzione orizzontale, il contenitore a risposta fissa è posizionato centrato, questo viene fatto in bootstrap.css tramite le proprietà CSS margin-left: auto e margin-right: auto .
Il secondo contenitore (gomma reattiva) viene utilizzato quando è necessario creare un layout completamente flessibile di una pagina o di un blocco. Questo contenitore ha una larghezza del 100% per qualsiasi larghezza del viewport.
Inoltre, i contenitori wrapper (contenitore e contenitore-fluido) hanno anche un riempimento interno a sinistra e a destra di 15px. L'impostazione del riempimento per il confezionamento dei contenitori viene eseguita nel file CSS Bootstrap 4 utilizzando le proprietà riempimento-sinistra: 15px e riempimento-destra: 15px.
Quando crei un layout utilizzando la griglia Bootstrap 4, non posizionare contenitori wrapper all'interno di altri.
RigheUna riga è un elemento speciale della griglia (riga) che viene utilizzato durante la creazione di un layout nei seguenti casi:
- tra il contenitore e i blocchi adattivi che devono essere inseriti al suo interno;
- tra l'uno e gli altri blocchi adattivi, che devono essere posizionati nel primo blocco adattivo.
Markup HTML della riga:
...
A differenza di Bootstrap 3, in cui la riga agiva solo per compensare il riempimento interno sinistro e destro dei contenitori wrapper o dei blocchi responsive, in Bootstrap 4 gioca un ruolo molto importante. Ciò è dovuto al fatto che questa griglia è costruita su CSS Flexbox. In questa griglia funge da contenitore flessibile per elementi flessibili (blocchi adattivi). Quelli. se utilizzi blocchi adattivi all'esterno della riga, non funzioneranno. In Bootstrap 4, i blocchi reattivi devono trovarsi in un blocco con la classe row.
La compensazione per il riempimento interno dei margini viene eseguita allo stesso modo di Bootstrap 3, a causa dei margini negativi sinistro e destro pari a 15px (margine-sinistra:-15px e margine-destra:-15px).
Un esempio di come viene compensato il riempimento del campo:
contenitore (+15px) -> riga (-15px) -> col (+15px) -> contenuto contenitore-fluido (+15px) -> riga (-15px) -> col (+15px) -> riga (-15px) -> col (+15px) -> contenuto
Di conseguenza, il margine dai bordi sinistro e destro del contenitore da avvolgere al contenuto sarà sempre di 15 px.
Inoltre, i blocchi adattivi che non sono logicamente correlati tra loro non devono essere posizionati in una riga all'interno della struttura di qualche tipo di contenitore wrapper o altro blocco adattivo. Il modo più corretto è dividerli in gruppi logici separati e posizionarli ciascuno in una riga separata.
Per esempio:
... … … … ...
Blocchi adattiviI blocchi adattivi sono gli elementi costitutivi principali di un layout reattivo; determineranno come apparirà il layout della pagina web in base ai diversi punti di controllo (nessun simbolo, sm, md, lg e xl).
Creare un blocco adattivo è molto semplice: aggiungendo una o più classi col-?-? all'elemento HTML richiesto.
Nella classe col-?-?> al posto del primo punto interrogativo viene indicato il nome del punto di controllo: nessuna designazione, sm, md, lg o xl. Al posto del secondo punto interrogativo viene indicata la larghezza del blocco adattivo, che dovrebbe avere nel punto di controllo specificato. La larghezza del blocco reattivo è specificata in forma relativa utilizzando un numero da 1 a 12 (colonne Bootstrap).
Questo numero determina quanta larghezza occuperà il blocco adattivo nel punto di controllo specificato rispetto alla larghezza del blocco genitore, ad es. riga. La larghezza della riga in termini numerici (colonne Bootstrap) è 12.
Ad esempio, un blocco con classe col-md-4 nel punto di controllo md occuperà 4/12 della larghezza della riga, ovvero 33,3% (ovvero 4/12*100% = 33,3%).
I blocchi adattivi, così come i contenitori, hanno un'imbottitura sinistra e destra di 15 px. Questi riempimenti per i blocchi adattivi del framework Bootstrap 4 vengono impostati utilizzando le proprietà CSS riempimento-sinistra: 15px e riempimento-destra: 15px.
I blocchi adattivi devono essere posizionati in fila. Quelli. Qualsiasi blocco adattivo deve avere un blocco con riga di classe come genitore.
Ad esempio, considera quanto sarà ampio il seguente blocco reattivo su ciascun dispositivo:
...
Questo blocco adattivo avrà:
- fino a sm (per xs) una larghezza pari a 12 colonne Bootstrap (ovvero 12/12*100%=100% della larghezza della riga);
- su un dispositivo sm, una larghezza pari a 9 colonne Bootstrap (ovvero 9/12*100%=75% della larghezza della riga);
- su un dispositivo md, una larghezza pari a 7 colonne Bootstrap (ovvero 7/12*100%=58,3% della larghezza della riga);
- su un dispositivo lg, una larghezza pari a 5 colonne Bootstrap (ovvero 5/12*100%=41,6% della larghezza della riga);
- su un dispositivo xl, una larghezza pari a 3 colonne Bootstrap (ovvero 3/12*100%=25% della larghezza della riga).
Inoltre, quando si specifica la larghezza del blocco adattivo per un punto di controllo, si applicherà non solo a questo punto, ma anche a tutti quelli successivi, se non specificati.
Sono state aggiunte le classi speciali col , col-sm , col-md , col-lg , col-xl , col-auto , col-sm-auto , col-md-auto , col-lg-auto e col-xl Bootstrap 4 griglia-auto.
Il primo gruppo di classi (col, col-sm, col-md, col-lg, col-xl) è destinato alla creazione di blocchi adattivi, la cui larghezza dipenderà dallo spazio libero della linea. La larghezza non occupata (spazio libero) della linea è distribuita uniformemente tra tutti questi blocchi. Inoltre, questi blocchi adattivi hanno una larghezza pari a zero prima di allocare spazio libero sulla riga (per impostazione predefinita).
Diamo un'occhiata ad alcuni esempi.
1. Crea 5 blocchi adattivi con la stessa larghezza in fila.
1/5 2/5 3/5 4/5 5/5
Calcolo della larghezza:
- spazio di linea libero - 100% (poiché la loro larghezza è 0);
- la larghezza di ciascun blocco adattivo è del 20% (100%/5);
2. La larghezza dei blocchi con classe col se è presente un blocco adattivo con il numero di colonne nella riga.
? 7 colonne? ?
Calcolo della larghezza:
- spazio di riga libero - 41,67% ((12-7)/12*100%);
- la larghezza di ciascun blocco adattivo, eccetto col-7, è 13,89% (41,67%/3).
In alcune versioni dei browser Safari è presente un bug durante l'utilizzo di tale markup; può essere suddiviso in più righe.
Esistono 2 modi per risolvere questo problema:
- impostando i blocchi adattivi border.col ( border: 1px solido trasparente; )
- dando ai blocchi adattivi la proprietà CSS flex-basis .col ( flex: 1 0 20%; )
Inoltre, la griglia di Bootstrap 4 consente di posizionare blocchi reattivi senza specificare il numero di colonne su più righe.
... ... ... ...
Questa azione viene eseguita aggiungendo un elemento div vuoto con classe w-100 al markup prima del blocco adattivo, che dovrebbe iniziare con una nuova riga.
Se questa azione deve essere utilizzata solo per alcuni punti di controllo, è necessario aggiungervi anche le classi di utilità reattive Bootstrap 4 (la classe w-100).
In questo esempio, i blocchi adattivi verranno trasferiti su una nuova linea solo su dispositivi con un viewport minuscolo o piccolo.
... ... ... ...
Il secondo gruppo di classi (col-auto, col-sm-auto, col-md-auto, col-lg-auto e col-xl-auto) è progettato per creare blocchi adattivi, la cui larghezza sarà determinata in base a il loro contenuto.
Per esempio:
(1) (2) - la larghezza nei punti di controllo md, lg e xl sarà determinata in base al contenuto (3)
Di conseguenza:
- su xs e sm i blocchi adattivi saranno posizionati verticalmente (uno sotto l'altro) e occuperanno l'intera larghezza della riga;
- su md, il blocco responsive 2 avrà la larghezza necessaria per visualizzare il suo contenuto; se il blocco 2 non occupa l'intera larghezza della riga, i blocchi adattivi 1 e 3 la divideranno equamente tra loro; se il blocco 2 occupa l'intera larghezza della linea, l'immagine sarà la stessa dei punti di controllo xs e sm;
- su lg e xl, il blocco responsive 2 avrà la larghezza necessaria per visualizzare il suo contenuto; se il blocco 2 non occupa l'intera larghezza della riga, allora il blocco 3 occuperà una larghezza pari a 2 colonne Bootstrap e il blocco 1 occuperà l'intera larghezza rimanente della riga; se il blocco 2 occupa l'intera larghezza della riga, il markup sarà lo stesso di xs e sm, solo il blocco 3 su 3 righe avrà una larghezza pari a 2 colonne Bootstrap.
Per impostazione predefinita, i blocchi adattivi in fila sono disposti in linee orizzontali. All'interno della linea orizzontale, i blocchi adattivi sono allineati in sequenza da sinistra a destra. I blocchi adattivi con un numero totale di colonne non superiore a 12 possono essere inseriti in una riga orizzontale. I blocchi adattivi che non rientrano nella riga corrente passano a quella successiva.
(1)
(2)
(3)
(4)
Diamo un'occhiata a un altro esempio in cui i blocchi adattivi hanno larghezze diverse in diversi punti di controllo:
Il principio di base del layout layout
Il principio di base del layout di una pagina Web sulla griglia Bootstrap 4 è quello di nidificare alcuni blocchi adattivi all'interno di altri.
Allo stesso tempo, la larghezza dei blocchi adattivi è sempre un valore relativo, che viene impostato nelle colonne Bootstrap e dipende solo dalla larghezza del genitore, ad es. riga.
Il contenuto della pagina Web deve essere inserito solo in blocchi reattivi.
Ad esempio, nel layout esistente, ovvero nel blocco adattivo col-8, aggiungeremo altri 2 blocchi:
... ...
Per fare ciò, devi prima inserire una riga (contenitore per i blocchi adattivi) nel blocco col-8:
... ... Bootstrap 4 - Inserimento di una riga nel contenuto di un blocco reattivo col-8 
Successivamente, aggiungi 2 blocchi adattivi di seguito:
... ... ... Bootstrap 4 - Inserimento di blocchi reattivi in una riga 
L'allineamento dei blocchi adattivi nelle direzioni orizzontale e verticale viene eseguito in Bootstrap 4 utilizzando le classi flessibili di utilità.
Allineamento verticale dei blocchi adattiviL'allineamento verticale dei blocchi adattivi all'interno di una linea di riga viene effettuato utilizzando una delle seguenti classi, che deve essere inoltre aggiunta alla riga:
- align-items-start (relativo all'inizio della riga);
- allinea-oggetti-centro(centro);
- align-items-end (relativo alla fine).
Ad esempio, allineiamo tutti i blocchi adattivi al centro della riga:
1/2 2/2
Per impostazione predefinita, gli elementi reattivi occupano l'intera altezza della riga in cui si trovano.
L'allineamento verticale di uno specifico blocco adattivo all'interno di una linea può essere effettuato da una delle seguenti classi:
- align-self-start (relativo all'inizio della linea);
- allineare-auto-centrarsi (centro);
- align-self-end (relativo alla fine).
Queste classi devono essere aggiunte ai blocchi adattivi, non a una riga.
Ad esempio, allineiamo il blocco adattivo 2 al bordo inferiore della linea:
(1) (2)
Allineamento orizzontale dei blocchi adattiviLe seguenti classi sono destinate all'allineamento dei blocchi adattivi nella direzione orizzontale:
- giustifica-content-start (relativo all'inizio della riga - predefinito);
- giustificare-content-center (centro);
- giustificare-content-end (relativo alla fine della riga);
- giustifica-content-around (in modo uniforme, tenendo conto dello spazio prima del primo e dell'ultimo blocco adattivo);
- giustificare-content-between (in modo uniforme, con uguale spazio tra i blocchi reattivi).
Ad esempio, distribuiamo uniformemente i blocchi adattivi nella direzione orizzontale:
(1) (2)
Layout reattivo senza bordiIl riempimento interno dei blocchi adattivi e i margini negativi esterni delle righe possono essere rimossi se a quest'ultimo (ad esempio riga) viene aggiunta la classe no-gutters.
... ... ...
Tieni presente che questa classe (senza rilegature) influisce solo sui blocchi adattivi posizionati direttamente in questa riga. Quelli. Le proprietà CSS per la rimozione del riempimento non si applicheranno ai blocchi adattivi che non hanno questa riga come genitore.
In Bootstrap 4, gli offset dei blocchi reattivi possono essere eseguiti utilizzando:
- offset delle classi (per un certo numero di colonne);
- classi di margine di servizio (utilità).
Le classi di offset sono progettate per spostare i blocchi adattivi verso destra di un certo numero di colonne.
Queste classi hanno la seguente sintassi:
Offset-(1) o offset-(punto di interruzione)-(1)
(breakpoint) – punto di controllo, a partire dal quale verrà applicato un offset a questo blocco (se non è specificato, allora l'offset verrà applicato a partire dai dispositivi più piccoli).
(2) – il valore di offset specificato utilizzando il numero di colonne Bootstrap.
Ad esempio, impostiamo l'offset sui blocchi adattivi come mostrato in figura.
(1) (2) (1) (2) (1)
Compensazione utilizzando classi di margineNella quarta versione di Bootstrap, puoi anche impostare l'offset per i blocchi adattivi utilizzando i rientri del margine (margine sinistro: auto e (o) margine destro: auto). Questa opzione di offset avviene perché la griglia nella nuova versione di Bootstrap (4) è basata su CSS Flexbox.
Questa opzione di spostamento (utilizzando le classi margine) viene utilizzata quando i blocchi devono essere spostati l'uno rispetto all'altro di una quantità variabile.
In Bootstrap 4, per un'impostazione più comoda e adattiva dei rientri dei margini per i blocchi (margin-left: auto e (o) margin-right: auto), puoi utilizzare le classi ml-auto , mr-auto , ml-(breakpoint )-auto e signor-( punto di interruzione)-auto .
Bootstrap 4 - Offset del blocco reattivo 
(1) (2) (1) (2) (3) (1) (2)
Modifica dell'ordine visivo dei blocchi adattiviPer impostazione predefinita, i blocchi reattivi vengono visualizzati visivamente nell'ordine in cui si trovano nel codice HTML.
La modifica dell'ordine visivo di un blocco reattivo in Bootstrap 4 viene eseguita utilizzando la classe order-(visual_number). Questa classe è per il checkpoint xs. Se è necessario determinare l'ordine di un elemento non per il punto di controllo xs, ma per sm, md, lg o xl, viene utilizzata la seguente versione di questa classe:
Ordine-(punto di interruzione)-(numero_visivo)
Al posto di (visual_number) è necessario specificare un numero da 1 a 12.
Questo numero determina come appariranno visivamente gli elementi sulla pagina. Vale a dire, tutti gli elementi adattivi seguiranno visivamente in ordine crescente questi numeri. Se un elemento non ha una classe di ordine impostata, il valore predefinito è 0.
Ad esempio, cambiamo l'ordine di due blocchi adattivi:
Primo (non ordinato, senza classe di ordine) Secondo, ma verrà visualizzato per ultimo. Terzo, ma verrà visualizzato per secondo
Un altro esempio (utilizzando le classi di ordine adattivo):
Primo (su xs, sm verrà visualizzato per secondo) Secondo (su xs, sm verrà visualizzato per primo)
Oltre ai numeri (da 1 a 12 per impostazione predefinita), puoi utilizzare anche le parole first e last . Queste classi (order-first, order-(breakpoint)-first, order-last, order-(breakpoint)-last) ti consentono di spostare visivamente un elemento rispettivamente all'inizio o alla fine.
Le classi order-first e order-(breakpoint)-first esercitano il loro effetto impostando la proprietà order CSS dell'elemento su -1 (ordine: -1) e le classi order-last e order-(breakpoint)-last impostano il CSS ordina la proprietà al valore 13 (ordine: $ colonne + 1).
Riscriviamo l'esempio precedente utilizzando le classi d'ordine, che utilizzano la prima e l'ultima parola chiave:
Primo (su xs, sm verrà visualizzato per ultimo) Ultimo (su xs, sm verrà visualizzato per primo)
Un esempio che utilizza le classi dell'ordine con un numero e le parole first e last:
#1 (XS), #LAST (SM), #1 (MD, LG e XL) #2 (XS), #7 (MD, LG e XL) #3 (XS), #6 (MD, LG e XL ) #4 (XS), #5 (MD, LG e XL) #5 (XS), #4 (MD, LG e XL) #6 (XS), #3 (MD, LG e XL) #7 (XS ), #2 (MD, LG e XL) #8 (XS), #FIRST (SM), #8 (MD, LG e XL)
Un esempio di layout adattivo sulla griglia Boostrap 4Creiamo un layout responsive per il blocco della pagina web mostrato in figura utilizzando la griglia Bootstrap 4 Bootstrap 4 - Esempio di layout del blocco responsive 
1. Crea markup a blocchi per dispositivi mobili (xs).
(1) (2) (3) (4) (5)
2. Imposta il markup per il punto di controllo sm:
(1) (2) (3) (4) (5)
3. Imposta i blocchi sul numero di colonne che dovrebbero avere sui dispositivi md e lg:
(1) (2) (3) (4) (5)
4. Crea markup per xl:
(1) (2) (3) (4) (5)
Rimuoviamo i punti di controllo non necessari dai blocchi adattivi:
(1) (2) (3) (4) (5)
Inoltre, inizialmente in Bootstrap 4 il blocco reattivo ha una larghezza del 100%. Ciò consente di non specificare il numero di colonne durante la creazione di blocchi adattivi, se la loro larghezza iniziale deve essere di 12 colonne (100%).
(1) (2) (3) (4) (5)
In base al numero di stelle su GitHub.
Se vuoi padroneggiare Bootstrap, in particolare la sua ultima, quarta versione, allora questo materiale è stato preparato appositamente per te. Qui, utilizzando un piccolo esempio end-to-end che può essere padroneggiato davvero in mezz'ora, verranno dimostrate le basi di Bootstrap, una volta comprese sarai in grado di fare qualcosa di tuo utilizzando questo framework.
Ecco un sito Web di una pagina di cui parleremo della creazione utilizzando Bootstrap.
Progetto già pronto creato utilizzando Bootstrap
Npm installa il bootstrap
Bootstrap può essere connesso a una pagina utilizzando una rete di distribuzione dei contenuti. Per fare ciò, aggiungi il seguente collegamento al tag:
L'ultima versione di Bootstrap può essere scaricata da qui e utilizzata localmente.
La struttura del progetto dovrebbe assomigliare alla figura seguente.
Struttura del progetto Informazioni sulle funzionalità di Bootstrap 4 La prima versione stabile di Bootstrap 4 è stata rilasciata alla fine di gennaio di quest'anno. Bootstrap ora include alcune funzionalità interessanti che non erano presenti nella versione precedente. Vale a dire, se parliamo di miglioramenti e modifiche, possiamo notare quanto segue:
- Bootstrap 4 è stato riscritto utilizzando la tecnologia flexbox, mentre Bootstrap 3 ha utilizzato la tecnologia float. Se non hai familiarità con flexbox, dai un'occhiata a questa risorsa.
- Il CSS di Bootstrap 4 utilizza le unità rem, mentre in precedenza utilizzava le unità px. puoi scoprire in cosa differiscono.
- Alcuni componenti, come i pannelli, sono stati rimossi. Puoi trovare dettagli sulle modifiche apportate in Bootstrap 4.
La griglia è divisa in 12 colonne, questa struttura, configurata secondo le esigenze dello sviluppatore, costituisce la base dell'impaginazione.
Per utilizzare la griglia Bootstrap, è necessario aggiungere la classe .row all'elemento principale della pagina. Quando si impostano le dimensioni degli elementi nidificati, vengono utilizzate le seguenti classi (al posto di un asterisco alla fine del nome della classe, viene indicato il numero di colonne della griglia di base a 12 colonne che un particolare elemento dovrebbe occupare):
- col-lg-* - classe utilizzata per pagine destinate a dispositivi a schermo grande come i laptop;
- col-md-* - classe per pagine progettate per dispositivi con schermo di medie dimensioni, come i tablet;
- col-sm-* - classe per pagine progettate per schermi piccoli, come quelli presenti sugli smartphone.
Barra di navigazione
Quindi, affinché appaia una barra di navigazione nella pagina, aggiungeremo un tag a index.html con la classe .navbar , all'interno del quale, utilizzando altre classi come .navbar-brand , .navbar-toggler e .nav -item , creiamo alcuni elementi speciali e la struttura del sistema di navigazione del sito. La classe .fixed-top ti consente di fissare la barra di navigazione nella parte superiore della pagina. Ecco il layout della barra di navigazione:
Casa
Ora creiamo un file main.css e colleghiamolo alla pagina inserendo nel tag del file index.html quanto segue:
Ciò ti consentirà di personalizzare gli stili degli elementi della pagina inserendo le regole CSS in questo file. Aggiungiamo regole a questo file CSS che impostano il design del colore della barra di navigazione:
Navbar( sfondo:#F97300; ) .nav-link , .navbar-brand( colore: #f4f4f4; cursore: puntatore; ) .nav-link( margine destro: 1em !importante; ) .nav-link:hover( sfondo : #f4f4f4; colore: #f97300; ) .navbar-collapse( giustifica-contenuto: flex-end; ) .navbar-toggler( background:#fff !importante; )
La nuova griglia Bootstrap è basata su flexbox, quindi è necessario utilizzare le proprietà appropriate per allineare il contenuto. Ad esempio, per posizionare il menu della barra di navigazione a destra, è necessario utilizzare la proprietà aware-content e impostarne il valore su flex-end:
Navbar-collapse( giustifica-contenuto: flex-end; )
Per personalizzare il colore di sfondo della barra di navigazione è possibile utilizzare le classi .bg-light (sfondo chiaro), .bg-dark (sfondo scuro) e .bg-primary (colore di sfondo primario). Utilizziamo le seguenti impostazioni:
Bg-scuro( colore di sfondo:#343a40!importante ) .bg-primario( colore di sfondo:#343a40!importante )
Intestazione della pagina Il seguente tag viene utilizzato per descrivere l'intestazione della pagina:
Prepariamo un layout per l'intestazione della pagina. Vogliamo che occupi l'intera altezza della finestra, quindi jQuery tornerà utile qui. Creiamo un file main.js e colleghiamolo a index.html prima del tag di chiusura:
Aggiungiamo quanto segue al file main.js:
$(document).ready(function())( $(".header").height($(window).height()); ))
Sarebbe una buona idea inserire una bella immagine di sfondo nell'intestazione della pagina. Facciamolo in questo modo:
/*stile intestazione*/ .header( immagine di sfondo: url("../images/headerback.jpg"); allegato di sfondo: fisso; dimensione di sfondo: copertina; posizione di sfondo: centro; )
Questo è ciò che abbiamo ottenuto.
Intestazione della pagina con immagine di sfondo
Per ora l'intestazione del sito sembra un po' vuota, quindi aggiungiamoci un elemento, assegnandogli la classe .overlay , che porterà alla creazione di un blocco che si trova sopra l'immagine di sfondo dell'intestazione. Cambiamo la sezione del file index.html in cui abbiamo descritto l'intestazione come segue:
Quindi, in main.css, aggiungi quanto segue:
Sovrapposizione (posizione: assoluta; altezza minima: 100%; larghezza minima: 100%; sinistra: 0; superiore: 0; sfondo: rgba(244, 244, 244, 0,79); )
Ora aggiungiamo una descrizione del progetto nell'intestazione. Lo posizioneremo in un nuovo elemento con la classe .containter . Questa è una classe helper per il framework Bootstrap progettata per disporre i contenuti in base alle esigenze di un layout reattivo. Ecco come cambierà il markup in questo passaggio:
Ora aggiungiamo qui un altro elemento, al quale assegneremo la class.description:
▍ Ciao, benvenuto nel mio sito web ufficiale
Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Vedi altroAssegneremo anche la classe .text-center a questo tag, che consentirà di allineare il suo contenuto al centro della pagina. C'è un pulsante alla fine della descrizione del sito. Parliamo di come configurarlo. Pulsanti Bootstrap fornisce molte classi per i pulsanti. Puoi vedere alcuni esempi di design dei pulsanti. Come puoi vedere nell'esempio di markup della sezione precedente, abbiamo aggiunto le classi .btn e all'elemento. btn-contorno-secondario .
Ora impostiamo gli stili per class.description:
Descrizione (posizione: assoluta; superiore: 30%; margine: automatico; riempimento: 2em; ) .descrizione h1( colore:#F97300 ; ) .descrizione p( colore:#666; dimensione carattere: 20px; larghezza: 50%; altezza linea: 1,5; pulsante .descrizione (bordo: 1px solido #F97300; sfondo:#F97300; colore:#fff;)
Ecco come apparirà l'intestazione della pagina dopo aver completato i passaggi precedenti:
Intestazione della pagina contenente la descrizione del progetto Informazioni sulla sezione Per prima cosa, diamo un'occhiata a cosa vogliamo creare. Ecco una sezione della pagina con informazioni sullo sviluppatore web.
Informazioni sulla sezione
Qui utilizzeremo le funzionalità della griglia di Bootstrap per creare un layout di sezione in due parti. Iniziamo aggiungendo una classe .row all'elemento genitore della sezione:
La prima parte del layout si troverà a sinistra e conterrà una foto. La seconda parte, situata a destra, contiene una descrizione.
Ecco come appare il markup sul lato sinistro di questa sezione:
// lato sinistro 
S.Sviluppatore Web
E questo è ciò che accadrà dopo che la descrizione del lato destro del layout sarà stata aggiunta qui:
S.Sviluppatore Web ▍D.John
Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
Nota l'impostazione della larghezza delle colonne utilizzando le classi col-lg-* , col-md-* e col-sm-* descritte sopra.
Ecco gli stili per tutto questo:
Informazioni su (margine: 4em 0; imbottitura: 1em; posizione: relativa; ) .circa h1( colore:#F97300; margine: 2em; ) .circa img( altezza: 100%; larghezza: 100%; raggio bordo: 50% ) .about span( display: block; colore: #888; posizione: assoluta; sinistra: 115px; ) .about .desc( imbottitura: 2em; border-left:4px solid #10828C; ) .about .desc h3( colore: #10828C; ) .about .desc p( altezza linea:2; colore:#888; )
Sezione Portfolio Passiamo ora alla sezione in cui verrà presentato il portfolio dello sviluppatore. Conterrà una galleria di opere.
Sezione portfolio
Quando si crea il layout di questa sezione, vengono applicati gli stessi principi di lavoro con la griglia di cui abbiamo discusso sopra:
Portafoglio 
L'aggiunta della classe .img-fluid a ciascuna immagine le rende reattive.
Ogni elemento nella nostra gallery, su schermi medi e grandi, occupa 4 colonne (ricorda: la classe col-sm-12 viene utilizzata per dispositivi con schermi piccoli, la classe col-md-4 viene utilizzata per schermi medi, col-lg-4 - per dispositivi con schermi di grandi dimensioni). Di conseguenza, sugli schermi grandi e medi, un elemento rappresenterà circa il 33,3% dell'elemento contenitore; sui dispositivi piccoli, ogni elemento occuperà l'intero schermo (12 colonne).
Styling della gallery dei lavori:
/*Portfolio*/ .portfolio( margine: 4em 0; posizione: relativa; ) .portfolio h1( colore:#F97300; margine: 2em; ) .portfolio img( altezza: 15rem; larghezza: 100%; margine: 1em; )
Sezione blog e lavoro con le carte Parliamo della creazione di una sezione che contenga annunci di materiali dal blog gestito dal nostro sviluppatore web condizionale.
Sezione blog
Per creare questa sezione avremo bisogno delle cosiddette carte (carte nella terminologia Bootstrap).
Per creare una carta, devi includere un elemento nel layout e aggiungervi la classe .card. È possibile utilizzare le seguenti classi per configurare vari elementi della carta:
- .card-header: intestazione
- .card-body: contenuto principale
- .card-title: titolo
- .card-footer: piè di pagina
- .card-immagine: immagine
Blog 
Titolo del post
Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Per saperne di più
Titolo del post Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Per saperne di più
Titolo del post Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Per saperne di piùEcco gli stili delle carte:
Blog( margine: 4em 0; posizione: relativa; ) .blog h1( colore:#F97300; margine: 2em; ) .blog .card( box-shadow: 0 0 20px #ccc; ) .blog .card img( larghezza: 100%; altezza: 12em; ) .blog .carta-titolo( colore:#F97300; ) .blog .card-corpo( imbottitura: 1em; )
Ecco come apparirà la nostra pagina di una pagina dopo aver creato la sezione Blog:
Pagina dopo aver aggiunto la sezione Blog Sezione Team Questa sezione conterrà informazioni sul team di progetto.
Sezione squadre
Per formare questa sezione utilizzeremo una griglia, dividendo equamente lo spazio disponibile tra le immagini. Ogni immagine (su schermi grandi e medi) occuperà 3 colonne della griglia, ovvero il 25% dello spazio totale.
Ecco il markup HTML per questa sezione:
La nostra squadra 
Sara Direttore 
Chris S.ingegnere Sviluppatore front-end Layla J.Jirard Direttore della squadra
Ed ecco gli stili:
Team( margine: 4em 0; posizione: relativa; ) .team h1( colore:#F97300; margine: 2em; ) .team .item( posizione: relativa; ) .team .des( sfondo: #F97300; colore: #fff ; allineamento testo: centro; bordo inferiore sinistro: 93%; transizione: .3s facilità di entrata e uscita)
Decoriamo questa sezione con l'animazione che appare quando passi il mouse sulle immagini. Dovrebbe assomigliare all'immagine qui sotto.
Animazione quando si passa il mouse su un'immagine
Per ottenere questo effetto, aggiungi i seguenti stili a main.css:
Team .item:hover .des( altezza: 100%; sfondo:#f973007d; posizione: assoluta; larghezza: 89%; imbottitura: 5em; superiore: 0; bordo-inferiore-raggio-sinistra: 0; )
Modulo di feedback Questa sezione della pagina conterrà un modulo con il quale i visitatori del sito potranno inviare messaggi al proprietario del sito. Qui, come al solito, per modellare gli elementi e garantirne la reattività, utilizzeremo le funzionalità di Bootstrap.
Modulo di feedback
Come Bootstrap 3, Bootstrap 4 utilizza la classe .form-control per i campi di input, ma ora c'è qualcosa di nuovo. Ad esempio, invece dell'obsoleto class.input-group-addon, viene utilizzato il nuovo class.input-group-prepend (per icone ed etichette). Maggiori dettagli su questo possono essere trovati nella documentazione di Bootstrap 4. Nel nostro caso, ogni campo di input verrà inserito in un elemento a cui è assegnata una classe .form-group.
Aggiungiamo quanto segue al file index.html:
Mettiti in contatto
Ecco gli stili per la sezione del modulo di feedback, che dovrebbe essere inserito nel file main.css:
Modulo di contatto (margine: 6em 0; posizione: relativa; ) .modulo di contatto h1 (imbottitura: 2em 1px; colore: #F97300; ) .modulo di contatto .right( larghezza massima: 600px; ) .modulo di contatto . right .btn-secondary( background: #F97300; color: #fff; border:0; ) .contact-form .right .form-control::placeholder( color: #888; font-size: 16px; )
Caratteri I caratteri standard non sono adatti a tutti. Abbiamo sfruttato l'API Google Font per utilizzare il carattere Raleway nel nostro progetto. Starà molto bene qui. Per importare il carattere, aggiungi la seguente direttiva al file main.css:@import url("https://fonts.googleapis.com/css?family=Raleway");
Successivamente, impostiamo gli stili globali per i vari tag HTML:
Html,h1,h2,h3,h4,h5,h6,a( famiglia di caratteri: "Raleway"; )
Effetti di scorrimento L'immagine seguente mostra il comportamento della pagina che vogliamo ottenere.
Scorrimento della pagina quando si fa clic sui collegamenti nella barra di navigazione
Affinché la pagina possa scorrere agevolmente fino alla sezione desiderata quando si fa clic sui collegamenti della barra di navigazione, dovremo ricorrere alle funzionalità di jQuery. Se non hai molta familiarità con questa libreria, sappi che non c'è nulla di complicato qui: aggiungi semplicemente il codice seguente al tuo file main.js:
$(".navbar a").click(function())( $("body,html").animate(( scrollTop:$("#" + $(this).data("value")).offset ( ).inizio ),1000) ))
Successivamente, aggiungi un attributo data-value a ciascuno dei collegamenti nella barra di navigazione e rendi il markup simile a questo:
Affinché tutto ciò funzioni finalmente, non resta che aggiungere l'attributo id all'elemento principale di ogni sezione della pagina. In questo caso, devi assicurarti che il suo valore sia identico a quello specificato nell'attributo data-value del collegamento corrispondente. Ad esempio, ecco l'attributo corrispondente per la sezione Informazioni:
Questo completa il nostro esempio. Aggiungere etichette
Il rilascio della nuova versione di Bootstrap4 mi ha spinto a scrivere questa guida perché la nuova versione è notevolmente diversa. Dovrete dedicare un po' di tempo a studiarlo, ma ne vale la pena. Questa guida non è una guida completa a Bootstrap4 e senza dubbio dovrai dare un'occhiata alla documentazione più di una volta, ma qui tratteremo le basi della creazione di un layout di sito web con Bootstrap4 in due modi diversi.
Installazione Nel nostro caso utilizzeremo SASS e quindi utilizzeremo l'installazione completa.Se hai solo bisogno di Bootstrap per la prototipazione rapida, ha senso utilizzare il metodo CDN. Basta collegare i file che si trovano su altre risorse su Internet, senza installazione (download). In questo modo li aggiungi al tuo progetto come collegamenti.
Puoi semplicemente aggiungere il codice dell'esempio seguente al file di progetto: index.html
Modello iniziale Bootstrap 4 Ciao< /h1>
Questo codice proviene direttamente dalla pagina bootstrap di Bootstrap 4.
Con questo modello puoi iniziare subito a utilizzare Bootstrap. Il vantaggio è che è facile iniziare, ma lo svantaggio è che perdi la personalizzazione offerta da Sass.
Installazione di Bootstrap 4 tramite NPM Inizieremo il nostro progetto proprio qui a questo punto. Ciò richiederà l'utilizzo di Node.js e del suo gestore pacchetti per installare il dispositivo di avvio stesso insieme a molti altri pacchetti. Questo ci darà accesso a Sass, ricarica in tempo reale, ecc.Innanzitutto, assicurati di avere Nodejs installato aprendo la console o la riga di comando:
Se ottieni la versione corrente, va tutto bene e puoi continuare, ma in caso contrario, scarica il programma di installazione appropriato in base al tuo sistema operativo e segui la procedura di installazione con le impostazioni predefinite.
Puoi leggere alcune informazioni utili sulla configurazione nel mio post - NPM Configuring Gulp and SASS Compilation
Una volta completata l'installazione, riavvia la console o la riga di comando e avrai accesso ai comandi Node.js.
Creiamo una cartella per il nostro progetto ed entriamo al suo interno:
Mkdir bs4 && cd bs4
Eseguiremo quindi npm init per creare un file package.json che memorizza semplicemente le nostre dipendenze.
(Nota: il flag -y ci consente semplicemente di saltare le risposte a varie query e fornire loro invece valori predefiniti)
Utilizzeremo quindi nuovamente npm per installare diversi pacchetti diversi a seconda delle nostre dipendenze di sviluppo:
Npm installa gulp browser-sync gulp-sass --save-dev
Utilizzeremo quindi npm un'ultima volta per installare alcuni pacchetti come normali dipendenze del progetto:
Npm installa bootstrap jquery popper.js --save
Ora è il momento di aprire il nostro progetto nell'editor di codice. Utilizzerò Sublime 3.
Dobbiamo creare una cartella src per il nostro progetto e diverse sottocartelle al suo interno. L'albero si presenta così:
/src /assets /css /js /scss
All'interno di /src crea anche 4 cartelle come mostrato sopra.
Quindi crea un file index.html all'interno di /src/ con il seguente contenuto:
Layout di Bootstrap 4< /title> < meta name="viewport" content="width=device-width, initial-scale=1.0" /> < /head> < body> < /body> < /html>
Sto importando il carattere Raleway insieme a FontAwesome per le icone. Quindi faccio riferimento ai file bootstrap.css e stili.css. Non esistono ancora, ma li creeremo presto.
Creiamo anche un file stili.scss all'interno della cartella /src/scss/. Introdurremo una variabile rapida e una serie di regole per assicurarci che la compilazione di Sass funzioni:
$bg-colore:rosso; corpo ( sfondo: $bg-color; )
Nella cartella principale (cartella del progetto), crea un file gulpfile.js e incolla il seguente contenuto:
Var gulp = require("gulp"); var browserSync = require("sincronizzazione del browser").create(); var sass = require("gulp-sass"); // Compila sass nel CSS e inseriscilo automaticamente nei browser gulp.task("sass", function() ( return gulp.src(["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss "]).pipe(sass()) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); )); // Sposta i file javascript nella nostra cartella /src/js gulp.task("js", function() ( return gulp.src(["node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/ jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js"]) .pipe(gulp.dest("src/js")) .pipe(browserSync.stream ()); // Server statico + visualizzazione dei file scss/html gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "./src" )); gulp.watch(["node_modules /bootstrap/scss/bootstrap.scss", "src/scss/*.scss"], ["sass"]); gulp.watch("src/*.html").on("cambia", browserSync.reload );)); gulp.task("default", ["js","serve"]);
Descriverò cosa sta succedendo qui in base alle attività definite sopra:
Eseguiamo gulp dalla riga di comando:
Funziona così:
- Usa m per il margine o p per il riempimento
- Dopo m o p aggiungi: t (in alto -), b (in basso), l (a sinistra), r (a destra), x (a sinistra e a destra), y (in alto e in basso) o niente per tutti e 4 i lati.
- Dopo il trattino, si specificano le dimensioni da 0 a 5 (5 è il numero massimo di spazi).
Quindi nel nostro esempio sembra che dobbiamo usare margine E metter il fondo a per allontanare le carte sottostanti.
Sul primo contenitore della carta aggiungi mb-4:
Ora risolto:
Ecco come puoi gestire facilmente sia i margini che il riempimento in Bootstrap 4.
Giochiamo un po' utilizzando diversi componenti di Bootstrap 4.
Lavorare con "Tipografia" in Bootstrap 4 Aggiungiamo una sezione sotto le nostre 3 colonne alla fine della chiusura per la classe riga, che avrà 2 colonne.La prima colonna utilizzerà la maggior parte delle colonne (8) e la colonna di destra servirà per la navigazione verticale nella sezione successiva.
Una rubrica importante
Qui può stare una sorta di sottovoce importante, che è più grande e grigia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
..a breve la navigazione verticale..Bootstrap 4 ha una sezione Tipografia nella sua documentazione che ti fornirà tutte le classi di supporto basate sul tipo. È piuttosto semplice. Noi usiamo .Guida per evidenziare il sottotitolo sotto il nostro elemento h3.
Ha anche una sezione Utilità di testo nella sua documentazione che offre opzioni per l'allineamento del testo, la conversione, il corsivo e il peso dei caratteri.
Nelle finestre di piccole dimensioni, diciamo che vogliamo che il nostro testo sia centrato anziché quello predefinito, che è allineato a sinistra.
Ciò farà sì che il testo contenuto nel div sia centrato sulle finestre piccole e allineato a sinistra su quelle medie e più grandi.
Bootstrap 4 Navigazione verticale Aggiungeremo un ulteriore elemento prima di entrare nella personalizzazione. Nella colonna di destra che abbiamo appena aggiunto, aggiungiamo la navigazione verticale:Menù secondario
Il risultato nel browser dovrebbe assomigliare a questo:
Puoi anche testarlo su piccole finestre e notare che è reattivo. Naturalmente ci sono molte altre opzioni relative alla navigazione.
Personalizzazione in Bootstrap 4 Ora abbiamo un layout abbastanza standard che puoi trovare sulla maggior parte dei siti web.Fortunatamente, Bootstrap 4 ha un sistema solido che semplifica la personalizzazione di elementi semplici.
Apri il file /src/scss/styles.scss e incolla quanto segue:
// Sostituzioni variabili // Bootstrap Sass Imports @import "node_modules/bootstrap/scss/bootstrap";
Secondo la sezione Temi, puoi scegliere di includere tutti i file sass di Bootstrap 4 o aggiungere singoli elementi a seconda delle tue esigenze. Per semplificare le cose, importeremo semplicemente tutto come sopra.
Cambiare i colori del tema in Bootstrap 4 Forse il problema più comune è cambiare i colori.Se apri il file node_modules/bootstrap/scss/_variables.scss, noterai che in alto viene menzionato un sistema di colori. In questa sezione vedrai tutte le variabili che puoi riscrivere per abbinare i colori.
Cambiamo solo il colore di base, cambiamo style.scss nel seguente:
// La variabile sovrascrive $theme-colors: ("primary": #d95700);
Salvatelo e questo è il risultato:
Molto semplice!
Cambiamo anche il colore di sfondo:
// La variabile sovrascrive $theme-colors: ("primary": #d95700); $corpo-bg: #ededed;
Ora il risultato è simile a questo:
Hmm, ora la nostra sezione Jumbletron (eroe) sembra brutta dato che era anch'essa grigia.
Possiamo impostare impostazioni personalizzate per determinati elementi utilizzando l'ispettore in Chrome o Firefox, trovare le classi di elementi associate che vogliamo modificare e modificarle nel nostro file Styles.scss.
In questo caso, la classe responsabile del jumbotron è .jumbotron. Cambiamo il colore dello sfondo e aggiungiamo un piccolo bordo in alto per simulare l'ombra dalla barra di navigazione:
// La variabile sovrascrive $theme-colors: ("primary": #d95700); $corpo-bg: #ededed; .jumbotron ( colore di sfondo: #ffffff !importante; bordo superiore: 3px solido rgb(219, 219, 219); )
Ora il risultato:
Nel gennaio di quest'anno, Bootstrap 4 (noto anche come v4) è stato finalmente rilasciato dopo essere rimasto nelle versioni alpha per oltre due anni. Rappresenta una seria riscrittura della funzionalità. Non solo introduce molti cambiamenti dietro il cofano, Bootstrap 4 contiene anche una serie di nuovi concetti su cui dovrai comprendere.
Pertanto, in questo articolo parlerò delle modifiche più importanti apportate a Bootstrap nella v4 rispetto alla v3. Presumo che tu abbia già utilizzato Bootstrap, quindi non spiegherò i principi di base.
Ora diamo un'occhiata alle modifiche più importanti (in ordine sparso):
N. 1: visualizzazione pulsanteCominciamo con qualcosa di divertente e visivo! I pulsanti nella v4 hanno un design più piatto rispetto alla v3. Ecco i pulsanti precedenti:
Ed eccone alcune delle novità:
Questo è più in linea con le guide di progettazione moderne, come le guide di Material Design che hanno guadagnato enorme popolarità negli ultimi due anni.
N. 2: query multimediali migliorateA mio parere, Boostrap v3 aveva troppo pochi punti di controllo per la griglia, ad esempio il più piccolo, xs, era a 768 pixel. Oggi molto traffico proviene da dispositivi molto più piccoli e questo è stato frustrante per molti sviluppatori.
$ punti di interruzione della griglia: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;
$ griglia - punti di interruzione: ( x: 0, sm: 576px, md: 768px, LG: 992px, XL: 1200px ) ! predefinito ; |
Ciò semplifica la creazione di griglie che funzionano bene su schermi di tutte le dimensioni.
N. 3: Il supporto Flexbox ci offre maggiore flessibilitàLe famose griglie di Bootstrap vengono ora create utilizzando Flexbox anziché float. A prima vista, questo non fa molta differenza per gli sviluppatori poiché la maggior parte dei layout a griglia funziona esattamente allo stesso modo. Tuttavia, questo apre diverse nuove possibilità.
In precedenza, dovevamo definire la larghezza di ciascuna colonna (da 1 a 12). Ora puoi definire la larghezza di una colonna e poi lasciare che Flexbox imposti automaticamente la larghezza delle altre. Ecco un esempio di come eseguire questa operazione:
Come puoi vedere, impostiamo la larghezza della colonna centrale su 6 (che è la metà della larghezza totale) e le altre colonne occupano semplicemente il resto dello spazio.
1 di 3 2 di 3 (più ampio) 3 di 3
< div class = "container" > < div class = "row" > < div class = "col" > 1 di 3 < / div > < div class = "col-6" > 2 di 3 (più ampio) < / div > < div class = "col" > 3 di 3 < / div > < / div > < / div > |
Bootstrap 4 include anche una serie di classi che puoi utilizzare per gestire contenitori ed elementi Flexbox. Per trasformare un elemento in un contenitore Flexbox, assegnagli semplicemente la classe d-flex.
Sono un contenitore flexbox!
< div class = "d-flex" >Sono un contenitore flexbox!< / div > |
Questo dà un contenitore Flexbox con del testo al suo interno:
Nota. Mi occuperò solo degli stili relativi a Flexbox.
Aggiungiamo qualche altro elemento e introduciamo un'altra classe per controllare come sono posizionati nel contenitore.
Quadro Bootstrap 4 Avvio rapido
Impara le basi di Bootstrap 4 con un esempio pratico di progettazione di un blog da zero
< div >Articolo flessibile< / div >
< div >Articolo flessibile< / div >
< div >Articolo flessibile< / div >
< / div >
Di conseguenza, gli elementi sono centrati nel contenitore:
#4: Gestione del rientro utilizzando le classiÈ molto bello. Ora puoi controllare il riempimento e i margini utilizzando le classi p-* e m-*. Il riempimento può variare da 0,25 a 3 rem utilizzando i numeri da 0 a 5. Ad esempio, impostiamo il contenitore Flexbox sulla classe p-5 per creare il massimo riempimento.
Ciao a tutti, amici! Bootstrap 3 è stato rilasciato a metà del 2013 e nel corso degli anni ha dimostrato di essere un framework CSS comodo ed estensibile per creare rapidamente layout reattivi. Milioni di siti utilizzano con successo questo framework e noi ci siamo già abbastanza abituati.
Freddo
Balbettare
Il 18 gennaio 2018 si è verificato un evento importante: la tanto attesa versione di Bootstrap 4 è uscita dalla beta, basata sull'utilizzo del modello Flexbox per il markup, che attualmente supporta già tutti i browser moderni ed è più conveniente e flessibile per gli sviluppatori rispetto al classico modello di markup basato su Float. Ora possiamo dire con assoluta certezza che non è possibile, ma DEVE essere dattiloscritto utilizzando Flex!
Materiali aggiuntivi per le lezioni di Bootstrap 4Oggi daremo uno sguardo più da vicino al lavoro con la griglia Bootstrap 4, confrontandola lungo il percorso con la vecchia versione. Questa lezione ti sarà utile non solo se sei un principiante e stai familiarizzando con Bootstrap, ma anche se sei uno sviluppatore esperto e desideri apprendere tutte le regole e le sfumature del layout utilizzando la griglia Bootstrap 4 e gli strumenti Flexbox inclusi in Esso.
1. Parametri di rete predefiniti di baseLa griglia predefinita di Bootstrap 4 è molto simile alla terza versione, ma presenta alcune differenze importanti.
Dalla tabella delle opzioni principali si notano evidenti differenze rispetto alla griglia della terza versione. Il prefisso della classe “.col-xs-”, responsabile delle risoluzioni più piccole, è stato ora rimosso e sostituito da un prefisso semplificato “.col-”. Potresti pensare erroneamente che il prefisso “.col-” sia responsabile delle risoluzioni minime dei dispositivi mobili, ma questo non è del tutto vero. Tra le altre cose, il prefisso “.col-” è una delle innovazioni più importanti di Bootstrap 4. Si tratta di una classe responsabile della disposizione automatica delle colonne a qualsiasi risoluzione. Ma ne parleremo più avanti.
Per risoluzioni piccole è responsabile il prefisso “.col-sm-” con una media query di 576 pixel. La larghezza del contenitore è 540 px. Le risoluzioni medie partono da 768 pixel. Larghezza del contenitore: 720 px. Le risoluzioni più elevate funzionano con risoluzioni del dispositivo pari o superiori a 992 pixel. Larghezza del contenitore: 960 px. E quelli più grandi - da 1200 pixel. La larghezza del contenitore è fissa a 1140 px.
Tieni presente che i valori massimi delle media query hanno valori imprecisi con la parte frazionaria ".98" in pixel. Ciò è evidente quando si sceglie il metodo di layout Desktop First, in cui la larghezza massima della query multimediale è limitata. Ad esempio, quando compiliamo Sass “+media-breakpoint-down(lg)” otterremo “@media (max-width: 1199.98px)”. Qui vengono liberati 0,02 pixel per avviare la successiva media query. Tienilo a mente. Nei prossimi numeri di "Jedi Layout 8" esamineremo questo e molti altri punti di questa lezione utilizzando un esempio reale.
2. Layout automatico delle colonne 2.1 Colonne della stessa larghezzaUtilizzando la nuova classe generica ".col", è possibile specificare fino a 12 colonne in una riga (madre di ".row"), la cui larghezza verrà calcolata automaticamente in base al numero di elementi e sarà uguale.
Per esempio:
2.2 Impostazione della larghezza di una colonna Puoi anche impostare esplicitamente la larghezza di una colonna e lasciare il resto automatico.
1 di 3 2 di 3 (largo) 3 di 3 1 di 3 2 di 3 (largo) 3 di 3 
In questo esempio, il secondo elemento nella terza riga ha la classe ".col-6" e il secondo elemento nella seconda riga ha la classe ".col-5", che occupano il numero corrispondente di colonne su tutte le risoluzioni dello schermo. La larghezza delle colonne rimanenti è reattiva e viene calcolata automaticamente, occupando tutto lo spazio rimanente.
2.3 Contenuto a larghezza variabilePuoi utilizzare la classe "col-(breakpoint)-auto" per definire un contenuto con una larghezza variabile, a seconda dello spazio occupato dal contenuto della colonna. Dove punto di interruzione è la dimensione dello schermo (xl, lg, md o sm).
1 di 3 Contenuto a larghezza variabile 3 di 3 1 di 3 Contenuto a larghezza variabile Numero Due 3 di 3 
Qui vediamo che le due colonne centrali occupano una larghezza corrispondente alla larghezza del contenuto, ma nella prima riga, grazie alla classe ".justify-content-sm-center" di ".row", l'intera riga è centrata e la larghezza totale dipende solo dalla larghezza della colonna centrale, mentre la seconda riga viene allungata fino all'intera larghezza disponibile, ma la seconda colonna rimane fissa alla larghezza del contenuto.
2.4 MultifilaGrazie a Bootstrap 4, puoi creare più righe (trattini) in una riga. Questo può essere implementato utilizzando la classe “.w-100”, che è molto simile al tag “br” e essenzialmente si limita a mandare a capo le colonne su una nuova riga.
col col col col col col 
Una caratteristica molto interessante di Bootstrap 4 è la possibilità di impostare colonne universali che verranno visualizzate a tutte le risoluzioni. Questa è la classe ".col" menzionata in precedenza. Inoltre, puoi definire una classe che indica il numero specifico di colonne che occuperà il contenuto: queste sono classi con il prefisso “.col-(numero di colonne)”, ad esempio “.col-6” ci dice che il il contenuto occuperà 6 colonne su 12. Nei casi in cui non sia necessario specificare una quantità specifica, si può tranquillamente utilizzare la classe universale “.col”.
col col col col col-8 col-4 
È possibile utilizzare il prefisso della classe ".col-sm-(numero di colonne occupate)" per definire la griglia di base a tutte le risoluzioni tranne quelle più piccole. Sugli schermi piccoli, le colonne di tale griglia si impilano una sotto l'altra. Per quanto riguarda le autorizzazioni in più: occuperanno tutto lo spazio definito nelle classi.
col-sm-8 col-sm-4 col-sm col-sm col-sm 
Qui vediamo che la prima riga sui dispositivi con una risoluzione superiore a “sm”, ovvero superiore a 576 pixel. è diviso in 2 colonne, rispettivamente larghe 8 e 4 su 12. La larghezza delle colonne nella seconda riga viene calcolata automaticamente, ma alle risoluzioni più piccole queste colonne si impilano anche una sotto l'altra, grazie alla classe “.col-sm”.
3.3 Creazione di una mesh combinata complessaCon Bootstrap puoi creare qualsiasi combinazione di colonne durante la creazione di una griglia. Per ogni colonna è possibile impostare qualsiasi comportamento a risoluzioni diverse utilizzando classi adattive. Qui le differenze rispetto alla terza versione stanno solo nei nomi delle classi.
.col-12 .col-md-8 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-6 
Bootstrap 4 si basa su "flex" e ci offre tutte le funzionalità di questo modello, disponibili in semplici classi già pronte. Le possibilità includono l'allineamento verticale e orizzontale.
4.1 Allineamento verticale In alto In alto In alto In mezzo In mezzo In mezzo In basso In basso In basso
Oltre a controllare l'allineamento tramite il genitore ".row", puoi allineare le colonne assegnando loro le classi appropriate:
Superiore Medio Inferiore 
Inoltre, Bootstrap 4 dispone di strumenti per l'allineamento orizzontale delle colonne utilizzando il prefisso ".justify-content-" su ".row".
riga giustifica-inizio-contenuto riga giustifica-inizio-contenuto riga giustifica-centro-contenuto riga giustifica-centro-contenuto giustifica-fine-contenuto giustifica-fine-contenuto giustifica-contenuto-intorno giustifica-contenuto-intorno giustifica-contenuto-tra giustifica -contenuto-tra 
Molto spesso ci sono situazioni in cui è necessario rimuovere i margini tra le colonne. Ad esempio, se stai creando una galleria e gli elementi devono essere posizionati vicini tra loro, in questo modo:
Per fare ciò basta impostare la classe aggiuntiva “.no-gutters” sull’elemento “.row”.
col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md -4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col -md-4 col-6 col-sm-4 col-md-4 
Se una riga (.row) viene riempita con un numero totale di colonne superiore a 12, la colonna successiva viene spostata su una nuova riga.
.col-9 .col-4
9 + 4 = 13 colonne - sono più di 12. Questo elemento, largo 4 colonne, verrà spostato su una nuova riga. .col-6
Le seguenti colonne saranno posizionate lungo la linea. 
È possibile utilizzare classi speciali con il prefisso ".order-" per definire l'ordine degli elementi. Se hai familiarità con il layout Flex, queste regole ti saranno familiari. Bootstrap 4 ti dà la possibilità di impostare l'ordine degli elementi utilizzando le classi. Puoi impostare l'ordine direttamente (.order-1.order-md-2):
Primo elemento non ordinato 
Oppure puoi utilizzare classi speciali che determinano l'ordine del primo e dell'ultimo elemento (.order-first, .order-last):
Primo non ordinato Secondo, ordinato come ultimo Terzo, ordinato come primo
5.2 Offset delle colonnePer analogia con Bootstrap 3, anche la versione 4 ha la possibilità di spostare orizzontalmente le colonne, ma questo è implementato in modo leggermente diverso e per questo esistono classi speciali con il prefisso “.offset-”.
5.2.1 Classi di spostamentoPuoi spostare una colonna a destra utilizzando le classi ".offset-md-*", che aumentano il rientro sinistro di * il numero di elementi. Dall'esempio seguente, la classe ".offset-md-2" sposterà la colonna ".col-md-4" di 2 colonne a destra, il resto degli esempi funziona allo stesso modo:
.col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset -md-3 
È abbastanza prevedibile che Bootstrap 4 supporti l'annidamento degli elementi. Qui tutto funziona come nella terza versione: per annidare colonne all'interno di altre, è necessario creare una classe figlia “.row” e nidificare le colonne al suo interno.
Livello 1: ".col-sm-9" Livello 2: ".col-8 .col-sm-6" Livello 2: ".col-4 .col-sm-6" 
Abbiamo esaminato le caratteristiche principali del lavoro con la griglia Bootstrap 4. Se vuoi acquisire maggiore familiarità con tutte le funzionalità del framework, ti consiglio di studiare la documentazione sul sito ufficiale.
Nella prossima lezione, esamineremo l'impostazione della griglia Bootstrap per il tuo progetto specifico utilizzando l'esempio dell'utilizzo di OptimizedHTML 4 nel modello iniziale, ovvero l'impostazione, l'utilizzo di variabili di rientri, punti di interruzione, numero di colonne e altre cose.
