Ösüş
Toplanan barlary, animasiýa fonlaryny we tekst belliklerini goldaýan Bootstrap adaty ösüş barlaryny ulanmak üçin resminamalar we mysallar.
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-bar
Iç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-bar
käbirrole
we 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
.
<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 height
baha goýýarys .progress
, şonuň üçin şol bahany üýtgetseňiz içki .progress-bar
awtomatiki 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-striped
goş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-animated
goş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; }
}
}