ترقي

بوٽ اسٽريپ ڪسٽم پروگريس بار استعمال ڪرڻ لاءِ دستاويز ۽ مثال اسٽيڪ ٿيل بار، متحرڪ پس منظر، ۽ ٽيڪسٽ ليبلز لاءِ سپورٽ جي خصوصيت.

هن صفحي تي

اهو ڪيئن ڪم ڪري ٿو

ترقي جا حصا ٻه HTML عناصر سان ٺهيل آهن، ڪجهه سي ايس ايس کي ويڪر مقرر ڪرڻ لاء، ۽ ڪجھ خاصيتون. اسان HTML5 <progress>عنصر استعمال نه ڪندا آهيون ، انهي کي يقيني بڻائي ته توهان ترقي واري بار کي اسٽيڪ ڪري سگهو ٿا، انهن کي متحرڪ ڪري سگهو ٿا، ۽ انهن تي ٽيڪسٽ ليبل رکي سگهو ٿا.

اسان .progressترقي واري بار جي وڌ ۾ وڌ قيمت کي ظاهر ڪرڻ لاءِ لفافي طور استعمال ڪريون ٿا.
اسان اندروني طور تي استعمال ڪريون ٿا .progress-barترقي جي نشاندهي ڪرڻ لاءِ.
.progress-barانهن جي چوٽي سيٽ ڪرڻ لاءِ هڪ ان لائن انداز، يوٽيلٽي ڪلاس، يا ڪسٽم CSS جي ضرورت آهي.
انهي کي رسائي لائق بڻائڻ لاءِ .progress-barپڻ ڪجهه role۽ ariaخاصيتون گهربل آهن، بشمول هڪ پهچ وارو نالو (استعمال ڪندي aria-label, aria-labelledby, or similar).

اھو سڀ گڏجي گڏ ڪريو، ۽ توھان ھيٺ ڏنل مثال آھن.

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>

ليبلز

پنھنجي ترقي واري بارن ۾ ليبل شامل ڪريو متن جي اندر اندر رکڻ سان .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>

پٽي ٿيل

.progress-bar-stripedڪنهن به ۾ شامل ڪريو .progress-barپٽي لاڳو ڪرڻ لاءِ CSS گريجوئيٽ ذريعي ترقي واري بار جي پس منظر جي رنگ تي.

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>

متحرڪ پٽي

پٽي ٿيل گريجوئيٽ پڻ متحرڪ ٿي سگھي ٿو. 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>

سي ايس ايس

متغير

v5.2.0 ۾ شامل ڪيو ويو

Bootstrap جي ترقي يافته 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};

سس متغير

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