SourceKupita patsogolo
Zolemba ndi zitsanzo zogwiritsa ntchito ma bar a Bootstrap omwe ali ndi chithandizo cha mipiringidzo yokhazikika, makanema ojambula, ndi zolemba.
Momwe zimagwirira ntchito
Zigawo zopita patsogolo zimamangidwa ndi zinthu ziwiri za HTML, zina za CSS kuti zikhazikitse m'lifupi, ndi makhalidwe ochepa. Sitigwiritsa ntchito chinthu cha HTML5<progress>
, kuwonetsetsa kuti mutha kuyika zitsulo zopita patsogolo, kuzipangitsa kukhala zamoyo, ndikuyika zilembo pamwamba pake.
- Timagwiritsa ntchito
.progress
ngati chomangirira kuti tiwonetse kuchuluka kwapamwamba kwa kapamwamba.
- Timagwiritsa ntchito zamkati
.progress-bar
kusonyeza kupita patsogolo mpaka pano.
- Izi
.progress-bar
zimafuna kalembedwe kameneka, kalasi yothandiza, kapena CSS yokhazikika kuti ikhazikitse m'lifupi mwake.
- Imafunikanso
.progress-bar
zina role
ndi aria
zikhumbo kuti zitheke.
Ikani zonse pamodzi, ndipo muli ndi zitsanzo zotsatirazi.
Bootstrap imapereka zida zingapo zokhazikitsira m'lifupi . Kutengera ndi zosowa zanu, izi zitha kukuthandizani kukonza mwachangu kupita patsogolo.
Zolemba
Onjezani malembo kuzomwe mukupita patsogolo poyika mawu mkati mwa .progress-bar
.
Kutalika
Timangoyika height
mtengo pa .progress
, kotero ngati mutasintha mtengo wamkatiyo .progress-bar
udzasintha molingana.
Mbiri
Gwiritsani ntchito makalasi ogwiritsira ntchito kumbuyo kuti musinthe mawonekedwe a mipiringidzo yopita patsogolo.
Mipiringidzo ingapo
Phatikizani mipiringidzo yambiri yopita patsogolo ngati mukufuna.
Mizeremizere
Onjezani .progress-bar-striped
ku chilichonse .progress-bar
kuti mugwiritse ntchito mzere kudzera pa CSS gradient pamtundu wakumbuyo wa kapamwamba.
Mikwingwirima yamakanema
Mizeremizere gradient ingathenso kukhala animated. Onjezani .progress-bar-animated
kuti .progress-bar
muwongolere mikwingwirima kumanja kupita kumanzere kudzera pa makanema ojambula pa CSS3.