Bootstrap – Guida per principianti

bootstrap

Per chi non lo conoscesse, Bootstrap è un framework per la realizzazione di siti e applicazioni per il web. Questo tool risolve velocemente tutte le problematiche di design, soprattutto per quanto riguarda la componente responsive.

Il framework è stato sviluppato da Mark Otto e Jacob Thornton, impiegati presso Twitter. Il progetto ha avuto un così tale successo all’interno dell’azienda che in breve tempo Bootstrap é stato adottato da moltissimi sviluppatori di Twitter, per la realizzazione di applicazioni web. Nel 2011 Twitter ha rilasciato Bootstrap con licenza open source, invitando tutti i designer a contribuire al progetto. L’anno successivo, il framework ha ricevuto il record di apprezzamenti su GitHub, una posizione che ha mantenuto fino al giugno del 2014.

Ma cosa ha determinato il successo di questo strumento? In primo luogo è un framework compatibile con tutti i browser e, a partire dalla versione 2, supporta il responsive web design che con Bootsrap 3.0 è diventata l’impostazione predefinita.

Il framework fornisce tutti gli elementi che compongono un’interfaccia web, ottimizzati per qualsiasi risoluzione. In particolar modo, la griglia di Bootstrap è qualcosa di veramente eccezionale. Al designer viene data la possibilità, semplicemente impostando una o più classi, di ottenere disposizioni diverse degli elementi, a seconda della risoluzione utilizzata. Ma di questo parleremo più approfonditamente, nel capitolo dedicato alla griglia.

Come iniziare

Bootstrap si può ottenere in diversi modi, ad esempio scaricando il pacchetto completo, ma il metodo che vi consiglio è di utilizzare il compilatore online, raggiungibile tramite questo indirizzo. Il punto di forza di questa scelta consiste in un file di testo che contiene la configurazione scelta. In questo modo, quando si dovrà aggiungere o eliminare un componente, basterà ricaricare il file JSON e il compilatore sarà impostato con le scelte precedenti.

All’interno dell’archivio troveremo 3 cartelle, una contiene i CSS, la seconda i file JavaScript e la terza é relativa ai fonts. Quest’ultima non sarà presente se si decide di non aggiungere al framework il componente tipografico.

Installazione di Boostrap

Installare Bootstrap è molto semplice, aprite con il vostro editor il file HTML che contiene l’header della vostra applicazione. All’interno dei tag <head> bisogna includere i due file css di produzione

Create anche un file per il vostro CSS personalizzato, chiamandolo style.css che dovrà essere incluso dopo i fogli di stile di Bootstrap.

A questo punto spostiamoci nella parte relativa al footer e se non è ancora compreso nella vostra applicazione, dobbiamo includere jQuery, perché il JavaScript di Bootstrap é dipendente da questa libreria.

Adesso possiamo includere gli scripts di bootstrap, custoditi in un unico file

Componenti di bootstrap

Gli elementi che compongono il framework sono veramente tanti. Non possiamo prenderli in considerazione tutti, ma a questo link potete vedere tutti gli esempi e le implementazioni relative. In questo articolo ci concentreremo sulla griglia, che personalmente ritengo il suo punto di forza. In seguito, magari, faremo degli articoli dedicati ad altri componenti.

Griglia di Bootstrap

La griglia di bootstrap, come impostazione di default, divide lo spazio orizzontale del layout in 12 colonne. Questo valore si può modificare, cambiando il campo relativo nel compilatore che abbiamo esaminato all’inizio dell’articolo.

griglia bootstrap

Se vogliamo suddividere il nostro template in due blocchi, magari uno dedicato al contenuto principale e l’altro per la sidebar laterale, dobbiamo riempire queste dodici colonne, assegnandone un certo numero al primo blocco e per la sidebar dobbiamo riservarne un quantitativo che vada a completare la griglia. Per capirci, possiamo assegnare 8 colonne all’articolo e per arrivare a 12, dobbiamo darne quattro alla sidebar.

Il codice di seguito ci mostra un’implementazione base con il quale suddividere il nostro layout.

Ho usato la classe col-md, questo significa che gli elementi saranno allineati fino a quando la pagina sarà visualizzata con un dekstop, mentre con risoluzioni inferiori gli elementi collasseranno, andando a scivolare uno sotto l’altro, come avviene in qualsiasi implementazione responsive.

Facciamo un passo indietro e chiariamo il concetto di dekstop in Bootstrap. Se andate a vedere nel compilatore, il framework assegna le risoluzioni maggiormente utilizzate a quattro variabili:

  • screen-lg
  • screen-md
  • screen-sm
  • screen-xs

In pratica abbiamo quattro risoluzioni di breakpoint: schermi con una risoluzione molto ampia, il comune desktop, tablet e smartphone.

Le risoluzioni di riferimento per questi device possono essere cambiate a nostro piacimento dal compilatore.

breakpoint

Con un codice del genere, gli elementi saranno allineati anche se visualizzati con un tablet e il collasso si avrà a partire dallo smartphone.

Ma non è finita qui, possiamo combinare le due classi appena esaminate, ottenendo un effetto diverso a seconda della risoluzione utilizzata. Ad esempio volendo suddividere gli elementi, in modo che ognuno di essi copra la metà esatta della griglia, ma solo sui tablet, possiamo utilizzare il seguente codice.

In questo modo, visualizzando la pagina con una risoluzione desktop, il blocco articolo avrà 8 colonne e la sidebar 4, ma se visualizziamo il documento con un tablet, entrambi gli elementi occuperanno metà griglia.

Personalmente ho trovato questa possibilità molto utile in determinati blocchi, ad esempio negli articoli correlati a fine post, dove da desktop mostro quattro blocchi allineati, mentre per i tablet vado a suddividere la griglia in due colonne.

Conclusioni

Un framework così complesso e potente come Bootstrap non si può liquidare solo con un articolo, a questo proposito ho già preparato una serie di video tutorial su Youtube che mostrano come utilizzare Bootstrap per un tema WordPress. Ti lascio il link della playlist e prossimamente andrò a pubblicare la versione testuale, in modo da avere una versione testuale del tutorial, sicuramente più facilmente consultabile.

3 opinioni su Bootstrap – Guida per principianti

  1. Marco
    8 mesi fa

    Ciao, ti scrivo per sapere se è possibile indirizzare in automatico bootstrap ad un href, presente nella pagina, automaticamente al caricamento della stessa.
    Cerco di spiegarmi meglio, vorrei che quando la mia pagina carica vada in automatico ad un (section) presente nella pagina.
    Ps: non sono un programmatore, ma un semplice appassionato, per questo il tuo aiuto mi sarebbe molto utile. Grazie, ciao.

  2. gianluca
    5 mesi fa

    Ciao Luca!

    Grazie per la spiegazione, molto chiara!
    Volevo chiederti se hai pubblicato la continuazione di questo tutorial.. non trovo nessun link.
    Grazie mille ancora

Lascia un commento...è gratis...

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *