Podstawowe Progress Bar
Pasek postępu może być używany, aby pokazać użytkownikowi jak daleko on / ona jest w procesie.
Bootstrap zapewnia kilka rodzajów paski postępu.
Bar domyślny postęp w Bootstrap wygląda następująco:
Aby utworzyć pasek postępu domyślny, dodaj .progress klasę do <div> element:
Przykład
<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> Spróbuj sam " Uwaga: Paski postępu nie są obsługiwane w programie Internet Explorer 9, a wcześniej (ponieważ używają przejścia i animacje CSS3 do osiągnięcia niektórych z ich skutkami).
Uwaga: Aby przyczynić się do poprawy dostępności dla osób korzystających z czytników ekranowych, powinien zawierać aria-* atrybuty.
Pasek postępu Label
Pasek postępu z etykietą wygląda następująco:
Wyjąć .sr-only klasy z paskiem postępu, aby pokazać widoczną skuteczność:
Przykład
<div class="progress">
<div class="progress-bar" role="progressbar"
aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100"
style="width:70%">
70%
</div>
</div> Spróbuj sam " Bary Barwne Progress
Klasy kontekstowe są wykorzystywane w celu zapewnienia ", czyli za pomocą kolorów".
Klasy kontekstowych, które mogą być stosowane w paski postępu są:
-
.progress-bar-success -
.progress-bar-info -
.progress-bar-warning -
.progress-bar-danger
Poniższy przykład pokazuje, jak utworzyć paski postępu z różnych klas kontekstowych:
Przykład
<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> Spróbuj sam " Bary Striped Progress
Paski postępu może być również paski:
Dodaj klasy .progress-bar-striped dodać paski na paski postępu:
Przykład
<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> Spróbuj sam " Animowane Progress Bar
Oto "animated" pasek postępu:
Dodaj klasy .active animować pasek postępu:
Przykład
<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> Spróbuj sam " Skumulowany paski postępu
Paski postępu może być również ułożone:
Tworzenie ułożone pasek postępu poprzez umieszczenie wielu barów w tym samym <div class="progress"> :
Przykład
<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> Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»