Documentation sy ohatra amin'ny fampiasana ny bara fivoarana mahazatra Bootstrap izay misy fanohanana ireo bara mivangongo, sary mihetsika ary etikety lahatsoratra.
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 .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 ny role
hahatonga aria
azy ho azo idirana.
Ampifandraiso daholo izany, ary manana ireto ohatra manaraka ireto ianao.
dika mitovy
<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.
dika mitovy
<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
.
dika mitovy
<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.
dika mitovy
<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.
dika mitovy
<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.
dika mitovy
<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.
dika mitovy
<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.
dika mitovy
<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>