TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan lage Bootstrap 5 fremdriftslinjer?

6

Fremdriftslinjer brukes til å vise frem ferdigheter, prosentandel av ferdigstillelse av prosjekter og til lignende formål. Bootstrap 5 har forskjellige stiler av fremdriftslinjer som ligner på tidligere versjoner. I denne opplæringen la oss utforske mer om hver type fremdriftslinjer som tilbys i Bootstrap 5.

Bootstrap 5 fremdriftslinjer Opplæring

  1. HTML5 fremdriftslinjer
  2. Bootstrap fremdriftslinjer CSS -klasser
  3. Opprette standard fremdriftslinjer
  4. Fremdriftslinjer med forskjellige bakgrunnsfarger
  5. Legge til etiketter i fremdriftslinjer
  6. Flere fremdriftslinjer
  7. Stripet stil
  8. Animert stripet stil
  9. Justering av høyden

La oss diskutere hvert tema i detalj.

1 HTML5 fremdriftslinjer

Husk at HTML5 har en standard tag for å lage horisontale fremdriftslinjer, som i de fleste tilfeller er tilstrekkelig. Nedenfor er kodeblokken for HTML5 fremdriftslinjer.

<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 vil se ut som nedenfor i nettleseren:

50 %

60%

70%

80%

Bootstrap bruker ikke HTML5 fremdriftslinje og har sin egen stil for fremdriftslinjekomponent.

2 CSS -klasser som brukes i fremdriftslinjer for Bootstrap

Bootstrap 4 bruker følgende CSS -klasser for å lage fremdriftslinjer:

  • ".Progress" -klassen brukes for ytre innpakning for fremdriftslinjen. Den brukes til å inneholde flere fremdriftslinjer i omslaget.
  • ".Progress-bar" -klassen brukes til å lage faktisk fremdriftslinje for å vise prosentandelen av fremgang.
  • Bredden på hver fremdriftslinje bør eksplisitt defineres med flere CSS -klasser.
  • I tillegg kan du legge til "rolle" og "aria" -attributter til fremdriftslinjen for lesbarhet.
  • "Aria-valuenow" brukes til å indikere gjeldende fremdriftsverdi, "aria-valuemin" er minimumsverdien som er 0 og "aria-valuemax" er maksimumsverdien som er 100.

La oss lage noen eksempler ved å bruke disse klassene.

3 Standard fremdriftslinjer

Standard fremdriftslinje bruker hovedfargen for å vise fremdriften og lysgrå for bakgrunnen. Nedenfor er koden for å lage fem fremdriftslinjer med 0, 25, 50, 75 og 100% fremgang.

<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 vil se ut som nedenfor i nettleseren:

Som nevnt ovenfor, bør hver fremdriftslinje ha en bredde eksplisitt definert for å vise fullføringen. Du kan enten bruke innebygd stil eller verktøyklasser til dette formålet. Vi har brukt verktøyets dimensjoneringsklasser for henholdsvis 25%, 50% og 75% med w-25, w-50 og w-75. For 100% bredde har vi brukt innebygd stil med “bredde: 100%".

Husk også å legge til manuell linjeskift mellom fremdriftslinjene for å unngå at alle søyler vises på samme linje.

4 fremdriftslinjer med bakgrunn

I likhet med mange andre komponenter, kan du bare bruke bakgrunnsklassene for å endre bakgrunnen til suksess, advarsel, info, fare, mørke eller sekundære farger.

<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>

Fremdriftslinjene vil se slik ut:

Hvordan lage Bootstrap 5 fremdriftslinjer?

Vær oppmerksom på at hovedfargen er standardverdien, slik at du ikke trenger å nevne om du vil at fremdriften skal være i hovedfargen. Du kan heller ikke bruke lys bakgrunnsfarge ettersom bakgrunnen på fremdriftslinjen også er i lys farge.

Du kan bruke bakgrunnsverktøysklasser på den ytre fremdriftsinnpakningen for å endre bakgrunnen til fremdriftslinjen. For eksempel vil koden nedenfor gi fremdriftslinjen med rød (fare) fargebakgrunn i stedet for lysgrå.

<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 vil se ut som nedenfor i nettleseren:

Hvordan lage Bootstrap 5 fremdriftslinjer?

5 fremdriftslinjer med etiketter

Hvis du vil legge til etikettene i fremdriftslinjen, er det bare å legge til teksten før den lukkes

tag på hver fremdriftslinje. Nedenfor er et eksempel for å vise 75% fullføring:

<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 vises øverst på linjen med midtjustering som nedenfor:

Hvordan lage Bootstrap 5 fremdriftslinjer?

6 flere fremdriftslinjer

Hvis du legger til flere fremdriftslinjer i en enkelt ytre innpakning, opprettes alle stolpene i en enkelt linje.

<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 flere fremdriftslinjene vil se ut som nedenfor:

Hvordan lage Bootstrap 5 fremdriftslinjer?

7 stripete fremdriftslinjer

Klassen ".progress-bar-striped" brukes til å lage stripete fremdriftslinjer (bakgrunnsverktøysklasse brukes til å vise forskjellige farger).

<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>

Stripete fremdriftslinjer skal se ut som nedenfor:

Hvordan lage Bootstrap 5 fremdriftslinjer?

8 animerte stripede fremdriftslinjer

Det siste alternativet er å animere stripen med klassen ".progress-bar-animert".

<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>

Dette vil lage en animert fremdriftslinje med grønne striper. Husk at du bare kan animere de stripete stolpene og ikke standardene.

9 Endre høyde eller tykkelse på fremdriftslinjene

Som standard vil fremdriftslinjene ha 1 rem høyde. Du kan endre høyden ved å bruke innebygd stil innen ".progress-bar" -klassen, og den ytre emballasjen justeres automatisk deretter. La oss lage to barer med 0.rem og 30px i høyden:

<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 skal være som nedenfor i nettleseren:

Hvordan lage Bootstrap 5 fremdriftslinjer?

Problemet med å endre høyden er at etikettene når de ikke blir justert riktig. Igjen bør du bruke flere stiler manuelt for å justere etikettene i vertikalt senter.


Lær Bootstrap 5 (indeks )


Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon