Iterambere
Inyandiko hamwe ningero zo gukoresha Bootstrap yihariye yiterambere ryiterambere ryerekana inkunga kubibari byegeranye, imiterere yimiterere, hamwe nibirango byanditse.
Uburyo ikora
Ibice byiterambere byubatswe hamwe nibintu bibiri bya HTML, CSS zimwe kugirango dushyireho ubugari, nibiranga bike. Ntabwo dukoresha element ya HTML5<progress>
, twemeza ko ushobora gutondekanya utubari twiterambere, kubishushanya, no gushyira ibirango byanditse hejuru yabyo.
- Dukoresha i
.progress
nk'ugupfunyika kugirango twerekane agaciro ntarengwa k'iterambere. - Dukoresha imbere
.progress-bar
kugirango twerekane iterambere kugeza ubu. - Ibisabwa muburyo bwa
.progress-bar
inline, urwego rwingirakamaro, cyangwa CSS yihariye kugirango bashire ubugari bwabo. - Uwiteka
.progress-bar
arasabarole
kandiaria
ibiranga kugirango bigerweho.
Shyira ibyo byose hamwe, kandi ufite ingero zikurikira.
<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 itanga intoki zingirakamaro mugushiraho ubugari . Ukurikije ibyo ukeneye, ibi birashobora gufasha mukugena byihuse iterambere.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Ibirango
Ongeraho ibirango kumurongo witerambere ushyira inyandiko muri .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>
Uburebure
Dushiraho gusa height
agaciro kuri .progress
,, niba rero uhinduye ako gaciro imbere .progress-bar
izahita ihinduka uko bikwiye.
<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>
Amavu n'amavuko
Koresha ibyiciro byingirakamaro byamasomo kugirango uhindure isura yumuntu ku giti cye.
<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>
Utubari twinshi
Shyiramo utubari twinshi twiterambere mubice bigize iterambere.
<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>
Yanditse
Ongeraho .progress-bar-striped
kuri buriwese .progress-bar
kugirango ushireho umurongo ukoresheje CSS gradient hejuru yiterambere ryumurongo winyuma.
<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>
Imirongo ya animasiyo
Ikigereranyo cya gradient irashobora kandi kuba animasiyo. Ongeraho .progress-bar-animated
kugirango .progress-bar
ushushanye imirongo iburyo n'ibumoso ukoresheje animasiyo ya 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>