Procurarsi Bootstrap
Procurarsi il framework Bootstrap è molto semplice. Basta visitare il sito getbootstrap.com e fare clic sul pulsante download che trovate sulla prima pagina del sito. Il collegamento è disponibile anche dalla pagina Getting started.
Nota: Questa guida fa riferimento alla versione 3.0.0, cioè l’ultima versione disponibile nel momento in cui si scrive.
Dal download otterrete un pacchetto .zip bootstrap-3.0.0.zip, oppure se lo scaricate dalla pagina Getting started, otterrete il file bootstrap-3.0.0-dist.zip.
Dal punto di vista dell’uso i due pacchetti sono identici. La differenza è data dal fatto che il primo, oltre ai file di uso, contiene anche i file della guida. Potete quindi scaricare il pacchetto che preferite, ovviamente, tenete presente che i file della guida non vanno poi inclusi nei progetti on-line (in quanto servirebbero solo ad occupare spazio inutile) ma devono essere utilizzati off-line come referenza per la fase di sviluppo.
Entrambi i pacchetti, una volta scompattati, contengono la cartella dist che a sua volta contiene quello che ci occorre. Vediamo di seguito uno screenshot dell’albero della cartella una volta scompattata:
Come potete notare ci sono i file pronti da usare (già compilati) che vanno solo inseriti (poi vedremo come) all’interno dei nostri progetti. E’ importante precisare che si parla di file compilati perché i file di sviluppo originali di Bootstrap sono creati con Less, un sistema che, semplificando molto, permette di creare fogli di stile in modo “programmatico”. I file scritti con Less vanno poi compilati con appositi compilatori in modo da ottenere i tradizionali CSS da usare nelle pagine web. I file forniti in questo pacchetto sono, appunto, già compilati e quindi pronti all’uso.
I file vengono forniti sia nella versione tradizione che in una versione “minified” in cui sono stati rimossi tutti gli spazi, le interruzioni di linea “inutili” ed i commenti al fine di ridurre il più possibile le dimensioni dei file di produzione sempre nell’ottica di risparmiare byte preziosi e velocizzare i tempi di caricamento. E’ ovviamente appena il caso di ricercare che il file normale e quello “minified” sono da usare in alternativa l’uno all’altro (il mio consiglio è quello di utilizzare sempre la versione minimizzata).
In realtà, è anche possibile scaricare i file sorgenti non compilati di Bootstrap che vanno poi compilati con un compilatore Less. Questi file sono disponibili all’indirizzo https://github.com/twbs/bootstrap/archive/v3.0.0.zip ma sono dedicati ad utenti molto avanzati che hanno bisogno di studiare il framework in modo più approfondito, oppure desiderano apportare modifiche, aggiunte o contribuire all’evoluzione del progetto.
Per lo scopo di questa guida, quindi, i file compilati sono assolutamente sufficienti e sono quelli che dobbiamo utilizzare.
Inserire Bootstrap nei propri progetti
Integrare Bootstrap nei propri progetti web è davvero semplice: si tratta di richiamare nelle pagine HTML i componenti del framework meglio, come detto, se nella versione minified. Vediamo un esempio di struttura HTML in cui vengono evidenziati (mediante l’utilizzo di commenti HTML) gli elementi determinanti per l’utilizzo di questo framework:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<!-- META -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- META -->
<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- CSS -->
</head>
<body>
<!-- CONTENUTO DELLA PAGINA ... -->
<!-- JS -->
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- JS -->
</body>
</html>Per prima cosa vorrei soffermare la vostra attenzione sulla presenza dell’istruzione META "viewport":
<meta name="viewport" content="width=device-width, initial-scale=1.0">Questa linea di codice è necessaria per creare layout responsive (ovvero che si adattano alla dimensione del dispositivo in cui la pagina è visualizzata). Come abbiamo detto, il poter creare layout perfettamente responsivi, infatti, è una delle peculiarità di questo framework.
Sempre nell HEAD del documento abbiamo incluso il file CSS di base del nostro framework. Non abbiamo caricato, invece, il tema di bootstrap (bootstrap-theme.min.css), che può facilmente essere aggiunto mediante il richiamo all’apposito foglio di stile, in quanto abbiamo voluto mostrare una "installazione" minimale del framework che precludesse dal suo tema.
Al termine del documento abbiamo effettuato delle inclusioni di file Javascript: per prima cosa è necessario includere la libreria jQuery (che non è compreso nel pacchetto che avete scaricato, ma va scaricato dal suo sito oppure richiamato da un deposito on-line). È molto importante che, come nel nostro esempio, jQuery sia caricato prima di Bootstrap, in quanto quest’ultimo utilizza jQuery per le sue funzioni interne e quindi si aspetta che esista già un oggetto jQuery quando viene caricato.
Si noti che, mentre il file di stile è caricato nell’intestazione del documento, jQuery e il file bootstrap.min.js vengono richiamati alla fine della pagina, appena prima di chiudere il tag <body>. Questo in conformità alle più recenti indicazioni in fatto di programmazione web. Il motivo di questa scelta è semplice: il browser quando riceve dal server il primo tag <script> ha già ricevuto tutto il codice HTML e quindi può già iniziare il rendering della pagina (perchè il DOM della pagina è completo), senza essere rallentato dall’esecuzione di codice Javascript inclusi all’inizio. Il risultato è quello di velocizzare la visualizzazione delle nostre pagine web.
Utilizzare una CDN per includere Bootstrap
Per finire, ricordo che, se non volete caricare sul vostro server i file di Bootstrap, avete anche la possibilità di includerli nelle vostre pagine richiamandoli da una CDN, ossia da un server che mette a disposizione questi file per il pubblico.
Per richiamare Bootstrap da CND potete usare le righe di codice che seguono:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>La scelta di utilizzare una CDN o caricare fisicamente i file sul proprio server deve essere fatta solo in base a criteri di performances: si ricordi, infatti, che utilizzare file esterni obbligherà il browser dei nostri utenti a fare ulteriori interrogazioni DNS e pertanto, presumibilmente, potrebbero aversi dei leggeri rallentamenti nel caricamento della pagina.
