Bootstrap è un framework front-end molto utile per creare velocemente pagine generiche e responsive, basato su griglie, adattato a tutti i browser. Offre diversi componenti con uno stile e un funzionamento costante (dalle barre di navigazione, ai form, ai bottoni etc).
Bootstrap 5 viene molto spesso utilizzato per la facilità con cui si possono creare righe e colonne responsive. La struttura è la seguente:
Un .container (.container-fluid quando si vuole che riempia tutta la viewport) contiene una o più row; ogni row è suddivisa in 12 sezioni, che possono essere occupate da una o più colonne per frazioni di 12.
Ad esempio: due .col-6, quattro .col-3, sei .col-2 e via dicendo.
Possiamo anche modificare il comportamento delle colonne tramite i column breaks. Questa sezione, ad esempio, presenta due col-lg-6 col-md-10 col-sm-10 nella stessa row. Riducendo la viewport di questa pagina, vedrai che una colonna andrà sull'altra.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| Extra small | None | <576px |
| Small | col-sm-* |
≥576px |
| Medium | col-md-* |
≥768px |
| Large | col-lg-* |
≥992px |
| Extra large | col-xl-* |
≥1200px |
| Extra extra large | col-xxl-* |
≥1400px |
Per utilizzare Bootstrap (ad oggi, Marzo 2023, la versione è 5.2) basta aggiungere al nostro documento HTML il link alla pagina di stili e gli script JS necessari al funzionamento di alcuni elementi (come navbar, accordion etc).
Per utilizzare Bootstrap 5 su Codepen:
Creiamo alcuni layout con Bootstrap.
Creimo un template composto dalle seguenti sezioni:
Creimo un template composto dalle seguenti sezioni:
© Andrea Schimmenti & Fabio Vitali. TW 2022-2023.