बूटस्ट्रैप प्रगति बार्स
बेसिक प्रोग्रेस बार
एक प्रगति पट्टी का उपयोग उपयोगकर्ता को यह दिखाने के लिए किया जा सकता है कि वह एक प्रक्रिया में कितनी दूर है।
बूटस्ट्रैप कई प्रकार के प्रोग्रेस बार प्रदान करता है।
बूटस्ट्रैप में एक डिफ़ॉल्ट प्रगति पट्टी इस तरह दिखती है:
एक डिफ़ॉल्ट प्रगति पट्टी बनाने के लिए, एक तत्व .progressमें एक वर्ग जोड़ें:<div>
उदाहरण
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
नोट: प्रगति बार Internet Explorer 9 और इससे पहले के संस्करणों में समर्थित नहीं हैं (क्योंकि वे अपने कुछ प्रभावों को प्राप्त करने के लिए CSS3 के संक्रमण और एनिमेशन का उपयोग करते हैं)।
नोट: स्क्रीन रीडर का उपयोग करने वाले लोगों की पहुंच में सुधार करने में सहायता के लिए, आपको aria-* विशेषताओं को शामिल करना चाहिए।
लेबल के साथ प्रगति पट्टी
एक लेबल के साथ एक प्रगति पट्टी इस तरह दिखती है:
.sr-onlyदृश्यमान प्रतिशत दिखाने के लिए कक्षा को प्रगति पट्टी से निकालें :
उदाहरण
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
रंगीन प्रगति बार्स
प्रासंगिक वर्गों का उपयोग "रंगों के माध्यम से अर्थ" प्रदान करने के लिए किया जाता है।
प्रासंगिक वर्ग जिनका उपयोग प्रगति पट्टियों के साथ किया जा सकता है, वे हैं:
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
निम्नलिखित उदाहरण दिखाता है कि विभिन्न प्रासंगिक वर्गों के साथ प्रगति पट्टियाँ कैसे बनाई जाती हैं:
उदाहरण
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
धारीदार प्रगति बार्स
प्रगति सलाखों को भी धारीदार किया जा सकता है:
.progress-bar-stripedप्रगति पट्टियों में धारियाँ जोड़ने के लिए कक्षा जोड़ें :
उदाहरण
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
एनिमेटेड प्रगति बार
.activeप्रगति पट्टी को चेतन करने के लिए कक्षा जोड़ें :
उदाहरण
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
स्टैक्ड प्रोग्रेस बार्स
प्रगति सलाखों को भी ढेर किया जा सकता है:
एक ही में कई बार रखकर एक स्टैक्ड प्रोग्रेस बार बनाएं <div class="progress">:
उदाहरण
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div>