Bootstrap tutorial in italiano – guida al framework front-end
Se sei alla ricerca di una guida semplice ed esaustiva sull’uso di Bootstrap, uno dei più famosi framework open source front-end, sei nel posto giusto. Infatti, questa sezione del sito l’abbiamo dedicata ad un tutorial completo su Bootstrap in italiano.
Questo tutorial ti aiuterà ad usare al meglio tutti i componenti di Bootstrap, grazie ai quali realizzerai facilmente e velocemente interfacce web responsive. Cioè interfacce che si adattano dinamicamente alle dimensioni dello schermo, permettendo, in questo modo, la fruibilità del tuo sito o delle tue applicazioni su qualsiasi dispositivo.
La caratteristica principale di Bootstrap è di essere un framework front-end con approccio mobile-first. Ciò vuol dire che mette a disposizione, a sviluppatori e designer, una serie di librerie in CSS e javascript da usare per realizzare velocemente layout fluidi che si adattano in maniera efficiente e robusta ad ogni tipo di dispositivo.
Prima di dedicarci alla descrizione delle varie componenti, cerchiamo di conoscerlo meglio. Vediamo brevemente come nasce, come funziona, a cosa è dovuto il suo successo e quali sono i pro e i contro.
Introduzione a Bootstrap
Bootstrap è stato creato originariamente da un designer ed uno sviluppatore di Twitter verso la metà del 2010. Già dal suo primo esordio ha ottenuto un enorme successo.
Nel 2011 Twitter rilascia Bootstrap con licenza open source e da allora diventa un progetto autonomo e indipendente supportato da una vasta comunità di sviluppatori.
La semplicità d’uso, associata ad una rapida curva di apprendimento, lo hanno reso il punto di riferimento per molti sviluppatori e web designer. Tant’è vero che sono stati creati numerosi fork e parte del suo codice è presente in moltissimi siti nel mondo.
Negli anni sono state create diverse versioni del framework, ognuna delle quali ha apportato importanti cambiamenti e migliorie.
La versione stabile del framework al momento della scrittura di questo tutorial è la 4. Ma è in fase di scrittura anche Bootstrap 5.
Nel corso del tutorial faremo rifermento principalmente a Bootstrap 4 ma parleremo anche delle novità che saranno introdotte con la versione 5.
Le principali novità introdotte con Bootstrap 4, rispetto alle versioni precedenti, sono: l’abbondano di Less e il passaggio a Sass come pre-processore CSS. Ciò riduce notevolmente i tempi di compilazione e offre una maggiore aderenza alle specifiche Flexbox introdotte con CSS3 per migliorare la visualizzazione sui dispositivi mobile.
Per chi non lo sapesse, un pre-processore CSS è uno strumento che serve per migliorare e velocizzare la scrittura di fogli di stile. Mentre, la tecnica dei Flexbox consiste nel creare contenitori flessibili all’interno dei quali disporre vari box con caratterische personalizzabili. Utilizzando vari metodi è possibile, infatti, modificarne l’ordinamento, l’allineamento e la collocazione nello spazio.
In Bootstrap 5 sarà abbandonata definitivamente la dipendenza da jQuery e non sarà più supportato Internet Explorer a vantaggio di browser e tecnologie più recenti. In pratica, l’obbiettivo è quello di rendere il framework più leggero e veloce.
Come funziona Bootstrap – Tutorial in italiano
In Bootstrap i componenti principali usati per lo sviluppo del layout sono i contenitori, le righe e le colonne.
I contenitori possono avere una larghezza fissa che cambia in base alle dimensioni dello schermo, o essere completamente fluidi ed occupare il 100% della larghezza della finestra del browser o dispositivo.
Il contenuto all’interno del contenitore può essere organizzato in righe e colonne in modo da creare una griglia. In pratica Bootstrap, per agevolare la creazione di layout, usa un sistema detto a griglia (grid system) composto da 12 colonne che si adattano a dispositivi molto piccoli, piccoli, medi, grandi e molto grandi.
Il sistema a griglia è molto potente ed estremamente flessibile. Dopo che ne avrai compreso il funzionamento ed avrai imparato ad usarlo, tutto il tuo lavoro sarà molto più semplice.
La griglia usa una particolare tecnologia detta Flexbox che semplifica la creazione di layout complessi scrivendo poco codice.
Quindi, riassumendo, i contenitori possono essere usati con o senza griglia per allineare il contenuto alla finestra o centrarlo, mentre le righe e le colonne definiscono il layout della griglia.
Un contenitore in Bootstrap viene creato usando la classe container. Nei prossimi articoli vedremo in dettaglio come funziona la classe container e come usarla con o senza griglia. Impareremo inoltre ad usare le classi row e col per la creazione delle righe e delle colonne.
Naturalmente oltre al grid system, Bootstrap mette a disposizione dello sviluppatore una serie di componenti predefiniti come alert, button, card, carousel, forms, navbar e tanti altri che velocizzano la creazione del front-end di un sito o di un applicazione e che imparerai ad usare facilmente grazie a questo tutorial.
Vantaggi e svantaggi di Bootstrap
Sicuramente i vantaggi nell’usare Bootstrap sono diversi:
- si riduce notevolmente il tempo di realizzazione di un sito o di un interfaccia web;
- compatibilità con tutti i browser moderni;
- ottimizzazione visiva, in quanto le pagine responsive si adattano a qualsiasi dispositivo;
- facilità di utilizzo grazie al fatto che Bootstrap mette a disposizione componenti pronti all’uso che si possono inserire facilmente all’interno delle pagine web.
Ma come ogni cosa, il suo utilizzo presenta anche alcuni svantaggi. In modo particolare, non sono supportati browser datati, come Internet Explorer 8 e 9, e poiché i suoi componenti sono standardizzati, si rischia di creare interfacce grafiche poco personalizzate e che si somigliano.
Se il tuo intento è quello di creare un sito con un interfaccia grafica originale, l’uso di Bootstrap ti potrebbe risultare al quanto dispendioso e poco proficuo.
Questo non vuol dire che non è possibile creare interfacce originali con Bootstrap. Infatti, come mostrano i diversi template presenti sul sito ufficiale, con una buona conoscenza delle classi di Bootstrap e dell’uso di css è possibile personalizzare il framework e rendere originale qualsiasi progetto.
Grazie al pre-processore Sass puoi intervenire sul codice sorgente e personalizzare lo stile di tutto il framework.
Siamo giunti a al termine di questo primo articolo introduttivo del nostro tutorial su Bootstrap in italiano. Nel prossimo articolo vedremo insieme come scaricare e installare Bootstrap. Inoltre, inizierai a realizzare il tuo primo progetto partendo dalla classe container per realizzare i contenitori e sfruttare il sistema a griglia per creare il layout.
Continua a seguirci e iscriviti alla pagina Facebook di BlogAmico per non perdere i prossimi articoli.
