Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
in English

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>

Sass

Muutujad

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Võtmekaadrid

Kasutatakse CSS-animatsioonide loomiseks .progress-bar-animated. Sisaldub scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}