Come usare Bootstrap


Lezione 3 / 15

Come usare Bootstrap

Di Leo Sorge


bootstrap

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.
 

schermata iniziale bootstrap

 

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.

 

 

 

Scopri i corsi

Le nostre guide possono essere molto utili per muovere i primi passi nel mondo della programmazione, ma se vuoi iniziare una nuova carriera in ambito digital & tech con il supporto costante dei docenti e tantissime esercitazioni pratiche, ti consigliamo di frequentare uno dei corsi della nostra Hackademy!

Scopri i corsi