A cosa serve Bootstrap: la guida introduttiva

In questa guida vedremo assieme a cosa serve Bootstrap, uno dei framework front-end più utilizzati al mondo, arrivato alla versione 4. Si tratta di un progetto nato all’interno di Twitter, nell’ormai lontano 2013 dalle menti di Mark Otto e Jacob Thornton. Con questa guida introduttiva cercheremo di rispondere alle domande che un neofita potrebbe porsi e fornire delle solide basi per iniziare ad utilizzarlo.

Partiamo da una premessa. Lo sviluppo ex-novo di un sito web, porta inevitabilmente a doversi addentrare nei processi di progettazione di determinate aree, nella creazione di layout dedicati, stili e, in generale, tutto quello che può essere definitivo un design system omogeneo da poter riutilizzare nelle varie pagine dell’applicazione.

Anche se i progetti web possono sembrare a volte molto diversi tra loro, è innegabile che vi siano alcuni elementi in comune. Basta navigare sul web per accorgersene. La stragrande maggioranza dei siti, ad esempio, ha un logo (il più delle volte in alto a sinistra), una barra di ricerca, un header, un menù principale, un footer.

Nessuno ci obbliga ad utilizzare questi elementi, ma è buona prassi farlo. A dircelo sono le linee guida di UI, alle quali non dovremmo mai sottrarci. Gli utenti, infatti, “si aspettano” di trovare gli oggetti in determinate zone della pagina.

A prescindere dalla loro posizione, ad ogni modo, alcuni componenti sono sicuramente ricorrenti in tutti i siti web: si pensi ad esempio ai bottoni, alle modali, ai jumbotron e ad altri elementi modulari di questo tipo. Creare da zero il markup di questi elementi per ogni progetto, può risultare sicuramente ripetitivo e porta via del tempo prezioso.

Da quì l’esigenza di poter contare su un set di stili e componenti modulari, facili da estendere e riutilizzabili. Bootstrap ci aiuta a fare proprio questo: utilizzare una raccolta di strumenti per creare siti e applicazioni per il web. All’interno di esso sono racchiusi modelli di progettazione basati sulla relazione tra HTML e CSS, utili per tipografia, componenti dell’interfaccia, pulsanti e molto altro ancora.

Perché utilizzare Bootstrap

In parte abbiamo già risposto a questa domanda nella prefazione, ma è giusto spendere ancora qualche parola per comprendere al meglio la potenza di questo framework dedicato allo sviluppo front-end.

Bootstrap è utile in tantissime situazioni. Può capitare, ad esempio, di dover realizzare una piccola pagina web, senza avere delle conoscenza di grafica o web design. Il caso ad esempio di uno sviluppatore, molto skillato in fatto di programmazione, meno in design, che vuole comunque impreziosire e rendere gradevole il lavoro svolto.

Questo è sicuramente solo uno dei possibili scenari. Sarebbe riduttivo affermare, infatti, che Bootstrap serve per dare una mano a chi ha poche competenze grafiche, si tratta anzi di un valido alleato anche per chi implementa quotidianamente interfacce custom. lo strumento, infatti, è nato per fornire una solida base, uno scheletro che, in gergo tecnico, viene definito scaffolding per far fronte a problematiche ricorrenti, come ad esempio la fase di responsive.

Bootstrap, non lo dimentichiamo, è un framework basato fortemente sul responsive design ed utilizza un approccio conosciuto come mobile first. Proviamo, adesso, a fare un breve sunto e ricapitolare quali sono i punti di forza della piattaforma:

Facilità di utilizzo ed implementazione
Solidità: arrivato ormai alla versione 4
Prodotto gratuito
Costatamente aggiornato
Valido supporto della community

Come iniziare ad utilizzare Bootstrap

Iniziare ad utilizzare Bootstrap è molto semplice. Ti basta andare sul sito web ufficiale del progetto e cliccare sul tasto “Get Started”. Il modo più semplice per cominciare ad utilizzarlo, è quello di inserire le risorse attraverso CDN

bootstrap sito ufficiale

Sostanzialmente, andremo ad inserire dei file css e js richiamandoli da un sito esterno. In alternativa, possiamo decidere di hostare i files di bootstrap direttamente sul nostro sito e cambiare quindi i percorsi in base alle nostre esigenze.

