CONTATTACI

Guide per aspiranti programmatori

Lezione 15 / 15

Crea un sito web con bootstrap framework!

Come hai visto, Bootstrap organizza il layout della pagina web in colonne, per un massimo di 12.. Poi, valuta la dimensione dello schermo del device di visualizzazione e decide quante di queste colonne mostrare su ogni riga e, quindi, quante righe saranno necessarie per mostrare l’intero contenuto. Sugli smartphone, in generale, si visualizza una sola colonna, come vedrai più avanti. La cosa importante è che di questo aspetto si occupa direttamente Bootstrap.

 

Facciamo, ora, un esempio reale. Userai le conoscenze che hai già imparato in questa guida. Progettiamo un sito web, il tuo primo con Bootstrap framework! Scegliamo un layout a tre colonne. Nella prima mettiamo un titolo, del testo e un’immagine; nella seconda, un altro titolo, altro testo e un video di Youtube; poi, mettiamo dei box di domanda che usano alcune delle peculiarità di Bootstrap. 

 

In particolare, per la formattazione usiamo Bootstrap versione 5.2.3.
La pagina include un contenitore principale con tre colonne all’interno, ognuna delle quali contiene un div con testo e un’immagine. 

Per incorporare il video di YouTube usiamo un iframe

Inoltre, la pagina include due pulsanti “Sì” e “No” che sfruttano la funzione collapse di Bootstrap per mostrare o nascondere un div in base alla scelta dell’utente.

 

Abbiamo già visto il file di base con le necessarie aggiunte per Bootstrap (in alto) e Javascript (in basso).

Abbiamo già visto anche come dichiarare un container.

<div class="container p-3 my-3 border rounded shadow-lg">

Questa è una versione più articolata di quella che hai già visto in precedenza.

Ora, stabiliamo di dividere la griglia in 3 componenti. Ci serve la classe row, riga:

<div class="row g-3">

In Bootstrap, la classe row crea una riga di colonne all’interno di un container. ipotizziamo di suddividere la riga in tre colonne di eguale larghezza. Poiché Bootstrap divide la riga in 12 elementi, per averne 3 dobbiamo avere colonne larghe 4 elementi (12/3). Ciascuna delle tre colonne verrà quindi configurata con la classe col-4. Dovremo inserire le tre colonne prima in un elemento row e più esternamente in un elemento container.

Inoltre, Bootstrap 5 ha introdotto le classi g-* (gutter, canale) per gestire facilmente la spaziatura tra gli elementi all’interno di un contenitore o una riga. Il valore numerico che segue la lettera g rappresenta l’ampiezza dello spazio. Può avere valori da 0 (niente canale) a 5 (canale largo).

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container p-3 my-3 border rounded shadow-lg">
      <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="p-3 border rounded bg-light">
            <h1>Bel titolo</h1>
            Questo codice HTML rappresenta una pagina web.
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="p-3 border rounded bg-light">
            <h1>Bel titolo</h1>
            Questo codice HTML rappresenta una pagina web.
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="p-3 border rounded bg-light">
            <h1>Bel titolo</h1>
            Questo codice HTML rappresenta una pagina web.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Questo codice produce la seguente schermata:

 

Come vedi, il browser occupa l’intero schermo, che è diviso in tre parti.

Ora puoi vedere una delle grandi funzionalità di Bootstrap. Riduci l’ampiezza del browser: vedrai che i contenuti vengono posti automaticamente in posizioni opportune!

Avendo fatto tre divisioni puoi vedere come reimpostare il sito su due colonne (come per un piccolo tablet) o una sola colonna (come per uno smartphone).

 

Non è grandioso? Pensa a come puoi organizzare la pagina avendo a disposizione fino a 12 colonne!

 

Ora arricchiamo un po’ il progetto. La struttura resta la stessa, articolata su tre sezioni. Ma nel primo mettiamo testo e un’immagine, nel secondo testo e un video di Youtube, e al posto della terza mettiamo una domanda e due possibili modi di rispondere.

