Прогресс
Жинақталған жолақтарды, анимациялық фондарды және мәтіндік белгілерді қолдауы бар Bootstrap реттелетін орындалу жолақтарын пайдалануға арналған құжаттама және мысалдар.
Бұл қалай жұмыс істейді
Прогресс компоненттері екі HTML элементімен, енін орнату үшін кейбір CSS және бірнеше атрибуттармен құрастырылған. Біз HTML5 <progress>
элементін пайдаланбаймыз, бұл сізге орындалу жолақтарын жинақтауды, оларды анимациялауды және олардың үстіне мәтін белгілерін қоюды қамтамасыз етеді.
.progress
Прогресс жолағының максималды мәнін көрсету үшін орауыш ретінде пайдаланамыз ..progress-bar
Біз осы уақытқа дейінгі ілгерілеуді көрсету үшін ішкі мәнді пайдаланамыз .- Олардың
.progress-bar
енін орнату үшін кірістірілген мәнер, қызметтік бағдарлама класы немесе реттелетін CSS қажет. - Сондай -ақ оны қолжетімді ету
.progress-bar
үшін кейбірrole
және атрибуттар қажет.aria
Осының бәрін біріктіріңіз, сізде келесі мысалдар бар.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Bootstrap енін орнату үшін бірнеше утилиталарды ұсынады . Сіздің қажеттіліктеріңізге байланысты, олар прогресті жылдам конфигурациялауға көмектесуі мүмкін.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Жапсырмалар
ішінде мәтінді орналастыру арқылы орындалу жолақтарына белгілерді қосыңыз .progress-bar
.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Биіктігі
Біз тек height
мәнді орнатамыз .progress
, сондықтан бұл мәнді өзгертсеңіз, ішкі .progress-bar
автоматты түрде сәйкесінше өлшемін өзгертеді.
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Фондар
Жеке орындалу жолақтарының көрінісін өзгерту үшін фондық утилита сыныптарын пайдаланыңыз.
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Бірнеше жолақтар
Қажет болса, орындалу компонентіне бірнеше орындалу жолақтарын қосыңыз.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Жолақты
Прогресс жолағының өң түсі үстіне CSS градиенті арқылы жолақ қолдану .progress-bar-striped
үшін кез келгенге қосыңыз ..progress-bar
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Анимациялық жолақтар
Жолақты градиентті де анимациялауға болады. CSS3 анимациялары арқылы оңнан солға қарай жолақтарды жандандыру үшін .progress-bar-animated
қосу ..progress-bar
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>