W3.CSS परिचय (रसोई सिंक)
W3.CSS रंग
W3-रंग की कक्षाएं मार्केटिंग, रोड साइन्स और स्टिकी नोट्स में उपयोग किए जाने वाले आधुनिक रंगों से प्रेरित हैं:
W3.CSS कंटेनर
W3- कंटेनर वर्ग W3.CSS कक्षाओं में सबसे महत्वपूर्ण है । यह समानता प्रदान करता है जैसे:
- सामान्य मार्जिन
- सामान्य पैडिंग
- सामान्य लंबवत संरेखण
- सामान्य क्षैतिज संरेखण
- सामान्य फोंट
- सामान्य रंग
W3- कंटेनर वर्ग आमतौर पर HTML कंटेनर तत्वों के साथ प्रयोग किया जाता है, जैसे:
<div>, <हेडर>, <पाद>, <लेख>, <अनुभाग>, <ब्लॉकक्वॉट>, <फॉर्म>, और बहुत कुछ।
यह एक शीर्षलेख है
यह लेख हल्का भूरा है और पाठ भूरा है। यह लेख हल्का भूरा है और पाठ भूरा है। यह लेख हल्का भूरा है और पाठ भूरा है। यह लेख हल्का भूरा है और पाठ भूरा है। यह लेख हल्का भूरा है और पाठ भूरा है।
यह एक पाद लेख है।
W3.CSS पैनल, नोट्स और उद्धरण
W3- पैनल वर्ग सभी प्रकार के नोट और उद्धरण प्रदर्शित कर सकता है:
9 मिलियन से अधिक निवासियों के महानगरीय क्षेत्र के साथ लंदन यूनाइटेड किंगडम का सबसे अधिक आबादी वाला शहर है।
9 मिलियन से अधिक निवासियों के महानगरीय क्षेत्र के साथ लंदन यूनाइटेड किंगडम का सबसे अधिक आबादी वाला शहर है।
W3.CSS अलर्ट
w3-panel वर्ग का उपयोग सभी प्रकार के अलर्ट के लिए भी किया जा सकता है:
खतरा!
लाल अक्सर खतरनाक या नकारात्मक स्थिति का संकेत देता है।
चेतावनी!
पीला अक्सर एक चेतावनी का संकेत देता है जिस पर ध्यान देने की आवश्यकता हो सकती है।
सफलता!
हरा अक्सर कुछ सफल या सकारात्मक इंगित करता है।
जानकारी!
नीला अक्सर एक तटस्थ सूचनात्मक परिवर्तन या कार्रवाई का संकेत देता है।
उदाहरण
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
W3.CSS कार्ड
W3- कार्ड कक्षाएं छवियों और नोट्स दोनों के लिए उपयुक्त हैं:
एक कार
कार एक पहिया, स्व-संचालित मोटर वाहन है जिसका उपयोग परिवहन के लिए किया जाता है। शब्द की अधिकांश परिभाषाएँ निर्दिष्ट करती हैं कि कारों को मुख्य रूप से सड़कों पर चलने के लिए, एक से आठ लोगों के बैठने के लिए, और आमतौर पर चार पहियों के लिए डिज़ाइन किया गया है।
(विकिपीडिया)
अद्भुत
फ्रेंच आल्प्स
उदाहरण
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
W3.CSS टेबल्स
W3- तालिका वर्ग सभी प्रकार की तालिकाओं को संभाल सकता है:
| पहला नाम | अंतिम नाम | अंक |
|---|---|---|
| जील | लोहार | 50 |
| पूर्व संध्या | जैक्सन | 94 |
| एडम | जॉनसन | 67 |
| अंजा | सुराख | 100 |
उदाहरण
<table class="w3-table w3-striped w3-border">
W3.CSS सूचियाँ
w3-ul वर्ग सभी प्रकार की सूचियों को संभाल सकता है:
-
माइक
वेब डिज़ाइनर -
जिल
समर्थन -
जेन
एकाउंटेंट -
जैक
सलाहकार
उदाहरण
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
W3.CSS बटन
W3- बटन और w3-btn वर्ग सभी आकारों और प्रकारों के बटन प्रदान करता है।
चौड़े बटन:
गोलाकार या चौकोर बटन:
W3.CSS टैग, लेबल, बैज और संकेत
W3- टैग और w3-बैज वर्ग सभी प्रकार के टैग, लेबल, बैज और संकेत प्रदर्शित करने में सक्षम हैं:
2 8 ए बी
नया चेतावनी खतरा जानकारी
सांस न लें
W3.CSS उत्तरदायी
रिस्पॉन्सिव ग्रिड क्लासेस सभी डिवाइस प्रकारों के लिए रिस्पॉन्सिवनेस प्रदान करती हैं: पीसी, लैपटॉप, टैबलेट और मोबाइल।
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
विश्राम
1/4
विश्राम
100px
45px
विश्राम
W3.CSS छोटे, मध्यम और बड़े वर्गों के साथ 12 कॉलम मोबाइल-फर्स्ट फ्लुइड ग्रिड का भी समर्थन करता है।
W3.CSS डिस्प्ले
W3-डिस्प्ले कक्षाएं आपको HTML तत्वों को विशिष्ट स्थितियों में प्रदर्शित करने की अनुमति देती हैं :
W3.CSS मोडल
W3- मोडल वर्ग शुद्ध HTML में मोडल डायलॉग प्रदान करता है:
मोडल छवि:
W3.CSS प्रोग्रेस बार्स
W3.CSS प्रोग्रेस बार्स पर और पढ़ें
W3.CSS ड्रॉपडाउन
W3- ड्रॉपडाउन कक्षाएं ड्रॉपडाउन प्रदान करती हैं:
W3.CSS समझौते
W3.CSS Accordions पर और पढ़ें
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
W3.CSS टैब्स
टैब एकल पृष्ठ वेब अनुप्रयोगों के लिए, या विभिन्न विषयों को प्रदर्शित करने में सक्षम वेब पृष्ठों के लिए एकदम सही हैं।
लंडन
लन्दन इंग्लैंड की राजधानी है।
यह 9 मिलियन से अधिक निवासियों के महानगरीय क्षेत्र के साथ यूनाइटेड किंगडम का सबसे अधिक आबादी वाला शहर है।
टैब्ड इमेज गैलरी (चित्रों में से किसी एक पर क्लिक करें):
W3.CSS नेविगेशन
नेविगेशन बार बनाने के लिए w3-bar वर्ग का उपयोग किया जा सकता है :
इनपुट के साथ नेविगेशन बार:>
ड्रॉपडाउन के साथ नेविगेशन बार:
W3- साइडबार वर्ग एक साइड नेविगेशन बनाता है:
W3.CSS पेजिनेशन
W3.CSS पेज पेजिनेशन के लिए सरल तरीके प्रदान करता है ।
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
Nature and sunrise
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
W3.CSS Images
Styling images in W3CSS is easy:
W3.CSS Effects
Add special effects to any element:
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:
Input Form
Input Form
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:
| Name | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Color Themes
Color themes can easily be added to any web application:
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Color themes are a perfect match for mobile applications.