**Bootstrap** è il framework CSS più popolare al mondo per lo sviluppo di siti responsive e mobile-first. Fornisce una collezione di stili CSS predefiniti e componenti JavaScript (modali, carousel, tooltip) pronti all'uso.
## Installazione
1. **CDN (Consigliato per test):** Includi i link CSS e JS nell'`` e prima della chiusura del ``.
```html
```
2. **Download:** Scarica i file e ospitali nel tuo progetto.
3. **Package Manager:** `npm install bootstrap`.
## Il Grid System (Sistema a Griglia)
Il cuore di Bootstrap è la **griglia a 12 colonne**. Permette di impaginare il contenuto in righe e colonne che si adattano alla larghezza dello schermo.
### Struttura Base
1. **`.container`**: Il contenitore principale (centra il contenuto).
2. **`.row`**: Una riga orizzontale (azzera i margini negativi).
3. **`.col-`**: Le colonne vere e proprie (devono sommare a 12).
```html
Colonna 1 (33%)
Colonna 2 (33%)
Colonna 3 (33%)
```
### Breakpoints (Punti di interruzione)
Bootstrap definisce suffissi per adattare il layout a diverse dimensioni:
* (nessun suffisso): Smartphone (< 576px)
* **sm**: Small (≥ 576px)
* **md**: Medium (Tablet, ≥ 768px)
* **lg**: Large (Desktop, ≥ 992px)
* **xl**: Extra Large (≥ 1200px)
Esempio Responsive:
```html
Elemento A
Elemento B
Elemento C
```
## Tipografia e Colori
Bootstrap sovrascrive lo stile di default del browser con un look più moderno.
### Testo
* Headings (`h1`-`h6`): Font più pulito.
* `.lead`: Paragrafo in evidenza (font leggermente più grande).
* `.text-muted`: Testo grigio chiaro.
* `.text-center`, `.text-end`: Allineamento.
### Colori Semantici (Utility Classes)
Si applicano al testo (`text-`) o allo sfondo (`bg-`).
| Classe | Colore | Significato |
| :--- | :--- | :--- |
| `.text-primary` | Blu | Principale |
| `.text-success` | Verde | Successo/Conferma |
| `.text-danger` | Rosso | Errore/Pericolo |
| `.text-warning` | Giallo | Attenzione |
| `.text-info` | Azzurro | Informazione |
| `.text-light` | Bianco | Chiaro |
| `.text-dark` | Nero | Scuro |
```html
Errore critico su sfondo chiaro!
```
## Componenti Principali
Bootstrap offre decine di componenti. Ecco i più usati:
### Bottoni
```html
```
### Navbar
```html
```
### Alert
```html
Operazione completata con successo!
```
### Card (Schede)
Molto usate per liste di prodotti o post.
```html
```
## 9.5 Margin e Padding (Spacing Utilities)
Bootstrap offre classi rapide per i margini (`m`) e il padding (`p`).
Formato: `{property}{sides}-{size}`
* **Property:** `m` (margin), `p` (padding).
* **Sides:** `t` (top), `b` (bottom), `s` (start/left), `e` (end/right), `x` (orizzontale), `y` (verticale).
* **Size:** da `0` a `5` (es. `3` è lo standard, circa 1rem).
Esempi:
* `.mt-3`: Margin Top livello 3.
* `.p-5`: Padding su tutti i lati livello 5.
* `.mx-auto`: Centra orizzontalmente (margin-left/right auto).
* `.py-2`: Padding verticale livello 2.