W3.CSS बार्स
क्षैतिज बार्स
क्षैतिज पट्टियाँ सामान्य वेब डिज़ाइन तत्व हैं:
क्षैतिज पट्टी को स्टाइल करने के लिए w3-bar वर्ग का उपयोग किया जाता है :
उदाहरण
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
W3-बार-आइटम वर्ग का उद्देश्य सही रिक्ति, पैडिंग और स्थिति प्रदान करना है।
लंबवत बार्स
वेब डिज़ाइन में लंबवत बार (साइडबार) भी आम हैं:
w3-bar-block क्लास का उपयोग वर्टिकल बार को स्टाइल करने के लिए किया जाता है:
उदाहरण
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
बार रंग
बार को स्टाइल करने के लिए आप किसी भी रंग का उपयोग कर सकते हैं:
उदाहरण
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
होवर रंग
बार को स्टाइल करने के लिए आप किसी भी होवर रंग का उपयोग कर सकते हैं:
प्रभाव देखने के लिए बार आइटम पर माउस ले जाएँ:
उदाहरण
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Paris</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>
बार लिंक
नेविगेशन प्रदान करना बार के लिए एक सामान्य उपयोग है:
उदाहरण
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
बार बटन
W3- बटन वर्ग बार में लिंक को स्टाइल करने के लिए एकदम सही है।
प्रभाव देखने के लिए बार आइटम पर माउस ले जाएँ:
उदाहरण
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>
उत्तरदायी बार
W3- मोबाइल वर्ग बार आइटम को उत्तरदायी बनाने के लिए एकदम सही है।
प्रभाव देखने के लिए विंडो का आकार बदलें:
उदाहरण
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>
सही-संरेखित बार आइटम
W3- राइट क्लास बार आइटम्स को राइट-अलाइन बनाने के लिए एकदम सही है:
उदाहरण
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>