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.
Den .progress-barerfuerdert och e puer rolean ariaAttributer fir et zougänglech ze maachen, dorënner en zougänglechen Numm (mat aria-label, aria-labelledby, oder ähnlech).

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

html

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

html

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-label="Basic example" 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%

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Example with label" 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.

html

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" 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" aria-label="Example 20px high" 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.

html

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" 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" aria-label="Info example" 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" aria-label="Warning example" 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" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Bedeitung vun Hëllefstechnologien

D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .visually-hiddenKlass.

Multiple Baren

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

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" 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.

html

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" 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" aria-label="Success striped example" 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" aria-label="Info striped example" 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" aria-label="Warning striped example" 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" aria-label="Danger striped example" 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.

html

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

CSS

Variablen

Dobäi an v5.2.0

Als Deel vun der Entwécklung vu Bootstrap CSS Variablen Approche, benotzen Fortschrëtter Baren elo lokal CSS Variablen op .progressfir eng verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

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