Ultimele tutoriale de dezvoltare web
 

Bootstrap Progress Bars

❮ Anterior Urmatorul capitol ❯

Basic Progress Bar

O bară de progres poate fi folosit pentru a arăta un utilizator cât de departe de-a lungul el / ea este într-un proces.

Bootstrap oferă mai multe tipuri de bare de progres.

O bară de progres implicit în Bootstrap arată astfel:

70% complet

Pentru a crea o bară de progres implicit, se adaugă o .progress de clasă la un <div> Element:

Exemplu

<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>
Încearcă - l singur »

Notă: bare de progres nu sunt acceptate în Internet Explorer 9 și versiunile anterioare ( pentru că ei folosesc tranziții și animații CSS3 pentru a realiza unele dintre efectele lor).

Notă: Pentru a ajuta la îmbunătățirea accesibilității pentru persoanele care folosesc cititoare de ecran, ar trebui să includă aria-* atribute.

Progress Bar cu eticheta

O bară de progres, cu o etichetă arată astfel:

70%

Scoateți .sr-only clasa din bara de progres pentru a arăta un procent vizibil:

Exemplu

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>
Încearcă - l singur »

Bare de progres colorat

Clase contextuale sunt folosite pentru a oferi "meaning through colors" .

Clasele contextuale care pot fi utilizate cu bare de progres sunt:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
40% complet (success)
50% complet (info)
60% complet (warning)
70% complet (danger)

Următorul exemplu arată cum să creați bare de progres cu diferite clase contextuale:

Exemplu

<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>
Încearcă - l singur »

Baruri Striped Progress

bare de progres pot fi, de asemenea, cu dungi:

40% complet (success)
50% complet (info)
60% complet (warning)
70% complet (danger)

Adăugați clasa .progress-bar-striped pentru a adăuga dungi la bare de progres:

Exemplu

<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>
Încearcă - l singur »

Animate Progress Bar

Aici este un "animated" bara de progres:

40%

Adăugați clasa .active pentru a anima bara de progres:

Exemplu

<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>
Încearcă - l singur »

Suprapuși bare de progres

bare de progres pot fi stivuite:

Spatiu liber
Avertizare
Pericol

Creați o bară de progres stivuite prin plasarea mai multor bare în același <div class="progress"> :

Exemplu

<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>
Încearcă - l singur »

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»


❮ Anterior Urmatorul capitol ❯