Ösüş

Toplanan barlary, animasiýa fonlaryny we tekst belliklerini goldaýan Bootstrap adaty ösüş barlaryny ulanmak üçin resminamalar we mysallar.

Bu sahypada

Bu nähili işleýär

Ösüş komponentleri iki HTML elementi, giňligini kesgitlemek üçin käbir CSS we birnäçe atributlar bilen gurulýar. Öňe gidiş panellerini ýygnap, janlandyryp we tekst ýazgylaryny ýerleşdirip biljekdigiňizi üpjün edip , HTML5 <progress>elementini ulanmaýarys .

.progressÖsüş setiriniň iň ýokary bahasyny görkezmek üçin örtük hökmünde ulanýarys .
.progress-barIçerki wagta çenli ösüşi görkezmek üçin ulanýarys .
Giňligini kesgitlemek .progress-barüçin içerki stil, peýdaly synp ýa-da ýörite CSS talap edilýär.
Şeýle hem , elýeterli bolmagy üçin .progress-barkäbir rolewe häsiýetleri talap edýär.aria

Bularyň hemmesini bir ýere jemläň we size aşakdaky mysallar bar.

<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” giňligi kesgitlemek üçin birnäçe kömekçi enjamy üpjün edýär . Islegleriňize baglylykda, ösüşi çalt düzmekde kömek edip biler.

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

Bellikler

Içine tekst goýup, ösüş barlaryňyza bellikler goşuň .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>

Boý

Diňe bir heightbaha goýýarys .progress, şonuň üçin şol bahany üýtgetseňiz içki .progress-barawtomatiki usulda üýtgediler.

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

Düşündirişler

Aýry-aýry ösüş panelleriniň daşky görnüşini üýtgetmek üçin fon peýdaly sapaklary ulanyň.

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

Birnäçe bar

Gerek bolsaňyz, öňe gidiş komponentine birnäçe ösüş barlaryny goşuň.

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

Zolakly

Öňe gidiş zolagynyň fon reňkine CSS gradientiniň üsti bilen zolak ulanmak üçin .progress-bar-stripedgoşuň ..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>

Animasiýa zolaklary

Zolakly gradient hem animasiýa edilip bilner. CSS3 animasiýalary arkaly sagdan çepe zolaklary janlandyrmak üçin .progress-bar-animatedgoşuň ..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

Üýtgeýjiler

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

Düwmeler

Üçin CSS animasiýalaryny döretmek üçin ulanylýar .progress-bar-animated. Goşulýar scss/_progress-bar.scss.

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