W3.CSS अलर्ट
w3-panel वर्ग सभी प्रकार के अलर्ट प्रदर्शित करने के लिए एकदम सही वर्ग है:
खतरा!
लाल अक्सर खतरनाक या नकारात्मक स्थिति का संकेत देता है।
अलर्ट अक्सर एक मजबूत रंग का उपयोग करके प्रदर्शित किए जाते हैं:
खतरा!
लाल अक्सर खतरनाक या नकारात्मक स्थिति का संकेत देता है।
उदाहरण
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
चेतावनी प्रदर्शित करें
चेतावनी!
पीला अक्सर एक चेतावनी का संकेत देता है जिस पर ध्यान देने की आवश्यकता हो सकती है।
चेतावनी!
पीला अक्सर एक चेतावनी का संकेत देता है जिस पर ध्यान देने की आवश्यकता हो सकती है।
उदाहरण
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
सफलता प्रदर्शित करें
सफलता!
हरा अक्सर कुछ सफल या सकारात्मक इंगित करता है।
सफलता!
हरा अक्सर कुछ सफल या सकारात्मक इंगित करता है।
उदाहरण
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
सूचना प्रदर्शित करें
जानकारी!
नीला अक्सर एक तटस्थ सूचनात्मक परिवर्तन या कार्रवाई का संकेत देता है।
जानकारी!
नीला अक्सर एक तटस्थ सूचनात्मक परिवर्तन या कार्रवाई का संकेत देता है।
उदाहरण
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
एक कंटेनर का उपयोग करना
अलर्ट प्रदर्शित करने के लिए w3-कंटेनर वर्ग का भी उपयोग किया जा सकता है:
उदाहरण
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
सभी रंगों में अलर्ट
अलर्ट अक्सर विशेष रंगों में प्रदर्शित होते हैं, लेकिन किसी भी रंग का उपयोग किया जा सकता है:
खतरा!
लाल अक्सर खतरनाक या नकारात्मक स्थिति का संकेत देता है।
खतरा!
लाल अक्सर खतरनाक या नकारात्मक स्थिति का संकेत देता है।
खतरा!
लाल अक्सर खतरनाक या नकारात्मक स्थिति का संकेत देता है।
खतरा!
लाल अक्सर खतरनाक या नकारात्मक स्थिति का संकेत देता है।
खतरा!
लाल अक्सर खतरनाक या नकारात्मक स्थिति का संकेत देता है।
उदाहरण
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
क्लोजिंग अलर्ट
अलर्ट बॉक्स को बंद करने के लिए, ऊपरी दाएं कोने में स्थित X पर क्लिक करें:
खतरा!
लाल अक्सर खतरनाक या नकारात्मक स्थिति का संकेत देता है।
अलर्ट को बंद करने वाला X बनाने के लिए, एक <span> एलिमेंट को क्लास w3-बटन और ऑनक्लिक इवेंट के साथ जोड़ें:
उदाहरण
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
युक्ति: HTML × एंटिटी क्लोज बटन के लिए पसंदीदा आइकन है ("X" अक्षर के बजाय)।
गोल अलर्ट
यदि आप गोल कोने चाहते हैं तो w3-राउंड कक्षाओं का उपयोग करें :
सफलता!
यहां w3-राउंड का उपयोग किया जाता है।
सफलता!
यहां w3-राउंड-लार्ज का उपयोग किया जाता है।
सफलता!
यहाँ w3-राउंड-xxlarge का उपयोग किया जाता है।
उदाहरण
<div class="w3-panel w3-green w3-round">
कार्ड के रूप में अलर्ट
यदि आप अलर्ट को कार्ड के रूप में प्रदर्शित करना चाहते हैं तो w3-card वर्ग का उपयोग करें :
चेतावनी!
पीला अक्सर कुछ ऐसा इंगित करता है जिस पर ध्यान देने की आवश्यकता होती है।
उदाहरण
<div class="w3-panel w3-yellow w3-card-4">