ئىلگىرىلەش

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

بۇ بەتتە

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

ئىلگىرىلەش زاپچاسلىرى ئىككى HTML ئېلېمېنتى بىلەن ياسالغان ، بەزىلىرى CSS كەڭلىك ۋە بىر قانچە خاسلىق. بىز HTML5 <progress>ئېلېمېنتىنى ئىشلەتمەيمىز ، ئىلگىرىلەش بالدىقىنى تىزىپ ، ئۇلارنى جانلاندۇرالايسىز ۋە ئۇلارنىڭ ئۈستىگە تېكىست بەلگىسىنى قويالايسىز.

.progressئىلگىرىلەش بالدىقىنىڭ ئەڭ چوڭ قىممىتىنى كۆرسىتىش ئۈچۈن ئوراپ ئىشلىتىمىز .
بىز ئىچكى قىسىمنى .progress-barئىشلىتىپ ھازىرغىچە بولغان ئىلگىرىلەشنى كۆرسىتىپ بېرىمىز.
.progress-barئۇلارنىڭ كەڭلىكىنى تەڭشەش ئۈچۈن ئىچكى ئۇسلۇب ، ئىشلىتىش سىنىپى ياكى ئىختىيارى CSS تەلەپ قىلىنىدۇ .
ئۇ .progress-barيەنە زىيارەت قىلىشقا بولىدىغان بىر قىسىم roleۋە خاسلىقلارنى تەلەپ قىلىدۇ ، ariaجۈملىدىن قولايلىق ئىسىم (ئىشلىتىش ياكى شۇنىڭغا ئوخشاش).aria-labelaria-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>

Labels

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

Animated stripes

سىزىقلىق گرادېنتنىمۇ جانلاندۇرغىلى بولىدۇ. 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 ئۆزگەرگۈچى مىقدار ئۇسۇلىنىڭ بىر قىسمى بولۇش سۈپىتى بىلەن ، ئىلگىرىلەش بالدىقى يەرلىك CSS ئۆزگەرگۈچى مىقدارنى ئىشلىتىپ ، .progressدەل ۋاقتىدا خاسلاشتۇرۇشنى كۈچەيتىدۇ. 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;

Keyframes

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

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