Conditional display based on screen sizes w3-hide-small, w3-show-large in Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में मल्टीप्ल इंडिविजुअल अलग अलग स्क्रीन डिवाइस साइज़ के अनुसार वेबपेज वेबसाइट एलिमेंट्स को कंडीशनली डिस्प्ले या हाइड करने के लिए कई पावरफुल यूटिलिटीज़ और बिल्ट-इन रेडीमेड क्लासेज का एक सेट प्रोवाइड करता है। यह क्लास वेब डेवलपर को ऐसे वेबपेज वेबसाइट लेआउट डिज़ाइन डेवलप करने में हेल्प करते है, जो डायनामिक आर्डर में मॉडिफाई होते रहते हैं, और ये वेब यूज़र क्लाइंट के डिवाइस गैजेट्स जिसमे स्माल डिवाइस, मीडियम या लार्ज इलेक्ट्रॉनिक डिवाइस (जैसे मोबाइल, टैबलेट, लैपटॉप या डेस्कटॉप स्क्रीन डिवाइस) के आधार पर वेबपेज कंटेंट एलिमेंट को डिस्प्ले या हाइड कर सकते हैं।
The following classes are used for conditional display in W3.CSS scripts.
- w3-show-small – यह W3.CSS क्लास वेबपेज एलिमेंट कंटेंट को सिर्फ़ स्माल स्क्रीन साइज (<600px) पिक्सेल रेज़लुशन साइज स्मार्टफोन डिवाइस पर डिस्प्ले करता है।
- w3-show-medium – यह W3.CSS क्लास वेबपेज एलिमेंट कंटेंट को सिर्फ़ मीडियम स्क्रीन टेबलेट या नोटबुक लैपटॉप (600px – 900px) डिवाइस पर डिस्प्ले करता है।
- w3-show-large – यह W3.CSS क्लास वेबपेज एलिमेंट कंटेंट को सिर्फ़ लार्ज स्क्रीन (>900px) डिवाइस पर डिस्प्ले करता है।
- w3-hide-small – यह W3.CSS क्लास वेबपेज एलिमेंट कंटेंट को स्माल स्क्रीन डिवाइस पर हाइड करता है।
- w3-hide-medium – यह W3.CSS क्लास वेबपेज एलिमेंट कंटेंट को मीडियम स्क्रीन डिवाइस पर हाइड करता है है।
- w3-hide-large – यह W3.CSS क्लास वेबपेज एलिमेंट कंटेंट को लार्ज स्क्रीन डिवाइस पर वेबपेज एलिमेंट को हाइड करता है है।
ये W3.CSS क्लास किसी वेबपेज में स्पेशली तब यूज़ किए जाते हैं, जब वेब डेवलपर एक फुल्ली रिस्पॉन्सिव वेबपेज वेबसाइट लेआउट डेवलप करना चाहते हैं, या मल्टीप्ल इंडिविजुअल अलग-अलग डिवाइस गैजेट्स के लिए वेबपेज कंटेंट को रेस्पॉन्सिव करना चाहते हैं।
Using the w3-show-* and w3-hide-* classes in W3.CSS.
यहाँ आपको नीचे दिए गए एक्साम्प्ल में हम मल्टीप्ल अलग अलग वेबपेज स्क्रीन साइज की विड्थ के आधार पर कुछ वेबपेज एलिमेंट कंटेंट को शो या हाइड कर सकते है.
Example of showing and hiding webpage content based on multiple screen sizes.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Conditional Display Attributes</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-indigo”>
<h2>Lets Display Webpage element on Conditional Screen Size</h2>
<!– Here this content display only on small screens size –>
<div class=”w3-card w3-padding w3-red w3-show-small”>
<p>This webpage content is only display on small screen support width less than 600px smartphone size. </p>
</div>
<!– Here this content display only on medium screens size –>
<div class=”w3-card w3-padding w3-yellow w3-show-medium”>
<p>This webpage content is only display on medium screen support width between 600px and 900px tablet or notebook screen size. </p>
</div>
<!– Here this content display only on large screens –>
<div class=”w3-card w3-padding w3-pink w3-show-large”>
<p>This webpage content is only display on large screen support width greater than 900px desktop or large monitor screen size. </p>
</div>
<!– Here this content hidden only on small screens device –>
<div class=”w3-card w3-padding w3-teal w3-hide-small”>
<p>This webpage content is hidden on small smartphone screen, but it will only display on larger screen devices. </p>
</div>
<!– Here this content hidden only on medium screens device–>
<div class=”w3-card w3-padding w3-orange w3-hide-medium”>
<p>This webpage content is hidden on medium tablet notebook screen, but it will only display on small or large electronic devices. </p>
</div>
<!– Here this content hidden only on large screens device –>
<div class=”w3-card w3-padding w3-white w3-hide-large”>
<p>This webpage content is hidden on large desktop or monitor screen, but it will only display on smaller screen devices. </p>
</div>
</div>
</body>
</html>
Explanation of showing and hiding webpage content based on multiple screen sizes.
- Small screens (w3-show-small) – यहाँ इस एक्साम्प्ल में फर्स्ट कार्ड जिस पर लिखा हो “This webpage content is only display on small screen support width less than 600px smartphone size, कार्ड ब्लॉक स्टेटमेंट को डिस्प्ले डिस्प्ले करता है।
- Medium screens (w3-show-medium) – इसी प्रकार सेकंड कार्ड सिर्फ़ मौजूदा वेबपेज एलिमेंट को 600px और 900px के बीच की विड्थ वाली स्क्रीन पर डिस्प्ले करता है. जैसे, टैबलेट नोटबुक या लैपटॉप डिवाइस है।
- Large screens (w3-show-large) – थर्ड कार्ड मौजूदा वेबपेज में सिर्फ़ 900px से लार्ज डिवाइस स्क्रीन पर वेबपेज एलिमेंट को डिस्प्ले करता है. जैसे, डेस्कटॉप या लार्ज मॉनिटर स्क्रीन साइज के लिए।
- Hidden on small screens (w3-hide-small) – फोर्थ कार्ड कंटेंट मौजूदा वेबपेज में स्माल स्क्रीन पर हाइड होगा, लेकिन मीडियम और लार्ज स्क्रीन साइज पर डिस्प्ले होगा।
- Hidden on medium screens (w3-hide-medium) – फिफ्थ कार्ड मीडियम स्क्रीन साइज पर हाईड होगा, लेकिन स्माल और लार्ज स्क्रीन साइज पर डिस्प्ले होगा।
- Hidden on large screens (w3-hide-large) – सिक्स कार्ड मौजूदा वेबपेज में लार्ज स्क्रीन पर कंटेंट हाइड होगा, लेकिन स्माल और मीडियम स्क्रीन पर डिस्प्ले होगा।
Using conditional display for responsive navigation in W3.CSS.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में वेब डेवलपर एक फुल्ली रिस्पॉन्सिव नेविगेशन मेनू हैडर मेनू बार क्रिएट करने के लिए w3-show-* और w3-hide-* क्लास का यूज़ कर सकते हैं. जहाँ वेब डेवलपर किसी वेबपेज वेबसाइट के स्माल स्क्रीन स्मार्टफोन और कभी टेबलेट डिवाइस पर हैमबर्गर मेनू और लार्ज स्क्रीन पर रेगुलर हॉरिजॉन्टल नेविगेशन बार को डिस्प्ले कर सकते हैं।
Example of a responsive navigation bar creation in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Lets create a responsive navigation bar header menu</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<!– here we create a top header navigation bar menu –>
<div class=”w3-bar w3-indigo w3-large”>
<!– here we create a regular menu display only on medium and large screen device –>
<div class=”w3-bar-item w3-hide-small”>Home</div>
<div class=”w3-bar-item w3-hide-small”>Blog</div>
<div class=”w3-bar-item w3-hide-small”>About Us</div>
<div class=”w3-bar-item w3-hide-small”>Services</div>
<div class=”w3-bar-item w3-hide-small”>Contact Us</div>
<div class=”w3-bar-item w3-hide-small”>Disclaimers</div>
<!– here we create a hamburger menu display only on small screens device –>
<div class=”w3-bar-item w3-hide-medium w3-hide-large”>
<button class=”w3-button w3-large” onclick=”document.getElementById(‘menu’).classList.toggle(‘w3-show’)”>
☰ Menu
</button>
</div>
</div>
<!– here we create a mobile menu for small screens smartphone device –>
<div id=”menu” class=”w3-dropdown-content w3-bar-block w3-dark-grey w3-hide w3-large”>
<a href=”#” class=”w3-bar-item w3-button”>Home</a>
<a href=”#” class=”w3-bar-item w3-button”>Blog</a>
<a href=”#” class=”w3-bar-item w3-button”>About Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Services</a>
<a href=”#” class=”w3-bar-item w3-button”>Contact Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Disclaimers</a>
</div>
</body>
</html>
Explanation of a responsive navigation menu bar in W3.CSS.
- यहाँ इस एक्साम्प्ल में स्माल स्क्रीन डिवाइस (<600px) पिक्सेल रेज़लुशन पर हैमबर्गर मेनू (☰ Menu) आइटम डिस्प्ले होगा। जिसमे मौजूदा वेबपेज पर क्लिक करने पर यह ड्रॉपडाउन (#menu) आइटम को टॉगल करेगा।
- मीडियम और लार्ज स्क्रीन डिवाइस साइज (>=600px) पर रेगुलर हॉरिजॉन्टल नेविगेशन बार मेनू के रूप में (Home, Blog, About Us, Services, Contact Us, Disclaimers) मेनू एलिमेंट को डिस्प्ले करता है।
- w3-hide-medium और w3-hide-large क्लास का यूज़ लार्ज स्क्रीन डिवाइस पर हैमबर्गर मेनू आइटम को हाईड करने में किया जाता है. जबकि w3-hide-small क्लास स्माल स्क्रीन पर नॉर्मल मेनू को हाईड करता है।
