Come usare 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…

Lezione 3 / 15

Leo Sorge

bootstrap

Vuoi avviare una nuova carriera o fare un upgrade?

Trova il corso Digital & Tech più adatto a te nel nostro catalogo!

Scopri i corsi 👨‍🏫

CERCA ARGOMENTO

Introduzione a bootstrap

Struttura di base di Bootstrap

Personalizzazione di Bootstrap

Bootstrap tutorial: creare un sito web con Bootstrap

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.

Sei indeciso sul percorso? 💭

Parliamone! Scrivici su Whatsapp e risponderemo a tutte le tue domande per capire quale dei nostri corsi è il più adatto alle tue esigenze.

Scrivici

Oppure chiamaci al 800 128 626

CONTENUTI GRATUITI IN EVIDENZA

Guide per aspiranti programmatori 👨🏻‍🚀

Vuoi muovere i primi passi nel Digital e Tech? Abbiamo preparato alcune guide per aiutarti a orientarti negli ambiti più richiesti oggi.