CONTATTACI

Guide per aspiranti programmatori

web developer che fa ok con la mano mentre lavora al pc constatando che la sicurezza del sito è ok
Lezione 3 / 15

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 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.

 

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.