Kamajuan
Dokuméntasi sareng conto pikeun ngagunakeun bar kamajuan adat Bootstrap anu gaduh dukungan pikeun bar tumpuk, latar animasi, sareng labél téks.
Kumaha gawéna
Komponén kamajuan diwangun ku dua elemen HTML, sababaraha CSS pikeun nyetél lebar, sareng sababaraha atribut. Kami henteu nganggo unsur HTML5<progress>
, mastikeun anjeun tiasa tumpukan bar kamajuan, ngahirupkeunana, sareng nempatkeun labél téks dina éta.
- Kami nganggo
.progress
salaku bungkus pikeun nunjukkeun nilai maksimal bar kamajuan. - Kami nganggo batin
.progress-bar
pikeun nunjukkeun kamajuan dugi ka ayeuna. - Éta
.progress-bar
peryogi gaya inline, kelas utiliti, atanapi CSS khusus pikeun nyetél lebarna. - Éta
.progress-bar
ogé peryogi sababaraharole
sarengaria
atribut supados tiasa diaksés.
Pasang sadayana babarengan, sareng anjeun gaduh conto di handap ieu.
<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 nyayogikeun sakeupeul utilitas pikeun netepkeun lebar . Gumantung kana kabutuhan anjeun, ieu tiasa ngabantosan kamajuan konfigurasi gancang.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Labels
Tambahkeun labél kana bar kamajuan anjeun ku cara nempatkeun téks dina .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>
Jangkungna
Urang ngan nyetel height
nilai dina .progress
, jadi lamun ngarobah nilai nu jero .progress-bar
bakal otomatis ngarobah ukuran sasuai.
<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>
Kasang tukang
Anggo kelas utiliti latar pikeun ngarobih tampilan bar kamajuan individu.
<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>
Sababaraha bar
Kalebet sababaraha bar kamajuan dina komponén kamajuan upami anjeun peryogi.
<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>
belang
Tambihkeun .progress-bar-striped
kana naon waé .progress-bar
pikeun nerapkeun belang via gradién CSS dina warna latar tukang bar kamajuan.
<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>
Belang animasi
Gradién belang ogé tiasa animasi. Tambahkeun .progress-bar-animated
ka .progress-bar
pikeun ngahirupkeun belang katuhu ka kenca via animasi 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
Variabel
$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
Dipaké pikeun nyieun animasi CSS pikeun .progress-bar-animated
. Kaasup dina scss/_progress-bar.scss
.
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
}
}