W3.CSS डिस्प्ले
प्रदर्शन वर्ग आपको HTML तत्वों को अन्य HTML तत्वों के अंदर विशिष्ट स्थिति में प्रदर्शित करने की अनुमति देता है:
बाएं से बाएं
दायां शीर्ष
नीचे बाएँ
नीचे दाएं
बाएं
सही
मध्यम
W3.CSS प्रदर्शन कक्षाएं
W3.CSS निम्नलिखित प्रदर्शन वर्ग प्रदान करता है:
| कक्षा | को परिभाषित करता है |
|---|---|
| w3-डिस्प्ले-कंटेनर | W3-डिस्प्ले- कक्षाओं के लिए कंटेनर |
| w3-डिस्प्ले-टॉपलेफ्ट | w3-डिस्प्ले-कंटेनर के ऊपरी बाएँ कोने में सामग्री प्रदर्शित करता है |
| w3-डिस्प्ले-टॉपराइट | w3-डिस्प्ले-कंटेनर के ऊपरी दाएं कोने में सामग्री प्रदर्शित करता है |
| w3-डिस्प्ले-नीचे बाएँ | w3-डिस्प्ले-कंटेनर के निचले बाएँ कोने में सामग्री प्रदर्शित करता है |
| w3-डिस्प्ले-बॉटमराइट | w3-डिस्प्ले-कंटेनर के निचले दाएं कोने में सामग्री प्रदर्शित करता है |
| w3-डिस्प्ले-बाएं | सामग्री को w3-डिस्प्ले-कंटेनर के बाएँ (मध्य बाएँ) में प्रदर्शित करता है |
| w3-प्रदर्शन-दाएं | w3-डिस्प्ले-कंटेनर के दाईं ओर (मध्य दाएं) सामग्री प्रदर्शित करता है |
| w3-डिस्प्ले-मध्य | सामग्री को w3-डिस्प्ले-कंटेनर के मध्य (केंद्र) में प्रदर्शित करता है |
| w3-डिस्प्ले-टॉपमिडिल | w3-डिस्प्ले-कंटेनर के शीर्ष मध्य में सामग्री प्रदर्शित करता है |
| w3-डिस्प्ले-बॉटममिडिल | w3-डिस्प्ले-कंटेनर के निचले मध्य में सामग्री प्रदर्शित करता है |
| w3-प्रदर्शन-स्थिति | w3-डिस्प्ले-कंटेनर में निर्दिष्ट स्थान पर सामग्री प्रदर्शित करता है |
| w3-डिस्प्ले-होवर | w3-डिस्प्ले-कंटेनर के अंदर होवर पर सामग्री प्रदर्शित करता है |
| w3-बाएं | बाईं ओर एक तत्व तैरता है (फ्लोट: बाएं) |
| w3-दाएं | एक तत्व को दाईं ओर तैरता है (फ्लोट: दाएं) |
| w3-शो | एक तत्व दिखाता है (प्रदर्शन: ब्लॉक) |
| w3-छिपाना | एक तत्व छुपाता है (प्रदर्शन: कोई नहीं) |
| w3-मोबाइल | किसी भी तत्व में मोबाइल-प्रथम प्रतिक्रिया जोड़ता है। तत्वों को मोबाइल उपकरणों पर ब्लॉक तत्वों के रूप में प्रदर्शित करता है |
उदाहरण
उदाहरण
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-display-topleft">Top Left</div>
<div class="w3-display-topright">Top Right</div>
<div class="w3-display-bottomleft">Bottom Left</div>
<div class="w3-display-bottomright">Bottom Right</div>
<div class="w3-display-left">Left</div>
<div class="w3-display-right">Right</div>
<div class="w3-display-middle">Middle</div>
<div class="w3-display-topmiddle">Top Mid</div>
<div class="w3-display-bottommiddle">Bottom Mid</div>
</div>
अतिरिक्त पैडिंग के साथ ऊपर जैसा ही उदाहरण:
बाएं से बाएं
दायां शीर्ष
नीचे बाएँ
नीचे दाएं
बाएं
सही
मध्यम
उदाहरण
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
एक छवि के अंदर पाठ प्रदर्शित करना:
बाएं से बाएं
दायां शीर्ष
नीचे बाएँ
नीचे दाएं
शीर्ष मध्य
बाएं
सही
मध्यम
निचला मध्य
उदाहरण
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
प्रदर्शन होवर
W3- डिस्प्ले-होवर वर्ग एक w3-डिस्प्ले-कंटेनर के अंदर होवर पर सामग्री प्रदर्शित करता है (छिपे से दिखाया जाता है)।
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
इस बॉक्स पर माउस ले जाएँ!
Top Mid
Bottom Mid
उदाहरण
<div class="w3-display-container w3-light-grey" style="height:300px;">
<div class="w3-display-topleft w3-display-hover">Top Left</div>
<div
class="w3-display-topright w3-display-hover">Top Right</div>
<div
class="w3-display-bottomleft w3-display-hover">Bottom Left</div>
<div class="w3-display-bottomright w3-display-hover">Bottom Right</div>
<div class="w3-display-left w3-display-hover">Left</div>
<div
class="w3-display-right w3-display-hover">Right</div>
<div
class="w3-display-middle">Mouse over this box!</div>
<div
class="w3-display-topmiddle w3-display-hover">Top Mid</div>
<div
class="w3-display-bottommiddle w3-display-hover">Bottom Mid</div>
</div>
कूल होवर प्रभाव बनाने के लिए w3-डिस्प्ले-होवर कक्षाओं को प्रभाव और एनीमेशन कक्षाओं के साथ जोड़ा जा सकता है :
Khaki pants, $19.99
उदाहरण
<div class="w3-display-container w3-hover-opacity">
<img src="img_avatar.png"
alt="Avatar">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button
w3-black">John Doe</button>
</div>
</div>
आप बाद में इस ट्यूटोरियल में एनिमेशन और प्रभावों के बारे में और जानेंगे।
Displaying A Flag
With a little bit of imagination, the w3-display-classes can be used to create a flag:
Example
<div class="w3-display-container w3-card-4" style="height:200px;width:350px">
<div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>
<div class="w3-red w3-display-bottomleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-bottomright" style="width:60%;height:40%"></div>
</div>
Floating Classes
The w3-left class floats an element to the left, the w3-right class floats an element to the right:
w3-left
w3-right
Example
<div class="w3-bar w3-light-grey">
<div class="w3-left
w3-red">w3-left</div>
<div class="w3-right w3-blue">w3-right</div>
</div>
Note: Clear floats with the w3-clear class or put them inside a w3-container, like in the example above (clears floats automatically).
Hide and Show
Force an element to be shown or hidden with the w3-show or w3-hide class.
Example
<p class="w3-show">I am shown (display: block).</p>
<p class="w3-hide">I am hidden (display: none).</p>
These classes are often used to toggle between hiding and showing elements:
Example
Hello!
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<button class="w3-button w3-mobile">Link</button>