Bootstrap Pagination with Examples in Hindi

जब किसी website पर बहुत ज्यादा data, articles, products, users या search results होते हैं, तो सभी information को एक ही page पर दिखाना convenient नहीं होता। ऐसे data को कई pages में divide करने के लिए Pagination का उपयोग किया जाता है।

Bootstrap में pagination बनाने के लिए .pagination class का उपयोग किया जाता है। इसके अंदर प्रत्येक page के लिए .page-item और उसके link के लिए .page-link class का उपयोग किया जाता है।

Pagination का उपयोग blogs, search results, product listings, student records और अन्य बड़े data sets में किया जा सकता है।

1. Basic Pagination

Basic Bootstrap pagination बनाने के लिए एक <ul> element में .pagination class लगाई जाती है। इसके अंदर प्रत्येक page को .page-item और page link को .page-link class दी जाती है।

इसमें कौन-सी classes use हुई हैं?

• .pagination → पूरी pagination का main container
• .page-item → प्रत्येक page का list item
• .page-link → page number या navigation link

इस example में Previous, page numbers 1, 2, 3 और Next links बनाए गए हैं।

2. Active और Disabled States

Pagination में यह बताना useful होता है कि user अभी किस page पर है और कौन-सा navigation option available नहीं है। Bootstrap इसके लिए .active और .disabled classes provide करता है।

Active State

.active class उस page को highlight करती है जिस page पर user currently मौजूद है। ऊपर के example में page 1 active है।

Disabled State

.disabled class किसी pagination item को inactive दिखाने के लिए उपयोग की जाती है। इसका उपयोग अक्सर first page पर Previous या last page पर Next option के लिए किया जाता है।

• active → current page highlight करता है।
• disabled → navigation item को inactive दिखाता है।

3. Pagination Sizes

Bootstrap pagination के लिए अलग-अलग sizes भी provide करता है। Pagination को बड़ा करने के लिए .pagination-lg और छोटा करने के लिए .pagination-sm class का उपयोग किया जाता है। Default pagination के लिए केवल .pagination पर्याप्त है।

Pagination को बड़ा या छोटा करने के लिए:

• .pagination-lg → Large pagination
• .pagination → Default pagination
• .pagination-sm → Small pagination

4. Centered और Right-Aligned Pagination

Pagination को page पर अलग-अलग positions पर align करने के लिए Bootstrap की flex utility classes का उपयोग किया जा सकता है। उदाहरण के लिए .justify-content-center pagination को center में और .justify-content-end pagination को right side में ले जाती है।

• justify-content-center → Pagination को center align करता है।
• justify-content-end → Pagination को right side align करता है।

5. Pagination with Icons

Pagination में Previous और Next के लिए केवल text की जगह symbols या icons का उपयोग भी किया जा सकता है। आपके example में « और » characters का उपयोग किया गया है।

« previous direction और » next direction को represent करते हैं। साथ में aria-label का उपयोग screen readers के लिए navigation को describe करने में मदद करता है।

Icons वाले Pagination में Important Attributes

• aria-label="Previous" → Previous navigation को describe करता है।
• aria-label="Next" → Next navigation को describe करता है।
• aria-hidden="true" → decorative symbol को assistive technology से hide करता है।

Pagination में Real Links कैसे लगाएं?

ऊपर के examples में href="#" केवल demonstration के लिए है। किसी real website में इसे actual page URL से replace किया जा सकता है। उदाहरण के लिए अगर website पर अलग-अलग article pages हैं, तो links इस तरह दिए जा सकते हैं:

इस तरह pagination केवल design नहीं रहती, बल्कि actual pages के बीच navigation का काम भी कर सकती है।

Pagination की मुख्य Classes

Class	काम
.pagination	Pagination का main container
.page-item	प्रत्येक pagination item का wrapper
.page-link	Page number या navigation link
.active	Current page को highlight करता है
.disabled	Pagination item को inactive दिखाता है
.pagination-lg	Large pagination
.pagination-sm	Small pagination
.justify-content-center	Pagination को center में align करता है
.justify-content-end	Pagination को right side align करता है

Pagination के फायदे

• बहुत बड़े data को छोटे हिस्सों में divide किया जा सकता है।
• Page पर एक साथ बहुत ज्यादा content दिखाने की जरूरत कम होती है।
• Users के लिए अलग-अलग pages पर navigation करना आसान होता है।
• Current page को .active से clearly identify किया जा सकता है।
• First और last pages पर navigation controls को .disabled किया जा सकता है।
• Pagination को large, default और small sizes में display किया जा सकता है।
• Pagination को center या right side में आसानी से align किया जा सकता है।

Important Points

• Bootstrap pagination की main class .pagination है।
• हर pagination item के लिए .page-item class use की जाती है।
• Page number या navigation के लिए .page-link class use होती है।
• .active current page को highlight करने के लिए use होती है।
• .disabled inactive navigation item को दिखाने के लिए use होती है।
• .pagination-lg और .pagination-sm size बदलने के लिए use होती हैं।
• .justify-content-center और .justify-content-end alignment के लिए use की जा सकती हैं।
• Real website में href="#" की जगह actual page URLs देने चाहिए।

Conclusion

Bootstrap Pagination बड़ी lists, articles और data को multiple pages में divide करके users के लिए navigation को आसान बनाती है। .pagination, .page-item और .page-link इसकी basic classes हैं। इसके अलावा .active, .disabled, .pagination-lg, .pagination-sm और alignment classes की मदद से pagination को अपनी website की जरूरत के अनुसार customize किया जा सकता है।

In Short

• .pagination → Base pagination class
• .page-item → हर pagination item का wrapper
• .page-link → Page number या navigation link
• .active → Current page highlight
• .disabled → Inactive pagination item
• .pagination-lg → Large pagination
• .pagination-sm → Small pagination
• .justify-content-center → Center alignment
• .justify-content-end → Right alignment

---

---

---

---

---

---

Quizzes in Hindi

---

---

---