Source

Vordering

Dokumentasie en voorbeelde vir die gebruik van Bootstrap-gepasmaakte vorderingstawe met ondersteuning vir gestapelde stawe, geanimeerde agtergronde en teksetikette.

Hoe dit werk

Vordering-komponente is gebou met twee HTML-elemente, 'n paar CSS om die breedte te stel, en 'n paar eienskappe. Ons gebruik nie die HTML5- <progress>element nie , en verseker dat jy vorderingstawe kan stapel, hulle kan animeer en teksetikette daaroor kan plaas.

  • Ons gebruik die .progressas 'n omhulsel om die maksimum waarde van die vorderingsbalk aan te dui.
  • Ons gebruik die innerlike .progress-barom die vordering tot dusver aan te dui.
  • Dit .progress-barvereis 'n inlynstyl, nutsklas of pasgemaakte CSS om hul breedte te stel.
  • Die .progress-barvereis ook sommige roleen ariaeienskappe om dit toeganklik te maak.

Sit dit alles saam, en jy het die volgende voorbeelde.

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

Bootstrap bied 'n handvol hulpmiddels om breedte in te stel . Afhangende van jou behoeftes, kan dit help om vordering vinnig op te stel.

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

Etikette

Voeg byskrifte by jou vorderingstawe deur teks binne die .progress-bar.

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

Hoogte

Ons stel slegs 'n heightwaarde op die .progress, so as jy daardie waarde verander, .progress-barsal die binneste outomaties dienooreenkomstig die grootte verander.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Agtergronde

Gebruik agtergrondnutsklasse om die voorkoms van individuele vorderingstawe te verander.

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

Veelvuldige stawe

Sluit verskeie vorderingstawe in 'n vorderingskomponent in as jy nodig het.

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

Gestreepte

Voeg .progress-bar-stripedby enige .progress-barom 'n streep toe te pas via CSS-gradiënt oor die vorderingsbalk se agtergrondkleur.

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></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"></div>
</div>

Geanimeerde strepe

Die gestreepte gradiënt kan ook geanimeer word. Voeg .progress-bar-animatedby .progress-barom die strepe regs na links te animeer via CSS3-animasies.

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