Ako vytvoriť pruhy pokroku bootstrap 5?

Vytváranie indikátorov priebehu pomocou Bootstrap 5 zahŕňa použitie ich vstavaných nástrojov. Tu je podrobný návod:

Krok 1:Importujte Bootstrap

Zahrňte knižnicu Bootstrap, buď prostredníctvom odkazu CDN, alebo jej stiahnutím lokálne.

Krok 2:Vytvorte indikátor priebehu

V rámci prvku `div`, kde chcete vytvoriť indikátor priebehu, použite triedu `.progress`.

```html

```

Krok 3:Pridajte stav indikátora priebehu

Ak chcete vyplniť indikátor priebehu, pridajte triedu `.progress-bar` do kontajnera `.progress`. Môžete tiež zahrnúť modifikátory na určenie percenta priebehu a štýlu zobrazenia.

```html

```

Trieda `.progress-bar` vytvára samotný pruh a my sme pridali triedu `.progress-bar-striped`, aby sme mu dodali pruhovaný efekt. Upravte hodnotu aria-valuenow, aby ste určili aktuálnu hodnotu priebehu.

Krok 4:Zadajte percento a štítok

Aktuálny percentuálny podiel priebehu alebo označenie môžete jednoducho pridať na panel tak, že požadovaný text zabalíte do prvku `` v kontajneri `.progress-bar`.

```html

```

Krok 5:Animácia indikátora priebehu

Ak chcete povoliť animáciu v indikátore priebehu, použite triedu `.progress-bar-animated` na prvku indikátora priebehu.

```html

```

Krok 6:Zobrazte kontextové pruhy priebehu

Môžete použiť vstavané triedy Bootstrap na ďalšiu úpravu vzhľadu indikátora priebehu priradením tried `bg-...` a `text-...` vnútri `.progress-bar`.

```html

```

Krok 7:Výška a zaoblené rohy

Ak chcete upraviť výšku indikátora priebehu alebo pridať zaoblené rohy, použite pomocnú triedu `.h-*` pre výšku a triedu `.rounded` pre zaoblené rohy.

```html

```

Krok 8:Ovládanie zobrazenia

Aspekt zobrazenia indikátora priebehu môžete ovládať pomocou triedy `.visually-hidden` alebo `.d-none` z nástrojov Bootstrap.

Záver:

Pomocou týchto krokov môžete jednoducho vytvoriť rôzne indikátory priebehu Bootstrap 5, ktoré budú indikovať priebeh, stavy alebo iné relevantné údaje na vašich webových stránkach. Prispôsobenie a štýl indikátorov priebehu je možné pomocou dodatočných tried a vlastností CSS.

• Predchádzajúca strana: Ako vytvoriť tipy na bootstrap 5? 
• Ďalšia strana: Ako vytvoriť vyskakovacie okná Bootstrap 5?