Source

Edusammud

Dokumentatsioon ja näited Bootstrapi kohandatud edenemisribade kasutamise kohta, mis toetavad virnastatud ribasid, animeeritud taustasid ja tekstisilte.

Kuidas see töötab

Progressi komponendid on üles ehitatud kahe HTML-i elemendiga, mõne CSS-iga laiuse määramiseks ja mõne atribuudiga. Me ei kasuta HTML5 <progress>elementi , tagades teile edenemisribade virnastamise, animeerimise ja nende kohale tekstisiltide paigutamise.

  • .progressEdenemisriba maksimaalse väärtuse näitamiseks kasutame ümbrisena.
  • .progress-barSenise edu näitamiseks kasutame sisemist .
  • Nende .progress-barlaiuse määramiseks on vaja tekstisisest stiili, utiliidiklassi või kohandatud CSS-i.
  • Selle juurdepääsetavaks muutmiseks .progress-baron vaja ka mõningaid roleja ariaatribuute.

Pange see kõik kokku ja saate järgmised näited.

<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 pakub laiuse määramiseks käputäis utiliite . Sõltuvalt teie vajadustest võivad need aidata edenemist kiiresti konfigureerida.

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

Sildid

Lisage edenemisribadele silte, asetades teksti sisse .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>

Kõrgus

Määrame heightväärtuse ainult .progress, nii et kui muudate seda väärtust, muutub sisemine suurus .progress-barautomaatselt vastavalt.

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

Taustad

Kasutage tausta utiliidi klasse, et muuta üksikute edenemisribade välimust.

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

Mitu riba

Vajadusel lisage edenemiskomponenti mitu edenemisriba.

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

Triibuline

Lisage .progress-bar-stripedükskõik millisele .progress-bar, et rakendada triibu CSS-i gradiendi kaudu edenemisriba taustavärvile.

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

Animeeritud triibud

Triibulist gradienti saab ka animeerida. Lisage .progress-bar-animated, .progress-baret animeerida triipe paremalt vasakule CSS3 animatsioonide kaudu.

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