Il mio consiglio è quello di sfruttare la CDN. In questo modo le risorse saranno velocemente accessibili anche da utenti che navigano il sito da diverse parti del Mondo. Non solo, dato che bootstrap è molto utilizzato, un utente che ha già visitato un sito che lo utilizza, avrà accesso più velocemente a quelle risorse, poiché presenti all’interno della sua cache.

Per prima cosa implementiamo la chiamata al foglio di stile. Questo tag va inserito all’interno della sezione head della nostra pagina web.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Bootstrap non ha al suo interno solo CSS, esistono infatti anche alcuni componenti Javascript molto utili. Elementi come accordion, modali, off-canvas ecc. si avvalgono di jQuery. Per inserire queste funzionalità nel nostro sito dovremo implementare il JS necessario. Prima della chiusura del tag body, inseriamo queste stringhe

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Ottimo, ora siamo pronti per iniziare! Una solida base è sicuramente lo start theme messo a disposizione da Bootstrap stesso nella documentazione. Non dovete fare altro che copiare ed incollare il codice e potrete iniziare a fare qualche piccola sperimentazione con il framework.

Responsive: il sistema a 12 colonne

Una delle peculiarità di Bootstrap è senza dubbio il suo Grid System: un sistema di 12 colonne che ci permette di organizzare in modo semplice il nostro layout sui diversi dispositivi. Giocando con le 12 colonne sarai in grado, di volta in volta, di realizzare layout sempre diversi, senza dover rinunciare ad elementi fissi come la grandezza del contenitore principale, il gutter (distanza tra colonne) ecc.

Per iniziare ti basta creare semplicemente un contenitore con una classe .container . Questo ti permetterà di inserire all’interno un numero variabile di colonne. Il container è quindi la sovrastruttura di Bootstrap, al suo interno troverai un div con classe .row che, per l’appunto, rappresenta una riga. La struttura prosegue poi con le celle.

Le celle variano a seconda del dispositivi: in pratica alla classe .col- va posto un suffiso che rappresenta la misura: xs, sm, md o xl. Una guida dettagliata sul grid system di Bootstrap è disponibile all’interno della documentazione ufficiale.

La struttura, ricapitolando, è molto spessa basata sull’alternanza di container, row e colonne. A questo va ad aggiungersi anche il container di tipo fluido, che prende tutta la larghezza disponibile.

La documentazione ufficiale

La documentazione ufficiale è sicuramente da tenere sempre sotto mano quando si lavora in Bootstrap. Al suo interno, infatti, potrai trovare tantissimi esempi facili da comprendere ed adattare alle tue specifiche esigenze.

Questo è link alla documentazione della versione in uso mentre scrivo, vale a dire la 4.3. Si tratta di risorse ben scritte, suddivise per aree tematiche: Layout, content, component, utilities, extend e migration dalle versioni precedenti.

Un valido aiuto per i neofiti, ma non solo. Da salvare nei preferiti e spulaciare all’occorrenza.

Alternative a Bootstrap

Bootstrap non è sicuramente l’unico framework front-end presente sul mercato. Ve ne sono, infatti, diversi. Alcuni sono più leggeri e snelli, altri più strutturati. Di seguito li trovi ordinati in base a quello che offrono.

Skeleton: questo framework è senza dubbio il più leggero e semplice da utilizzare. Fornisce un layout davvero molto scarno, non a caso porta quel nome. All’interno troverai il grid system e qualche classe per stilizzare on demand bottoni, tabelle ed altri elementi essenziali.
Bulma : si tratta di un framework molto utilizzato in nord Europa. Circa 200.000 sviluppatori nel mondo lo utilizzano. Basato su flexbox, è un framework abbastanza semplice da utilizzare: modulare, responsive e moderno.
Foundation : sviluppato da Zurb, Foundation è senza dubbio il principale competitor di Bootstrap. Stiamo parlando di un framework estramente modulare e capillare che racchiude al suo interno un vasto set di elementi facilmente customizzabili. La curva di apprendimento è più ripida rispetto a quella di bootstrap, ma il risultato è di grande impatto.

Conclusioni

Come abbiamo avuto modo di vedere, Bootstrap è sicuramente un’ottima base di partenza nella realizzazione di qualunque genere di sito. Il framework è solido, con continui bug fixing da parte degli sviluppatori, possiede una documentazione facile da comprendere e una curva di apprendimento piuttosto blanda, anche per chi è alle prime armi.

Se non dovesse fare al vostro caso, esistono comunque delle valide alternative. Non vi resta quindi che sperimentare e testare sul campo quello che questo strumento ha da offrirvi.