Entriamo ora nel vivo della nostra guida e parliamo in maniera concreta di Bootstrap framework. Il sito di riferimento è https://getbootstrap.com/. Come per ogni software, esistono varie versioni di bootstrap indicate da un numero di riferimento: niente paura, troverai quelle disponibili elencate in alto a destra. Può succedere che tu debba continuare un lavoro sviluppato precedentemente su una versione specifica: dovrai, quindi, andare sulla pagina indicata e seguire le istruzioni elencate.
Per abituarti a questa evenienza, negli esempi che vedrai in questa guida faremo uso di più sottoversioni di Bootstrap, in realtà assai simili tra loro.
Andando sul sito di Bootstrap hai a disposizione due modalità di funzionamento: una è per esperti (a sinistra), l’altra è per chi ancora sta studiando (a destra). Quella che utilizzeremo in questa guida è quella di destra, la versione CDN (Content Delivery Network).
Cliccando su CDN si apre una schermata nella quale, a destra, sono disponibili due componenti, un link al CSS e del codice JavaScript. Li vedi in questa parte dello schermo, con l’opzione “copy to clipboard” per aiutarti a non commettere errori.
Ricorda: più avanti li dovrai inserire nel tuo file HTML per poter usare le funzionalità di Bootstrap.
Ora puoi aprire VSC e digitare il classico file index.html che conterrà il codice.
Partiamo con questo index.html di base:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AULAB - Guida a Bootstrap</title>
<! QUI METTI L’INTERFACCIA CSS FORNITA DA BOOTSTRAP –>
</head>
<body>
<div class="container">Primi passi con Bootstrap CDN</div>
<! QUI METTI L’INTERFACCIA JAVASCRIPT FORNITA DA BOOTSTRAP –>
</body>
</html>
Questo codice contiene alcuni elementi (viewport, container) propri di Bootstrap. Per ora puoi ignorarne l’esatto uso.
Dove vedi scritto < QUI METTI L’INTERFACCIA CSS FORNITA DA BOOTSTRAP > copierai ed incollerai il codice del CSS fornito per primo nella pagina di Bootstrap, che inizia con “<link”.
Dove, invece, vedi scritto < QUI METTI L’INTERFACCIA JAVASCRIPT FORNITA DA BOOTSTRAP > copierai ed incollerai il codice JavaScript, fornito per secondo nella pagina di Bootstrap, che inizia con “<script>”.
In questa prima esperienza stiamo usando la versione 5.0.0 di Bootstrap. Tu puoi selezionarla dove mostrato o sceglierne un’altra. Il risultato finale sarà molto simile, se non uguale, a questo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AULAB - Guida a Bootstrap</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-randy/46KrjDleawBgDStp8Y7UzmLAGSOM1LAEQ17CSUDqnUK2+k91uXQOFXICI4I"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<h1>Primi passi con Bootstrap CDN</h1>
</div>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF630ICXdXDipiYwWBnvT19Y9/TR1wSx1KIEHpNyvvOShgf/"
crossorigin="anonymous"
></script>
</body>
</html>
Per far risaltare il testo, trovi un tag <H1> che prima non c’era.
Dalla barra dei comandi scegli Run nel browser, chiedi il debug ed otterrai un risultato semplice.
