Realizzazione sito web con Bootstrap
La griglia Bootstrap è al centro del framework. Alla base di tutto. È il cuore e l’anima del boilerplate e il motivo principale per cui lo scegliamo in primo luogo. In una parola, è dove tutto inizia. Se vuoi abbracciare il potere del Bootstrap , devi conoscerlo dentro e fuori.
Quando si tratta della griglia Bootstrap, non c’è nulla di complicato. Come ogni altra cosa, obbedisce alle regole generali ed è costruito secondo principi che rimangono coerenti. Naturalmente, sai già che ha 12 colonne, righe illimitate e richiede una classe .container per costruire un layout di base.
Tuttavia, ci sono ancora alcune cose che potresti trovare confuse. Per eliminare queste incertezze, chiariamo un po’ le cose.
Significato dei numeri nelle classi principali della griglia Bootstrap
Mentre i principi della griglia Bootstrap sono evidenti, può essere un po’ confuso avere la comprensione del significato dietro i numeri. Rompiamo il codice dietro .col-sm-3.
.col-sm-3
- col: indica una colonna
- sm – indica un tipo di dimensione dello schermo; ci sono quattro diversi tipi
- sm – piccoli schermi: la maggior parte dei telefoni cellulari di medie dimensioni con dimensioni del monitor si trova tra 576 pixel e 767 pixel
- md – schermi medi: desktop con dimensioni del monitor comprese tra 768 px e 991 px
- LG – schermi grandi: monitor standard con dimensioni comprese tra 992 px e 1199 px.
- xl – extra large: schermi superiori a 1200px
- 3: indica il numero di colonne della griglia Bootstrap da unire e formare un’area; puoi mettere qualsiasi numero da 1 a 12
Nota in Bootstrap 4, “xs”, è stato eliminato il punto di interruzione che copre i telefoni cellulari i cui monitor sono inferiori a 768 px. Invece, dovresti usare .col-. È applicabile per layout con larghezza inferiore a 576 px.
Mentre un numero alla fine di una classe si spiega da sé, l’abbreviazione “sm” può confonderne alcuni. Allora perché ne hai bisogno? Questa classificazione dei monitor, o per dirla in altri termini con una gamma di punti di interruzione, consente agli sviluppatori di controllare il layout e modificarne il comportamento al fine di rendere il sito Web l’aspetto desiderato. Questo meccanismo è alla base della flessibilità della reattività Bootstrap. Per esempio:
|
1
|
<div class="col-6 col-sm-4">Column 1</div> |
Questo codice indica che la colonna 1 avrà una larghezza di 1/2 sui telefoni cellulari, ma una larghezza di 1/3 su tablet, monitor desktop di grandi dimensioni e persino telefoni cellulari con monitor superiori a 576 px.
Inoltre, è fondamentale notare che non sei obbligato a elencare tutte le classi della griglia poiché le classi che definiscono il comportamento su schermi più piccoli impostano il comportamento su schermi più grandi fino a quando non vengono ignorate. Nel nostro caso particolare, non è necessario specificare .col-md-4, .col-lg-4 e col-xl-4 poiché lo ha fatto col-sm-4.
Allineamento verticale in Bootstrap Grid v3 e v4
Se stai lottando con Bootstrap 3, l’allineamento verticale può ancora essere un incubo. Se è necessario centrare una colonna, esistono due metodi.
Innanzitutto, puoi beneficiare delle classi di offset. Il markup può apparire così
|
1
2
3
|
<div class="row"> <div class="col-md-2 col-md-offset-5"></div></div> |
Il secondo metodo implica l’utilizzo del margine comprovato nel tempo: la tecnica automatica. Il markup è questo
|
1
2
3
4
|
.col-centered{ float: none; margin: 0 auto;} |
Come per gli altri fortunati che preferiscono la versione più fresca, aggiornata e avanzata della piastra della caldaia (ovvero la quarta), tutto viene fatto con solo poche righe di codice grazie a Flexbox.
Usa align-self-center in questo modo
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div class="row"> <div class="col-8 align-self-center"> <div> Center </div> </div> <div class="col-4 align-self-center"> <div> Center </div> </div></div> |
Puoi anche utilizzare utilità di visualizzazione integrate come display: tabella, display: tabella-cella, display: in linea per centrare le cose. Il markup può apparire così
|
1
2
3
4
5
6
7
|
<div class="row"> <div class="col-sm-12 d-table"> <div class="card card-block d-table-cell align-middle"> I am centered vertically </div> </div></div> |
Come creare 5 colonne uguali nella griglia Bootstrap
Questo è difficile ma molto eccitante. Anche se la griglia Bootstrap si basa su 12 colonne, è comunque possibile creare una struttura che utilizza un numero dispari di colonne. Se stai usando l’ultima versione della piastra della caldaia, tutto è facile. Grazie a Flexbox, definisci cinque colonne e dividono l’area in parti uguali. Lo snippet di codice è simile al seguente
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<div class="row"> <div class="col"> 1 of 5 </div> <div class="col"> 2 of 5 </div> <div class="col"> 3 of 5 </div> <div class="col"> 4 of 5 </div> <div class="col"> 5 of 5 </div></div> |
Tuttavia, se stai ancora lavorando con la terza versione, devi creare una classe speciale in cui imposti la larghezza specifica per ogni colonna e aggiungila al tuo foglio di stile generale. La classe dovrebbe apparire così
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
.col-xs-5ths,.col-sm-5ths,.col-md-5ths,.col-lg-5ths { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}.col-xs-5ths { width: 20%; float: left;}@media (min-width: 768px) { .col-sm-5ths { width: 20%; float: left; }}@media (min-width: 992px) { .col-md-5ths { width: 20%; float: left; }}@media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; }} |
Successivamente, puoi usarlo liberamente nel documento in questo modo
|
1
2
3
4
5
|
<div class="row"> <div class="col-md-5ths"> ... </div></div> |
Risorse utili per la griglia Bootstrap
Sebbene la griglia Bootstrap non sia responsabile della parte decorativa del sito Web poiché il suo lavoro consiste nel supporto silenzioso dell’intera interfaccia, tuttavia, ci sono ancora alcuni strumenti preziosi che aiutano a gestirlo in modo efficiente.
Generatori di reti Bootstrap
Shoelace è uno strumento popolare per costruire griglie Bootstrap . Manipola righe e colonne e passa tra anteprime su telefono, tablet, desktop e desktop di grandi dimensioni per modificare ognuna di queste versioni di layout.
Layoutit
A differenza del precedente esempio specializzato nella terza versione della piastra della caldaia, il team dietro Layoutit segue gli aggiornamenti. Pertanto, il loro generatore di griglia visivo Bootstrap è incentrato sulla quarta versione. Qui è possibile costruire le basi e popolarle con componenti di base, sia statici che dinamici, creando un wireframe del futuro sito Web.
A proposito, se i generatori di griglie Bootstrap non sono sufficienti, ti consigliamo di dare un’occhiata ai costruttori Bootstrap. Non solo aiutano a creare una solida base per il futuro sito Web, ma progettano anche l’intera interfaccia da zero utilizzando splendidi componenti realizzati a mano.
Costruttori Bootstrap
Startup è un noto generatore di Bootstrap gratuito per temi. Copre un gran numero di componenti che si distinguono per un design moderno, una natura professionale e una piacevole esperienza utente. Insieme all’utilizzo di elementi predefiniti, gli sviluppatori sono invitati a personalizzare ogni centimetro dell’interfaccia; quindi, costruendo modelli perfettamente funzionanti che soddisfino le loro aspettative senza troppi problemi.
MobiRise
Mobirise è un altro generatore Bootstrap che funziona sul tuo PC locale. È disponibile per utenti Windows e Mac. Proprio come Startup, inoltre non richiede alcuna abilità di codifica. C’è una comoda interfaccia in cui tutto può essere creato trascinandolo.
Bootstrap Studio
Bootstrap Studio è un’applicazione desktop che si concentra sulla creazione di siti Web utilizzando la griglia Bootstrap. Proprio come lo Startup, l’editor visivo viene continuamente aggiornato in modo da poter beneficiare degli ultimi miglioramenti nel framework. Viene fornito con numerosi componenti che ti piaceranno con il suo design personalizzato.
Modelli di griglia Bootstrap per designer
Laddove per gli sviluppatori tutto inizia con il mixaggio e l’abbinamento di classi e utilità, per i progettisti tutto inizia con una tela pulita in uno dei più popolari programmi di progettazione grafica. E, se vuoi creare un modello Bootstrapcompatibile , hai bisogno di un mockup correttamente allineato che includa tutti i piccoli dettagli come grondaie, dimensioni delle finestre, ecc. Ecco un piccolo elenco di omaggi per risolvere questo problema.
- Per coloro che preferiscono Photoshop, Alexander Rechsteiner ha creato un modello PSD Bootstrap 4 Grid con varie utili funzioni all’interno.
- Per i fan di Sketch, Thomas Pageot ha un modello esclusivo .
- Se stai usando Figma, prova un omaggio creato da Alex Martinov . Include file per le versioni tre e quattro.
Conclusione
Conoscere bene la griglia di Bootstrap è un’abilità cruciale. È un fondamento che potrebbe non essere visibile ad occhio nudo, tuttavia è qui e supporta tutto. Se va storto, ci vorrà un sacco di tempo, sforzi e denaro per risolvere il problema. Chi lo vuole? Prima di saltare all’intera cosa di progettazione e decorazione, devi prima inchiodare la griglia di Bootstrap.
Assicurarsi che un layout funzioni su tutte le dimensioni dello schermo e che la struttura sia conforme ai requisiti. E, se non ti senti ancora sicuro sulla gestione della griglia, puoi sempre chiedere aiuto a costruttori visivi come Startup che risolveranno i problemi in modo rapido ed efficiente.
