Документација и примери за коришћење Боотстрап прилагођених трака напретка са подршком за наслагане траке, анимиране позадине и текстуалне ознаке.
Како то ради
Компоненте напретка су изграђене са два ХТМЛ елемента, неким ЦСС-ом за подешавање ширине и неколико атрибута. Не користимо ХТМЛ5 <progress>елемент , осигуравајући да можете слагати траке напретка, анимирати их и поставити текстуалне ознаке преко њих.
Користимо .progressкао омот за означавање максималне вредности траке напретка.
Користимо унутрашње .progress-barда укажемо на досадашњи напредак.
.progress-barЗахтева уграђени стил, услужну класу или прилагођени ЦСС да би се подесила њихова ширина .
Такође .progress-barсу потребни неки roleи ariaатрибути да би били доступни.
Додајте ознаке својим тракама напретка постављањем текста унутар .progress-bar.
25%
Висина
Постављамо само heightвредност на .progress, тако да ако промените ту вредност, унутрашња .progress-barће аутоматски променити величину у складу са тим.
Позадине
Користите позадинске услужне класе да промените изглед појединачних трака напретка.
Више трака
Укључите више трака напретка у компоненту напретка ако вам је потребно.
Пругасте
Додајте .progress-bar-stripedу било .progress-barкоји да бисте применили траку преко ЦСС градијента преко боје позадине тра��е напретка.
Анимиране пруге
И пругасти градијент може бити анимиран. Додајте .progress-bar-animatedу да .progress-barбисте анимирали пруге здесна налево преко ЦСС3 анимација.