Paski postępu Bootstrapa
Podstawowy pasek postępu
Pasek postępu może służyć do pokazania użytkownikowi, jak daleko jest w procesie.
Bootstrap udostępnia kilka rodzajów pasków postępu.
Domyślny pasek postępu w Bootstrap wygląda tak:
Aby utworzyć domyślny pasek postępu, dodaj .progressklasę do <div>elementu:
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>
Uwaga: Paski postępu nie są obsługiwane w przeglądarce Internet Explorer 9 i wcześniejszych (ponieważ używają przejść i animacji CSS3 do uzyskania niektórych efektów).
Uwaga: aby poprawić dostępność dla osób korzystających z czytników ekranu, należy uwzględnić atrybuty aria-*.
Pasek postępu z etykietą
Pasek postępu z etykietą wygląda tak:
Usuń .sr-onlyklasę z paska postępu, aby wyświetlić widoczny procent:
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>
Kolorowe paski postępu
Klasy kontekstowe służą do zapewnienia „znaczenia poprzez kolory”.
Klasy kontekstowe, których można używać z paskami postępu, to:
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
Poniższy przykład pokazuje, jak tworzyć paski postępu z różnymi klasami kontekstowymi:
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>
Paski postępu w paski
Paski postępu można również umieścić w paski:
Dodaj klasę .progress-bar-striped, aby dodać paski do pasków 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>
Animowany pasek postępu
Dodaj klasę .active, aby 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>
Ułożone paski postępu
Paski postępu można również układać w stos:
Utwórz skumulowany pasek postępu, umieszczając wiele paskó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>