W3.CSS केस स्टडी
स्क्रैच से एक उत्तरदायी वेब साइट का निर्माण
इस अध्याय में हम शुरू से W3.CSS उत्तरदायी वेबसाइट का निर्माण करेंगे।
सबसे पहले, प्रारंभिक व्यूपोर्ट और W3.CSS के लिंक के साथ एक साधारण HTML पृष्ठ से प्रारंभ करें।
उदाहरण
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
तत्वों को कंटेनरों में रखें
सामान्य मार्जिन और पैडिंग जोड़ने के लिए, HTML तत्वों को कंटेनर के अंदर रखें (<div class="w3-container">)
दो अलग <div> तत्वों का उपयोग करके शीर्षलेख को शेष सामग्री से अलग करें:
उदाहरण
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
रंग वर्ग
रंग वर्ग तत्वों के रंग को परिभाषित करता है।
यह उदाहरण पहले <div> तत्व में एक रंग जोड़ता है:
उदाहरण
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
आकार वर्ग
आकार वर्ग तत्वों के लिए पाठ आकार को परिभाषित करता है।
यह उदाहरण दोनों शीर्षलेख तत्वों में एक आकार जोड़ता है:
उदाहरण
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
सिमेंटिक तत्वों का प्रयोग करें
यदि आप HTML5 सिमेंटिक अनुशंसाओं का पालन करना पसंद करते हैं। करने की कृपा करे!
यदि आप <div> या <header> का उपयोग करते हैं तो W3.CSS के लिए यह कोई मायने नहीं रखता।
उदाहरण
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
बहुस्तंभ उत्तरदायी लेआउट
W3.CSS के साथ एक बहु-स्तंभ उत्तरदायी लेआउट बनाना आसान है।
विभिन्न स्क्रीन आकारों पर देखे जाने पर कॉलम अपने आप पुनर्व्यवस्थित हो जाएंगे।
कुछ ग्रिड नियम:
- पंक्ति वर्ग से प्रारंभ करें <div class="w3-row-padding">
- जल्दी से ग्रिड कॉलम बनाने के लिए "w3-third" जैसी पूर्वनिर्धारित कक्षाओं का उपयोग करें
- अपनी टेक्स्ट सामग्री को ग्रिड कॉलम के अंदर रखें
यह उदाहरण दिखाता है कि समान चौड़ाई के तीन कॉलम कैसे बनाएं:
उदाहरण
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
यह उदाहरण दिखाता है कि समान चौड़ाई के चार कॉलम कैसे बनाएं:
उदाहरण
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
विभिन्न चौड़ाई वाले कॉलम
यह उदाहरण एक तीन-स्तंभ लेआउट बनाता है जहाँ बीच में स्तंभ पहले और अंतिम स्तंभ से अधिक चौड़ा होता है:
उदाहरण
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
नेविगेशन बार्स
नेविगेशन बार एक नेविगेशन हेडर है जिसे पेज के शीर्ष पर रखा जाता है।
उदाहरण
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
पेज नेविगेशन
पार्श्व नेविगेशन के साथ, आपके पास कई विकल्प हैं:
- हमेशा पृष्ठ सामग्री के बाईं ओर नेविगेशन फलक प्रदर्शित करें।
- एक संक्षिप्त, "पूरी तरह से स्वचालित" प्रतिक्रियाशील साइड नेविगेशन का उपयोग करें।
- पृष्ठ सामग्री के बाएँ भाग पर खुला नेविगेशन फलक।
- संपूर्ण पृष्ठ सामग्री पर नेविगेशन फलक खोलें।
- नेविगेशन फलक खोलते समय पृष्ठ की सामग्री को दाईं ओर स्लाइड करें।
- नेविगेशन फलक को बाईं ओर के बजाय दाईं ओर प्रदर्शित करें
यह उदाहरण पृष्ठ सामग्री के बाईं ओर नेविगेशन फलक खोलता है:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
मेनू खोलने और छिपाने के लिए जावास्क्रिप्ट का उपयोग किया जाता है:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}