in English

Прогресс

Топтолгон тилкелерди, анимацияланган фондорду жана текст энбелгилерин колдогон Bootstrap ыңгайлаштырылган прогресс тилкелерин колдонуу боюнча документтер жана мисалдар.

Бул бетте

Бул кантип иштейт

Прогресс компоненттери эки HTML элементтери, туурасын орнотуу үчүн кээ бир CSS жана бир нече атрибуттар менен курулган. Биз HTML5 <progress>элементин колдонбойбуз , андыктан прогресс тилкелерин топтоп, аларды жандандырып, алардын үстүнө текст энбелгилерин коюуга болот.

.progressПрогресс тилкесинин максималдуу маанисин көрсөтүү үчүн орогуч катары колдонобуз .
.progress-barБиз азыркыга чейинки прогрессти көрсөтүү үчүн ички колдонобуз .
Алардын .progress-barтуурасын коюу үчүн саптык стилди, пайдалуу классты же ыңгайлаштырылган CSSти талап кылат.
Ошондой .progress-barэле аны жеткиликтүү кылуу үчүн кээ бир roleжана ariaатрибуттарды, анын ичинде жеткиликтүү аталышты талап кылат ( aria-label, aria-labelledby, же ушуга окшош).

Мунун баарын чогултуп, сизде төмөнкү мисалдар бар.

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Bootstrap туурасын орнотуу үчүн бир нече утилиталарды камсыз кылат . Сиздин муктаждыктарыңызга жараша, алар прогрессти тез конфигурациялоого жардам берет.

html

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Энбелгилер

Прогресс тилкелериңизге текстти .progress-bar.

25%

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Example with label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Бийиктик

Биз бир гана heightмаанини койдук .progress, андыктан бул маанини өзгөртсөңүз, ички .progress-barавтоматтык түрдө ошого жараша өлчөмү өзгөрөт.

html

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" 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" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Фондор

Жеке прогресс тилкелеринин көрүнүшүн өзгөртүү үчүн фондук пайдалуу класстарды колдонуңуз.

html

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" 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" aria-label="Info example" 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" aria-label="Warning example" 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" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Көмөкчү технологияларга маани берүү

Маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн (мисалы, көрүнүүчү текст) ачык-айкын болушун же .visually-hiddenкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.

Бир нече тилкелер

Керек болсо, прогресстин компонентине бир нече прогресс тилкелерин кошуңуз.

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Striped

Прогресс тилкесинин фон түсүнүн үстүнө CSS градиенти аркылуу сызык колдонуу .progress-bar-stripedүчүн каалаганына кошуңуз ..progress-bar

html

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" 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" aria-label="Success striped example" 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" aria-label="Info striped example" 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" aria-label="Warning striped example" 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" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Анимацияланган сызыктар

Чаарлы градиент да жандуу болушу мүмкүн. CSS3 анимациялары аркылуу оңдон солго сызыктарды жандандыруу үчүн .progress-bar-animatedкошуу ..progress-bar

html

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

CSS

Өзгөрмөлөр

v5.2.0 кошулган

Bootstrap өнүгүп жаткан CSS өзгөрмөлөрүнүн бир бөлүгү катары, прогресс тилкелери .progressреалдуу убакыт режиминде жакшыртылган ыңгайлаштыруу үчүн жергиликтүү CSS өзгөрмөлөрүн колдонушат. CSS өзгөрмөлөрүнүн маанилери Sass аркылуу коюлат, ошондуктан Sass ыңгайлаштыруу дагы деле колдоого алынат.

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

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