HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Barre di avanzamento Bootstrap

❮ Precedente Prossimo ❯

Barra di avanzamento di base

Una barra di avanzamento può essere utilizzata per mostrare a un utente fino a che punto si trova in un processo.

Bootstrap fornisce diversi tipi di barre di avanzamento.

Una barra di avanzamento predefinita in Bootstrap è simile alla seguente:

70% completo

Per creare una barra di avanzamento predefinita, aggiungi una .progressclasse a un <div>elemento:

Esempio

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

Nota: le barre di avanzamento non sono supportate in Internet Explorer 9 e versioni precedenti (perché utilizzano transizioni e animazioni CSS3 per ottenere alcuni dei loro effetti).

Nota: per migliorare l'accessibilità per le persone che utilizzano lettori di schermo, dovresti includere gli attributi aria-*.

Barra di avanzamento con etichetta

Una barra di avanzamento con un'etichetta ha il seguente aspetto:

70%

Rimuovi la .sr-onlyclasse dalla barra di avanzamento per mostrare una percentuale visibile:

Esempio

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>

Barre di avanzamento colorate

Le classi contestuali vengono utilizzate per fornire "significato attraverso i colori".

Le classi contestuali che possono essere utilizzate con le barre di avanzamento sono:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
Completato al 40% (successo)
50% completo (informazioni)
60% completo (avviso)
70% completo (pericolo)

L'esempio seguente mostra come creare barre di avanzamento con le diverse classi contestuali:

Esempio

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

Barre di avanzamento a strisce

Le barre di avanzamento possono anche essere barrate:

Completato al 40% (successo)
50% completo (informazioni)
60% completo (avviso)
70% completo (pericolo)

Aggiungi classe .progress-bar-stripedper aggiungere strisce alle barre di avanzamento:

Esempio

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

Barra di avanzamento animata

40%

Aggiungi classe .activeper animare la barra di avanzamento:

Esempio

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>

Barre di avanzamento impilate

Le barre di avanzamento possono anche essere impilate:

Spazio libero
Avvertimento
Pericolo

Crea una barra di avanzamento impilata inserendo più barre nella stessa <div class="progress">:

Esempio

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>

Mettiti alla prova con gli esercizi

Esercizio:

Aggiungi le classi corrette per fare in modo che questo codice HTML si comporti come una barra di avanzamento.

<div class="">
  <div class=""
    role="progressbar"
    style="width:70%">
  </div>
</div>


❮ Precedente Prossimo ❯