Source

Pokrok

Dokumentace a příklady použití vlastních ukazatelů průběhu Bootstrapu s podporou skládaných pruhů, animovaných pozadí a textových štítků.

Jak to funguje

Komponenty Progress jsou tvořeny dvěma prvky HTML, některými CSS pro nastavení šířky a několika atributy. Nepoužíváme prvek HTML5<progress> , což zajišťuje, že můžete skládat ukazatele průběhu, animovat je a umístit na ně textové štítky.

Používáme .progressjako obal k označení maximální hodnoty ukazatele průběhu.
Vnitřní používáme .progress-bark označení dosavadního pokroku.
K .progress-barnastavení jejich šířky vyžaduje vložený styl, třídu utility nebo vlastní CSS.
Také .progress-barvyžaduje některé atributy rolea ariaatributy, aby byl přístupný.

Dejte to všechno dohromady a máte následující příklady.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Bootstrap poskytuje několik nástrojů pro nastavení šířky . V závislosti na vašich potřebách mohou pomoci s rychlou konfigurací postupu.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Štítky

Přidejte štítky k ukazatelům průběhu umístěním textu do .progress-bar.

25 %

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Výška

Nastavujeme pouze heighthodnotu na .progress, takže pokud tuto hodnotu změníte, vnitřní .progress-barse automaticky odpovídajícím způsobem změní.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Pozadí

Pomocí tříd obslužných programů na pozadí můžete změnit vzhled jednotlivých ukazatelů průběhu.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Více pruhů

V případě potřeby zahrňte do komponenty průběhu více ukazatelů průběhu.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Pruhovaný

Přidat .progress-bar-stripedk libovolnému .progress-bar, chcete-li použít pruh pomocí přechodu CSS přes barvu pozadí ukazatele průběhu.

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Animované pruhy

Pruhovaný přechod lze také animovat. Přidat .progress-bar-animatedk .progress-baranimaci pruhů zprava doleva pomocí animací CSS3.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>