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 è incluso tramite un link CSS
da una fonte esterna. Nella sezione <body> 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ì
</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ì
</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!
