Dokumentácia a príklady používania vlastných pruhov priebehu Bootstrapu s podporou pre skladané pruhy, animované pozadia a textové štítky.
Ako to funguje
Komponenty Progress sa skladajú z dvoch prvkov HTML, niektorých CSS na nastavenie šírky a niekoľkých atribútov. Nepoužívame prvok HTML5<progress> , čo zaisťuje, že môžete ukladať indikátory priebehu, animovať ich a umiestniť na ne textové štítky.
Používame .progressako obal na označenie maximálnej hodnoty indikátora priebehu.
Vnútorné používame .progress-barna označenie doterajšieho pokroku.
Vyžaduje vložený štýl , .progress-bartriedu nástrojov alebo vlastný CSS na nastavenie ich šírky.
Vyžaduje .progress-bartiež niektoré atribúty role, ariaaby bol prístupný.
Dajte to všetko dohromady a máte nasledujúce príklady.
Bootstrap poskytuje niekoľko nástrojov na nastavenie šírky . V závislosti od vašich potrieb vám môžu pomôcť pri rýchlej konfigurácii pokroku.
Štítky
Pridajte štítky do svojich indikátorov priebehu umiestnením textu do .progress-bar.
25 %
Výška
Nastavíme iba heighthodnotu na .progress, takže ak zmeníte túto hodnotu, vnútorná .progress-barsa automaticky zodpovedajúcim spôsobom zmení.
Pozadia
Použite triedy nástrojov na pozadí na zmenu vzhľadu jednotlivých indikátorov priebehu.
Viaceré pruhy
V prípade potreby zahrňte do komponentu postupu viacero indikátorov priebehu.
Pruhované
Pridať .progress-bar-stripeddo ľubovoľnej .progress-bar, ak chcete použiť pruh cez prechod CSS na farbu pozadia indikátora priebehu.
Animované pruhy
Pruhovaný prechod môže byť tiež animovaný. Pridať .progress-bar-animatedna .progress-baranimáciu pruhov sprava doľava prostredníctvom animácií CSS3.