Aligning Items and Managing Layout Responsiveness in Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट के आइटम एलाइनमेंट और लेआउट रेस्पोंसिवनेस्स स्पेशल फीचर्स में से एक है, जिससे यूजर डिज़ाइन डेवलप वेबपेज एलिमेंट वेब लेआउट को मल्टीप्ल इंडिविजुअल इलेक्ट्रॉनिक डिवाइस गैजेट्स स्क्रीन साइज़ के अनुसार रिस्पॉन्सिव और मैनेज करने में इजी करना होता है। W3.CSS फ्रेमवर्क वेब एलिमेंट आइटम को एक पर्टिकुलर डायरेक्शन में अलाइन करने जैसे (हॉरिजॉन्टली और वर्टिकली दोनों) और रिस्पॉन्सिवनेस बेहेवियर को मैनेज करने के लिए कई क्लास प्रोवाइड करता है। ये क्लास वेब डेवलपर को ऐसे वेबपेज लेआउट क्रिएट करने में हेल्प कर सकते हैं. जो एक समय में मल्टीप्ल इंडिविजुअल स्क्रीन साइज़ के अनुसार आसानी से एडजस्ट और डिस्प्ले हो जाएं, जिससे यह फिक्स हो सके कि यूजर क्रिएटेड वेब कंटेंट डाटा और इनफार्मेशन मोबाइल और डेस्कटॉप दोनों डिवाइस पर प्रॉपर आर्डर में डिस्प्ले हो।
Aligning web content items horizontally and vertically in W3.CSS.
Horizontal alignment in W3.CSS.
किसी वेबपेज वेबसाइट डाटा आइटम को हॉरिजॉन्टल अलाइनमेंट जैसे, (टेक्स्ट, बटन, या डिव डाटा ब्लॉक को सेंटर में मूव करने) के लिए, W3.CSS वेब डेवलपर को कई प्रकार के आइटम अलाइनमेंट क्लास प्रोवाइड करता है. जैसे,
- w3-left – यह क्लास मौजूदा वेब कंटेंट आइटम को लेफ्ट डायरेक्शन में मूव या अलाइन करता है।
- w3-center – यह मौजूदा वेब कंटेंट आइटम को सेंटर डायरेक्शन में मूव या अलाइन करता है।
- w3-right – यह मौजूदा वेब कंटेंट आइटम को राइट डायरेक्शन में मूव या अलाइन करता है।
Example of horizontal web item alignment in W3.CSS.
<!DOCTYPE html>
<html>
<head>
<title>Let’s explore W3.CSS text alignment Attributes </title>
<!– Here we connect W3.CSS CDN network–>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-black”>
<div class=”w3-left w3-pink w3-padding”>
<p>Left text alignment. </p>
</div>
<div class=”w3-center w3-indigo w3-padding”>
<p>Center text alignment. </p>
</div>
<div class=”w3-right w3-yellow w3-padding”>
<p> Right text alignment. </p>
</div>
</div>
</body>
</html>
Vertical Alignment in W3.CSS.
किसी वेबपेज वेबसाइट डाटा आइटम को वर्टिकली अलाइन करने के लिए, W3.CSS वेब डेवलपर को कई क्लास प्रोवाइड करता है. जो W3.CSS में किसी वेबपेज में डेवलप फ्लेक्सबॉक्स लेआउट वेब एलिमेंट के साथ काम करने के लिए स्पेशली यूज़फुल हैं।
There are two most common ways to vertically align a webpage’s website data items.
- Using the w3-display-* classes – ये W3.CSS क्लास फ्लेक्सबॉक्स लेआउट पर यूज़ की जाती हैं, और वेब डेवलपर को वेब कंटेंट एलिमेंट को वर्टिकली और हॉरिजॉन्टली अलाइन करने में हेल्प करती हैं।
- w3-display-container – यह क्लास किसी वेबपेज में फ्लेक्स स्टाइल अप्लाई करने के लिए एक कंटेनर टाइप है।
- w3-display-middle – यह क्लास W3.CSS में वेब कंटेंट डाटा एलिमेंट को हॉरिजॉन्टली और वर्टिकली दोनों तरह से सेंटर करता है।
Example of vertical and horizontal cantering with the w3-display class.
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Display Middle Example</title>
<!– Here we connect W3.CSS CDN network –>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container”>
<h2>Lets Display W3.CSS text In Middle</h2>
<div class=”w3-display-container w3-pink”
style=”height: 400px;”>
<div class=”w3-display-middle w3-text-white w3-indigo w3-padding”>
<p>Here we arrange webpage text in centered both horizontally and vertically direction. </p>
</div>
</div>
</div>
</body>
</html>
Explanation of vertical and horizontal centering with the w3-display class.
- यहाँ इस एक्साम्प्ल में w3-display-container एक फिक्स हाइट वाला एक फ्लेक्स बॉक्स कंटेनर क्रिएट करता है।
- इस क्लास में w3-display-middle उस कंटेनर के अंदर चाइल्ड वेब कंटेंट डाटा इन्फो को हॉरिजॉन्टली और वर्टिकली दोनों डायरेक्शन में सेंटर कर अलाइन करता है।
Vertical Alignment with W3.CSS Flexbox.
W3.CSS वेब डेवलपमेंट में अधिक काम्प्लेक्स वेबपेज लेआउट डिज़ाइन डेवलप करने के लिए, W3.CSS वेब डेवलपर वर्टिकल और हॉरिजॉन्टल वेब डाटा एलिमेंट अलाइनमेंट पर एक्जैक्ट कंट्रोल लेने के लिए फ्लेक्सबॉक्स का यूज़ कर सकते हैं। वेब डेवलपर को W3.CSS फ्लेक्सबॉक्स यूटिलिटी कई जरूरी क्लास क एक सेट प्रोवाइड करता है, जैसे,
- w3-display-flex – यह मौजूदा वेबपेज में फ्लेक्सबॉक्स लेआउट को अप्लाई करता है।
- w3-flex-top – यह किसी वेबपेज आइटम को कंटेनर के टॉप पर अलाइन कर डिस्प्ले करता है।
- w3-flex-middle – यह मौजूदा वेबपेज में डाटा आइटम को वर्टिकली सेंटर में अलाइन करता है. जैसे, यह वेब एलिमेंट कंटेनर के बीच में आइटम को अलाइन करता है।
- w3-flex-bottom – यह मौजूदा वेबपेज में डाटा आइटम को कंटेनर के बॉटम में अलाइन करता है।
Example of using Flexbox for vertical alignment.
<!DOCTYPE html>
<html>
<head>
<title>Lets Learn W3.CSS Flexbox Attributes </title>
<!– Here we connect W3.CSS CDN network –>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container”>
<h2>Let Explore Flexbox Vertical Centering Attributes </h2>
<div class=”w3-display-flex w3-flex-middle w3-indigo”
style=”height: 190px;”>
<div class=”w3-padding w3-red”>
<p>Here we align content in vertically centered using Flexbox features. </p>
</div>
</div>
</div>
</body>
</html>
Managing webpage layout responsiveness with W3.CSS breakpoints.
W3.CSS में वेबपेज अलग अलग स्क्रीन साइज़ के अनुसार आटोमेटिक रूप से एडजस्ट होने वाले रिस्पॉन्सिव वेबपेज वेबसाइट डिज़ाइन करने के लिए, W3.CSS वेब डेवलपर को इसके कई बिल्ट-इन ब्रेकपॉइंट का यूज़ करके यह डिफाइन करने में हेल्प करता है कि मौजूदा वेबपेज में वेब एलिमेंट मल्टीप्ल इंडिविजुअल स्क्रीन साइज़ पर कैसे बिहेव और डिस्प्ले करते हैं। ये W3.CSS ब्रेकपॉइंट वेब डेवलपर को स्माल, मीडियम और लार्ज स्क्रीन साइज लेआउट को कंट्रोल करने में हेल्प करते हैं।
Using Breakpoints in W3.CSS.
किसी भी प्रकार के आटोमेटिक एडजस्ट होने वाले W3.CSS में रिस्पॉन्सिव वेबपेज डिज़ाइन करने के लिए मुख्य रूप से तीन प्रकार के ब्रेकपॉइंट होते हैं. जिन्हे आप अपनी वेब डेवलपमेंट जरूरत के अनुसार यूज़ कर सकते है. जैसे।
- s – इसे आप स्माल स्क्रीन स्मार्टफोन डिवाइस के लिए (विड्थ 600px से कम) यूज़ कर सकते है।
- m – इसे आप मीडियम स्क्रीन डिवाइस के लिए जिसमे (विड्थ 600px और 900px के बीच) यूज़ कर सकते है।
- l – इसे आप लार्ज स्क्रीन के लिए (विड्थ 900px से ज़्यादा) यूज़ कर सकते है।
W3.CSS वेब डेवलपर इन ब्रेकपॉइंट का यूज़ कर किसी वेबपेज कॉलम की विड्थ को फिक्स करने, वेबपेज फ़ॉन्ट साइज़ एडजस्ट करने, या स्क्रीन साइज़ के आधार पर वेब कंटेंट शो/हाइड करने के लिए कर सकते हैं।
Example of a responsive webpage column layout in W3.CSS.
<div class=”w3-container”>
<h2>Responsive Grid Layout</h2>
<div class=”w3-row”>
<!– here we create a column first –>
<div class=”w3-col s12 m6 l4″>
<div class=”w3-card w3-padding w3-red”>
<h3>Java</h3>
<p>Java is a high-level, object-oriented programming language used to develop web, mobile, desktop, and enterprise applications. </p>
</div>
</div>
<!– here we create a column second –>
<div class=”w3-col s12 m6 l4″>
<div class=”w3-card w3-padding w3-indigo”>
<h3>Swift</h3>
<p>Swift is a powerful and modern programming language developed by Apple for building apps for iOS, macOS, watchOS, and tvOS. </p>
</div>
</div>
<!– here we create a column third –>
<div class=”w3-col s12 m6 l4″>
<div class=”w3-card w3-padding w3-brown”>
<h3>Python</h3>
<p>Python is a high-level, easy-to-learn programming language widely used for web development, data science, artificial intelligence, automation, and software development. </p>
</div>
</div>
Explanation of a responsive webpage column layout in W3.CSS.
- यहाँ इस एक्साम्प्ल में स्माल स्क्रीन (s12) पर, हर कॉलम विड्थ का 100% (पूरी विड्थ) को स्क्रीन में डिस्प्ले करेगा।
- मीडियम स्क्रीन साइज में (m6) पर, हर कॉलम विड्थ का 50% (आधी विड्थ) को स्क्रीन में डिस्प्ले करेगा।
- इसमें लार्ज स्क्रीन साइज (l4) पर, हर कॉलम विड्थ का 33.33% (एक-तिहाई विड्थ) को स्क्रीन में डिस्प्ले करेगा।
Webpage Responsive Visibility in W3.CSS (w3-show, w3-hide classes).
W3.CSS में वेब डेवलपर स्क्रीन साइज़ के अनुसार अपने वेबपेज कंटेंट डिस्प्ले या हाइड करने के लिए W3.CSS की विज़िबिलिटी क्लासेस का यूज़ कर सकते हैं। यह क्लासेज तब यूज़ किए जाते है, जब वेब डेवलपर किसी वेबपेज में चाहते हैं कि कुछ वेबपेज एलिमेंट स्पेशल डिवाइस पर डिस्प्ले हो, जैसे कि मोबाइल मेनू सिर्फ़ स्माल स्क्रीन पर ही डिस्प्ले करना है।
Example of Show/Hide Content Based on Screen Size.
<div class=”w3-row”>
<!– this column display only on small screens –>
<div class=”w3-col s12 w3-hide-medium w3-hide-large”>
<div class=”w3-card w3-padding w3-orange”>
<h3>Smart Phone Screen</h3>
<p>This column display only on small screens device. </p>
</div>
</div>
<!– this column display only on medium screens –>
<div class=”w3-col m6 w3-hide-small w3-hide-large”>
<div class=”w3-card w3-padding w3-lime”>
<h3>Tablet Screen</h3>
<p>This column display only on medium screen device. </p>
</div>
</div>
<!– this column display only on large screens –>
<div class=”w3-col l6 w3-hide-small w3-hide-medium”>
<div class=”w3-card w3-padding w3-red”>
<h3>Desktop Screen</h3>
<p>This column display only on large screen device. </p>
</div>
</div>
Explanation of Show/Hide Content Based on Screen Size.
- w3-hide-small – यह क्लास W3.CSS में स्माल स्क्रीन (<600px) पर वेब एलिमेंट को हाइड करता है।
- w3-hide-medium – यह क्लास W3.CSS में मीडियम स्क्रीन (600px – 900px) पर वेब एलिमेंट को हाइड करता है।
- w3-hide-large – यह क्लास W3.CSS में लार्ज स्क्रीन (>900px) पर वेब एलिमेंट को हाइड करता है।
- w3-show-small – यह क्लास W3.CSS में स्माल स्क्रीन पर वेब एलिमेंट को प्रीव्यू करता है।
- w3-show-medium – यह क्लास W3.CSS में मीडियम स्क्रीन पर वेब एलिमेंट को प्रीव्यू करता है।
- w3-show-large – यह क्लास W3.CSS में लार्ज स्क्रीन पर वेब एलिमेंट को प्रीव्यू करता है।
Managing Webpage Layout with Flexbox and Grid in W3.CSS.
W3.CSS में एडवांस्ड वेबपेज एलिमेंट आइटम अलाइनमेंट और लेआउट स्ट्रक्चर के लिए flexbox मेथड का यूज़ किया जाता है। यह वेब डेवलपर को किसी वेबपेज वेबसाइट में Flexbox कंटेनर एलिमेंट आइटम को कैसे अरेंज किए जाएं, इस पर अधिक कंट्रोल प्रोवाइड करता है।
Flexbox Layouts.
W3.CSS में वेब डेवलपर वेबपेज एलिमेंट आइटम को हॉरिजॉन्टली या वर्टिकली अरेंज करने के लिए flexbox लेआउट को अप्लाई कर सकते हैं।
- w3-display-flex – यह किसी वेबपेज में एक फ्लेक्सबॉक्स कंटेनर को अप्लाई करता है।
- w3-flex-column – यह किसी वेबपेज में एक आइटम को वर्टिकली (एक कॉलम में) अरेंज कर डिस्प्ले करता है।
- w3-flex-row – यह किसी वेबपेज में एक आइटम को हॉरिजॉन्टली (एक रो में) अरेंज कर प्रीव्यू करता है।
- w3-flex-top – यह किसी वेबपेज में एक आइटम को टॉप लोकेशन पर अलाइन कर शो करता है।
- w3-flex-middle – यह किसी वेबपेज में एक आइटम को सेंटर में (वर्टिकली) अलाइन कर मिडिल में डिस्प्ले करता है।
- w3-flex-bottom – यह किसी वेबपेज में एक आइटम को बॉटम में अलाइन कर डिस्प्ले करता है।
Example of a flexbox webpage layout.
<div class=”w3-container”>
<h2>Let Explore Flexbox Centering Attributes In W3.CSS </h2>
<div class=”w3-display-flex w3-flex-row w3-flex-middle w3-center w3-light-green”
style=”height: 150px;”>
<div class=”w3-card w3-padding w3-red”>
<p>Here This flexbox item is centered vertically and horizontally align.</p>
</div>
</div>
</div>
Exaplanation of a flexbox webpage layout.
- यह क्लास W3.CSS में एक w3-display-flex कंटेनर को फ्लेक्सबॉक्स में क्रिएट करता है।
- यह क्लास w3-flex-row वेबपेज एलिमेंट आइटम को हॉरिजॉन्टली अरेंज कर डिस्प्ले करता है।
- यह क्लास w3-flex-middle वेबपेज एलिमेंट आइटम को कंटेनर के अंदर वर्टिकली सेंटर में डिस्प्ले करता है।
Managing Spacing with Margins and Padding in W3.CSS.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में वेब डेवलपर w3-margin और w3-padding क्लास से मौजूदा वेबपेज के डिफ़ॉल्ट स्पेसिंग ऐट्रिब्यूट्स को कंट्रोल और मैनेज कर सकते हैं. जिसे वेब डेवेलपर किसी वेबपेज के मार्जिन और पैडिंग मैनेजमेंट के लिए वेब एलिमेंट पर अप्लाई कर सकते है।
Important margin and padding classes in W3.CSS.
- w3-margin – यह W3.CSS क्लास मौजूदा वेबपेज में एलिमेंट के चारों तरफ मार्जिन को ऐड कर डिस्प्ले करता है।
- w3-margin-{size} – यह W3.CSS क्लास एक स्पेसिफिक स्पेशल साइज़ के साथ वेबपेज एलिमेंट मार्जिन को ऐड करता है. (जैसे, w3-margin-small, w3-margin-large) आदि है.
- w3-padding – यह W3.CSS क्लास वेबपेज एलिमेंट के अंदर पैडिंग ऐट्रिब्यूट्स को ऐड करता है.
- w3-padding-{size} – यह W3.CSS क्लास एक स्पेशल साइज़ के साथ वेबपेज पैडिंग को ऐड करता है. (जैसे, w3-padding-small, w3-padding-large) आदि है.
Margin and padding examples in W3.CSS.
<!DOCTYPE html>
<html>
<head>
<title>Lets Explore W3.CSS Margin and Padding Classes</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<!– Here we use w3-container with w3-light-blue themes–>
<div class=”w3-container w3-light-blue”>
<h2>Lets Learn Margin and Padding W3.CSS Classes</h2>
<!– Here we use w3-card + w3-padding-large
+ w3-margin-top + w3-margin-bottom
+ w3-white class in below example–>
<div class=”w3-card w3-padding-large
w3-margin-top w3-margin-bottom w3-indigo”>
<h3>Lets Set Spacing Among W3.CSS Text</h3>
<p>
Here we use webpage text for padding and margin apply for spacing.
</p>
<p>
Here we create a padding space inside the define card, even the web element margin
define space outside the card.
</p>
</div>
</div>
</body>
</html>
