W3.CSS पैनल
मैं एक पैनल हूं।
मैं एक पैनल हूं।
मैं एक कंटेनर हूँ।
मैं एक कंटेनर हूँ।
पैनल क्लास
W3-पैनल वर्ग किसी भी HTML तत्व में एक 16px ऊपर और नीचे मार्जिन और एक 16px बाएँ और दाएँ पैडिंग जोड़ता है।
उदाहरण
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
नोट्स के लिए पैनल
W3- पैनल वर्ग नोट्स प्रदर्शित करने के लिए एकदम सही है।
नोटों को अक्सर हल्के रंग के साथ प्रदर्शित किया जाता है:
9 मिलियन से अधिक निवासियों के महानगरीय क्षेत्र के साथ लंदन यूनाइटेड किंगडम का सबसे अधिक आबादी वाला शहर है।
उदाहरण
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
W3.CSS नोट्स के बारे में अधिक जानने के लिए कृपया W3.CSS नोट्स अध्याय पर जाएँ।
उद्धरण के लिए पैनल
w3- पैनल वर्ग उद्धरण प्रदर्शित करने के लिए एकदम सही है।
उदाहरण
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
W3.CSS कोट्स के बारे में अधिक जानने के लिए कृपया W3.CSS कोट्स चैप्टर पर जाएं।
अलर्ट के लिए पैनल
अलर्ट प्रदर्शित करने के लिए w3-पैनल वर्ग एकदम सही है।
अलर्ट अक्सर एक मजबूत रंग का उपयोग करके प्रदर्शित किए जाते हैं:
खतरा!
लाल अक्सर खतरनाक या नकारात्मक स्थिति का संकेत देता है।
उदाहरण
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
W3.CSS अलर्ट के बारे में अधिक जानने के लिए कृपया W3.CSS अलर्ट चैप्टर पर जाएं।
कार्ड के रूप में पैनल
9 मिलियन से अधिक निवासियों के महानगरीय क्षेत्र के साथ लंदन यूनाइटेड किंगडम का सबसे अधिक आबादी वाला शहर है।
उदाहरण
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
गोल पैनल
9 मिलियन से अधिक निवासियों के महानगरीय क्षेत्र के साथ लंदन यूनाइटेड किंगडम का सबसे अधिक आबादी वाला शहर है।
उदाहरण
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</p>
</div>
एक पैनल छुपाएं (बंद करें)
पैनल को छिपाना आसान है।
इस पैनल को बंद करने के लिए X पर क्लिक करें।
इस पैनल को बंद करने के लिए X पर क्लिक करें।
उदाहरण
<div class="w3-panel
w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
एक पैनल दिखाएँ (खोलें)
दिखाना (छिपा हुआ) पैनल आसान है:
उदाहरण
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
panel</button>
<div id="id01" class="w3-panel w3-green
w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>