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>