Guida a Bootstrap: i primi passi con il framework di Twitter

Bootstrap è un framework frontend che permette agli sviluppatori di creare dei siti di varia natura, adatti per diversi dispositivi. Per questo scopo il progetto open source offre diversi modelli di progettazione basati su HTML e CSS, oltre che estensioni opzionali di JavaScript. Originariamente Twitter ha ideato Bootstrap come strumento aziendale per l’uniformazione dei design, ma ha poi rilasciato il framework nell’agosto 2011 sulla piattaforma open source GitHub, dove, nel giro di poco tempo, ha subito diverse modifiche (ulteriori sviluppi) che l’hanno portato ad essere uno dei progetti più popolari.

Cosa rende Bootstrap così interessante

Grazie ai modelli in HTML e CSS non c’è bisogno di cominciare da zero per sviluppare un nuovo sito. Come nei siti già pronti, avete a disposizione dei contenuti già preconfezionati da integrare nel vostro documento HTML. Così non dovete preoccuparvi delle innumerevoli e stressanti configurazioni CSS e ciò vi farà risparmiare tempo prezioso. Bootstrap si occupa, tra gli altri, dei seguenti elementi:

  • Pulsanti
  • Elementi di navigazione
  • Thumbnail (la miniatura di un’immagine)
  • Menu a tendina
  • Indicazioni degli errori
  • Breadcrumb (indicazione della propria posizione sulla pagina)
  • Integrazione di video responsive, cioè adatti per diversi dispositivi

Un altro importante componente è il layout a griglia di Bootstrap (Bootstrap Grid Layout). Questo sistema permette di stabilire esattamente le distanze e il posizionamento di singoli elementi del sito, dividendo il layout in 12 colonne. Nella griglia del layout potete ordinare gli elementi e dividerli tra le diverse dimensioni degli schermi, indipendentemente che siano quelle del computer di casa, del cellulare, del tablet o di un netbook. Con Bootstrap avete tutto il necessario per sviluppare un responsive web design.

Con i plug-in opzionali di JavaScript, che si basano sul framework di JavaScript jQuery, integrate al vostro progetto anche degli utili elementi per le interfacce utente come tooltip e finestre di dialogo o ampliate le funzioni degli elementi già disponibili, ad es. tramite la funzione di autocompletamento per i campi di input. Per utilizzare Bootstrap con elementi JavaScript, inserite semplicemente la biblioteca jQuery nel documento HTML.

Bootstrap: download e primi passi

Dato che Bootstrap è stato rilasciato da Twitter come framework libero, non ci sono costi per il download o per l’utilizzo. Grazie al codice di programmazione disponibile liberamente, gli sviluppatori esperti hanno la possibilità di adattare il framework alle proprie esigenze. In questa guida scoprite quali passaggi sono necessari per poter utilizzare i modelli già pronti in CSS e JavaScript di Bootstrap.

  1. Visitate la pagina ufficiale getbootstrap.com e scaricate il pacchetto “Bootstrap” (nella versione standard o minimale) che comprende i file CSS e JavaScript, i font e i temi opzionali di Bootstrap.
     
  2. Estraete i file e spostate la cartella Bootstrap nella directory desiderata del vostro sistema. 

  3. Qui ci sono tre sottocartelle “css“, “fonts“ e “js“. Nella cartella “font” si trovano più di 250 icone sotto forma di caratteri, provenienti dal sito Glyphicons Halflings e disponibili gratuitamente per Bootstrap. Per una maggiore comprensione vi spieghiamo uno ad uno dettagliatamente i file nelle cartelle “css” e “js”:

    • bootstrap.css: codice CSS leggibile interamente
    • bootstrap.min.css: codice CSS ridotto; i contenuti irrilevanti come spazi vuoti vengono eliminati per permettere l’interpretazione del codice
    • bootstrap.css.map: comprende CSS Source Maps grazie al quale in fase di sviluppo trovate i file sorgente originali in formato LESS
    • bootstrap-theme.css: file CSS dei temi opzionali già pronti
    • bootstrap-theme.min.css: codice minimizzato del tema
    • bootstrap-theme.css.map: tema Source Maps
    • bootstrap.js: codice JavaScript leggibile interamente
    • bootstrap.min.js: codice JavaScript minimizzato

  4. Per utilizzare elementi JavaScript, scaricate in aggiunta anche la ricca biblioteca di JavaScript jQuery su jquery.com.

  5. Quando tutti i componenti sono pronti, può iniziare il vero lavoro con il framework. Per esempio in questa guida creiamo una pagina HTML di benvenuto che poi trasformeremo in un template di Bootstrap.

  6. Aprite il vostro editor preferito, come Notepad++, e inserite nella finestra vuota il seguente codice:
<!DOCTYPE html>
<html>
<head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
           <h1>Ciao, questo è il mio primo template Bootstrap</h1>
</body>
</html>

Il meta tag “viewport” nella sezione head assicura una visualizzazione ottimale del sito su dispositivi mobili.

  1. Salvate il progetto sul desktop come “basic.html”.

  2. Per rendere questo tipico file HTML un template di Bootstrap, dovete implementare nel codice HTML i file CSS e JavaScript di Bootstrap. Qui inserite la directory in cui si trova la cartella. Si consiglia di integrare JavaScript verso la fine nel body del documento per evitare di prolungare i tempi di caricamento del sito. Il vostro codice dovrebbe risultare così: 
<!DOCTYPE html>
<html>
<head>
         <meta charset="utf-8">
         <meta name=viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" type="text/class" href="Bootstrap/css/bootstrap.min.css">
</head>
<body>
        <h1>Ciao, questo è il mio primo template Bootstrap</h1>
        <script src="Bootstrap/js/jquery-1.12.0.min.js"></script>
        <script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
  1. Infine salvate il documento come “template-bootstrap.html”. Con un doppio clic potete aprire il file Bootstrap HTML sul vostro browser preferito e vedere il messaggio inserito come titolo (h1).

  2. Ora potete creare il vostro template a seconda dei vostri gusti. Sulla pagina ufficiale trovate anche i diversi codici per la tipografia, i pulsanti, il sistema di griglia Bootstrap, ecc.

Le conoscenze informatiche sono un requisito importante

Anche se Bootstrap mette a disposizione dei contenuti già pronti, senza conoscenze HTML e CSS non riuscirete a sfruttare appieno il framework. Vale la pena mettere in conto un tempo di adattamento, anche nel caso di esperti sviluppatori. Al momento ci sono diversi template creati con Bootstrap da altri utenti, scaricabili gratuitamente o a pagamento e che vi tolgono una buona parte del lavoro. Chi lavora regolarmente con HTML, CSS e JavaScript, imparerà velocemente ad apprezzare i vantaggi del framework. Qui emergono soprattutto:

  • l’enorme risparmio di tempo,
  • le buone possibilità per sviluppare un responsive web design,
  • aggiornamenti regolari e supporto da parte della vasta community
  • e documentazione di prima qualità pronta per l’uso.

Oltre al fatto che si tratta di un progetto open source, tutti questi fattori contribuiscono a rendere Bootstrap uno dei framework più popolari nell’ambito del web design.

Hai trovato questo articolo utile?
Per offrirti una migliore esperienza di navigazione online questo sito web usa dei cookie, propri e di terze parti. Continuando a navigare sul sito acconsenti all’utilizzo dei cookie. Scopri di più sull’uso dei cookie e sulla possibilità di modificarne le impostazioni o negare il consenso.