Creazione del layout con Bootstrap

In questa parte del corso su Bootstrap spiegheremo come creare i layout delle pagine web e come funziona il sistema di griglie del Framework.

Se stai seguendo il corso, questa lezione è molto importante da seguire poiché spiega in che modo poter creare ed impostare i layout delle pagine con Bootstrap, ed anche perché tutti gli argomenti che verranno spiegati successivamente si baseranno sulle nozioni descritte in questo post.

Se vuoi avere maggiori informazioni su Bootstrap, leggi la guida introduttiva o consulta il programma.

Prima di scrivere codici, assicurati di aver collegato il foglio di stile di Bootstrap e gli script per il corretto funzionamento.

Layout e sistema a griglie in Bootstrap

La “forza” che c’è dietro la fama di Bootstrap è il suo innovativo sistema di creazione del layout delle pagine basato sulle griglie. Questo sistema di griglie è un intuitiva caratteristica che consente agli sviluppatori di impostare gli elementi all’interno di una pagina web in modo responsivo e ottimizzato.

Grazie alle numerose classi CSS preimpostate, in ogni pagina è possibile definire fino a 12 colonne che si disporranno in modo responsivo in base ad ogni tipologia di schermo su cui vengono visualizzate.

Se l’uso di tutte le 12 colonne non è necessario per un tipo di progetto, possono essere raggruppate ed utilizzate in maniera differente (“3+3+3+3”, “4+4+4” oppure “3+6+3” e così via). Ogni gruppo viene definito tramite le classi CSS precedentemente menzionate.

Come puoi capire, questo sistema a griglie porta molti vantaggi in termini di sviluppo poiché consentono di impostare rapidamente un layout senza dover definire le dimensioni di ogni singolo elemento o contenitore nella pagina.

Comunque potrai comprendere meglio il funzionamento con i successivi esempi.

Le classi CSS di Bootstrap

Nel precedente paragrafo abbiamo menzionato le classi CSS su cui vengono strutturate le colonne o i gruppi di colonne in Bootstrap. Queste classi sono fondamentali da imparare poiché senza conoscerle è praticamente inutile utilizzare il Framework.

Le classi in Bootstrap vanno strutturate per singolo caso, in base al numero di colonne necessarie ad ogni elemento e alla grandezza dello schermo dei dispositivi. Ma andiamo per gradi.

col, row e container

Come abbiamo detto, le classi CSS in Bootstrap vanno definite caso per caso e servono a strutturare ogni elemento in larghezza e in altezza in modo che si adatti al proprio contenitore.

Qui potrebbe essere utile una precedente esperienza con HTML e CSS, poiché capita spesso la necessità di dover adattare oggetti e elementi HTML al proprio contenitore, che sia la il body o un div.

Tuttavia con Bootstrap questa procedura è semplificata proprio grazie alle classi CSS prestabilite chiamate “col“, “row” e “container“.

Già dai loro nomi è facilmente intuibile il loro singolo funzionamento:

• .col – Per impostare la larghezza di un elemento basato sulle 12 colonne di cui abbiamo parlato;
• .row – Per definire una riga della griglia;
• .container – Per definire un elemento contenitore.

Per il momento tieni tutto a mente, ci torneremo più avanti.

Display classes

Le altre classi da imparare sono quelle elencate qui in basso, e si riferiscono alla larghezza massima degli schermi dei dispositivi.

• xs – Per display con larghezza inferiore ai 576px (smartphone);
• sm– Larghezza display tra 576px e 768px (smartphone e phablet);
• md – Display da 768px fino ai 992px (tablet);
• lg – Display da 992px fino a 1200px (alcuni tablet e laptop);
• xl – Larghezze oltre i 1200px (Monitor PC, laptop e simili).

Primi layout

Ora che abbiamo compreso le classi principali di Bootstrap, non ci resta che strutturare il primo layout griglia e vederne il funzionamento.

<div class="container">
  <div class="row">
    <div class="col-sm">
     Prima colonna
    </div>
    <div class="col-sm">
     Seconda colonna
    </div>
    <div class="col-sm">
      Terza colonna
    </div>
  </div>
</div>

Risultato:

Immagina questo blocco di codice come una piccola griglia.

