in English

Пешрафт

Ҳуҷҷатҳо ва мисолҳо барои истифодаи панҷараҳои пешрафти фармоишии Bootstrap, ки дорои дастгирии сутунҳои stacked, заминаҳои аниматсионӣ ва тамғакоғазҳои матнӣ мебошанд.

Дар ин саҳифа

Он чӣ гуна кор мекунад

Ҷузъҳои пешравӣ бо ду унсури 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>

рахдор

Барои истифодаи рахи тавассути градиенти 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>

Сасс

Тағйирёбандаҳо

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