Introduktion til Bootstrap Progress Barer
Næsten programmerere ville være velkendt om Bootstrap. Det viser fremskridtene, hvor meget en bruger har gjort / afsluttet tingene. Bootstrap giver en bestemt klasse til visning af Progress Barer. Denne klasse er bygget under bootstrap-biblioteket. Fremdriftslinjer viser status for fremskridt for brugerne, dvs. angiver, hvor meget de har dækket af deres opgave. Fremdriftslinjen kan være i form af loader, bar eller måske i mange andre former. Det viser procentdelen af færdiggørelsen af opgaven / begivenheden. Progress Bars-implementering kan opnås hurtigt på websider ved hjælp af klasser leveret af Bootstrap.
Hvad er Bootstrap Progress Barer?
Fremdriftslinje viser status for den aktuelle opgave, f.eks. Hvor meget opgaven er afsluttet og hvor meget den afventer. Det henviser til Progress Bar oprettet af Bootstrap.
Således kan det oprettes ved hjælp af klassen “fremskridt” i overordnede element og det nyere underordnede element har klasse “fremskridt-bjælke”. Vi kan se følgende skærmbillede til statuslinjen.
Følgende er angivet HTML på statuslinjen med forskellige status for færdiggørelsesforløb. Disse progress barer oprettes ved hjælp af bootstrap. vi kan se det overordnede element, der indeholder bootstrap-klassen "fremgang" og dets underordnede element, der indeholder klassen "progress bar" leveret af Bootstrap-biblioteket.
60% Complete
80% Complete
60% Complete
80% Complete
For at oprette bootstrap-statuslinjen / -læsere, skal bootstrap-biblioteket være inkluderet på siden.
Typer af Bootstrap Progress Barer
De har muligvis forskellige typer og forskellige funktioner.
- Standard progress bar,
- Fremskridtslinje med etiket
- Stribet statuslinje
- Farvet Progress Bar
- Animeret Progress Bar
Lad os se på disse typer i detaljer som nævnt nedenfor:
1. Standard progress bar
Standard fremdriftslinje kan tilføjes vha. Bootstrap-biblioteket, bestemte foruddefinerede klasser, der bruges på overordnede & underordnede elementer til at oprette standardfremgangsmåden. Ovenfor givet eksempel er den bedste passer til standardfremgangsmåden.
2. Fremskridtslinje med etiket
Fremdriftslinje med etiket ligner standard en, den indeholder også værdien på linjen, uanset hvad der er behandlet. Dette kan oprettes ved at tilføje elementet "60% komplet" mellem barnelementet.
Højden på statuslinjen styres af højden på det overordnede element, der indeholder klasse “fremskridt”.
f.eks. I det nedenfor givne eksempel spændes element, der er tilføjet mellem barnetelementet. Dette spanelement vil være synligt som en etiket på statuslinjerne.
60% Complete
80% Complete
60% Complete
80% Complete
I det nedenfor givne eksempel kan vi se, at det tilføjede span er synligt som værdien af statuslinjen i midten af linjen som en etiket, det er derfor, det er kendt som en statuslinje med en etiket.
3. Stribet statuslinje
En stribet fremdriftslinje er lidt anderledes i betragtning. vi kan se, at bootstrap-klassen "progress-bar-striped" i det indre element giver strippet som en visning til elementet. Følgende er angivet HTML til striped Progress Bar.
Nedenfor vist udsigten over Striped Progress Bar.
4. Farvet statuslinje
I den ovenfor givne statuslinje kan forskellige farver føjes til statuslinjen ved hjælp af bootstrap klasser. nogle af disse klasser er angivet nedenfor
- bg-succes
- bg-info
- bg-advarsel
- bg-fare
Ovennævnte klasser er kendt som baggrundstypeklasser.
Ovenstående klasser i det indre HTML-element kan tilføje farve til statuslinjen som vist i nedenstående skærmbillede.
5. Animeret fremdriftslinje
Dette henviser til Progress Bar med Animation. Bootstrap-bibliotek giver klassen "aktiv" for at tilføje animation i Progress Bar. Hver gang status status ændres, ændres status langsomt til den opdaterede tilstand.
Hvis "aktiv" klasse er tilgængelig i den oprettede statuslinje, ændres deres status til den nye tilstand. I dette scenarie navigerer statuslinjen langsomt til den nye tilstand, enten fremskridtstatus øges eller formindskes.
Konklusion
Dette er en smartere og effektiv måde at repræsentere status for fremskridt på. Progress Bar Repræsentation kan beskrive for meget information, der ikke kan beskrives i nogle få sætninger. Før du opretter Bootstrap Progress Bar , er det vigtigt at inkludere bootstrap-biblioteket i applikationen.
Anbefalede artikler
Dette er en guide til Bootstrap Progress Barer. Her diskuterer vi introduktionen, typer sammen med koder. Du kan også gennemgå vores andre foreslåede artikler for at lære mere–
- Hvad er Bootstrap?
- Bootstrap-komponenter
- Hvad er WebSocket?
- Typer af websteder
- Sådan oprettes en ProgressBar i JavaFX?