Source

Foarútgong

Dokumintaasje en foarbylden foar it brûken fan Bootstrap oanpaste foarútgongsbalken mei stipe foar opsteapele balken, animearre eftergrûnen en tekstlabels.

Hoe't it wurket

Progress-komponinten binne boud mei twa HTML-eleminten, wat CSS om de breedte yn te stellen, en in pear attributen. Wy brûke it HTML5 - <progress>elemint net , en soargje derfoar dat jo foarútgongsbalken steapele kinne, se animearje en tekstlabels oer har pleatse.

  • Wy brûke de .progressas wrapper om de maksimale wearde fan 'e foarútgongbalke oan te jaan.
  • Wy brûke de ynderlike .progress-barom de foarútgong oant no ta oan te jaan.
  • De .progress-barfereasket in ynline styl, nutklasse, of oanpaste CSS om har breedte yn te stellen.
  • De .progress-barfereasket ek wat roleen ariaattributen om it tagonklik te meitsjen.

Set dat alles byinoar, en jo hawwe de folgjende foarbylden.

<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 biedt in hantsjefol nutsfoarsjenningen foar it ynstellen fan breedte . Ofhinklik fan jo behoeften kinne dizze helpe by it fluch konfigurearjen fan foarútgong.

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

Labels

Foegje labels ta oan jo foarútgongsbalken troch tekst yn 'e .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>

Hichte

Wy sette allinich in heightwearde op 'e .progress, dus as jo dizze wearde feroarje, sil de ynderlike .progress-bargrutte automatysk oanpasse.

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

Eftergrûnen

Brûk eftergrûnnutsklassen om it uterlik fan yndividuele foarútgongbalken te feroarjen.

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

Meardere bars

Meitsje meardere foarútgongsbalken yn in foarútgongskomponint as jo nedich binne.

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

Striped

Foegje .progress-bar-stripedoan elk .progress-barta om in stripe oan te passen fia CSS-gradient oer de eftergrûnkleur fan 'e foarútgongsbalke.

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

Animated stripes

De stripe gradient kin ek wurde animearre. Taheakje .progress-bar-animatedoan .progress-barom de strepen fan rjochts nei lofts te animearjen fia CSS3-animaasjes.

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