Топтолгон тилкелерди, анимацияланган фондорду жана текст энбелгилерин колдогон Bootstrap ыңгайлаштырылган прогресс тилкелерин колдонуу боюнча документтер жана мисалдар.
Бул кантип иштейт
Прогресс компоненттери эки HTML элементтери, туурасын коюу үчүн кээ бир CSS жана бир нече атрибуттар менен курулган. Биз HTML5 <progress>элементин колдонбойбуз , андыктан прогресс тилкелерин топтоп, аларды жандандырып, алардын үстүнө текст энбелгилерин коюуга болот.
.progressПрогресс тилкесинин максималдуу маанисин көрсөтүү үчүн орогуч катары колдонобуз .
.progress-barБиз азыркыга чейинки прогрессти көрсөтүү үчүн ички колдонобуз .
Алардын .progress-barтуурасын коюу үчүн саптык стилди, пайдалуу классты же ыңгайлаштырылган CSSти талап кылат.
Ошондой эле аны жеткиликтүү кылуу .progress-barүчүн кээ бир roleжана атрибуттарды талап кылат.aria
Мунун баарын чогултуп, сизде төмөнкү мисалдар бар.
Bootstrap туурасын орнотуу үчүн бир нече утилиталарды камсыз кылат . Сиздин муктаждыктарыңызга жараша, алар прогрессти тез конфигурациялоого жардам берет.
Энбелгилер
Прогресс тилкелериңизге текстти .progress-bar.
25%
Бийиктик
Биз бир гана heightмаанини койдук .progress, андыктан бул маанини өзгөртсөңүз, ички .progress-barавтоматтык түрдө ошого жараша өлчөмү өзгөрөт.
Фондор
Жеке прогресс тилкелеринин көрүнүшүн өзгөртүү үчүн фондук пайдалуу класстарды колдонуңуз.
Бир нече тилкелер
Керек болсо, прогресстин компонентине бир нече прогресс тилкелерин кошуңуз.
Striped
Прогресс тилкесинин фон түсүнүн үстүнө CSS градиенти аркылуу сызык колдонуу .progress-bar-stripedүчүн каалаганына кошуңуз ..progress-bar
Анимацияланган сызыктар
Чаарлы градиент да жандуу болушу мүмкүн. CSS3 анимациялары аркылуу оңдон солго сызыктарды жандандыруу үчүн .progress-bar-animatedкошуу ..progress-bar