Bootstrap 4 paski postępu
Podstawowy pasek postępu
Pasek postępu może służyć do pokazania użytkownikowi, jak daleko jest w procesie.
Aby utworzyć domyślny pasek postępu, dodaj .progressklasę do elementu kontenera i dodaj .progress-barklasę do jego elementu podrzędnego. Użyj widthwłaściwości CSS, aby ustawić szerokość paska postępu:
Przykład
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Wysokość paska postępu
Wysokość paska postępu to domyślnie 16px. Użyj heightwłaściwości CSS, aby to zmienić. Pamiętaj, że musisz ustawić tę samą wysokość kontenera postępu i paska postępu:
Przykład
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Etykiety paska postępu
Dodaj tekst wewnątrz paska postępu, aby pokazać widoczny procent:
Przykład
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Kolorowe paski postępu
Domyślnie pasek postępu jest niebieski (podstawowy). Użyj dowolnej z kontekstowych klas tła Bootstrap 4, aby zmienić jego kolor:
Przykład
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Paski postępu w paski
Użyj .progress-bar-stripedklasy, aby dodać paski do pasków postępu:
Przykład
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Animowany pasek postępu
Dodaj .progress-bar-animatedzajęcia, aby animować pasek postępu:
Przykład
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Wiele pasków postępu
Paski postępu można również układać w stos:
Przykład
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>