Dokumentáció és példák a Bootstrap egyéni folyamatjelző sávjainak használatához, amelyek támogatják a halmozott sávokat, animált háttereket és szöveges címkéket.
Hogyan működik
A folyamat összetevői két HTML-elemből, néhány CSS-ből a szélesség beállításához és néhány attribútummal épülnek fel. Nem használjuk a HTML5 <progress>elemet , ami biztosítja, hogy a folyamatjelző sávok egymásra halmozódjanak, animálhatók, és szöveges címkéket helyezzen el rájuk.
Használjuk .progressburkolóként a folyamatjelző sáv maximális értékének jelzésére.
A belsőt használjuk az .progress-bareddigi előrehaladás jelzésére.
A .progress-barszélességének beállításához soron belüli stílusra, segédprogramosztályra vagy egyéni CSS-re van szükség.
A hozzáféréshez .progress-barnéhány roleés ariaattribútumra is szükség van.
Ha mindezt összerakja, a következő példákat láthatja.
Adjon hozzá címkéket a folyamatjelző sávokhoz úgy, hogy szöveget helyez el a .progress-bar.
25%
Magasság
Csak heightértéket adunk meg a -n .progress, így ha megváltoztatja ezt az értéket, a belső .progress-barmérete ennek megfelelően automatikusan átméreteződik.
Hátterek
A háttérben használható segédprogramok segítségével módosíthatja az egyes folyamatjelző sávok megjelenését.
Több sáv
Ha szükséges, adjon meg több folyamatjelző sávot egy folyamatösszetevőben.
Csíkos
Bármelyikhez hozzáadva csíkot .progress-bar-stripedalkalmazhat .progress-bara folyamatjelző sáv háttérszíne feletti CSS-gradiensen keresztül.
Animált csíkok
A csíkos színátmenet animálható is. Add .progress-bar-animatedto .progress-bar, hogy a csíkokat jobbról balra animálja CSS3 animációkon keresztül.