बूस्ट्रैप 5 पेजिंग
- पिछला पृष्ठ BS5 लोडर
- अगला पृष्ठ BS5 लिस्ट ग्रुप
बुनियादी पेजन
अगर आपका वेबसाइट कई पृष्ठों का है, तो आप प्रत्येक पृष्ठ के लिए कुछ पेजन जोड़ना चाहिए.
बुनियादी पेजन बनाने के लिए .pagination क्लास को जोड़ें <ul> एलीमेंट. फिर .page-item जोड़ें <li> एलीमेंट, और .page-link क्लास को जोड़ें <li> बहुतसे लिंक के लिए:
इन्स्टांस
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">पिछला पृष्ठ</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="#">अगला पृष्ठ</a></li> </ul>
सक्रिय स्थिति
.active वर्तमान पृष्ठ को "हाल ही" करने के लिए क्लास:
इन्स्टांस
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">पिछला पृष्ठ</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="#">अगला पृष्ठ</a></li> </ul>
अक्षम स्थिति
.disabled अक्षम लिंक के लिए क्लास:
इन्स्टांस
<ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">पिछला पृष्ठ</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="#">अगला पृष्ठ</a></li> </ul>
पेजन आकार
पेजन ब्लॉक का आकार बड़ा या छोटा कर सकते हैं:
बड़े ब्लॉक के लिए क्लास जोड़ें .pagination-lg छोटे ब्लॉक के लिए जोड़ें .pagination-sm प्रकार:
इन्स्टांस
<ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">पिछला पृष्ठ</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="#">अगला पृष्ठ</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">पिछला पृष्ठ</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="#">अगला पृष्ठ</a></li> </ul>
पेजिनेशन समानता
पेजिनेशन के समानता को बदलने के लिए utility क्लास का उपयोग करें:
इन्स्टांस
<!-- डिफ़ॉल्ट (बाईं समानता) --> <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- मध्य समानता --> <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- दायाँ समानता --> <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul>
ब्रेडक्रम्स (Breadcrumbs)
पेजिनिंग का एक अन्य रूप ब्रेडक्रम्स है:
.breadcrumb और .breadcrumb-item क्लास नियम करता है कि वर्तमान पृष्ठ नेविगेशन हिरार्क्ट्री में कहाँ है:
इन्स्टांस
<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">फोटो</a></li> <li class="breadcrumb-item"><a href="#">2019 शरद ऋतु</a></li> <li class="breadcrumb-item"><a href="#">चीन</a></li> <li class="breadcrumb-item active">बीजिंग</li> </ul>
- पिछला पृष्ठ BS5 लोडर
- अगला पृष्ठ BS5 लिस्ट ग्रुप
