W3.CSS सूचियाँ
मूल सूची
मूल सूची प्रदर्शित करने के लिए w3-ul वर्ग का उपयोग किया जाता है:
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
सीमाबद्ध सूची
W3- सीमा वर्ग सूची के चारों ओर एक सीमा जोड़ता है:
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
सूची हैडर
सूची आइटम के अंदर शीर्षक तत्व जोड़ने का एक उदाहरण:
नाम
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
कार्ड के रूप में सूचीबद्ध करें
सूची को कार्ड के रूप में दिखाने के लिए w3-कार्ड- नंबर वर्गों का उपयोग किया जा सकता है:
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
केंद्रित सूची
W3- केंद्र वर्ग का उपयोग सूची आइटम को सूची में केंद्रित करने के लिए किया जा सकता है:
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
रंगीन सूची
सूची में रंग जोड़ने के लिए w3- रंग वर्गों का उपयोग किया जा सकता है :
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
रंगीन सूची आइटम
सूची आइटम में रंग जोड़ने के लिए w3- रंग वर्गों का उपयोग किया जा सकता है :
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
मंडराने योग्य सूची
w3- होवर करने योग्य वर्ग माउस-ओवर पर प्रत्येक सूची आइटम में एक धूसर पृष्ठभूमि रंग जोड़ता है:
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
यदि आप एक विशिष्ट होवर रंग चाहते हैं, तो प्रत्येक <li> तत्व में कोई भी w3-hover- रंग वर्ग जोड़ें:
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
बंद करने योग्य सूची आइटम
सूची आइटम को बंद/छिपाने के लिए "x" पर क्लिक करें:
- जील
- एडम
- पूर्व संध्या
उदाहरण
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
युक्ति: HTML × एंटिटी क्लोज बटन के लिए पसंदीदा आइकन है ("X" अक्षर के बजाय)।
पैडिंग के साथ सूची
सूची आइटम में पैडिंग जोड़ने के लिए w3-पैडिंग क्लासेस का उपयोग किया जा सकता है :
- जील
- पूर्व संध्या
- एडम
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li
class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>
अवतार सूची
उदाहरण
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</span>
<img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
<div class="w3-bar-item">
<span
class="w3-large">Mike</span><br>
<span>Web
Designer</span>
</div>
</li>
युक्ति: आप हमारे W3.CSS बार्स और W3.CSS नेविगेशन अध्यायों में w3-बार कक्षाओं के बारे में अधिक जानेंगे।
सूची चौड़ाई
डिफ़ॉल्ट रूप से सूचियों की चौड़ाई 100% होती है। इसे बदलने के लिए चौड़ाई संपत्ति का प्रयोग करें।
उदाहरण
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
30% चौड़ाई:
- जील
- एडम
50% चौड़ाई:
- जील
- एडम
80% चौड़ाई:
- जील
- एडम
छोटी सूची
एक छोटी सूची प्रदर्शित करने के लिए w3-छोटे वर्ग का प्रयोग करें :
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
छोटी सूची
छोटी सूची प्रदर्शित करने के लिए w3-छोटे वर्ग का उपयोग करें :
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
बड़ी सूची
बड़ी सूची प्रदर्शित करने के लिए w3-बड़े वर्ग का उपयोग करें :
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XLarge सूची
एक अतिरिक्त बड़ी सूची प्रदर्शित करने के लिए w3-xlarge वर्ग का उपयोग करें :
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXबड़ी सूची
XXLarge सूची प्रदर्शित करने के लिए w3-xxlarge वर्ग का उपयोग करें :
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXXबड़ी सूची
XXXLarge सूची प्रदर्शित करने के लिए w3-xxxlarge वर्ग का उपयोग करें :
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
जंबो लिस्ट
एक विशाल "जंबो" सूची प्रदर्शित करने के लिए w3-जंबो वर्ग का उपयोग करें :
- जील
- पूर्व संध्या
- एडम
उदाहरण
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>