Source

प्रगति

स्टैक्ड बार, एनिमेटेड बैकग्राउंड और टेक्स्ट लेबल के लिए समर्थन की विशेषता वाले बूटस्ट्रैप कस्टम प्रोग्रेस बार का उपयोग करने के लिए दस्तावेज़ीकरण और उदाहरण।

यह काम किस प्रकार करता है

प्रगति घटक दो HTML तत्वों, चौड़ाई निर्धारित करने के लिए कुछ CSS और कुछ विशेषताओं के साथ बनाए गए हैं। हम HTML5 <progress>तत्व का उपयोग नहीं करते हैं , यह सुनिश्चित करते हुए कि आप प्रगति सलाखों को ढेर कर सकते हैं, उन्हें एनिमेट कर सकते हैं और उन पर टेक्स्ट लेबल लगा सकते हैं।

  • हम .progressप्रगति पट्टी के अधिकतम मूल्य को इंगित करने के लिए एक आवरण के रूप में उपयोग करते हैं।
  • .progress-barहम अब तक की प्रगति को इंगित करने के लिए आंतरिक का उपयोग करते हैं।
  • .progress-barउनकी चौड़ाई निर्धारित करने के लिए एक इनलाइन शैली, उपयोगिता वर्ग या कस्टम CSS की आवश्यकता होती है।
  • इसे सुलभ बनाने के लिए कुछ और विशेषताओं की .progress-barभी आवश्यकता होती है।rolearia

उन सभी को एक साथ रखें, और आपके पास निम्नलिखित उदाहरण हैं।

<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>