बूटस्ट्रैप 4 प्रोग्रेस बार्स
बेसिक प्रोग्रेस बार
एक प्रगति पट्टी का उपयोग उपयोगकर्ता को यह दिखाने के लिए किया जा सकता है कि वह एक प्रक्रिया में कितनी दूर है।
एक डिफ़ॉल्ट प्रगति पट्टी बनाने के लिए, .progressएक कंटेनर तत्व में एक वर्ग जोड़ें और .progress-barकक्षा को उसके बाल तत्व में जोड़ें। widthप्रगति पट्टी की चौड़ाई निर्धारित करने के लिए CSS गुण का उपयोग करें :
उदाहरण
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
प्रगति बार ऊंचाई
प्रगति पट्टी की ऊंचाई डिफ़ॉल्ट रूप से 16px है। इसे बदलने के लिए CSS heightसंपत्ति का उपयोग करें। ध्यान दें कि आपको प्रगति कंटेनर और प्रगति पट्टी के लिए समान ऊंचाई निर्धारित करनी होगी:
उदाहरण
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
प्रगति बार लेबल
दृश्य प्रतिशत दिखाने के लिए प्रगति पट्टी के अंदर पाठ जोड़ें:
उदाहरण
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
रंगीन प्रगति बार्स
डिफ़ॉल्ट रूप से, प्रगति पट्टी नीली (प्राथमिक) होती है। इसका रंग बदलने के लिए किसी भी बूटस्ट्रैप 4 प्रासंगिक पृष्ठभूमि वर्ग का उपयोग करें:
उदाहरण
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
धारीदार प्रगति बार्स
.progress-bar-stripedप्रगति पट्टियों में धारियाँ जोड़ने के लिए कक्षा का उपयोग करें :
उदाहरण
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
एनिमेटेड प्रगति बार
.progress-bar-animatedप्रगति पट्टी को चेतन करने के लिए कक्षा जोड़ें :
उदाहरण
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
मल्टीपल प्रोग्रेस बार्स
प्रगति सलाखों को भी ढेर किया जा सकता है:
उदाहरण
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>