SourceKev vam meej
Cov ntaub ntawv thiab cov piv txwv rau kev siv Bootstrap cov kev cai nce qib bar uas muaj kev txhawb nqa rau pawg tuav, cov keeb kwm yav dhau los, thiab cov ntawv sau.
Nws ua haujlwm li cas
Cov txheej txheem kev nce qib tau tsim nrog ob lub ntsiab lus HTML, qee qhov CSS los teeb tsa qhov dav, thiab ob peb yam ntxwv. Peb tsis siv HTML5 <progress>
lub ntsiab lus , kom ntseeg tau tias koj tuaj yeem ua cov kab nce qib, ua haujlwm rau lawv, thiab tso cov ntawv sau rau lawv.
Peb siv lub .progress
wrapper los qhia tus nqi max ntawm qhov kev kawm bar.
Peb siv sab hauv .progress-bar
los qhia txog kev nce qib kom deb li deb.
Qhov .progress-bar
yuav tsum tau muaj cov style inline, chav kawm siv hluav taws xob, lossis kev cai CSS los teeb tsa lawv qhov dav.
Cov .progress-bar
tseem xav tau qee yam role
thiab aria
cov cwj pwm kom nws nkag mus tau.
Muab tag nrho ua ke, thiab koj muaj cov piv txwv hauv qab no.
Luam
<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 muab ib txhais tes ntawm cov khoom siv rau kev teeb tsa dav . Nyob ntawm koj cov kev xav tau, cov no tuaj yeem pab nrog kev txhim kho sai sai.
Luam
<div class= "progress" >
<div class= "progress-bar w-75" role= "progressbar" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Daim ntawv lo
Ntxiv cov ntawv sau rau koj cov kab kev nce qib los ntawm kev tso cov ntawv hauv .progress-bar
.
Luam
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 25%;" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" > 25%</div>
</div>
Qhov siab
Peb tsuas yog teeb tsa tus height
nqi ntawm tus nqi .progress
, yog li yog tias koj hloov tus nqi ntawd lub puab .progress-bar
yuav cia li hloov pauv raws li.
Luam
<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>
Keeb kwm
Siv cov chav kawm siv hluav taws xob hauv qab no los hloov qhov pom ntawm tus kheej cov kab nce qib.
Luam
<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>
Ntau qhov bar
suav nrog ntau qhov kev nce qib hauv ib qho kev nce qib yog tias koj xav tau.
Luam
<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>
striped
Ntxiv .progress-bar-striped
rau ib qho twg .progress-bar
los siv cov kab txaij ntawm CSS gradient hla qhov kev kawm bar qhov xim tom qab.
Luam
<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 kab txaij
Cov kab txaij gradient kuj tuaj yeem ua kom muaj zog. Ntxiv .progress-bar-animated
rau .progress-bar
animate cov kab txaij txoj cai mus rau sab laug ntawm CSS3 animations.
Luam
<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>