Bootstrap è il toolkit CSS più popolare nell’ambito del web development.
Questo framework mette a disposizione degli sviluppatori delle classi CSS e dei componenti JavaScript per costruire applicazioni mobile responsive, graficamente gradevoli, che garantiscono accessibilità ottimale.
Riguardo all’accessibilità, Bootstrap mette a disposizione degli strumenti che consentono di creare pagine web facilmente accessibili alle persone con disabilità, che devono usare strumenti come i lettori di schermi.
Per ulteriori approfondimenti in merito, ti consiglio di visitare la pagina di Wikipedia dedicata alla Web accessibility.
Indice
I componenti di Boostrap
Bootstrap mette a disposizione alcuni componenti pronti per essere utilizzati.
Alcuni di questi funzionano solamente grazie alle classi CSS implementate in Bootstrap, altri fanno anche uso del codice JavaScript presente nel framework.
- Accordion
- Alerts
- Badge
- Breadcrumb
- Buttons
- Button group
- Card
- Carousel
- Close button
- Collapse
- Dropdowns
- List group
- Modal
- Navs tabs
- Navbar
- Offcanvas
- Pagination
- Popovers
- Progress
- Scrollspy
- Spinners
- Toasts
- Tooltips
Nel seguito dell’articolo approfondiremo l’utilizzo di alcuni di questi componenti.
Il grid system di Bootstrap
Il grid system di Bootstrap è l’elemento più utilizzato e noto del framework.
Consiste in un sistema di classi CSS che consente di posizionare i contenuti in maniera efficace e semplice per tutte le risoluzioni disponibili.
Il sistema si basa sull’utilizzo di tre elementi:
- l’elemento
container
- il tag
row
- gli elementi
col
Questi elementi vengono utilizzati congiuntamente ai breakpoints
.
Ogni breakpoint
individua un range di applicazione relativamente alla risoluzione del dispositivo che sta visualizzando la pagina web che fa uso di Bootstrap.
Questi breakpoint
sono:
- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)
Gli intervalli di applicazione dei breakpoints sono riepilogati nella tabella di seguito:
breakpoint | risoluzione |
---|---|
Extra small | <576px |
Small | ≥576px |
Medium | ≥768px |
Large | ≥992px |
Extra large | ≥1200px |
Extra extra large | ≥1400px |
Combinando questi elementi si possono creare layout arbitrariamente complicati, ricordando un semplice principio: ogni riga in Bootstrap può contenere 12 unità.
Inserendo quindi due elementi caratterizzati dalla classe col-6
all’interno di un elemento row
, si otterrà che i due elementi occuperanno tutto lo spazio disponibile nell’elemento row
.
Ogni altro elemento inserito dentro row
andrà quindi a capo.
Di seguito troverai un esempio di applicazione del grid system di Bootstrap.
Bootstrap Grid System: un esempio pratico
Ecco un esempio pratico di applicazione del grid system di Bootstrap.
Per comodità, riporto il codice utilizzato per produrre l’esempio:
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4">Col</div> <div class="col-xs-12 col-sm-4">Col</div> <div class="col-xs-12 col-sm-4">Col</div> </div> <div class="row"> <div class="col-xs-12 col-sm-3">Col</div> <div class="col-xs-12 col-sm-6">Col</div> <div class="col-xs-12 col-sm-3">Col</div> </div> <div class="row"> <div class="col-xs-12 col-sm-3">Col</div> <div class="col-xs-12 col-sm-3">Col</div> <div class="col-xs-12 col-sm-3">Col</div> <div class="col-xs-12 col-sm-3">Col</div> </div> <div class="row"> <div class="col">Col</div> <div class="col">Col</div> </div> </div>
Ti invito a ridimensionare la pagina / avviare l’emulatore di smartphone per vedere in che modo si adatta l’esempio proposto.
Le helper classes di Bootstrap
Il framework mette a disposizione innumerevoli classi CSS già pronte per attribuire delle proprietà agli elementi HTML in maniera rapida ed efficace.
Per chiarire meglio cosa siano le helper classes, ecco un esempio classico.
Tra le classi a disposizione, vi è la classe .d-{breakpoint}-{value}
, dove i breakpoints
sono quelli esplicitati nei paragrafi precedenti (sm, md, lg, xl, xxl)
, mentre value
è uno tra quelli disponibili:
- none
- inline
- inline-block
- block
- grid
- table
- table-cell
- table-row
- flex
- inline-flex
Il breakpoint
indicherà l’intervallo di applicazione del value
inserito.
E’ importante sapere che il breakpoint
può essere omesso: in tal caso, l’intervallo di applicazione sarà esteso a tutte le risoluzioni.
Un esempio di applicazione di helper class
Applicando le classi d-none d-sm-block
ad un elemento HTML, esso sarà caratterizzato dalla proprietà display: none
per schermi con risoluzioni inferiori a 576px.
Per risoluzioni superiore tale elemento avrà la proprietà display: block
.
Le helper classes disponibili in Bootstrap
Analogamente a quanto visto per la proprietà display
, Bootstrap offre classi per modificare le seguenti proprietà CSS:
- Background
- Colors
- Display
- Flex
- Float
- Interactions
- Overflow
- Position
- Shadows
- Sizing
- Text
- Vertical align
- Visibility
Puoi approfondire l’uso di ciascuno di esse sul sito di Boostrap.
Come installare Bootstrap
Puoi installare Bootstrap in diversi modi:
- Tramite package manager
- Utilizzando un Content Delivery Network (CDN)
- Scaricando direttamente i files del framework dal sito ufficiale
Installare Bootstrap tramite npm
Per installare Bootstrap tramite npm è sufficiente utilizzare il seguente comando
npm install bootstrap@5.2.3
dove è possibile selezionare la versione desiderata variando i numeri dopo il simbolo @
.
Usare Bootstrap tramite CDN
Esistono diversi CDN che consentono di includere i files di Bootstrap nel proprio sito.
<html> <head> ... <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> ... <!-- JavaScript Bundle with Popper --> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%405.2.3%2Fdist%2Fjs%2Fbootstrap.bundle.min.js%22%20integrity%3D%22sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL%2BjjXkk%2BQ2h455rYXK%2F7HAuoJl%2B0I4%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </body> </html>
Nell’esempio proposto puoi vedere come installare Bootstrap facendo uso del CDN jsDelivr
.
Scaricare i files di Bootstrap
Nella documentazione di ogni versione di Bootstrap è disponibile il link per scaricare tutti i files del framework.
Nella versione 5.2 la sezione dedicata è questa.
A questo link sono anche disponibili le istruzioni dettagliate riguardo all’installazione di Bootstrap tramite file locali.
Approfondimenti – Bootstrap CSS
Questo blog ospita una sezione interamente dedicata al CSS.
Ecco alcuni contenuti:
- Background image CSS – applicare lo sfondo
- Position Sticky CSS: guida ed esempi pratici
- Selettori CSS: una guida pratica con esempi
- Selettore CSS elemento: ottenerlo con Chrome DevTools
- Controllare il supporto dei browser per CSS e JavaScript
Conclusioni – Bootstrap CSS
In questo articolo abbiamo approfondito i motivi della grande diffusione di Bootstrap, il framework più utilizzato nell’ambito del web development.