Prima di scoprire uno dei web tool più amati dagli sviluppatori web, è necessario fare una piccola premessa per capire prima di tutto cos’è un framework.
WIKIPEDIA: Un framework, termine della lingua inglese che può essere tradotto come struttura o quadro strutturale, in informatica e specificamente nello sviluppo software, è un’architettura logica di supporto (spesso un’implementazione logica di un particolare design pattern) sul quale un software può essere progettato e realizzato, spesso facilitandone lo sviluppo da parte del programmatore. Talora è usato come sinonimo di rack o piattaforma software, anche nel gergo informatico.
1 – Cos’è Bootstrap?
Se ti stai approcciando alla programmazione web, sviluppo di siti internet o web app, al mondo del front-end o in generale sei appassionato di informatica non puoi non aver mai sentito parlare di uno dei framework più famosi per lo sviluppo web: Bootstrap.
C’è da dire invece che se stai scoprendo questo strumento per la prima volta leggendo questo articolo, dopo aver approfondito quanto sto per dirti, probabilmente non tornerai più indietro.
In poche parole Bootstrap, come già accennato, è un framework utilizzato per lo sviluppo via codice di siti web, ecommerce, blog o web app.
E’ cross-device (quindi funzionante su qualsiasi dispositivo: computer, tablet o mobile) e cross-browser (funzionante su praticamente tutti i browser aggiornati).
Nasce dalla preziosa idea di Mark Otto e Jacob Thornton, sviluppatori presso Twitter, assieme ad un piccolo team di programmatori in maniera quasi casuale.
Lo stesso Otto racconta: “Io e un piccolissimo gruppo di sviluppatori ci riunimmo per progettare e implementare un nuovo componente interno e notammo l’opportunità di fare qualcosa in più. Durante il processo, infatti, ci ritrovammo a costruire qualcosa di ben più sostanzioso. Mesi dopo concludevamo la prima versione di Bootstrap nell’ottica di documentare e condividere comuni modelli di progettazione e attività all’interno della società”
Il compito di questo web tool è quello di mettere a disposizione modelli di codice già pronto per voler creare una base per il vostro progetto ed ottimizzare tantissimo il tempo di lavoro.
La libreria di Bootstrap comprende linguaggi quali: Html, Css, Javascript
2 – Come funziona?
Esistono due modi per implementare Bootstrap nel nostro progetto:
- Scaricando il pacchetto di bootstrap ed importanto i file “bootstrap.min.css” e “bootstrap.min.js” nelle rispettive cartelle “css/” e “js/” del vostro progetto.
- Collegandolo tramite CDN
Non esiste un metodo migliore dell’altro ma solo scuole di pensiero al riguardo. Scaricare il pacchetto ci fornisce i fogli .css e .js fisici che quindi non dipenderanno da nessun server, mentre le CDN invece rendono il collegamento più veloce ma dipendente dai server.
Nella pagina “Introduction” c’è un’ampia documentazione dove spiega come implementare il famoso framework sul vostro progetto, mettendo a disposizione anche lo starter code.
Parlando di Bootstrap non si può allo stesso tempo non parlare della struttura ed il layout con cui è stato concepito. Infatti tutti i modelli offerti da Bootstrap sono pensati per essere “ingrigliati” in una sequenza di 12 colonne.
Ad oggi praticamente tutti i siti rispettano questa griglia. Nell’esempio qui in basso ti faccio vede come il mio stesso sito rispetta proprio il layout delle colonne di Bootstrap.
Infine per sapere come utilizzare i suoi modelli basta semplicemente richiamare determinate classi preimpostate.
Analizziamo quindi un esempio pratico di richiamo delle classi di Bootstrap, prendendo come esempio “container” e “mt-5“:
<div>
<h1>Titolo di prova</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class=”container mt-5″>
<h1>Titolo di prova</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
Come facilmente riscontrabile, la classe “container” ha permesso al blocco (div) di incolonnarsi esattamente sulle 12 colonne, mentre la classe “mt-5” (margin-top) ha creato del margine superiore.
Per concludere quindi, si capisce quanto sia facile l’utilizzo di questo web tool, ma che merita comunque uno studio iniziale tramite il foglio di stile del pacchetto scaricabile.
Con una serie di progetti sulle spalle, studio, test ed esperienza, arriverete a ricordare a memoria molti nomi di classi di Bootstrap e le rispettive funzioni.
3 – Quali sono i vantaggi del suo utilizzo?
Utilizzare Bootstrap per impostare il nostro progetto è sicuramente una delle scelte più comuni tra i vari web designer e sviluppatori front-end.
Infatti oltre ad essere apprezzato tantissimo dai professionisti del settore è molto richiesto anche a livello aziendale. Molte sono le domande di lavoro di figure professionali aventi, tra le varie skills, anche la padronanza del famoso framework.
Vale perciò la pena studiarlo e padroneggiarlo per una serie di vantaggi:
- Layout responsive (quindi che si auto-ridimensiona correttamente a seconda del display del dispositivo utilizzato)
- Facile ed intuitivo da utilizzare
- Customizzazione veloce
- Facile da implementare anche su WordPress
- Richiesto nel mondo del lavoro
- La libreria CSS e JS pesa poco
- Cross-device
- Cross-browser