Napredek
Dokumentacija in primeri za uporabo vrstic napredka po meri Bootstrap s podporo za zložene vrstice, animirana ozadja in besedilne oznake.
Kako deluje
Komponente Progress so sestavljene iz dveh elementov HTML, nekaj CSS za nastavitev širine in nekaj atributov. Ne uporabljamo elementa HTML5<progress>
, kar zagotavlja, da lahko zlagate vrstice napredka, jih animirate in nanje postavite besedilne oznake.
- Uporabljamo
.progress
kot ovoj za označevanje največje vrednosti vrstice napredka. - Notranjost uporabljamo
.progress-bar
za prikaz dosedanjega napredka. - Za
.progress-bar
nastavitev širine zahteva vgrajeni slog, razred pripomočkov ali CSS po meri. - Za dostopnost
.progress-bar
zahteva tudi nekaj atributovrole
in .aria
Sestavite vse skupaj in dobite naslednje primere.
<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 ponuja peščico pripomočkov za nastavitev širine . Odvisno od vaših potreb vam lahko to pomaga pri hitrem konfiguriranju napredka.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Etikete
Vrsticam napredka dodajte oznake tako, da besedilo postavite znotraj .progress-bar
.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Višina
Nastavili smo samo height
vrednost za .progress
, tako da, če spremenite to vrednost, bo notranjost .progress-bar
samodejno ustrezno spremenila velikost.
<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>
Ozadja
Uporabite razrede pripomočkov v ozadju, da spremenite videz posameznih vrstic napredka.
<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>
Več palic
Po potrebi vključite več vrstic napredka v komponento napredka.
<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>
Črtasto
Dodajte .progress-bar-striped
kateremu koli .progress-bar
, da uporabite trak prek gradienta CSS nad barvo ozadja vrstice napredka.
<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>
Animirane črte
Črtasti preliv je mogoče tudi animirati. Dodajte .progress-bar-animated
za .progress-bar
animiranje črt od desne proti levi prek animacij CSS3.
<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
Spremenljivke
$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;
Ključni okvirji
Uporablja se za ustvarjanje animacij CSS za .progress-bar-animated
. Vključeno v scss/_progress-bar.scss
.
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
}
}