Bootstrap - Colonne: Creare Layout Rispondenti con Facilità

Ciao a tutti, aspiranti sviluppatori web! Oggi esploreremo una delle funzionalità più potenti di Bootstrap: le colonne. Come il vostro amico insegnante di informatica del quartiere, sono entusiasta di guidarvi in questo viaggio. Credetemi, alla fine di questo tutorial, sarete in grado di creare layout rispondenti come un professionista!

Come funziona

Prima di addentrarci nei dettagli, capiremo le basi. Il sistema di griglia di Bootstrap si basa su un layout a 12 colonne. Pensate a una pizza divisa in 12 fette - le potete mangiare tutte da soli (una colonna a piena larghezza) o condividerle con gli amici (più colonne).

Ecco un esempio semplice per iniziare:

<div class="container">
<div class="row">
<div class="col-sm-4">Colonna 1</div>
<div class="col-sm-4">Colonna 2</div>
<div class="col-sm-4">Colonna 3</div>
</div>
</div>

In questo esempio, abbiamo creato tre colonne di larghezza uguale su schermi piccoli e superiori. La classe col-sm-4 significa "occupa 4 delle 12 colonne su schermi piccoli". È come dire, "Mi prenderò 4 fette di quella pizza a 12 fette, per favore!"

Allineamento

Ora che abbiamo le nostre colonne, impariamo come allinearle. È come sistemare i mobili in una stanza - vuoi che tutto appaia perfetto!

Allineamento verticale

Per allineare le colonne verticalmente, utilizziamo classi sulla riga:

<div class="container">
<div class="row align-items-start">
<div class="col">Alto</div>
<div class="col">Alto</div>
<div class="col">Alto</div>
</div>
<div class="row align-items-center">
<div class="col">Centro</div>
<div class="col">Centro</div>
<div class="col">Centro</div>
</div>
<div class="row align-items-end">
<div class="col">Basso</div>
<div class="col">Basso</div>
<div class="col">Basso</div>
</div>
</div>

Qui, utilizziamo align-items-start, align-items-center, e align-items-end per allineare le nostre colonne all'inizio, al centro e alla fine della riga rispettivamente.

Allineamento orizzontale

Per l'allineamento orizzontale, utilizziamo le classi justify-content:

<div class="container">
<div class="row justify-content-start">
<div class="col-4">Uno</div>
<div class="col-4">Due</div>
</div>
<div class="row justify-content-center">
<div class="col-4">Uno</div>
<div class="col-4">Due</div>
</div>
<div class="row justify-content-end">
<div class="col-4">Uno</div>
<div class="col-4">Due</div>
</div>
</div>

Queste classi (justify-content-start, justify-content-center, justify-content-end) allineano le nostre colonne a sinistra, al centro e a destra del contenitore.

Interruzione delle colonne

A volte, potresti avere più di 12 unità di colonna in una riga. Non preoccuparti, Bootstrap è al tuo fianco! Automticamente interromperà le colonne extra su una nuova riga:

<div class="container">
<div class="row">
<div class="col-9">Colonna 1</div>
<div class="col-4">Colonna 2</div>
<div class="col-6">Colonna 3</div>
</div>
</div>

In questo esempio, 9 + 4 = 13, che è più di 12, quindi la seconda colonna si interrompe su una nuova riga.

Interruzioni delle colonne

Ma cosa succede se vuoi forzare una nuova riga da solo? Ecco l'interruzione della colonna:

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

Il <div class="w-100"></div> crea una interruzione di larghezza 100%, forzando le colonne successive ad iniziare su una nuova riga.

Rearrangiamento

Classi di ordine

Bootstrap ti permette di cambiare l'ordine visivo delle tue colonne:

<div class="container">
<div class="row">
<div class="col order-3">Primo, ma ultimo</div>
<div class="col order-2">Secondo, ma secondo</div>
<div class="col order-1">Terzo, ma primo</div>
</div>
</div>

Le classi order- determinano l'ordine delle colonne. È come dire ai tuoi colonne di fare una partita a sedie musicali!

Spaziature tra colonne

Classi di offset

A volte, potresti voler aggiungere dello spazio prima di una colonna. Ecco dove entrano in gioco le classi di offset:

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
</div>

La classe offset-md-4 aggiunge un margin-left equivalente a 4 colonne, spingendo la nostra seconda colonna a destra.

Pulizia delle colonne a punti di interruzione reattivi

Mentre il layout cambia attraverso diverse dimensioni di schermo, potresti aver bisogno di pulire le colonne flottanti:

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

Qui, d-none d-md-block nasconde l'interruzione su schermi piccoli ma la mostra su schermi medi e superiori.

Utilità di margini

Bootstrap fornisce utilità di margini per rapide regolazioni dello spazio:

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
</div>

La classe ml-auto spinge la seconda colonna a destra regolando automaticamente il margine sinistro.

Classi di colonna indipendenti

Infine, puoi utilizzare classi di colonna senza wrapper di riga per maggiore flessibilità:

<div class="container">
<div class="col-3 bg-light p-3 border">
.col-3: larghezza del 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: larghezza del 75% sopra il breakpoint sm
</div>
</div>

Questo approccio ti dà più controllo sul tuo layout, specialmente per progetti complessi.

E voilà, gente! Avete appena imparato i dettagli delle colonne di Bootstrap. Ricordate, la pratica fa la perfezione, quindi non abbiate paura di sperimentare con questi concetti. Presto, crearete layout rispondenti che farebbero invidia anche ai web developer più esperti!

Ecco una tabella di riepilogo delle classi di colonna che abbiamo coperto:

Classe	Descrizione
col-*	Clase di colonna di base (* può essere da 1 a 12)
col-sm-*	Colonna per schermi piccoli e superiori
col-md-*	Colonna per schermi medi e superiori
col-lg-*	Colonna per schermi grandi e superiori
col-xl-*	Colonna per schermi extra grandi
offset--	Offset della colonna (* può essere sm, md, lg, xl)
order-*	Riordina le colonne (* può essere da 1 a 12)

Buon codice, e che i vostri layout siano sempre rispondenti!

Credits: Image by storyset