Fortschrëtt

Dokumentatioun an Beispiller fir d'Benotzung vun Bootstrap personaliséiert Fortschrëtter Baren mat Ënnerstëtzung fir gestapelt Baren, animéierten Hannergrënn, an Textetiketten.

Op dëser Säit

Wéi et funktionnéiert

Fortschrëtter Komponente si mat zwee HTML Elementer gebaut, e puer CSS fir d'Breet ze setzen, an e puer Attributer. Mir benotzen net den HTML5 <progress>Element , a garantéiert datt Dir Fortschrëtterbaren stackelt, se animéieren an Textetiketten iwwer hinnen setzen.

Mir benotzen den .progressals Wrapper fir de maximale Wäert vun der Fortschrëttbar unzeginn.
Mir benotzen déi bannenzeg .progress-barfir de Fortschrëtt bis elo unzeweisen.
Et .progress-barerfuerdert en Inline Stil, Utility Klass oder Custom CSS fir hir Breet ze setzen.
De .progress-barerfuerdert och e puer rolean ariaAttributer fir et zougänglech ze maachen.

Setzt dat alles zesummen, an Dir hutt déi folgend Beispiller.

<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 bitt eng Handvoll Utilities fir d'Breet ze setzen . Ofhängeg vun Äre Bedierfnesser, kënnen dës hëllefe fir séier Fortschrëtter ze konfiguréieren.

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

Etiketten

Füügt Etiketten op Är Fortschrëtterbaren andeems Dir Text an der .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>

Héicht

Mir setzen nëmmen e heightWäert op der .progress, also wann Dir dee Wäert ännert, wäert den Innere .progress-barautomatesch d'Gréisst änneren.

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

Hannergrënn

Benotzt Hannergrond Utility Klassen fir d'Erscheinung vun eenzelne Fortschrëtter Baren z'änneren.

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

Multiple Baren

Maacht verschidde Fortschrëtterbaren an engem Fortschrëttskomponent un wann Dir braucht.

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

Gestreift

Füügt .progress-bar-stripedun all .progress-barfir e Sträif iwwer CSS Gradient iwwer d'Fortschrëttbar Hannergrondfaarf anzesetzen.

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

Animéiert Sträifen

De gesträifte Gradient kann och animéiert ginn. Füügt .progress-bar-animatedun .progress-barfir d'Sträifen vu riets op lénks iwwer CSS3 Animatiounen ze animéieren.

<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

Variablen

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

Keyframes

Benotzt fir d'CSS Animatiounen ze kreéieren fir .progress-bar-animated. Abegraff an scss/_progress-bar.scss.

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