बूटस्ट्रैप 4 पेजिनेशन
बेसिक पेजिनेशन
यदि आपके पास बहुत से पृष्ठों वाली एक वेब साइट है, तो आप प्रत्येक पृष्ठ पर किसी प्रकार का पृष्ठांकन जोड़ना चाह सकते हैं।
एक बेसिक पेजिनेशन बनाने के लिए, .paginationक्लास को एक <ul>एलीमेंट में जोड़ें। फिर .page-itemप्रत्येक <li>तत्व और एक .page-linkवर्ग को प्रत्येक लिंक के अंदर जोड़ें <li>:
उदाहरण
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
सक्रिय अवस्था
कक्षा का .activeउपयोग वर्तमान पृष्ठ को "हाइलाइट" करने के लिए किया जाता है:
उदाहरण
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item
active"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
विकलांग राज्य
क्लास का .disabledउपयोग अन-क्लिक करने योग्य लिंक के लिए किया जाता है:
उदाहरण
<ul class="pagination">
<li class="page-item
disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
पेजिनेशन साइज़िंग
पेजिनेशन ब्लॉकों को बड़े या छोटे आकार में भी आकार दिया जा सकता है:
.pagination-lgबड़े ब्लॉक या छोटे ब्लॉक के लिए वर्ग जोड़ें .pagination-sm:
उदाहरण
<ul class="pagination
pagination-lg">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
अंकन संरेखण
पेजिनेशन के संरेखण को बदलने के लिए उपयोगिता वर्गों का प्रयोग करें:
उदाहरण
<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px
0">
<li class="page-item">...</li>
</ul>
<!--
Center-aligned -->
<ul class="pagination justify-content-center"
style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul
class="pagination justify-content-end" style="margin:20px 0">
<li
class="page-item">...</li>
</ul>
टिप: हमारे बीएस4 यूटिलिटीज चैप्टर में बूटस्ट्रैप 4 यूटिलिटी/हेल्पर क्लासेस के बारे में और पढ़ें ।
ब्रेडक्रम्ब्स
अंकन के लिए एक अन्य रूप, ब्रेडक्रंब है:
और
कक्षाएं एक नेविगेशनल पदानुक्रम के भीतर वर्तमान पृष्ठ के स्थान को इंगित करती हैं .breadcrumb:.breadcrumb-item
उदाहरण
<ul class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Photos</a></li>
<li
class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li
class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item
active">Rome</li>
</ul>