in English

Прогресс

Топтолгон тилкелерди, анимацияланган фондорду жана текст энбелгилерин колдогон 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.

25%

<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>

Striped

Прогресс тилкесинин фон түсүнүн үстүнө 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>

Sass

Өзгөрмөлөр

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Негизги кадрлар

үчүн CSS анимацияларын түзүү үчүн колдонулат .progress-bar-animated. камтылган scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}