प्रगती
स्टॅक केलेले बार, अॅनिमेटेड पार्श्वभूमी आणि मजकूर लेबल्ससाठी समर्थन वैशिष्ट्यीकृत बूटस्ट्रॅप सानुकूल प्रगती बार वापरण्यासाठी दस्तऐवजीकरण आणि उदाहरणे.
प्रगती घटक दोन एचटीएमएल घटक, रुंदी सेट करण्यासाठी काही CSS आणि काही गुणधर्मांसह तयार केले आहेत. तुम्ही प्रोग्रेस बार स्टॅक करू शकता, त्यांना अॅनिमेट करू शकता आणि त्यावर मजकूर लेबले ठेवू शकता याची खात्री करून आम्ही 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