Uvod u trake za napredni program za pokretanje
Gotovo programeri bi bili dobro poznati o programu Bootstrap. Prikazuje napredak, koliko je korisnik učinio / dovršio stvari. Bootstrap pruža određenu klasu za prikazivanje trake napretka. Ova klasa izgrađena je pod bibliotekom pokretanja. Trake napretka korisnicima prikazuju stanje napretka, tj. Pokazuje koliko su pokrili sa svojim zadatkom. Traka napretka može biti u obliku utovarivača, šipke ili možda u mnogim drugim oblicima. Prikazuje postotak završetka zadatka / događaja. Implementacija napretka bara može se brzo postići na web stranicama koristeći klase koje pruža Bootstrap.
Što su trake Bootstrap Progress?
Traka napretka prikazuje napredak trenutnog zadatka, primjerice, koliko je zadatak završen i koliko je u tijeku. Odnosi se na traku napretka koju je stvorio Bootstrap.
Na taj način se može stvoriti klasa "napredak" u roditeljskom elementu, a nedavni podređeni element imat će klasu "napredna traka". za traku napretka možemo vidjeti sljedeću snimku zaslona.
Slijede HTML-ovi trake napretka s različitim statusom napretka dovršetka. Ove se trake za napredak stvaraju pomoću bootstrapa. možemo vidjeti nadređeni element koji sadrži klasu pokretanja "napredak" i njegov podređeni element koji sadrži klasu "traka napretka" koju pruža knjižnica Bootstrap.
60% Complete
80% Complete
60% Complete
80% Complete
Da biste stvorili traku / utovarivače za pokretanje bootstrapa, knjižnica za pokretanje sustava za podizanje sustava treba biti uključena na stranicu.
Vrste traka za pokretanje čizme
Možda imaju različite vrste i različite značajke.
- Zadana traka napretka,
- Bar naprednjaka s etiketom
- Striped Progress Bar
- Obojena traka napretka
- Bar s animiranim napretkom
Pogledajmo u detalje ove vrste kako je spomenuto u nastavku:
1. Zadana traka napretka
Zadana traka napretka može se dodati pomoću knjižnice Bootstrap, određene unaprijed definirane klase koje se koriste u roditeljskom i podređenom elementu za stvaranje zadane trake napretka. Gore navedeni primjer najbolje odgovara zadanoj traci napretka.
2. Traka napretka s etiketom
Traka napretka s oznakom slična je zadanoj, ona također sadrži vrijednost na traci bez obzira na to što je obrađeno. Ovo se može stvoriti dodavanjem elementa „60% završeno“ između podređenog elementa.
Visina trake napretka upravlja se visinom nadređenog elementa koji sadrži klasu "napredak".
npr. U primjeru dolje navedenom rasponskom elementu koji je dodan između podređenog elementa. Ovaj rasponski element bit će vidljiv kao oznaka na trakama napretka.
60% Complete
80% Complete
60% Complete
80% Complete
U niže navedenom primjeru možemo vidjeti kako je dodano raspon vidljiv kao vrijednost trake napretka u sredini trake kao oznake, zbog čega je poznat i kao napredna traka s oznakom.
3. Striped traka napretka
Poderana traka napretka malo je drugačija u pogledu. možemo vidjeti da klasa dizalice „napredni-prugast-prugasta“ u unutarnjem elementu daje prugasti kao pogled na element. U nastavku se daje HTML za prugasta traka napretka.
Ispod je pogled na Striped Progress Bar.
4. Obojena traka napretka
U gore navedenoj traci napretka različite se boje mogu dodati u traku napretka pomoću klasa za pokretanje. neki od tih razreda dati su u nastavku
- bg-uspjeh
- bg-info
- bg-upozorenje
- bg-opasnost
Gore navedene klase poznate su kao pozadinske klase uslužnih programa.
Gore navedene klase u unutarnjem HTML elementu mogu dodati boju na traci napretka kao što je prikazano na snimci zaslona u nastavku.
5. Animirana traka napretka
To se odnosi na traku napretka s animacijom. Knjižnica za pokretanje programa pruža klasu "aktivno" za dodavanje animacije u traci napretka. Kad god se promijeni status napretka, status napretka polako se mijenja u ažurirano stanje.
Ako je „aktivna“ klasa dostupna na stvorenoj traci napretka i njihovo stanje napretka mijenja se u novo stanje. U ovom scenariju, traka napretka kretat će se u to novo stanje ili se status napretka povećava ili smanjuje.
Zaključak
Ovo je pametniji i učinkovitiji način za predstavljanje napretka. Zastupanje trake napretka može opisati previše informacija koje se ne mogu opisati u nekoliko rečenica. Prije stvaranja trake napretka Bootstrap važno je u aplikaciju uključiti knjižnicu za pokretanje.
Preporučeni članci
Ovo je vodič za Bootstrap Progress Bars. Ovdje razgovaramo o Uvodu, Vrste zajedno s kodovima. Možete i proći kroz naše druge predložene članke da biste saznali više -
- Što je Bootstrap?
- Dijelovi za podizanje sustava
- Što je WebSocket?
- Vrste web stranica
- Kako stvoriti ProgressBar u JavaFX-u?