TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur man skapar Bootstrap 5 framstegsfält?

22

Framstegsfält används för att visa upp färdigheter, andel av projektens slutförande och för liknande ändamål. Bootstrap 5 har olika stilar av förloppsindikatorer som liknar tidigare versioner. Låt oss i denna handledning utforska mer om varje typ av framstegsfält som erbjuds i Bootstrap 5.

Bootstrap 5 Progress Bars Handledning

  1. HTML5 framstegsfält
  2. Bootstrap -framstegsfält CSS -klasser
  3. Skapa standard förloppsfält
  4. Framstegsfält med olika bakgrundsfärger
  5. Lägga till etiketter i förloppsfält
  6. Flera framstegsfält
  7. Randig stil
  8. Animerad randig stil
  9. Justera höjd

Låt oss diskutera varje ämne i detalj.

1 HTML5 -framstegsfält

Kom ihåg att HTML5 har en standardtagg för att skapa horisontella förloppsindikatorer, vilket är tillräckligt i de flesta fall. Nedan finns kodblocket för HTML5 -förloppsfält.

<progress value="50" max="100">50 %</progress><br /> <progress value="60" max="100">60 %</progress><br /> <progress value="70" max="100">70 %</progress><br /> <progress value="80" max="100">80 %</progress><br />

Det kommer att se ut nedan i webbläsaren:

50 %

60%

70%

80%

Bootstrap använder inte HTML5 -förloppsindikator och har en egen stil för framstegsfältskomponenten.

2 CSS -klasser som används i Bootstrap Progress Bars

Bootstrap 4 använder följande CSS -klasser för att skapa framstegsfält:

  • ".Progress" -klassen används för yttre omslag för framstegsfältet. Den används för att innehålla flera förloppsindikatorer i omslaget.
  • ".Progress-bar" -klassen används för att skapa den faktiska förloppsindikatorn för att visa andelen framsteg.
  • Bredden på varje förloppsindikator bör definieras uttryckligen med ytterligare CSS -klasser.
  • Dessutom kan du lägga till "roll" och "aria" -attribut i statusfältet för läsbarhet.
  • "Aria-valuenow" används för att indikera det aktuella framstegsvärdet, "aria-valuemin" är det lägsta värdet som är 0 och "aria-valuemax" är det maximala värdet som är 100.

Låt oss skapa några exempel med hjälp av dessa klasser.

3 Standardfält för framsteg

Standardförloppsfältet använder huvudfärgen för att visa framsteg och ljusgrå för bakgrunden. Nedan finns koden för att skapa fem förloppsfält med 0, 25, 50, 75 och 100% framsteg.

<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

Det kommer att se ut nedan i webbläsaren:

Som nämnts ovan bör varje förloppsindikator ha en bredd som uttryckligen definierats för att visa slutförandet. Du kan antingen använda inline -stil eller verktygsklasser för detta ändamål. Vi har använt storleksanpassningsklasserna för 25%, 50% och 75% med w-25, w-50 respektive w-75. För 100% bredd har vi använt inline -stil med "bredd: 100%".

Kom också ihåg att lägga till manuell radbrytning mellan förloppsfält för att undvika att alla staplar visas på samma rad.

4 framstegsfält med bakgrunder

I likhet med många andra komponenter kan du bara använda bakgrundsklasserna för att ändra bakgrunden till framgång, varning, info, fara, mörka eller sekundära färger.

<div class="progress"> <div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50 bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75 bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="80"></div> </div> <div class="progress"> <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="90"></div> </div> <div class="progress"> <div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="60"></div> </div>

Framstegsfältet kommer att se ut nedan:

Hur man skapar Bootstrap 5 framstegsfält?

Observera att primärfärgen är standardvärdet så du behöver inte nämna om du vill att framstegen ska vara i primärfärg. Du kan inte heller använda ljus bakgrundsfärg eftersom förloppsindikatorns bakgrund också är ljus.

Du kan använda bakgrundsverktygsklasser på den yttre förloppsförpackningen för att ändra bakgrunden till förloppsfältet. Till exempel kommer nedanstående kod att producera statusfältet med röd (fara) färgbakgrund istället för ljusgrå.

<div class="progress bg-danger"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>

Resultatet kommer att se ut nedan i webbläsaren:

Hur man skapar Bootstrap 5 framstegsfält?

5 framstegsfält med etiketter

Om du vill lägga till etiketterna i statusfältet lägger du bara till texten före stängningen

taggen för varje förloppsindikator. Nedan är ett exempel för att visa 75% slutförande:

<div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Completed</div> </div>

Etiketten visas ovanpå stapeln med mittjustering enligt nedan:

Hur man skapar Bootstrap 5 framstegsfält?

6 flera framstegsfält

Om du lägger till flera förloppsfält i en enda yttre omslag skapas alla staplar i en enda rad.

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> </div>

De flera förloppsindikatorerna kommer att se ut nedan:

Hur man skapar Bootstrap 5 framstegsfält?

7 randiga framstegsfält

Klassen ".progress-bar-striped” används för att skapa randiga statusfält (bakgrundsklass används för att visa olika färger).

<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> </div>

Randiga förloppsindikatorer ska se ut nedan:

Hur man skapar Bootstrap 5 framstegsfält?

8 animerade randiga framstegsbarer

Det sista alternativet är att animera randen med klassen ".progress-bar-animerad".

<div class="progress"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div> </div>

Detta skapar en animerad förloppsindikator med gröna ränder. Kom ihåg att du bara kan animera de randiga staplarna och inte de vanliga.

9 Ändra höjd eller tjocklek på framstegsfält

Som standard kommer förloppsfältet att ha 1 rem höjd. Du kan ändra höjden med hjälp av inline-stil inom klassen ".progress-bar" och det yttre omslaget anpassas automatiskt därefter. Låt oss skapa två staplar med 0.rem och 30px i höjd:

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 50%; height: 0.5rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 30px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>

Resultatet ska vara som nedan i webbläsaren:

Hur man skapar Bootstrap 5 framstegsfält?

Problemet med att ändra höjden är att etiketterna när de används inte kommer att justeras korrekt. Återigen bör du använda ytterligare stilar manuellt för att justera etiketterna i vertikalt centrum.


Lär dig Bootstrap 5 (Index )


Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer