ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
in English

ئىلگىرىلەش

Bootست قاچىلانغان قاچا, كارتون تەگلىك ۋە تېكىست بەلگىسى خالايدىغان قوزغاتقۇچ ۋە مىساللىرى ساقلىنىدۇ.

قانداق ئىشلەيدۇ

ئىلگىرىلەش زاپچاسلىرى ئىككى 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>

Labels

ئىچىگە تېكىست قويۇپ ئىلگىرىلەش بالدىقىڭىزغا بەلگە قوشۇڭ .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>

Animated stripes

سىزىقلىق گرادېنتنىمۇ جانلاندۇرغىلى بولىدۇ. 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;

Keyframes

ئۈچۈن CSS كارتونلىرىنى ياساشقا ئىشلىتىلىدۇ .progress-bar-animated. ئۆز ئىچىگە ئالىدۇ scss/_progress-bar.scss.

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