बूटस्ट्रैप - पृष्ठांकन

यह अध्याय पेजेशन सुविधा के बारे में चर्चा करता है जो बूटस्ट्रैप का समर्थन करता है। पृष्ठांकन, एक अनियंत्रित सूची बूटस्ट्रैप द्वारा अन्य इंटरफ़ेस तत्वों की तरह संभाला जाता है।

पृष्ठ पर अंक लगाना

निम्न तालिका उन वर्गों को सूचीबद्ध करती है जो बूटस्ट्रैप पेजिनेशन को संभालने के लिए प्रदान करती है।

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>

<ul class = "pagination">
   <li class = "disabled"><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
   .......
</ul>

<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

डिफ़ॉल्ट पृष्ठ पर अंक लगाना

निम्न उदाहरण वर्ग के उपयोग को प्रदर्शित करता है .pagination उपरोक्त तालिका में चर्चा की गई -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

राज्य अमेरिका

निम्न उदाहरण वर्ग के उपयोग को प्रदर्शित करता है .disabled, .active उपरोक्त तालिका में चर्चा की गई -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1</a></li>
   <li class = "disabled"><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

आकार

निम्न उदाहरण नौकरशाही का आकार घटाने के लिए वर्गों के उपयोग को दर्शाता है, .pagination-* उपरोक्त तालिका में चर्चा की गई -

<ul class = "pagination pagination-lg">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination pagination-sm">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

पेजर

यदि आपको पाठ से परे जाने वाले सरल पृष्ठांकन लिंक बनाने की आवश्यकता है, तो पेजर काफी अच्छी तरह से काम कर सकता है। पेजिंग लिंक की तरह, पेजर एक अनऑर्डर की गई सूची है। डिफ़ॉल्ट रूप से लिंक केंद्रित हैं। निम्न तालिका उन सूचियों को सूचीबद्ध करती है जो बूटस्ट्रैप पेजर के लिए प्रदान करती है।

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

डिफ़ॉल्ट पेजर

निम्न उदाहरण वर्ग के उपयोग को प्रदर्शित करता है .pager उपरोक्त तालिका में चर्चा की गई -

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

लिंक लिंक किए गए

निम्न उदाहरण संरेखण के लिए कक्षाओं के उपयोग को दर्शाता है, .previous, .next उपरोक्त तालिका में चर्चा की गई -

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

राज्य अमेरिका

निम्न उदाहरण वर्ग के उपयोग को प्रदर्शित करता है .disabled उपरोक्त तालिका में चर्चा की गई -

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>