1. Struttura del Sito

Sito web responsive per mostrare immagini e video.

1.1 Menu

• Chi sono – presentazione
• Immagini – galleria a mosaico con zoom
• Video – galleria video

1.2 Struttura cartelle

/progetto-sito
│── index.html        (Home)
│── chi-sono.html     (Chi sono)
│── immagini.html     (Galleria immagini)
│── video.html        (Galleria video)
│── style.css         (Stile personalizzato)
│── script.js         (Array e funzioni)
│── /img              (Immagini)
│── /video            (Video)

2. Bootstrap – Introduzione

Bootstrap è una libreria CSS/JS che semplifica la creazione di siti responsive.

2.1 Come si usa

• Si include via CDN: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
• Si usano classi predefinite: container, row, col-6, btn, navbar...
• Funziona anche in locale (senza server)

2.2 Perché usarlo

• Responsive: si adatta a PC, tablet e smartphone
• Uniforme: stili coerenti per navbar, pulsanti, card
• Veloce: ci si concentra sul contenuto

3. Cheat-sheet Bootstrap

3.1 Classi base più utili

• container – contenitore centrale
• row – riga per la griglia
• col-6 col-md-4 – colonne responsive
• img-fluid – immagine responsive
• btn btn-primary – pulsante blu
• text-center – testo centrato
• fw-bold – grassetto
• mt-3 mb-4 – margini verticali
• bg-dark text-light – sfondo scuro+testo chiaro
• shadow rounded – ombra e bordi arrotondati

3.2 Colori

• bg-primary – blu
• bg-secondary – grigio
• bg-success – verde
• bg-danger – rosso
• bg-warning – giallo
• bg-info – azzurro
• bg-light – chiaro
• bg-dark – scuro
• text-primary, text-success – per il solo testo

3.3 Spaziature (margin e padding)

• m = margin, p = padding
• t = top, b = bottom, s = left, e = right
• x = orizzontale, y = verticale
• mt-3 – margin-top medio
• mb-5 – margin-bottom grande
• px-3 – padding orizzontale medio
• py-2 – padding verticale piccolo

4. Componenti Bootstrap

4.1 Navbar

const immagini = [
  {file:'img1.jpg', nome:'Panorama montano'},
  {file:'img2.jpg', nome:'Spiaggia mediterranea'},
  {file:'img3.jpg', nome:'Tram a Milano'},
  // aggiungi qui altre immagini
];

const video = [
  {file:'video1.mp4', titolo:'Presentazione'},
  {file:'video2.mp4', titolo:'Timelapse Milano'},
  // aggiungi qui altri video
];