W3.CSS लेआउट
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
W3.CSS लेआउट क्लासेस
W3.CSS संस्करण 2.90 / 2.91 ने "कॉलम-लाइक" लेआउट के लिए निम्नलिखित वर्ग पेश किए:
| कक्षा | विवरण |
|---|---|
| w3-सेल-पंक्ति | कोशिकाओं (कॉलम) के लिए कंटेनर। |
| w3-सेल | लेआउट सेल (कॉलम)। |
| w3-सेल-टॉप | सेल (स्तंभ) के शीर्ष पर सामग्री को संरेखित करता है। |
| w3-सेल-मध्य | सामग्री को सेल (स्तंभ) के लंबवत मध्य में संरेखित करता है। |
| w3-सेल-नीचे | सेल (कॉलम) के नीचे सामग्री को संरेखित करता है। |
| w3-मोबाइल | सेल (कॉलम) में मोबाइल-प्रथम प्रतिक्रिया जोड़ता है। तत्वों को मोबाइल उपकरणों पर ब्लॉक तत्वों के रूप में प्रदर्शित करता है। |
लेआउट कक्षाएं बहिष्कृत लेआउट कक्षाओं को प्रतिस्थापित करती हैं।
नया लेआउट क्लासर अधिक बहुमुखी और उपयोग में आसान है।
पदावनत लेआउट वर्ग इस पृष्ठ के निचले भाग में सूचीबद्ध हैं।
एचटीएमएल ब्लॉक तत्व
मूल रूप से, HTML ब्लॉक तत्व (जैसे <div> तत्व) लंबवत ब्लॉक के रूप में प्रदर्शित होते हैं:
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
उदाहरण
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
लेआउट सेल
w3- सेल वर्ग क्षैतिज रूप से प्रदर्शित करने के लिए ब्लॉक तत्वों को फिर से परिभाषित करता है (जैसे तालिका कक्ष):
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
उदाहरण
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
लेआउट कंटेनर
W3- सेल-पंक्ति कोशिकाओं (कॉलम) के लिए एक कंटेनर है।
w3-सेल-पंक्ति कंटेनर की चौड़ाई सभी निहित कोशिकाओं की कुल चौड़ाई को परिभाषित करती है।
डिफ़ॉल्ट चौड़ाई 100% है:
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
उदाहरण
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
यदि आप सेल कंटेनर की चौड़ाई बदलते हैं, तो यह निहित कोशिकाओं की कुल चौड़ाई को कम कर देगा:
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
उदाहरण
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
लेआउट सेल स्वयं समायोजन कर रहे हैं
W3- सेल वर्ग में एक बहुत अच्छा अंतर्निर्मित स्व-समायोजन मानक है। अगल-बगल के तत्व स्वचालित रूप से आवश्यक चौड़ाई में समायोजित हो जाएंगे:
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट। नमस्ते W3.CSS लेआउट।
उदाहरण
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
लेआउट सेल समान ऊंचाई पर समायोजित करें
साथ-साथ w3-सेल तत्व भी स्वचालित रूप से समान ऊंचाई पर स्व-समायोजित हो जाएंगे:
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
उदाहरण
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
अनुकूल लेआऊट
w3-mobile वर्ग किसी भी HTML तत्व में मोबाइल की पहली प्रतिक्रिया जोड़ता है।
w3-सेल के साथ प्रयोग किया जाता है, यह छोटे स्क्रीन/मोबाइल फोन पर लंबवत रूप से और मध्यम/बड़ी स्क्रीन पर क्षैतिज रूप से लेआउट कॉलम प्रदर्शित करेगा।
मध्यम और बड़ी स्क्रीन पर:
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
छोटे पर्दे पर:
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
उदाहरण
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
आसान संरेखण
W3- सेल वर्ग टेक्स्ट को संरेखित करना बहुत आसान बनाता है।
3 अलग संरेखण वर्ग हैं:
- w3-सेल-टॉप (डिफ़ॉल्ट)
- w3-सेल-मध्य
- w3-सेल-नीचे
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
उदाहरण
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
W3- सेल-पंक्ति वर्ग पृष्ठ की चौड़ाई में फिट होने के लिए तत्वों को फैलाता है:
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
नमस्ते W3.CSS लेआउट।
उदाहरण
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
पदावनत W3.CSS टेबल लेआउट क्लासेस
| w3-लेआउट-कंटेनर | इसके बजाय w3-cell-row का प्रयोग करें। |
| w3-लेआउट-पंक्ति | |
| w3-लेआउट-सेल | इसके बजाय w3-सेल का प्रयोग करें। |
| w3-लेआउट-टॉप | इसके बजाय w3-cell-top का प्रयोग करें। |
| w3-लेआउट-मध्य | इसके बजाय w3-सेल-मध्य का प्रयोग करें। |
| w3-लेआउट-नीचे | इसके बजाय w3-cell-bottom का उपयोग करें। |
| w3-लेआउट-col | इसके बजाय w3-mobile का उपयोग करें। |
संस्करण 4.0 में W3.CSS से बहिष्कृत कक्षाएं हटा दी जाएंगी।