Bevezetés a Bootstrap Progress bárokba
Szinte a programozók közismertek lennének a Bootstrap-ról. Megmutatja az előrehaladást, hogy egy felhasználó mennyit tett / végzett be a dolgokat. A Bootstrap egy bizonyos osztályt biztosít a haladási sávok megjelenítéséhez. Ez az osztály a bootstrap könyvtár alatt épül fel. A haladási oszlopok a felhasználók állapotát jelenítik meg, azaz azt jelzi, hogy mennyit fedezték fel feladataikkal. A folyamatjelző sáv lehet betöltő, sáv vagy sok más formában is. Megjeleníti a feladat / esemény befejezésének százalékát. A Progress Bars megvalósítása gyorsan elérhető a weboldalakon a Bootstrap által biztosított osztályok segítségével.
Mi az a Bootstrap Progress Bars?
A folyamatjelző sáv megjeleníti az aktuális feladat előrehaladását, például azt, hogy mennyi a feladat befejeződött és mennyi a függőben. Ez a Bootstrap által létrehozott Progress Bar-ra utal.
Így létrehozható az „előrehaladás” osztály használatával a szülő elemben, és a legutóbbi gyermek elemnek lesz az „előrehaladási sáv” osztálya. a következő képernyőképet láthatjuk a folyamatjelző sávban.
Az alábbiakban megadjuk a folyamatjelző sáv HTML-jét, amelynek eltérő teljesítési státusza van. Ezeket az előrehaladási sávokat a bootstrap segítségével hozzák létre. láthatjuk a „progressst” bootstrap osztályt tartalmazó szülőelemet és a Bootstrap könyvtár által biztosított „progress bar” osztályt tartalmazó gyermek elemet.
60% Complete
80% Complete
60% Complete
80% Complete
A rendszerindító folyamatjelző / betöltők létrehozásához a rendszerindító könyvtárat bele kell foglalni az oldalba.
A Bootstrap Progress rúd típusai
Lehet, hogy különféle típusú és eltérő tulajdonságokkal rendelkezik.
- Alapértelmezett folyamatjelző sáv,
- Progress Bar címkével
- Csíkos folyamatjelző
- Színes folyamatjelző sáv
- Animált folyamatjelző sáv
Nézzük meg részletesen ezeket a típusokat, az alábbiak szerint:
1. Alapértelmezett folyamatjelző sáv
Az alapértelmezett haladási sáv a Bootstrap könyvtár használatával hozzáadhat bizonyos előre meghatározott osztályokat, amelyeket a szülő és gyermek elemben használnak az alapértelmezett haladási sáv létrehozásához. A fenti példa felel meg az alapértelmezett folyamatjelző sávnak.
2. Folyamatjelző sáv címkével
A címkével ellátott haladás sáv hasonló az alapértelmezetthez, és tartalmazza a sáv értékét, bármi is feldolgozott. Ezt úgy lehet létrehozni, hogy a „60% teljes” elemet hozzáadjuk a gyermek elem közé.
A folyamatjelző sáv magasságát a szülőelem magassága szabályozza, amely az „előrehaladás” osztályt tartalmazza.
Például az alábbiakban bemutatott példaérték-elemhez hozzáadva a gyermekelem közé. Ez a mérőelem címkeként lesz látható a folyamatjelző sávokon.
60% Complete
80% Complete
60% Complete
80% Complete
Az alábbiakban bemutatott példában láthatjuk, hogy a hozzáadott tartomány látható a haladás sávjának értékeként a sáv közepén, mint címke, ezért nevezzük haladási sávnak címkével.
3. Csíkos folyamatjelző
A csíkos folyamatjelző sáv némileg eltérő. láthatjuk, hogy a belső elem „előrehaladási sáv-csíkos” bootstrap osztálya az elem nézetéhez hasonlóan megfosztva van. A következők kapják a csíkos haladás sáv HTML-jét.
Az alábbiakban a Striped Progress Bar nézete látható.
4. Színes folyamatjelző sáv
A fenti folyamatjelző sávban különböző színek adhatók a folyamatjelző sávhoz a bootstrap osztályok segítségével. néhány ilyen osztály az alábbiakban található
- bg-siker
- bg-info
- bg-figyelmeztetés
- bg-veszély
A fent megadott osztályokat háttér-hasznossági osztályoknak nevezzük.
A belső HTML elem fent megadott osztályai színt adhatnak a folyamatjelző sávhoz, az alábbi képernyőképe szerint.
5. Animált folyamatjelző sáv
Ez az animációs folyamatjelző sávra utal. A Bootstrap könyvtár „aktív” osztályt kínál animáció hozzáadására a folyamatjelző sávban. Ha az előrehaladási állapot megváltozik, az előrehaladási állapot lassan frissített állapotba változik.
Ha az „aktív” osztály elérhető a létrehozott folyamatjelző sávban, és az előrehaladási állapotuk megváltozik az új állapotba. Ebben a forgatókönyvben a folyamatjelző sáv lassan navigál arra az új állapotra, vagy az előrehaladási állapot növekszik, vagy csökken.
Következtetés
Ez egy okosabb és hatékonyabb módszer a haladás állapotának ábrázolására. A folyamatjelző sáv ábrázolása túl sok információt ír le, amelyet néhány mondatban nem lehet leírni. A Bootstrap Progress Bar létrehozása előtt fontos, hogy az indítócsomag könyvtárat belefoglalja az alkalmazásba.
Ajánlott cikkek
Ez egy útmutató a Bootstrap Progress Bars-hez. Itt tárgyaljuk a Bevezetést, a típusokat és a kódokat. A további javasolt cikkeken keresztül további információkat is megtudhat -
- Mi az a Bootstrap?
- Bootstrap alkatrészek
- Mi a WebSocket?
- A webhelyek típusai
- Hogyan hozhatunk létre egy ProgressBar-t a JavaFX-ben?