W3.CSS पेजिनेशन
बेसिक पेजिनेशन
यदि आपके पास कई पृष्ठों वाली एक वेब साइट है, तो आप किसी प्रकार के पेजिनेशन का उपयोग करना चाह सकते हैं।
एक बुनियादी पेजिनेशन बनाने के लिए, बार ( w3-bar ) में बटन ( w3-button ) का उपयोग करें ।
उदाहरण
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#"
class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
बटनों के बीच की जगह को हटाने के लिए एक w3-बार-आइटम वर्ग जोड़ें:
उदाहरण
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
अंकन तीर
पृष्ठ पर अंक लगाना तीर जोड़ने के लिए किसी आइकन लायब्रेरी से HTML निकायों या चिह्नों का उपयोग करें:
उदाहरण
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
सक्रिय/वर्तमान लिंक
उपयोगकर्ता किस पृष्ठ पर है, यह इंगित करने के लिए w3- रंग वर्गों में से किसी एक का उपयोग करें :
उदाहरण
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
होवर रंग
डिफ़ॉल्ट रूप से, जब आप माउस को पेजिनेशन लिंक पर ले जाते हैं, तो उन्हें एक ग्रे बैकग्राउंड रंग मिलता है। होवर रंग बदलने के लिए किसी भी w3-hover- रंग वर्ग का उपयोग करें:
उदाहरण
<div class="w3-bar">
<a href="#"
class="w3-button w3-hover-purple">«</a>
<a
href="#" class="w3-button w3-hover-green">1</a>
<a href="#"
class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button
w3-hover-blue">3</a>
<a href="#"
class="w3-button w3-hover-black">4</a>
<a href="#"
class="w3-button w3-hover-orange">»</a>
</div>
पेजिनेशन साइज़िंग
पेजिनेशन को आकार देने के लिए w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge या w3-xxxlarge का उपयोग करें:
उदाहरण
<div class="w3-bar
w3-xlarge">
केंद्रित पृष्ठ पर अंक लगाना
पेजिनेशन को केंद्र में रखने के लिए, "w3-bar" तत्व को "w3-center" तत्व के अंदर रखें:
उदाहरण
<div class="w3-center">
<div class="w3-bar">
<a href="#"
class="w3-bar-item w3-button">«</a>
<a href="#"
class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#"
class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
</div>
बॉर्डर पेजिनेशन
बॉर्डर के साथ पेजिनेशन बनाने के लिए w3-बॉर्डर क्लास जोड़ें :
उदाहरण
<div class="w3-bar
w3-border">
गोल सीमाएं
गोल बॉर्डर के लिए w3-बॉर्डर के आगे w3- राउंड क्लास जोड़ें :
उदाहरण
<div class="w3-bar
w3-border w3-round">
अन्य पेजिनेशन उदाहरण
अगले/पिछले बटन बनाने के लिए w3-bar वर्ग का भी उपयोग किया जा सकता है:
अगला/पिछला उदाहरण
<div class="w3-bar w3-border w3-round">
<a href="#"
class="w3-button">❮ Previous</a>
<a href="#" class="w3-button
w3-right">Next ❯</a>
</div>
इनलाइन मेनू उदाहरण
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>