आगे बढ़ल
बूटस्ट्रैप कस्टम प्रगति बार सभ के इस्तेमाल खातिर दस्तावेजीकरण आ उदाहरण जेह में ढेर बार, एनिमेटेड बैकग्राउंड, आ टेक्स्ट लेबल सभ खातिर सपोर्ट के बिसेसता बा।
कइसे काम करेला
प्रगति घटक सभ के दू गो एचटीएमएल तत्व सभ के साथ बनावल जाला, कुछ सीएसएस चौड़ाई सेट करे खातिर, आ कुछ बिसेसता सभ के साथ। हमनी के HTML5 <progress>
तत्व के इस्तेमाल ना करेनी जा , ई सुनिश्चित करेनी जा कि रउआ प्रगति बार के ढेर कर सकेनी जा, ओकरा के एनिमेट कर सकेनी जा, आ ओकरा ऊपर टेक्स्ट लेबल रख सकेनी जा।
- हमनी
.progress
के प्रगति बार के अधिकतम मान के इंगित करे खातिर रैपर के रूप में इस्तेमाल करेनी जा। .progress-bar
हमनी के अब तक के प्रगति के संकेत देवे खातिर भीतरी के इस्तेमाल करेनी ।- द
.progress-bar
के आपन चौड़ाई सेट करे खातिर इनलाइन स्टाइल, यूटिलिटी क्लास, या कस्टम सीएसएस के जरूरत होला। - एकरा के सुलभ बनावे
.progress-bar
खातिर कुछrole
आ विशेषता के भी जरूरत होला।aria
ओह सब के मिला के देखल जाव त रउरा लगे निम्नलिखित उदाहरण बा.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
बूटस्ट्रैप चौड़ाई सेट करे खातिर मुट्ठी भर उपयोगिता प्रदान करेला . रउआँ के जरूरत के आधार पर, ई जल्दी से प्रगति के कॉन्फ़िगर करे में मदद कर सके लें।
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
लेबल लगावल गइल बा
के भीतर पाठ रख के अपना प्रगति बार में लेबल जोड़ीं .progress-bar
।
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
ऊँचाई
हमनी के खाली , height
पर एगो मान सेट करेनी जा .progress
, एहसे अगर रउआ ओह मान के बदलब जा त भीतरी .progress-bar
के आकार स्वचालित रूप से ओह हिसाब से बदल जाई।
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" 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" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
पृष्ठभूमि के बारे में बतावल गइल बा
अलग-अलग प्रगति बार के रूप बदले खातिर बैकग्राउंड यूटिलिटी क्लास के इस्तेमाल करीं।
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" 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" 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" 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" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
कई गो बार के बा
जरूरत पड़ला पर कवनो प्रगति घटक में कई गो प्रगति बार शामिल करीं.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
धारीदार बा
प्रगति बार के बैकग्राउंड रंग पर CSS ढाल के माध्यम से पट्टी लागू करे .progress-bar-striped
खातिर कवनो में जोड़ीं ।.progress-bar
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" 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" 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" 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" 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" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
एनिमेटेड धारियन के बा
धारीदार ढाल के एनिमेटेड भी कइल जा सके ला। CSS3 एनीमेशन के माध्यम से धारियन के दाहिने से बाईं ओर एनिमेट .progress-bar-animated
करे खातिर में जोड़ीं ।.progress-bar
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
ससस के बा
चर के बारे में बतावल गइल बा
$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; }
}
}