“ h-स्क्रीन टेलविंड में क्लास का उपयोग HTML तत्व को व्यूपोर्ट ऊंचाई निर्दिष्ट करने के लिए किया जाता है। व्यूपोर्ट क्लाइंट के स्क्रीन आकार का दूसरा नाम है। डेवलपर इसकी मदद से आसानी से पूरे व्यूपोर्ट का चयन कर सकता है। h-स्क्रीन ” कक्षा और फिर उसके अनुसार कई टेलविंड कक्षाएं लागू करें।
यह आलेख 'टेलविंड' का उपयोग करके किसी तत्व में व्यूपोर्ट ऊंचाई जोड़ने की प्रक्रिया प्रदान करेगा। h-स्क्रीन ' कक्षा।
टेलविंड में 'एच-स्क्रीन' क्लास का उपयोग करके किसी तत्व की व्यूपोर्ट ऊंचाई कैसे सेट करें?
यदि किसी तत्व को ' का उपयोग करके व्यूपोर्ट ऊंचाई निर्दिष्ट की गई है h-स्क्रीन 'क्लास, यह क्लाइंट की स्क्रीन के अनुसार अपनी ऊंचाई संपत्ति को स्वचालित रूप से समायोजित करेगा। टेलविंड में व्यूपोर्ट ऊंचाई का उपयोग करने के लिए, नीचे दिए गए कन्वेंशन का पालन करें:
< डिव कक्षा = 'एच-स्क्रीन' > नमस्ते < / डिव >
उपरोक्त प्रदर्शन से यह स्पष्ट है कि ' h-स्क्रीन लेआउट को डिजाइन करने के लिए विभिन्न अन्य टेलविंड कक्षाओं के साथ तत्व की वर्ग विशेषता में उपयोग किया जाता है।
आइए एक डमी डैशबोर्ड बनाएं, और डैशबोर्ड स्क्रीन के साइडबार को एक व्यूपोर्ट ऊंचाई दें।
< डिव कक्षा = 'मोड़ना' >
< डिव कक्षा = 'डब्ल्यू-56 एच-स्क्रीन राउंडेड-एलजी बीजी-ब्लू-600 टेक्स्ट-सेंटर टेक्स्ट-सियान-50 पीवाई-6 टेक्स्ट-2एक्सएल फॉन्ट-बोल्ड' >डैशबोर्ड
< उल कक्षा = 'टेक्स्ट-एलजी पीवाई-8 स्पेस-वाई-7' >
< वह >टीम< / वह >
< वह >प्रोजेक्ट्स< / वह >
< वह >रिपोर्ट< / वह >
< वह >दस्तावेज़< / वह >
< / उल >
< / डिव >
< डिव कक्षा = 'पाठ-केंद्र पाठ-3xl py-8 ps-5' >डैशबोर्ड में आपका स्वागत है!< / डिव >
< / डिव >
कोड की व्याख्या:
- पहले एक ' डिव 'तत्व' की श्रेणी के साथ बनाया गया है मोड़ना ”, यह वर्ग जीवित वस्तुओं को एक क्षैतिज रेखा में संरेखित करता है।
- अगला, एक और बनाएं ” डिव 'का उपयोग करके 8px शीर्ष और नीचे पैडिंग के साथ' पाई-2 'वर्ग और इसे' का उपयोग करके एक निश्चित चौड़ाई आवंटित करें डब्ल्यू-56 ' कक्षा। इसके बाद, तत्व की ऊंचाई को व्यूपोर्ट की ऊंचाई पर '' के साथ सेट करें h-स्क्रीन ' कक्षा। कंटेनर के कोनों को गोल करके सेट किया गया है।
- “ बीजी-{रंग}-{संख्या} 'क्लास का उपयोग कंटेनर को पृष्ठभूमि रंग प्रदान करने के लिए किया जाता है। “ पाठ-केंद्र 'वर्ग पाठ्य सामग्री को केंद्र में संरेखित करता है। पाठ के लिए फ़ॉन्ट-भार 'पर सेट है' बोल्ड ', और फ़ॉन्ट का आकार ' है 2xl ”।
- इसके बाद, एक अव्यवस्थित सूची “< उल >' बड़े फ़ॉन्ट आकार और ' के साथ बनाया गया है 48px 'स्पेस-वाई' टेलविंड क्लास का उपयोग करके मार्जिन-टॉप।
- फिर, '<' का उपयोग करके चार सूची आइटम बनाए जाते हैं वह >” टैग।
- एक और ' डिव 'तत्व 32px टॉप-बॉटम और 20px इनलाइन-स्टार्ट पैडिंग के साथ बनाया गया है' का उपयोग करके पाइ' और 'पी.एस “कक्षाएँ।
ऊपर बताए गए कोड का आउटपुट इस प्रकार है:
उपरोक्त आउटपुट से, यह स्पष्ट है कि डैशबोर्ड साइडबार में स्क्रीन की व्यूपोर्ट ऊंचाई है। यह सब 'के उद्देश्य के बारे में है h-स्क्रीन टेलविंड में कक्षा।
निष्कर्ष
“ h-स्क्रीन टेलविंड में क्लास का उपयोग किसी तत्व को व्यूपोर्ट ऊंचाई यानी क्लाइंट की स्क्रीन की ऊंचाई निर्दिष्ट करने के लिए किया जाता है। का उपयोग ' h-स्क्रीन 'वर्ग, तत्व स्वचालित रूप से स्क्रीन की ऊंचाई प्राप्त करेगा। टेलविंड में व्यूपोर्ट ऊंचाई का उपयोग करने के लिए, ' h-स्क्रीन 'संपत्ति को' के लिए एक मूल्य के रूप में पारित किया जाना चाहिए कक्षा ' विशेषता जैसे '< डिव क्लास = 'एच-स्क्रीन '>'। इस आलेख में '' का उपयोग करने की प्रक्रिया प्रदान की गई है h-स्क्रीन टेलविंड में कक्षा।