आगे बढ़ल
बूटस्ट्रैप कस्टम प्रगति बार सभ के इस्तेमाल खातिर दस्तावेजीकरण आ उदाहरण जेह में ढेर बार, एनिमेटेड बैकग्राउंड, आ टेक्स्ट लेबल सभ खातिर सपोर्ट के बिसेसता बा।
कइसे काम करेला
प्रगति घटक सभ के दू गो एचटीएमएल तत्व सभ के साथ बनावल जाला, कुछ सीएसएस चौड़ाई सेट करे खातिर, आ कुछ बिसेसता सभ के साथ। हमनी के HTML5 <progress>तत्व के इस्तेमाल ना करेनी जा , ई सुनिश्चित करेला कि रउआ प्रगति बार के ढेर कर सकेनी, ओकरा के एनिमेट कर सकेनी, आ ओकरा ऊपर टेक्स्ट लेबल रख सकेनी।
- हमनी
.progressके प्रगति बार के अधिकतम मान के इंगित करे खातिर रैपर के रूप में इस्तेमाल करेनी जा। .progress-barहमनी के अब तक के प्रगति के संकेत देवे खातिर भीतरी के इस्तेमाल करेनी ।- द
.progress-barके आपन चौड़ाई सेट करे खातिर इनलाइन स्टाइल, यूटिलिटी क्लास, या कस्टम सीएसएस के जरूरत होला। - एकरा के सुलभ बनावे
.progress-barखातिर कुछroleआariaबिसेसता सभ के भी जरूरत होला, जवना में सुलभ नाँव (aria-label,aria-labelledby, या अइसने कुछ के इस्तेमाल) भी सामिल बा।
ओह सब के मिला के देखल जाव त रउरा लगे निम्नलिखित उदाहरण बा.
<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>बूटस्ट्रैप चौड़ाई सेट करे खातिर मुट्ठी भर उपयोगिता प्रदान करेला . रउआँ के जरूरत के आधार पर, ई जल्दी से प्रगति के कॉन्फ़िगर करे में मदद कर सके लें।
<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।
<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के आकार स्वचालित रूप से ओह हिसाब से बदल जाई।
<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>पृष्ठभूमि के बारे में बतावल गइल बा
अलग-अलग प्रगति बार के रूप बदले खातिर बैकग्राउंड यूटिलिटी क्लास के इस्तेमाल करीं।
<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क्लास के साथ छिपल अतिरिक्त पाठ।
कई गो बार के बा
जरूरत पड़ला पर कवनो प्रगति घटक में कई गो प्रगति बार शामिल करीं.
<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>धारीदार बा
प्रगति बार के बैकग्राउंड रंग पर CSS ढाल के माध्यम से पट्टी लागू करे .progress-bar-stripedखातिर कवनो में जोड़ीं ।.progress-bar
<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
<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 में जोड़ल गइल बाबूटस्ट्रैप के बिकसित होखे वाला सीएसएस चर दृष्टिकोण के हिस्सा के रूप में, प्रगति बार अब .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; }
}
}