TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5 Progress Bars?

2

Edistymispalkkeja käytetään taitojen esittelyyn, projektien valmistumisprosenttiin ja vastaaviin tarkoituksiin. Bootstrap 5: ssä on erilaisia ​​edistymispalkkeja kuin aiemmissa versioissa. Tässä opetusohjelmassa tutustutaan tarkemmin Bootstrap 5: n tarjoamiin edistymispalkkeihin.

Bootstrap 5 Progress Bars -opetusohjelma

  1. HTML5 -edistymispalkit
  2. Bootstrap -edistymispalkit CSS -luokkia
  3. Luodaan edistymispalkkeja
  4. Edistymispalkit erilaisilla taustavärillä
  5. Tunnisteiden lisääminen edistymispalkkeihin
  6. Useita edistymispalkkeja
  7. Raidallinen tyyli
  8. Animoitu raidallinen tyyli
  9. Korkeuden säätäminen

Keskustelkaamme jokaisesta aiheesta yksityiskohtaisesti.

1 HTML5 -edistymispalkit

Muista, että HTML5: ssä on oletusmerkki vaakasuorien edistymispalkkien luomiseen, mikä riittää useimmissa tapauksissa. Alla on HTML5 -edistymispalkkien koodilohko.

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

Se näyttää selaimelta alla:

50 %

60%

70%

80%

Bootstrap ei käytä HTML5 -edistymispalkkia, ja sillä on oma tyyli edistymispalkkiosalle.

2 CSS -luokkaa, joita käytetään Bootstrap Progress Barsissa

Bootstrap 4 käyttää seuraavia CSS -luokkia edistymispalkkien luomiseen:

  • Luetteloa ".progress" käytetään edistymispalkin ulkokääreeksi. Sitä käytetään useiden edistymispalkkien sisältämiseen kääreen sisällä.
  • Luetteloa ".progress-bar" käytetään luomaan todellinen edistymispalkki, joka näyttää edistymisprosentin.
  • Kunkin edistymispalkin leveys on määritettävä nimenomaisesti CSS -luokkien kanssa.
  • Lisäksi voit lisätä "role" – ja "aria" -määritteitä edistymispalkkiin luettavuuden vuoksi.
  • "Aria-valuenow" käytetään osoittamaan nykyistä edistymisarvoa, "aria-valuemin" on vähimmäisarvo, joka on 0 ja "aria-valuemax" on suurin arvo, joka on 100.

Luodaan esimerkkejä näiden luokkien avulla.

3 Edistymispalkit

Oletusarvoinen edistymispalkki näyttää ensisijaisen värin edistymisen näyttämiseen ja vaaleanharmaan taustan. Alla on koodi viiden edistymispalkin luomiseksi, joiden edistyminen on 0, 25, 50, 75 ja 100%.

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

Se näyttää selaimelta alla:

Kuten edellä mainittiin, kullakin edistymispalkilla on oltava nimenomaisesti määritelty leveys, joka osoittaa valmistumisen. Voit käyttää tähän tarkoitukseen joko sisäisiä tyyliluokkia tai apuohjelmaluokkia. Olemme käyttäneet apuohjelmien kokoluokkia 25%, 50% ja 75%, w-25, w-50 ja w-75. 100% leveydelle olemme käyttäneet inline -tyyliä "width: 100%".

Muista myös lisätä manuaalinen rivinvaihto etenemispalkkien väliin, jotta kaikki palkit eivät näy samalla rivillä.

4 edistymispalkkia taustalla

Monien muiden komponenttien tapaan voit käyttää tausta -apuohjelmaluokkia muuttaaksesi taustan menestykseen, varoituksiin, tietoihin, vaaroihin, tummiin tai toissijaisiin väreihin.

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

Edistymispalkit näyttävät tältä:

Kuinka luoda Bootstrap 5 Progress Bars?

Huomaa, että ensisijainen väri on oletusarvo, joten sinun ei tarvitse mainita, haluatko edistyksen olevan päävärissä. Et myöskään voi käyttää vaaleaa taustaväriä, koska edistymispalkin tausta on myös vaalea.

Voit muuttaa edistymispalkin taustaa ulkoisen edistymispakkauksen taustatyökaluluokkien avulla. Esimerkiksi alla oleva koodi tuottaa edistymispalkin punaisella (vaara) taustalla vaaleanharmaan sijasta.

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

Tulos näyttää seuraavalta selaimessa:

Kuinka luoda Bootstrap 5 Progress Bars?

5 etenemispalkkia tarroilla

Jos haluat lisätä etikettejä edistymispalkkiin, lisää vain teksti ennen sulkemista

kunkin edistymispalkin tunniste. Alla on esimerkki 75%: n valmistumisesta:

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

Etiketti näkyy palkin päällä keskikohdistuksella, kuten alla:

Kuinka luoda Bootstrap 5 Progress Bars?

6 useita edistymispalkkeja

Jos lisäät useita edistymispalkkeja yhteen ulompaan kääreen, kaikki palkit luodaan yhdelle riville.

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

Useat edistymispalkit näyttävät tältä:

Kuinka luoda Bootstrap 5 Progress Bars?

7 raidallista edistymispalkkia

Luokkaa ".progress-bar-striped” käytetään raidallisten edistymispalkkien luomiseen (tausta-apuohjelmaluokkaa käytetään eri värien näyttämiseen).

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

Raidalliset edistymispalkit näyttävät tältä:

Kuinka luoda Bootstrap 5 Progress Bars?

8 animoitua raidallista etenemispalkkia

Viimeinen vaihtoehto on animoida raita käyttämällä ".progress-bar-animated" -luokkaa.

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

Tämä luo animoidun edistymispalkin, jossa on vihreitä raitoja. Muista, että voit animoida vain raidallisia palkkeja etkä oletuksia.

9 Progress -palkkien korkeuden tai paksuuden muuttaminen

Oletusarvoisesti edistymispalkkeilla on 1rem korkeus. Voit muuttaa korkeutta käyttämällä inline-tyyliä ".progress-bar" -luokassa ja ulompi kääre kohdistuu automaattisesti vastaavasti. Luodaan kaksi tankoa, joiden korkeus on 0.rem ja 30px:

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

Tuloksen pitäisi olla selaimen mukainen:

Kuinka luoda Bootstrap 5 Progress Bars?

Ongelma korkeuden muuttamisessa on, että tarrat eivät kohdistu oikein. Käytä jälleen muita tyylejä manuaalisesti tarrojen kohdistamiseksi pystysuoraan keskelle.


Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja