Di toolkit che ti aiutano a creare siti web ce ne sono molti, ognuno ha le sue funzioni e può essere più o meno adatto a quello che vogliamo realizzare.
Se sei ancora indeciso, oppure non hai la più pallida idea di quale sia meglio per il tuo caso, forse questo articolo fa al caso tuo!
Analizzeremo insieme cos’è bootstrap e se può rispondere al meglio alle esigenze del tuo sito web!
Che cos’è Bootstrap?
Il sito Web ufficiale di Bootstrap lo descrive come “Il framework HTML, CSS e JS più popolare per lo sviluppo di progetti reattivi e mobile first sul Web“.
Ma in termini più semplici, cosa significa?
-
- In pratica Bootstrap è una gigantesca raccolta di bit di codice utili e riutilizzabili scritti in
HTML
-
- ,
CSS
-
- e
JavaScript
- . È anche un framework di sviluppo frontend che consente a sviluppatori e progettisti di creare rapidamente siti Web completamente reattivi.
Bootstrap ti evita di scrivere molto codice CSS , dandoti più tempo da dedicare alla progettazione di pagine web.
Ed essendo open source è GRATIS! Attualmente è ospitato su GitHub e può essere scaricato facilmente dal sito ufficiale.
Ma vediamo meglio insieme di cosa si tratta!
A cosa serve Bootstrap?
Bootstrap rende il web responsive design una realtà concreta!
In pratica consente a una pagina Web o a un’app di rilevare le dimensioni e l’orientamento dello schermo del visitatore e di adattare automaticamente la visualizzazione di conseguenza. L’approccio mobile first presuppone che smartphone , tablet e app mobili specifiche per attività siano gli strumenti principali dei dipendenti per portare a termine il lavoro. Bootstrap soddisfa i requisiti di tali tecnologie nella progettazione e include componenti dell’interfaccia utente , layout, strumenti JavaScript e il framework di implementazione.
Il software è disponibile precompilato o come codice sorgente .
Mark Otto e Jacob Thornton avevano sviluppato Bootstrap per Twitter, per migliorare la coerenza degli strumenti utilizzati sul sito e ridurre la manutenzione. Ma adesso è un tool che viene utilizzato moltissimo da ogni sviluppatore web, per ottimizzare la pagina e rendere più piacevole l’esperienza del utente sul proprio sito web!
Perché usare Bootstrap?
Ma perchè conviene usarlo per il proprio progetto?
- Come abbiamo detto si tratta di un progetto open source, chiunque può utilizzarlo per fini didattici o commerciali. Quindi è gratuito!
- È veloce. Veloce da integrare (è sufficiente qualche riga di codice), veloce da imparare. Dotato di una buona curva di apprendimento, Bootstrap è l’ideale se sei un front end developer, ancora non troppo esperto, ma vuoi comunque affacciarti al mondo del web design e muovere i primi passi nella progettazione grafica delle tue applicazioni web.
- È dotato di una documentazione completa, chiara ed esaustiva.
- In rete sono disponibili tantissimi tutorial, forum o video che ti aiuteranno a chiarire eventuali dubbi.
- È un progetto stabile.
- È 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.
- È responsive e mobile-first. Bootstrap ti 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.
Come installare Bootstrap?
Ma quindi? Come puoi iniziare ad utilizzarlo subito ed aggiornarti sulle sue versioni più recenti?
Beh, integrare la libreria di bootstrap in un nuovo progetto è veramente semplicissimo! Nella documentazione ufficiale di Bootstrap, vengono illustrate diverse procedure di installazione. Ecco le tre più comuni:
- Copia e incolla lo starter template di Bootstrap nella pagina principale del tuo progetto. In questo caso utilizzerai una CDN, perciò le risorse di Bootstrap risiederanno su un server diverso da quello della tua pagina HTML.Se preferisci non utilizzare lo starter template, puoi 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, ma non dimenticate di collegarli nella pagina HTML.
- Infine puoi scegliere di installare la libreria di Bootstrap all’interno del tuo progetto con l’aiuto di un package manager. Non dimenticate di specificare il percorso al foglio di stile e al file .js (bootstrap.bundle.js) nel documento HTML!
Il Bootstrap grid system
Quando creiamo una pagina web utilizzando Bootstrap, utilizziamo una struttura a griglia, chiamata grid system. All’interno del grid system sono posizionati i contenuti, chiamati components, suddivisi per colonne.
Il sistema a griglia di Bootstrap può contenere fino a 12 colonne al massimo.
Quindi immaginiamo una pagina divisa in 12 colonne, dove ciascuna colonna può avere una dimensione che va da 1/12 fino a 12/12. Ovviamente in quest’ultimo caso si avrà una sola colonna che occupa tutto lo spazio disponibile.
Il sistema a griglia di Bootstrap come abbiamo già detto è responsive e le colonne si riorganizzeranno in base alle dimensioni dello schermo.
Quindi su un grande schermo potrebbe apparire migliore con il contenuto organizzato ad esempio in tre colonne, ma su un piccolo schermo sarebbe meglio se gli elementi di contenuto fossero impilati uno sopra l’altro.
Perchè bootstrap viene usato da molti sviluppatori web?
Ma usare bootstrap conviene veramente? Sicuramente è uno strumento molto utili per per facilitare il lavoro ad un web designer poco esperto, o comunque quello di un progetto che è ancora in fase di avvio. Ma alla fine, potrebbe aiutare anche sviluppatori più esperti a migliorare siti web, ancora poco accessibili!
Ma vale davvero la pena utilizzare bootstrap?
Vediamo i vantaggi e gli svantaggi!
Quali sono i vantaggi
I vantaggi di bootstrap sono molti, vediamo quelli più importanti!
Immagini reattive
Bootstrap viene fornito con il proprio codice per ridimensionare automaticamente le immagini in base alle dimensioni dello schermo corrente. Basta aggiungere la classe .img-responsive alle tue immagini e le regole CSS predefinite si occuperanno del resto.
Lascia che Bootstrap ridimensioni le tue immagini per te!
Può persino cambiare la forma delle tue immagini con l’aggiunta di classi come img- circle e img-rounded e questo senza farti fare avanti e indietro tra il codice e il tuo software di progettazione.
Le griglie
Ne abbiamo già parlato in qualche paragrafo più sù, ma comunque, è sempre meglio ripeterlo!
Bootstrap viene fornito con il proprio sistema di griglia predefinito.
Quindi, puoi iniziare subito a riempire le caseslle con i tuoi contenuti, senza passare ore a codificare la tua griglia.
La definizione di punti di interruzione personalizzati per ogni colonna è un gioco da ragazzi utilizzando le loro interruzioni extra piccole, piccole, medie, grandi ed extra grandi. Puoi anche semplicemente attenersi all’impostazione predefinita in quanto potrebbe già soddisfare le esigenze del tuo sito.
I suoi componenti
Bootstrap viene fornito con tantissimi componenti che puoi facilmente aggiungere alla tua pagina web, tra cui:
- Barre di navigazione
- menu a discesa
- Barre di avanzamento
- Miniature
- Temi e modelli desgin
Sarà quindi semplicissimo aggiungere elementi di design accattivanti alla tua pagina web e potrai stare tranquillo sapendo che comunque manterranno la loro bellezza, indipendentemente dalle dimensioni dello schermo o dal dispositivo utilizzato per visualizzarli.
Svantaggi
So, che questo tookit ti sembra fantastico, effettivamente lo è, ma ci sono due lati di ogni medaglia. Come quasi tutto nella vita, anche Bootstrap ha i suoi lati negativi. Vediamoli!
La sua sintassi ti potrà confondere
Prima di acquisire familiarità con Bootstrap, parte della sua sintassi può creare confusione. Quando si utilizza il sistema a griglia, ad esempio, per creare una colonna che occupi un terzo dello schermo, è necessario aggiungervi la classe .col-md-4.
“Aspetta… 4? Da dove viene questo 4?!”
Indubbiamente, i quattro potrebbero farti credere che la colonna occuperebbe un quarto dello schermo, non un terzo. Sebbene questa sintassi abbia senso (Bootstrap utilizza un sistema a 12 colonne e 4 è un terzo di 12), può non essere intuitiva per chi è nuovo all’intero processo.
Non ti farà imparare veramente
C’è sempre il rischio che, usando Bootstrap, entri in un ciclo di semplice riciclaggio del codice esistente senza capirlo realmente.
Quindi può essere utile se sei veramente inesperto, ma comunque ricordati di non adagiarti troppo, altrimenti non riuscirai mai ad essere indipendente!
Conclusioni
Sicuramente avrai capito che Bootstrap è uno strumento molto potente e che si potrà rivelare un prezioso alleato per i tuoi siti web.
Niente di per sè è completamente perfertto o completamente sbagliato! Tutto sta nel modo in cui viene utilizzato!
Utilizzare bootstrap ti potrà dare sicuramente una marcia in più, ma ricordati sempre e comunque che non esistete una bacchetta magica che con un colpetto ti farà avere successo o che faccia in modo che tutto funzioni proprio come lo volevi tu.
Dovrai sempre impegnarti e metterci del tuo!
