Source

प्रगति

बूटस्ट्रैप कस्टम प्रगति बार कें उपयोग करय कें लेल दस्तावेजीकरण आ उदाहरण जे ढेर बार, एनिमेटेड पृष्ठभूमि, आ पाठ लेबल कें लेल समर्थन कें सुविधा प्रदान करयत छै.

कोना काज करैत अछि

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

  • .progressहम प्रगति बार के अधिकतम मान दर्शाबय लेल रैपर के रूप में प्रयोग करैत छी |
  • .progress-barहम सब एखन धरि के प्रगति के संकेत करय लेल भीतर के प्रयोग करैत छी ।
  • .progress-barकें अपन चौड़ाई सेट करय कें लेल एकटा इनलाइन शैली, उपयोगिता वर्ग, या कस्टम CSS कें आवश्यकता होयत छै.
  • एकरा सुलभ बनावा .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>