Come creare barre di avanzamento Bootstrap 5?

La creazione di barre di avanzamento con Bootstrap 5 implica l'utilizzo delle utilità integrate. Ecco una guida passo passo:

Passaggio 1:importa Bootstrap

Includi la libreria Bootstrap, tramite un collegamento CDN o scaricandola localmente.

Passaggio 2:crea la barra di avanzamento

All'interno dell'elemento `div` in cui desideri creare la barra di avanzamento, utilizza la classe `.progress`.

```html

```

Passaggio 3:aggiungi lo stato della barra di avanzamento

Per riempire la barra di avanzamento, aggiungi la classe `.progress-bar` all'interno del contenitore `.progress`. Puoi anche includere modificatori per specificare la percentuale di avanzamento e lo stile di visualizzazione.

```html

```

Qui, la classe `.progress-bar` crea la barra stessa e abbiamo aggiunto la classe `.progress-bar-striped` per conferirle un effetto a strisce. Modifica "aria-valuenow" per specificare il valore di avanzamento corrente.

Passaggio 4:specifica percentuale ed etichetta

Puoi aggiungere facilmente la percentuale di avanzamento corrente o un'etichetta alla barra racchiudendo il testo desiderato all'interno di un elemento `` all'interno del contenitore `.progress-bar`.

```html

```

Passaggio 5:anima la barra di avanzamento

Per abilitare l'animazione nella barra di avanzamento, utilizza la classe `.progress-bar-animated` sull'elemento barra di avanzamento.

```html

```

Passaggio 6:visualizza le barre di avanzamento contestuali

Puoi utilizzare le classi Bootstrap integrate per modificare ulteriormente l'aspetto della barra di avanzamento assegnando le classi "bg-..." e "text-..." all'interno di ".progress-bar".

```html

```

Passaggio 7:altezza e angoli arrotondati

Per modificare l'altezza della barra di avanzamento o aggiungere angoli arrotondati, utilizzare la classe di utilità `.h-*` per l'altezza e la classe `.rounded` per gli angoli arrotondati.

```html

```

Passaggio 8:controllo del display

Puoi controllare l'aspetto della visualizzazione della barra di avanzamento utilizzando la classe `.visually-hidden` o `.d-none` dalle utilità di Bootstrap.

Conclusione:

Con questi passaggi, puoi creare facilmente varie barre di avanzamento di Bootstrap 5 per indicare progressi, stati o altri dati rilevanti sulle tue pagine web. È possibile personalizzare e applicare stili alle barre di avanzamento utilizzando classi e proprietà CSS aggiuntive.

• Come creare descrizioni comandi di Bootstrap 5? 
• Come creare popover Bootstrap 5?