Pwogrè
Dokimantasyon ak egzanp pou itilize Bootstrap ba pwogrè koutim ak sipò pou ba anpile, orijin anime, ak etikèt tèks.
Ki jan li fonksyone
Konpozan pwogrè yo bati ak de eleman HTML, kèk CSS pou mete lajè a, ak kèk atribi. Nou pa sèvi ak eleman HTML5<progress>
la , pou nou asire ou ka pile ba pwogrè, anime yo, epi mete etikèt tèks sou yo.
- Nou itilize
.progress
kòm yon anbalaj pou endike valè maksimòm ba pwogrè a. - Nou itilize enteryè
.progress-bar
a pou endike pwogrè a jiskaprezan. - Li
.progress-bar
mande pou yon style inline, klas sèvis piblik, oswa CSS koutim pou mete lajè yo. - La
.progress-bar
tou mande kèkrole
Etaria
attributs pou fè l' aksesib a.
Mete sa tout ansanm, epi ou gen egzanp sa yo.
<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 bay yon ti ponyen sèvis piblik pou mete lajè . Tou depan de bezwen ou yo, sa yo ka ede byen vit konfigirasyon pwogrè.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Etikèt
Ajoute etikèt sou ba pwogrè ou yo lè w mete tèks nan .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>
Wotè
Nou sèlman mete yon height
valè sou .progress
, kidonk si ou chanje valè sa a enteryè a .progress-bar
pral otomatikman redimensionne kòmsadwa.
<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>
Orijin
Sèvi ak klas itilite background yo chanje aparans nan ba pwogrè endividyèl yo.
<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>
Plizyè ba
Mete plizyè ba pwogrè nan yon eleman pwogrè si ou bezwen.
<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>
Raye
Ajoute .progress-bar-striped
nan nenpòt .progress-bar
pou aplike yon bann atravè gradyan CSS sou koulè background ba pwogrè a.
<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>
Bann anime
Ka gradyan an trase tou anime. Ajoute .progress-bar-animated
nan .progress-bar
pou anime bann yo dwat a goch atravè animasyon 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
Varyab
$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
Itilize pou kreye animasyon CSS pou .progress-bar-animated
. Enkli nan scss/_progress-bar.scss
.
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
}
}