<!-- Esempio sito Bootstrap completo -->
<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container p-3 my-3 border rounded shadow-lg">
      <div class="row g-3">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="p-3 border rounded text-bg-light">
            <h1>Bel titolo 1</h1>
            <img
              style="width: 200px"
              class="rounded float-end img-thumbnail"
              alt="Colosseo"
              src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Colosseo_2020.jpg/390px-Colosseo_2020.jpg"
            />

            Questo codice HTML rappresenta una pagina web che utilizza il
            framework di design Bootstrap in versione 5.2.3. La pagina include
            un tag
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1"
            />
            per garantire che la visualizzazione sia adatta ai dispositivi
            mobili. Il framework Bootstrap &egrave; incluso tramite un link CSS
            da una fonte esterna. Nella sezione &lt;body&gt; viene definito un
            contenitore principale con classe "container" e una riga di tre
            colonne all'interno di esso.
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="p-3 border rounded text-bg-warning">
            <h1>Bel titolo 2</h1>

            Ognuna delle tre colonne contiene un div con classe "p-3 border
            rounded bg-***" Questi div contengono del testo di esempio.
            <br />

            Infine, la pagina include un file JavaScript da una fonte esterna
            che include il bundle di Bootstrap.

            <iframe
              class="w-auto h-auto"
              src="https://www.youtube.com/embed/cB3u1OLBm68"
              title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen
            ></iframe>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="container">
            <div class="row mb-3">
              <div class="text-center p-3 border rounded text-bg-light shadow">
                <h3 class="p-3 text-bg-secondary rounded">Pannelli</h3>
                <h2>Siamo stati chiari?</h2>

                <a
                  class="btn btn-success"
                  data-bs-toggle="collapse"
                  href="#chiariSi"
                  role="button"
                >
                  S&igrave;
                </a>

                <a
                  class="btn btn-danger"
                  data-bs-toggle="collapse"
                  href="#chiariNo"
                  role="button"
                >
                  No
                </a>

                <div class="collapse" id="chiariSi">
                  <div class="card card-body">Bene!</div>
                </div>

                <div class="collapse" id="chiariNo">
                  <div class="card card-body">Come possiamo aiutarti?</div>
                </div>
              </div>
            </div>
            <!-- /row -->

            <div class="row mb-3">
              <div class="text-center p-3 border rounded text-bg-light shadow">
                <h3 class="p-3 text-bg-secondary rounded">Popup Modali</h3>
                <h2>Siamo stati chiari?</h2>

                <!-- Button trigger modal -->

                <button
                  type="button"
                  class="btn btn-success"
                  data-bs-toggle="modal"
                  data-bs-target="#exampleModalYes"
                >
                  S&igrave;
                </button>

                <button
                  type="button"
                  class="btn btn-danger"
                  data-bs-toggle="modal"
                  data-bs-target="#exampleModalNo"
                >
                  No
                </button>

                <!-- Modal -->

                <div
                  class="modal fade"
                  id="exampleModalYes"
                  tabindex="-1"
                  aria-labelledby="exampleModalLabel"
                  aria-hidden="true"
                >
                  <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">
                          Siamo stati chiari!
                        </h1>
                        <button
                          type="button"
                          class="btn-close"
                          data-bs-dismiss="modal"
                          aria-label="Close"
                        ></button>
                      </div>

                      <div class="modal-body">Bene!</div>

                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-secondary"
                          data-bs-dismiss="modal"
                        >
                          Chiudi
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Modal -->

                <div
                  class="modal fade"
                  id="exampleModalNo"
                  tabindex="-1"
                  aria-labelledby="exampleModalLabel"
                  aria-hidden="true"
                >
                  <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">
                          Non siamo stati chiari...
                        </h1>
                        <button
                          type="button"
                          class="btn-close"
                          data-bs-dismiss="modal"
                          aria-label="Close"
                        ></button>
                      </div>

                      <div class="modal-body">Come possiamo aiutarti?</div>

                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-secondary"
                          data-bs-dismiss="modal"
                        >
                          Chiudi
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /row -->
          </div>
          <!-- /container -->
        </div>
      </div>
      <!-- /row -->
    </div>
    <!-- /container -->

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Genera il file Html equivalente e mandalo in esecuzione: ecco il risultato!

Ora vediamo come abbiamo sviluppato il codice.

Nel primo box, “Bel titolo 1”, trovi del testo (parte della descrizione di questo stesso programma!) e un’ immagine presa da Wikipedia

Nel secondo box, “Bel titolo 2”, trovi un’altra parte della descrizione del programma e un video di Youtube inserito grazie ad un iframe:

<iframe
  class="w-auto h-auto"
  src="https://www.youtube.com/embed/cB3u1OLBm68"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
></iframe>

Il numero d’ordine di Youtube è cB3u1OLBm68: per inserire un video diverso basta sostituire a questo numero quello di un altro video che ti interessa.

Alla fine abbiamo messo una domanda semplice con due versioni di risposta: in un caso appare una breve scritta a seguire, nell’altro appaiono dei pop-up. Avevi già visto queste funzionalità, ricordi?
Ora non ti resta che cambiare scritte e link, e magari qualche elemento grafico, e avrai il tuo primo codice per sito web scritto in Bootstrap!

Questa guida ti ha dato un piccolo assaggio del framework CSS più utilizzato ad oggi, ma bootstrap framework è un mondo tutto da scoprire! Incuriosito? Iscriviti alla nuova Hackademy in partenza! Nel frattempo, però, non ti lasciamo a mani vuote: prova ad esercitarti con i nostri esercizi di bootstrap!

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.