Come scaricare ed installare Bootstrap
Dopo aver descritto il funzionamento di Bootstrap nell’articolo introduttivo di questo tutorial, vediamo ora come scaricare ed installare il più popolare framework front-end. Più avanti vedremo come inserire i vari componenti in una pagina HTML.
Bootstrap è molto semplice da installare. Devi semplicemente inserire all’interno delle tue pagine HTML il codice che richiama i file CSS e JS necessari per usare la libreria seguendo alcuni accorgimenti.
Come scaricare ed installare Bootstrap
I files che contengono la libreria di Bootstrap li puoi scaricare ed installare principalmente in 3 modi:
- puoi scaricare la versione del framework precompilata direttamente dal sito ufficiale getbootstrap.com;
- importarli tramite CDN;
- usare un gestore di pacchetti come npm, RubyGems, Composer ecc.
Negli esempi contenuti in questo tutorial spesso li importo tramite CDN, ma ti mostrerò anche come fare per scaricare ed installare la versione precompilata.
Sempre dal sito getbootstrap.com, puoi anche scaricare i files sorgente di Bootstrap, scritti usando Sass, e personalizzare il framework in base alle tue esigenze. Ovviamente questa soluzione è riservata ad utenti esperti.
Per scaricare la versione compilata di Bootstrap, vai su getbootstrap.com, clicca sul pulsante Download per accedere alla pagina dei download, quindi clicca di nuovo sul pulsante Download in corrispondenza del paragrafo Compiled CSS and JS.
Mentre, per importarli tramite CDN, devi andare sempre sulla pagina dei download (dove è possibile scaricare anche la versione compilata), ma in questo caso, dovrai copiare ed incollare il codice presente in corrispondenza del paragrafo BootstrapCDN nella tua pagina HTML. Più avanti ti mostrerò dove e come.
Infine, nel caso in cui tu decidessi di usare un gestore di pacchetti, poiché la procedura cambia in base al gestore usato, ti consiglio di seguire le istruzioni presenti su questa pagina.
Installare Bootstrap
Dopo aver visto dove scaricare i files necessari per integrare Bootstrap all’interno del nostro progetto, vediamo ora come installarlo.
Innanzitutto, per funzionare correttamente Bootstrap richiede il doctype di HTML5. Quindi ogni pagina HTML del tuo progetto dovrà iniziare con questi tag:
<!doctype html>
<html lang="it">
...
</html>Inoltre, tieni presente che Bootstrap è sviluppato per essere mobile-first, cioè ottimizzato per dispositivi mobile, e si adatta dinamicamente alle dimensioni della finestra del browser. Per garantire il rendering corretto e lo zoom al tocco per tutti i dispositivi, devi aggiungi il metatag viewport reattivo all’interno del tag <head> in questo modo:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">A questo punto, inseriamo i files CSS e JS che ci servono per installare e far funzionare correttamente Bootstrap.
Se hai scaricato il pacchetto compresso, contente i files compilati della libraria, crea una sotto directory nella cartella principale del tuo progetto ed estrai il contenuto del pacchetto compresso all’interno di questa sottodirectory.
Il pacchetto precompilato è composto da due cartelle, una contente i files i fogli di stile css e l’altra i files javascript.
Non ci soffermeremo ad analizzarli tutti nel dettaglio, ma ci limiteremo ad installare solo quelli che ci servono.
La prima cosa che devi fare è includere il file bootstrap.min.css all’interno del tag <head> di ogni pagina in questo modo:
<link rel="stylesheet" href="< PERCORSO DELLA CARTELLA >/css/bootstrap.min.css" >Se invece vuoi usare CDN il codice da includere è:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">Molti componenti di Bootstrap richiedono javascript per funzionare. In particolare richiedono jQuery e Popper.js. Quindi, posiziona i tag <script> necessari per importare le librerie in javascript alla fine delle tue pagine, prima del tag di chiusura </body>.
È importante inserire le librerie in un certo ordine. L’ordine con cui vanno aggiunti è: prima jQuery, poi Popper.js e in fine Bootstrap.min.js. Quindi, se usi CDN aggiungi il seguente codice alle tue pagine:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>Mentre, se usi il pacchetto compilato puoi includere il file bootstrap.bundle.min.js che contiene anche popper.js, ma no jQuery. Quindi, in quest’ultimo caso il codice da inserire sarà:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="< PERCORSO DELLA CARTELLA >/js/bootstrap.bundle.min.js" </script>Come avrai sicuramente notato, Bootstrap usa la versione slim di jQuery, ma è supportata anche la versione full.
Il template di partenza per Bootstrap
A questo punto scriviamo il codice completo che deve avere ogni pagina HTML per poter funzionare al meglio con Bootstrap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>Ovviamente il percorso di href e src cambia se stai usando il pacchetto compilato, come ti ho fatto vedere poco fa.
Ora che abbiamo preparato la nostra pagina con tutto il necessario, possiamo iniziare ad aggiungere i vari componenti di Bootstrap e realizzare la nostra interfaccia web responsive.
Nel prossimo paragrafo inizieremo a vedere il funzionamento dei contenitori e del sistema a griglia.
Per qualsiasi informazione o chiarimento non esitare a contattarci attraverso la nostra pagina Facebook o via email.
