بوٽ اسٽريپ ڪسٽم پروگريس بار استعمال ڪرڻ لاءِ دستاويز ۽ مثال اسٽيڪ ٿيل بار، متحرڪ پس منظر، ۽ ٽيڪسٽ ليبلز لاءِ سپورٽ جي خصوصيت.
اهو ڪيئن ڪم ڪري ٿو
ترقي جا حصا ٻه HTML عناصر سان ٺهيل آهن، ڪجهه سي ايس ايس کي ويڪر مقرر ڪرڻ لاء، ۽ ڪجھ خاصيتون. اسان HTML5 <progress>عنصر استعمال نه ڪندا آهيون ، انهي کي يقيني بڻائي ته توهان ترقي واري بار کي اسٽيڪ ڪري سگهو ٿا، انهن کي متحرڪ ڪري سگهو ٿا، ۽ انهن تي ٽيڪسٽ ليبل رکي سگهو ٿا.
اسان .progressترقي واري بار جي وڌ ۾ وڌ قيمت کي ظاهر ڪرڻ لاءِ لفافي طور استعمال ڪريون ٿا.
اسان اندروني طور تي استعمال ڪريون ٿا .progress-barترقي جي نشاندهي ڪرڻ لاءِ.
.progress-barانهن جي چوٽي سيٽ ڪرڻ لاءِ هڪ ان لائن انداز، يوٽيلٽي ڪلاس، يا ڪسٽم CSS جي ضرورت آهي.
ان کي دستياب بڻائڻ لاءِ .progress-barپڻ ڪجهه role۽ خاصيتون گهربل آهن.aria
اھو سڀ گڏجي گڏ ڪريو، ۽ توھان ھيٺ ڏنل مثال آھن.
Bootstrap چوٿون سيٽنگ لاءِ ھٿ ڀري افاديت مهيا ڪري ٿو . توهان جي ضرورتن تي مدار رکندي، اهي جلدي ترتيب ڏيڻ ۾ مدد ڪري سگھن ٿيون.
ليبلز
پنھنجي ترقي واري بارن ۾ ليبل شامل ڪريو متن جي اندر اندر رکڻ سان .progress-bar.
25 سيڪڙو
اوچائي
اسان صرف heightتي هڪ قدر مقرر ڪيو آهي .progress، تنهنڪري جيڪڏهن توهان ان قدر کي تبديل ڪيو ته اندروني .progress-barخودڪار طريقي سان تبديل ٿي ويندي.
پس منظر
انفرادي ترقي واري بار جي ظاهر کي تبديل ڪرڻ لاء پس منظر يوٽيلٽي ڪلاس استعمال ڪريو.
گھڻن بار
جيڪڏهن توهان کي ضرورت هجي ته ترقي جي جزو ۾ ڪيترن ئي ترقي واري بار شامل ڪريو.
پٽي ٿيل
.progress-bar-stripedڪنهن به ۾ شامل ڪريو .progress-barپٽي لاڳو ڪرڻ لاءِ CSS گريجوئيٽ ذريعي ترقي واري بار جي پس منظر جي رنگ تي.