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
arasaba role
kandi aria
ibiranga kugirango bigerweho.
Shyira ibyo byose hamwe, kandi ufite ingero zikurikira.
Bootstrap itanga intoki zingirakamaro mugushiraho ubugari . Ukurikije ibyo ukeneye, ibi birashobora gufasha mukugena byihuse iterambere.
Ibirango
Ongeraho ibirango kumurongo witerambere ushyira inyandiko muri .progress-bar
.
Uburebure
Dushiraho gusa height
agaciro kuri .progress
,, niba rero uhinduye ako gaciro imbere .progress-bar
izahita ihinduka uko bikwiye.
Amavu n'amavuko
Koresha ibyiciro byingirakamaro byamasomo kugirango uhindure isura yumuntu ku giti cye.
Utubari twinshi
Shyiramo utubari twinshi twiterambere mubice bigize iterambere.
Yanditse
Ongeraho .progress-bar-striped
kuri buriwese .progress-bar
kugirango ushireho umurongo ukoresheje CSS gradient hejuru yiterambere ryumurongo winyuma.
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.