in English

fandrosoana

Documentation sy ohatra amin'ny fampiasana ny bara fivoarana mahazatra Bootstrap izay misy fanohanana ireo bara mivangongo, sary mihetsika ary etikety lahatsoratra.

Amin'ity pejy ity

Ahoana ny fiasan'izany

Ny singam-pandrosoana dia natsangana 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 .progressho toy ny fonony mba hanondroana ny sanda ambony indrindra amin'ny bara fandrosoana.
Ampiasainay ny anatiny .progress-barmba hanondroana ny fandrosoana hatreto.
.progress-barMitaky fomba inline, kilasin'ny fitaovana, na CSS mahazatra ny fametrahana ny sakany .
.progress-barMitaky ny sasany sy ny toetra ihany koa ny rolehahatonga ariaazy 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.

25%

<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 heightsanda amin'ny .progress, ka raha ovainao io sanda io .progress-bardia 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-stripedamin'izay rehetra .progress-barhampiharana 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-animatedamin'ny .progress-barfamelomana 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; }
  }
}