W3.CSS टैग (लेबल और संकेत)
टैग: किया हुआ नया! और बाद में!
संकेत के रूप में टैग: फाल्कन रिज पार्कवे विराम! ध्यान रहें!
W3.CSS टैग क्लासेस
W3.CSS टैग, लेबल और संकेतों के लिए एक वर्ग प्रदान करता है:
| कक्षा | को परिभाषित करता है |
|---|---|
| w3 दिन | आयताकार काला टैग/लेबल |
टैग, लेबल और संकेत
W3.CSS दुनिया में एक टैग, एक लेबल या एक संकेत के बीच कोई वास्तविक अंतर नहीं है।
टैग आयताकार हैं
W3- टैग वर्ग एक आयताकार टैग (लेबल या चिह्न) बनाता है। डिफ़ॉल्ट रंग काला है:
स्थिति:किया हुआ
उदाहरण
<p>Status: <span
class="w3-tag">Done</span></p>
रंगीन टैग
किसी टैग का रंग बदलने के लिए w3- रंग वर्ग का उपयोग करें :
नया!
और बाद में!
उदाहरण
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
टैग आकार
डिफ़ॉल्ट रूप से, एक टैग अपने कंटेनर के आकार को इनहेरिट करेगा।
टैग के आकार को संशोधित करने के लिए w3- आकार वर्ग (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-junbo) का उपयोग किया जा सकता है:
6 6 6
66 66 66
66 66
आप बड़े टैग में कुछ अतिरिक्त पैडिंग जोड़ना चाह सकते हैं:
उदाहरण
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
पत्र टैग
उदाहरण
<span class="w3-tag w3-xlarge">A</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">G</span>
<span
class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">S</span>
<span class="w3-tag w3-xlarge">T</span>
उदाहरण
<span class="w3-tag w3-jumbo w3-red">S</span>
<span class="w3-tag w3-jumbo">A</span>
<span
class="w3-tag w3-jumbo w3-yellow">L</span>
<span class="w3-tag w3-jumbo">E</span>
लक्षण
संकेत कुछ और नहीं बल्कि बड़े टैग हैं।
उदाहरण
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
सड़क के संकेत
उदाहरण
<div class="w3-tag w3-round w3-green" style="padding:3px">
<div
class="w3-tag w3-round w3-green w3-border w3-border-white">
Falcon
Ridge Parkway
</div>
</div>
बड़े संकेत
W3- आकार के वर्गों का उपयोग बड़े संकेत प्रदर्शित करने के लिए किया जा सकता है:
आपात स्थिति में: नरक
की तरह भागो!
उदाहरण
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
उदाहरण
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
गोल चिन्ह
w3-गोल- आकार की कक्षाओं का उपयोग गोल कोनों को एक चिन्ह में जोड़ने के लिए किया जा सकता है:
पानी के नीचेसांस न लें
उदाहरण
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
घूर्णन टैग
किसी चिह्न को घुमाने के लिए मानक CSS ट्रांस्फ़ॉर्म प्रॉपर्टी का उपयोग करें:
विरामउदाहरण
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
नोट: ट्रांसफ़ॉर्म: रोटेट () IE 9 और इससे पहले के संस्करणों में काम नहीं करता है।
कताई Tags
w3-स्पिन वर्ग का उपयोग किसी साइन को 360 डिग्री घूमने देने के लिए किया जा सकता है:
विरामउदाहरण
<span class="w3-tag w3-spin w3-large">
STOP
</span>