fandrosoana
Documentation sy ohatra amin'ny fampiasana ny bara fivoarana mahazatra Bootstrap izay misy fanohanana ireo bara mivangongo, sary mihetsika ary etikety lahatsoratra.
Ny fomba fiasa
Ny singa fandrosoana dia naorina miaraka amin'ny singa HTML roa, CSS sasany mba hametrahana ny sakany, ary toetra vitsivitsy. Tsy mampiasa ny singa HTML5<progress>
izahay , manome antoka fa afaka manangom-bokatra ianao, mamelona azy ireo, ary mametraka etikety lahatsoratra eo amboniny.
- Ampiasainay ny
.progress
ho toy ny fonony mba hanondroana ny sanda ambony indrindra amin'ny bara fandrosoana. - Ampiasainay ny anatiny
.progress-bar
mba hanondroana ny fandrosoana hatreto. .progress-bar
Mitaky fomba inline, kilasin'ny fitaovana, na CSS mahazatra ny fametrahana ny sakany ..progress-bar
Mitaky ny sasany sy ny toetra ihany koa nyrole
hahatongaaria
azy ho azo idirana.
Ampifandraiso daholo izany, ary manana ireto ohatra manaraka ireto ianao.
<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 dia manome fitaovana vitsivitsy amin'ny fametrahana ny sakany . Miankina amin'ny filanao, mety hanampy amin'ny fandrindrana haingana ny fandrosoana ireo.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
etikety
Ampio etikety amin'ny bara fandrosoanao amin'ny fametrahana lahatsoratra ao anatin'ny .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>
hahavony
Mametraka height
sanda amin'ny .progress
, ka raha ovainao io sanda io .progress-bar
dia hanova ho azy ny haben'ny anatiny.
<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>
Backgrounds
Mampiasà kilasy fampiasa an-damosina hanovana ny endriky ny bara fandrosoana tsirairay.
<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>
Bara maromaro
Ampidiro bara fandrosoana maro ao anatin'ny singa fandrosoana raha ilainao.
<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>
mitsipitsipika
Ampio .progress-bar-striped
amin'izay rehetra .progress-bar
hampiharana tsipika amin'ny alàlan'ny gradient CSS eo amin'ny lokon'ny lafin'ny bara fandrosoana.
<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>
Animated stripes
Azo atao animé ihany koa ny gradient misy tsipika. Ampio .progress-bar-animated
amin'ny .progress-bar
famelomana ny tsipika havanana miankavia amin'ny alàlan'ny sary mihetsika 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
hiovaova
$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
Ampiasaina amin'ny famoronana sary mihetsika CSS ho an'ny .progress-bar-animated
. Tafiditra ao anatin'ny scss/_progress-bar.scss
.
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
}
}