SourceПешрафт
Ҳуҷҷатҳо ва мисолҳо барои истифодаи панҷараҳои пешрафти фармоишии Bootstrap, ки дорои дастгирии панҷараҳои ҷамъшуда, заминаҳои аниматсионӣ ва тамғакоғазҳои матнӣ мебошанд.
Он чӣ гуна кор мекунад
Ҷузъҳои пешравӣ бо ду унсури HTML, баъзе CSS барои муқаррар кардани паҳно ва чанд атрибут сохта шудаанд. Мо унсури HTML5-ро<progress>
истифода намебарем , ки шумо метавонед сатрҳои пешрафтро ҷамъ кунед, онҳоро аниматсия кунед ва тамғакоғазҳои матниро дар болои онҳо ҷойгир кунед.
- Мо онро
.progress
ҳамчун парпеч истифода мебарем, то арзиши максималии сатри пешрафтро нишон диҳад.
- Мо дарунро
.progress-bar
барои нишон додани пешрафти то ҳол истифода мебарем.
- Барои
.progress-bar
муқаррар кардани паҳнои онҳо услуби дохилӣ, синфи утилита ё CSS фармоиширо талаб мекунад.
- Инчунин барои дастрас кардани он
.progress-bar
баъзе role
ва aria
атрибутҳо талаб карда мешавад.
Ҳама чизро якҷоя кунед ва шумо мисолҳои зерин доред.
Bootstrap як қатор утилитҳоро барои танзими паҳнӣ таъмин мекунад . Вобаста ба эҳтиёҷоти шумо, инҳо метавонанд барои зуд танзим кардани пешрафт кӯмак кунанд.
Тамғакоғазҳо
Бо гузоштани матн дар дохили .progress-bar
.
Баландӣ
Мо танҳо height
арзишеро дар , муқаррар мекунем .progress
, бинобар ин, агар шумо ин арзишро тағир диҳед, дарунӣ .progress-bar
ба таври худкор андозаи мувофиқро тағир медиҳад.
Замина
Барои тағир додани намуди лавҳаҳои пешрафти инфиродӣ аз синфҳои фосилавии замина истифода баред.
Барҳои сершумор
Агар ба шумо лозим бошад, якчанд сатри пешрафтро ба ҷузъи пешравӣ дохил кунед.
рахдор
Барои истифодаи рахи тавассути градиенти CSS дар болои ранги пасзаминаи сатри пешрафт .progress-bar-striped
ба ҳама илова кунед..progress-bar
Тасмаҳои аниматсионӣ
Градиенти рахдор низ метавонад аниматсия карда шавад. Барои аниматсия кардани рахҳои рост ба чап тавассути аниматсияҳои CSS3 .progress-bar-animated
ба илова кунед..progress-bar