Le classi permettono di aggiungere uno stile specifico all’elemento a cui assegniamo quel valore.
E’ come un attributo dell’elemento che si modifica.
Se per esempio io ho del testo e gli aggiungo la classe h1, quel testo erediterà tutti gli stili dell’h1 impostati da codice automaticamente.
Assegnare la classe h1 non farà di quel testo un h1: sarà sempre un paragrafo normale, ne erediterà solo l’aspetto.
Si possono aggiungere più classi ad un unico elemento.
| h1 | eredita font-size e family di h1 |
|---|---|
| h2 | eredita font-size e family di h2 |
| h3 | eredita font-size e family di h3 |
Per ogni classe elencata sotto il massimo di px supportati è 60 (che diventerà quindi -6). Qualsiasi valore superiore a 6 non verrà considerato dal sistema e quindi applicato.
I numeri quindi supportati sono sempre da 0 a 6.
Bisogna aggiungere le classi in base alle risoluzioni, perché un elemento può avere margini diversi in desktop e mobile.
| m-0 | rimuove il margine (in alto, in basso, a destra, a sinistra) |
|---|---|
| m-1 | aggiunge 10px di margine (in alto, in basso, a destra, a sinistra) |
| m-1-5 | aggiunge 15px di margine (in alto, in basso, a destra, a sinistra) |
| m-2 | aggiunge 20px di margine (in alto, in basso, a destra, a sinistra) |
| mb-1 | aggiunge 10px di margine in basso |
| mt-1 | aggiunge 10px di margine superiore |
| ms-1 | aggiunge 10px di margine a sinistra |
| me-1 | aggiunge 10px di margine a destra |
| mx-1 | aggiunge 10px di margine a destra e sinistra |
| my-1 | aggiunge 10px di margine sopra e sotto |