Source

आगे बढ़ल

बूटस्ट्रैप कस्टम प्रगति बार सभ के इस्तेमाल खातिर दस्तावेजीकरण आ उदाहरण जेह में ढेर बार, एनिमेटेड बैकग्राउंड, आ टेक्स्ट लेबल सभ खातिर सपोर्ट के बिसेसता बा।

कइसे काम करेला

प्रगति घटक सभ के दू गो एचटीएमएल तत्व सभ के साथ बनावल जाला, कुछ सीएसएस चौड़ाई सेट करे खातिर, आ कुछ बिसेसता सभ के साथ। हमनी के 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।

25% के बा। 
<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>