Che cosa è bootstrap?

Studio di Ingegneria Informatica Corchiola - Che cosa è bootstrap

Che cos’è Bootstrap?

Studio di Ingegneria Informatica Corchiola - Bootstrap

Se vi state chiedendo che cos’è Bootstrap e volete approcciare allo sviluppo di applicazioni web responsivenon potete fare a meno di leggere questo breve articolo!

Bootstrap è un framework utilizzato dai web specialist di tutto il mondo per progettare e sviluppare applicazioni web responsive e facilmente manutenibili.

 

L’utilizzo di Bootstrap per un sito web è una scelta intelligente?

Ovviamente si! E ti spiego per quali motivi incorporare Bootstrap nel progetto di un sito web è una mossa che renderà lo sviluppo gradevole, semplice e futuribile.

Studio di Ingegneria Informatica Corchiola - Bootstrap

Un pò di storia del framework

Nel 2011, Bootstrap è stato creato da due ex ingeneri informatici di Twitter, Mark Otto e Jacob Thorton, come soluzione interna. Lo scopo era ridurre le scelte progettuali e di design utilizzate nello sviluppo dai diversi membri del team.

Nonostante sia nato come una soluzione interna a Twitter nell’agosto del 2011, il framework Bootstrap è stato lanciato come progetto open-source su Github.

Nel giro di pochi mesi, migliaia di sviluppatori di tutto il mondo contribuirono al codice e Bootstrap diventò il progetto di sviluppo open-source più attivo del mondo.

Da allora, Bootstrap ha acquisito notorietà ed è diventato “il framework frontend (e anche backend) più popolare per lo sviluppo di progetti responsivi, mobile-first sul web”.

 

Un piccolo riassunto

Bootstrap è un framework per lo sviluppo di interfacce utente, che si adattano anche a dispositivi mobile.

 

Come funziona in breve

Bootstrap è un insieme di elementi grafici, stilistici, di impaginazione e Javascript pronti all’uso. Oggi Bootstrap è un progetto indipendente ed è stato messo a disposizione degli sviluppatori di tutto il mondo che sono liberi di utilizzare questo framework come base per i propri progetti web.

Tutti gli elementi personalizzabili contenuti in Bootstrap sono una combinazione di HTML, CSS e JavaScript. Visto che oramai è open-source, viene migliorato continuamente.

E’ stata aggiunta una varietà di ottime funzioni, come il 100% di reattività mobile e le ricche selezioni plug-in jQuery.

Nell’agosto del 2013 è stato lanciato Bootstrap 3. Questa versione offre un nuovo design, una gestione degli errori e opzioni di personalizzazione migliorate e tante altre novità per la gioia degli sviluppatori.

 

Da cosa è composto in breve Bootstrap?

Studio di Ingegneria Informatica Corchiola - Che cosa è bootstrap

Scaffolding

Questa area contiene tutti quegli elementi CSS che permettono di definire il layout della pagina.

La tecnica è quella del Grid system, ovvero una griglia, fissa o fluida, con una larghezza base di 960px nella quale possono essere definite righe e colonne in cui poi inserire i vari contenuti.

La griglia base è costituita da 12 colonne e ogni elemento del layout può espandersi su una o più colonne, semplicemente applicando una classe di stile (un po come funzionava il colspan o il rowspan di html).

Un elemento per cui è definita la classe class=”col-md-6″, ad esempio, occuperà automaticamente 6 colonne della griglia base.

Perché si estenda su tutta la riga basterà modificare la classe così: class=”col-md-12″.

Se voglio invece affiancare quattro colonne basterà inserire 4 <div class=”col-md-3″>Contenuto</div>

Questo framework è fondamentale per creare semplice creare siti web responsivi e dal layout perfetto.

CSS base

Questa area contiene degli stili predefiniti per diversi elementi della pagina, come i titoli (H1, H2,…), le tabelle, i pulsanti, gli elementi dei form, le immagini…

Con queste regole di stile realizzare pulsanti di varie dimensioni, con i bordi smussati (class=”btn btn-primary”), con un effetto over diventa davvero semplice e immediato. Lo stesso vale per la creazione di una tabella con righe a colori alterni (class=”table table-striped”).

Componenti

Questa area contiene elementi più complessi di pulsanti o tabelle, ma ormai molto comuni nei siti web. Ad esempio, gruppi di pulsanti, barre di navigazione, menu a discesa… Fra i componenti è compreso anche un set di icone, i glifi di uso comune, messe a disposizione da Glyphicons e le fontawesome.

Javascript

Quest’ultima area contiene diversi plug-in jQuery per realizzare effetti molto comuni come transizioni, finestre modali, popup, carousel, accordion, tab.

Quando devo usare Bootstrap?

L’ultima domanda a cui risponderò è: quando devo utilizzare Bootstrap? Conviene utilizzare Bootstrap quando si desidera creare un nuovo sito web senza dover scrivere tutto da zero. Bootstrap consente di sviluppare un progetto in modo più rapido. Decidere se utilizzarlo  o meno dipende dalle esigenze del team e del progetto.

Share

Ingegnere informatico di Cosenza, con Laurea Vecchio Ordinamento conseguita presso l'Università della Calabria. Si occupa di progettazione e sviluppo di web application e integrazione di sistemi. Ha all'attivo decine di collaborazioni con diverse aziende nazionali ed internazionali, con il Consiglio Nazionale delle Ricerche e diverse Università italiane ed estere.