• Il primo div “container” è, appunto il contenitore della griglia; esso definisce la larghezza generale su cui faranno riferimento gli altri elementi;
• Subito dopo troviamo il div “row“, ovvero riga, che verrà a sua volta suddiviso dalle colonne per strutturare l’intera griglia.
• Per ultimo, troviamo i div “col“, sono ben 3 dello stesso tipo. Potrebbero essere considerate come le celle di una tabella, in cui poi verrà scritto il contenuto vero e proprio.
• Le classi “col” si adattano in base alla grandezza dello schermo grazie ai selettori aggiuntivi “sm” (col-sm).

Tutte le colonne devono condividere la medesima classe aggiuntiva per la definizione della larghezza del display. Misure differenti nello stesso “container” non possono coesistere (non puoi scrivere ad esempio col-sm e col-lg nello stesso div contenitore).

Seguendo lo schema descritto, tutte le colonne avranno una larghezza identica, suddivisa tra il numero di colonne totali.
Nel caso si volessero modificare le proporzioni di ogni singola colonna, possiamo agire sulle classi aggiungendo ulteriori parametri.

Sempre rispettando la regola delle 12 colonne massime, modificheremo il codice precedente affinché ogni colonna abbia una misura differente dalle altre.

<div class="container">
  <div class="row">
    <div class="col-sm-2">
     Prima colonna
    </div>
    <div class="col-sm-6">
     Seconda colonna
    </div>
    <div class="col-sm-4">
      Terza colonna
    </div>
  </div>
</div>

Il numero finale nella classe CSS indica su quante colonne (delle 12) l’elemento HTML deve estendersi. Nota bene però che la somma dei numeri deve essere 12 e non eccedere, o si avranno problemi di visualizzazione.

Larghezza automatica e responsiva

Fino ad ora abbiamo visto come poter impostare una prima griglia per gli elementi primari di un’ipotetica pagina web. Le classi sm, md, lg e xl, come abbiamo detto, servono ad impostare il layout in base alla larghezza del display dei dispositivi.

Ma cosa succede se la pagina viene visualizzata su schermi più piccoli di quanto programmato?

In questo caso si attiva il design “resposnive” di Bootstrap, ovvero gli elementi che superano la larghezza del display sul dispositivo in uso vengono raggruppati e ridimensionati automaticamente.

Prendendo in esempio i codici precedenti, le tre colonne verrebbero raggruppate in questo modo (su dispositivi più piccoli di 576px):

Tuttavia, con Bootstrap è possibile definire un layout generico con adattamento automatico della larghezza per qualsiasi dispositivo, senza raggruppamento. In questo caso basterebbe creare un design adatto anche ai dispositivi più piccoli (xs).

Per farlo, ti basta scrivere la classe “col“, più il numero di colonne, omettendo la dicitura per la larghezza dello schermo (ad esempio: col-4, col-12…) (senza “sm“, “md“, “lg” o “xl“)

<div class="container">
  <div class="row">
    <div class="col-2">
     Prima colonna
    </div>
    <div class="col-6">
     Seconda colonna
    </div>
    <div class="col-4">
      Terza colonna
    </div>
  </div>
</div>

Come risultato finale si avranno celle sempre proporzionate senza raggruppamento (vedi sopra). Con questo metodo dovresti evitare un eccessivo numero di colonne, poiché nei dispositivi a schermo piccolo, come smartphone, si rischia di non leggere il contenuto.

Come ultima istruzione, puoi definire la larghezza delle colonne in automatico in base al contenuto della cella. In questo caso bisogna sostituire il numero delle colonne nella classe CSS con “-auto“.

<div class="container">
  <div class="row">
    <div class="col-auto">
     (auto)
    </div>
    <div class="col-4">
     Seconda colonna (4)
    </div>
    <div class="col-auto">
      Terza colonna in Bootstrap (auto)
    </div>
  </div>
</div>

Queste nozioni sono fondamentali per l’impostazione dei primi layout in Bootstrap per la creazione di pagine web responsive. Nei codici potrai notare che, in molti casi, le classi CSS sono sempre simili e cambiano ben poco.

Fai dei test per capire il funzionamento e prova a strutturare i primi layout in base alla grandezza dei differenti dispositivi.

Se hai domande, scrivici un commento in basso e ti aiuteremo.

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle