Bootstrap 4 Progress Bars
Základní ukazatel průběhu
Ukazatel průběhu lze použít k tomu, aby uživateli ukázal, jak daleko je v procesu.
Chcete-li vytvořit výchozí ukazatel průběhu, přidejte .progresstřídu do prvku kontejneru a přidejte .progress-bartřídu do jeho podřízeného prvku. Pomocí vlastnosti CSS widthnastavte šířku ukazatele průběhu:
Příklad
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Výška ukazatele pokroku
Výška ukazatele průběhu je ve výchozím nastavení 16 pixelů. Ke změně použijte vlastnost CSS height. Pamatujte, že musíte nastavit stejnou výšku pro kontejner průběhu a ukazatel průběhu:
Příklad
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Štítky ukazatele pokroku
Přidejte text do ukazatele průběhu, abyste zobrazili viditelné procento:
Příklad
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Barevné ukazatele průběhu
Ve výchozím nastavení je indikátor průběhu modrý (primární). Ke změně barvy použijte kteroukoli z kontextových tříd pozadí Bootstrap 4:
Příklad
<!-- 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>
Pruhované pruhy pokroku
Použijte .progress-bar-stripedtřídu k přidání pruhů na ukazatele průběhu:
Příklad
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Animovaný ukazatel průběhu
Přidejte .progress-bar-animatedtřídu a animujte ukazatel průběhu:
Příklad
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Více ukazatelů průběhu
Progress bary lze také stohovat:
Příklad
<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>