Saranno in molti, una volta aperto questo articolo, che si staranno chiedendo che cosa sia Bootstrap e soprattutto che cosa sia un Framework. E non vi preoccupate. è normale che alcuni di voi non lo sappiano. Il motivo è molto semplice: i framework vengono utilizzati nello sviluppo di applicazioni, in special modo nello sviluppo di applicazioni web, quindi applicazioni che saranno installate in uno spazio hosting o in un server dedicato e che l’utente potrà accedervi con l’ausilio di un browser.
Un framework viene impiegato dagli sviluppatori come supporto per la realizzazione dell’interfaccia grafica del proprio sito o della propria applicazione. Senza l’ausilio di questo tipo di tecnologia, il developer dovrà scrivere il codice partendo praticamente da 0. Questo comporta non solo una grande perdita di tempo, ma anche e soprattutto una gran fatica in più.
Quando si decide di scrivere da 0 un’interfaccia grafica bisogna tenere conto degli standard odierni, ovvero di tutte le caratteristiche che un’interfaccia grafica deve avere. Innanzi tutto deve essere in grado di adattarsi alla risoluzione dello schermo dell’utente. Quindi se l’utente sta usando uno smartphone, la parte grafica si deve rimpicciolire in modo tale da consentire al visitatore di avere una visuale comunque consona del sito. Se invece sta usando un dispositivo con uno schermo più grande, come un computer o una tv, è importante che comunque l’interfaccia grafica si adatti alle dimensioni dello schermo del dispositivo, altrimenti ci sarebbe lo sfondo che occupa l’intera pagina e l’interfaccia grafica, di dimensioni minuscole, che rende il tutto esteticamente brutto e ovviamente poco utilizzabile.
Per realizzare una cosa del genere, tenendo conto che gli schermi di anno in anno cambiano e quindi cambiano anche le risoluzioni, è veramente complicato. Diventa, per così dire, più facile (anche se facile non lo è comunque), affidarsi a tecnologie che includono al loro interno tutta una serie di classi e di codice sorgente già pronto per essere integrato nel proprio progetto e quindi realizzare un’interfaccia grafica in meno tempo, e che sia più agevole e bella da vedere.
Bootstrap è uno di questi framework. E’ uno dei più recenti ed è considerato uno dei migliori in circolazione. Non è però il migliore in assoluto, nel campo delle applicazioni web, in quanto ci sono framework come Zend, che sono decisamente più completi.
Oggi quindi vedremo insieme Bootstrap. Bootstrap è un framework, realizzato da Twitter come potremmo vedere nello screen qui sotto, che lavora su quattro tipi di linguaggi: html, css, js e php. Per poterlo utilizzare è ovvio che bisogna conoscere piuttosto bene questi linguaggi. Altrimenti è impossibile usarlo, in quanto non si saprebbe da dove cominciare. E’ anche opportuno sapere che se si desidera realizzare applicazioni web con l’ausilio di bootstrap o di altri tipi di framework, è necessario realizzare la base, ovvero la parte operativa, a mano e poi aiutarsi con bootstrap o altri per fare la GUI.
Come si installa Bootstrap?
Innanzi tutto direi che è importante sapere come si installa. Bisogna andare alla pagina di download del framework.
Sarà sufficiente cliccare sul bottone centrale nella home del sito. Il pulsante ci condurrà alla pagina di download, che permetterà di scaricare bootstrap alla versione 3.3.7, anche se sta per uscire la versione 4.0
Nella pagina che si aprirà sarà possibile scaricare il pacchetto. Noi dovremmo scaricare il primo che ci mette a disposizione il loro sito.
Consiglio di dare un’occhiata alla pagina di download in quanto ci sono molti esempi, porzioni di codice sorgente già scritto e soprattutto dei brevi tutorial per imparare ad usare Bootstrap e a conoscere tutte le sue classi in poco tempo.
Una volta scaricato il pacchetto, che sono pochi megabyte, sarà necessario estrarlo. Poi è necessario caricare tutte le cartelle estratte all’interno del proprio spazio web. Per farlo si può usare o il pannello di controllo del proprio hosting, oppure, utilizzare un client ftp, come filezilla, che semplifica di molto l’operazione di caricamento.
Com’è strutturato Bootstrap?
L’archivio che si va a scaricare contiene tre cartelle. La prima contiene tutti i css che si possono utilizzare. All’interno dei css sono presenti tutte le classi importanti, che possono essere integrate nelle proprie pagine web.
La seconda cartella contiene tutti i font personalizzabili, che si possono integrare all’interno delle nostre pagine web.
La terza cartella contiene tutti i file javascript e jquery, che si possono utilizzare per realizzare animazioni particolari oppure degli elementi che permettano di interagire in modo ottimale con l’utente.
Come dicevamo all’inizio Bootstrap è caratterizzato da svariate classi. Ogni classe presenta una serie di istruzioni e una serie di comandi già scritti dai programmatori del framework, per permettere agli sviluppatori di non preoccuparsi di dover scrivere tutti i parametri css da 0.
Bootstrap si concentra molto sul concetto del Grid. Il grid, o griglia, è un sistema di suddivisione dello schermo caratterizzato da una serie di linee verticali e orizzontali, immaginarie, che vanno a suddividere lo schermo dell’utente in una griglia. Tramite questo sistema di suddivisione, il framework è in grado di posizionare in modo dinamico gli elementi, in modo tale che si possano adattare in modo automatico ad ogni cambio di dispositivo. Quindi a seconda della risoluzione di uno schermo, gli elementi si adattano di conseguenza.
Tramite il sistema di griglie, inoltre, il programmatore potrà decidere, ad esempio, il numero delle colonne che deve occupare un determinato elemento. Ad esempio, usando la classe cl-lg e specificando poi il numero delle colonne, ad esempio 12, si può creare ad esempio un’area di testo di grandezza 12 colonne. CL-LG-12
CL sta per colonne. LG sta per larghezza. Ovviamente questi concetti sono in realtà espressi con termini in inglese.
Bootstrap si concentra anche sui form. Ad esempio, tramite la classe form-control si possono realizzare dei form totalmente personalizzabili.
Usando le classe form-control custom-control è possibile realizzare dei form non solo personalizzabili nel lato estetico, ma anche nel lato dimensionale. Infatti è possibile aumentare o diminuire, con l’attributo html size, la grandezza di un form, come una textarea.
Bootstrap si concentra anche sui pulsanti. E’ disponibile un’ampissima personalizzazione sui vari pulsanti di tipo submit.
Richiamando la classe btn è possibile personalizzare i pulsanti, con diversi stili. Gli stili sono davvero tanti, tra questi troviamo: primary (btn btn-primary) e success (btn btn-success).
Queste sono solo alcune delle funzionalità del framework, che permettono davvero di effettuare un gran numero di personalizzazioni alle proprie pagine web.
Conclusioni finali
Bootstrap è un framework piuttosto potente, molto facile da usare per chi conosce abbastanza bene i linguaggi web, completamente gratuito e con una community dietro abbastanza attiva, che offre strumenti moderni per trovare soluzioni concrete. Consiglio di provarlo almeno una volta. Io l’ho provato e lo sto usando tuttora per la realizzazione dell’interfaccia grafica del mio cloud SharekFile, e devo dire che funziona piuttosto bene.
