Nato nel 2010 come un progetto interno a Twitter a opera di Mark Otto e Jacob Thornton, Bootstrap è una collezione open source di strumenti grafici, stilistici e di impaginazione che possono essere utilizzati per agevolare lo sviluppo di applicazioni web responsive e mobile-first. Molti considerano Bootstrap una libreria di componenti front end, altri lo ritengono un vero e proprio framework per il linguaggio CSS. Sulla pagina ufficiale viene, invece, definito “toolkit”, cioè una “raccolta di strumenti”. Tecnicismi a parte, Bootstrap è il framework CSS più popolare al mondo, utilizzato da ben l’80.6% delle pagine che fanno uso di un framework front-end, vale a dire da quasi il 20% del World Wide Web.
La libreria Bootstrap mette a disposizione degli sviluppatori una considerevole quantità di snippets di codice HTML, CSS e JavaScript per gestire l’interfaccia grafica delle nostre applicazioni web. Con poche righe di codice, senza dover ricorrere a fogli di stile personalizzati, Bootstrap ci permette di creare un sito web da zero, adattando a seconda delle nostre esigenze le proprietà grafiche degli elementi che la compongono e implementare, grazie a template preconfezionati, componenti interattivi come navbar, form, card e caroselli.
In questo breve tutorial scopriremo insieme:
- Perché conviene usare Bootstrap
- Come installare Bootstrap
- Come modificare la nostra pagina con Bootstrap
- Come funziona il Bootstrap grid system
Perché usare Bootstrap?
- Innanzitutto, è gratuito. Si tratta di un progetto open source, chiunque può utilizzarlo per fini didattici o commerciali.
- È veloce. Veloce da integrare (è sufficiente qualche riga di codice), veloce da imparare. Dotato di una buona curva di apprendimento, Bootstrap è l’ideale per un front end developer in erba che voglia affacciarsi al mondo del web design e muovere i primi passi nella progettazione grafica delle proprie applicazioni web. Bastano poche ore di studio per iniziare a padroneggiare le sue funzionalità, anche perché…
- È dotato di una documentazione completa, chiara ed esaustiva. Sulla pagina ufficiale ciascun componente viene descritto minuziosamente. Non mancano numerosi esempi d’uso pratico, per renderne la comprensione ancora più agevole. Una documentazione ben scritta, si sa, è un tesoro per lo sviluppatore di siti web.
- Inoltre, è popolare. Se la documentazione non bastasse, in rete sono disponibili tantissimi tutorial, forum o video che ti aiuteranno a chiarire eventuali dubbi.
- È un progetto stabile, maturo. Arrivato alla versione 5.1.3, con più di 150.000 stelle, centinaia di contributors e migliaia di commit, Bootstrap è uno dei progetti più attivi su GitHub. Viene costantemente ottimizzato ed eventuali bug vengono risolti tempestivamente.
- È completamente personalizzabile. Utilizzando Sass, un preprocessore che estende il linguaggio CSS, è possibile modificare e adattare i fogli di stile predefiniti di Bootstrap alle proprie esigenze.
- Dulcis in fundo, è responsive e mobile-first. Bootstrap vi aiuterà a creare un layout web responsive, cioè che adatta automaticamente la larghezza dei propri componenti a seconda del viewport, cioè dell’area visibile all'utente di una pagina web. Ciò rende Bootstrap uno strumento perfetto per progettare pagine mobile-first, pensate innanzitutto per gli utenti che navigano da smartphone.
Come installare Bootstrap?
Integrare la libreria di Bootstrap in un nuovo progetto è un gioco da ragazzi. Nella documentazione ufficiale di Bootstrap, infatti, vengono illustrate diverse procedure di installazione. Ecco le tre più comuni:
- Potete copiare e incollare lo starter template di Bootstrap nella pagina principale del vostro progetto. In questo caso vi servirete di una CDN, perciò le risorse di Bootstrap risiederanno su un server diverso da quello della vostra pagina HTML. In alternativa, se preferite non utilizzare lo starter template, potete semplicemente copiare e incollare all’interno del tag <head> il collegamento al foglio di stile principale di Bootstrap e, subito prima del tag di chiusura </body>, un tag <script> in cui viene specificato l’indirizzo delle librerie in JavaScript di Bootstrap.
- È possibile effettuare il download e importare, con un semplice drag and drop, il bundle CSS e i plug-in JavaScript di Bootstrap nel vostro progetto. Non dimenticate di collegarli nella pagina HTML!
- Potete anche installare la libreria di Bootstrap all’interno del vostro progetto con l’aiuto di un package manager. Nel caso di npm, il package manager di Node.js, sarà sufficiente lanciare nel terminale la riga di comando npm install bootstrap, così npm aggiungerà la libreria di Bootstrap alle dependencies del vostro progetto. Non dimenticate di specificare il percorso al foglio di stile e al file .js (bootstrap.bundle.js) nel documento HTML!
Come funziona Bootstrap?
Una volta installato Bootstrap, sarà sufficiente applicare una delle sue classi predefinite a un tag HTML per modificarne lo stile. Ad esempio, possiamo aggiungere all’attributo class di un tag <p> i seguenti valori:
|
text-success |
Il testo si colora di verde. Si può usare per indicare che un’operazione è andata a buon fine. |
|
text-danger |
Il testo si colora di rosso. Si può usare per formattare un messaggio di errore. |
|
text-warning |
Il testo si colora di giallo. |
|
text-dark |
Il testo si colora di nero. |
|
text-white |
Il testo si colora di bianco. |
|
text-opacity-25 |
Imposta l’opacità del testo al 25%. Per aumentarla, basta sostituire il numero con 50 o 75. |
|
text-end |
Allinea il testo alla fine della riga. |
|
text-center |
Allinea il testo al centro della riga. |
|
text-uppercase |
Trasforma in maiuscolo tutte le lettere. |
|
text-lowercase |
Trasforma in minuscolo tutte le lettere. |
|
text-decoration-underline |
Sottolinea il testo. |
|
text-decoration-line-through |
Barra il testo. |
|
fw-bold |
Formatta il testo in grassetto. |
|
fst-italic |
Formatta il testo in corsivo. |
Ovviamente è possibile applicare più classi allo stesso tag HTML. Analizziamo insieme queste righe di codice:
<div class="bg-dark bg-gradient w-50 rounded shadow">
<p class="ms-4 p-3 text-white fw-bold">Lorem ipsum dolor sit amet.</p>
</div>
Al tag <div> sono state aggiunte alcune classi per:
- formattare lo sfondo (“bg-dark” per ottenere lo sfondo nero, mentre “bg-gradient” aggiunge un gradiente verticale semitrasparente che parte dal bianco);
- impostare la larghezza (“w-50” imposta la larghezza del <div> al 50% rispetto all’elemento parent);
- arrotondare gli angoli dei bordi (“rounded”);
- aggiungere un’ombreggiatura (“shadow”).
Al tag <p>, invece, sono state aggiunte delle classi per:
- aumentare il margine sinistro di 1,5 rem (“ms-4”);
- aumentare il padding di 1 rem (“p-3”);
- impostare il colore del testo (“text-white”);
- aumentare lo spessore del testo (“fw-bold”).
Ed ecco il risultato finale, semplice ma d’effetto:
Applicando le classi di Bootstrap è quindi possibile formattare il colore, lo sfondo, l’ombra, la posizione o i bordi degli elementi HTML. Oppure creare tabelle, navbar responsive, pulsanti, form di gestione dati, finestre modali e molto altro. Nella documentazione ufficiale di Bootstrap i componenti sono suddivisi in categorie e ricercabili tramite una comodissima search bar.
Il Bootstrap grid system
Come abbiamo già accennato, Bootstrap si rivela uno strumento particolarmente utile per creare il layout di base del proprio progetto web. Questo anche grazie al celebre bootstrap grid system (o sistema di griglie), una delle features di Bootstrap più utilizzate e apprezzate che consente di disporre il contenuto di una pagina web in modo totalmente responsive. L’ideale per costruire l’ossatura del nostro progetto. Come funziona il grid system di Bootstrap?
È necessario introdurre quattro concetti chiave: contenitore, riga, colonna e breakpoint.
Il contenitore rappresenta la parte più esterna del grid system. È possibile crearne uno aggiungendo a un tag <div> la classe “container”. Ciascun contenitore a sua volta può includere una o più righe (<div> con classe “row”), che servono ad “avvolgere” la parte più interna (e flessibile) del grid system: le colonne (<div> con classe “col”).
In questo esempio vediamo un grid system formato da un contenitore e due righe con tre colonne ciascuna:
<div class="container">
<div class="row">
<div class="col">Colonna 1</div>
<div class="col">Colonna 2</div>
<div class="col">Colonna 3</div>
</div>
<div class="row">
<div class="col">Colonna 4</div>
<div class="col">Colonna 5</div>
<div class="col">Colonna 6</div>
</div>
</div>
Il grid system di Bootstrap divide il contenuto di ciascuna riga in 12 parti. Possiamo quindi specificare la larghezza di ciascuna colonna in dodicesimi, associando alla classe “col” un suffisso numerico che va da 1 a 12. Ad esempio:
<div class="container">
<div class="row">
<div class="col-3">Colonna 1</div>
<div class="col-3">Colonna 2</div>
<div class="col-6">Colonna 3</div>
</div>
</div>
“Colonna 1” e “Colonna 2” occupano 3 unità ciascuna, mentre “Colonna 3” ne occupa 6. Totale: 12. Ovviamente “Colonna 3” sarà larga quanto le prime due, occuperà il 50% del contenitore indipendentemente dalla larghezza del viewport.
Cosa succede se la somma delle unità abbinate alle colonne è maggiore di 12? Semplice: la colonna che “eccede” andrà automaticamente a capo.
Possiamo essere ancora più specifici nell’impostazione del nostro layout servendoci dei breakpoint di Bootstrap. I breakpoint non sono altro che delle media queries predefinite della libreria di Bootstrap. I breakpoint di Bootstrap sono 6 e si inseriscono tra il prefisso “col” e il suffisso numerico:
Specificando un breakpoint indichiamo quale dev’essere il comportamento esatto di una colonna, in termini di larghezza, in base alle dimensioni del viewport. La classe “col-md-6”, ad esempio, indica che una colonna occuperà 6 unità a partire da 768 px. Su dispositivi dotati di schermi più piccoli di 768 px, invece, le colonne verranno automaticamente impilate una sotto l’altra.
Bootstrap permette di combinare più breakpoint per una colonna. Diamo un’occhiata al codice seguente:
<div class="container">
<div class="row">
<div class="col-md-8 col-xl-4">Colonna 1</div>
<div class="col-md-4 col-xl-8">Colonna 2</div>
</div>
</div>
In questo esempio “Colonna 1” occupa 4 unità su dispositivi dotati di schermo con larghezza superiore a 1200 px, mentre “Colonna 2” ne occupa 8. Su schermi leggermente più stretti, più precisamente da 768 px a 1200 px, le due colonne occuperanno lo spazio inverso: la prima 8 unità, la seconda 4. Dal momento che non abbiamo settato nessun breakpoint che contempli i dispositivi ancora più piccoli, cioè con larghezza inferiore a 768 px, sui dispositivi mobile le due colonne si disporranno automaticamente una sopra l’altra.
Conclusione
Se sei alla ricerca di uno strumento semplice da utilizzare, veloce e gratuito che ti fornisca un punto di partenza solido e allo stesso tempo versatile per rendere il layout della tua applicazione web responsive, allora Bootstrap è quel che fa al caso tuo.
Non dimenticare di dare un’occhiata anche al progetto Bootstrap Italia, una personalizzazione tutta italiana della libreria Bootstrap che offre agli sviluppatori strumenti di progettazione grafica (UI/UX design) conformi alle linee guida di design per i servizi web della Pubblica Amministrazione.
