टेलविंड में कॉलम ग्रिड पर होवर कैसे लगाएं?

Telavinda Mem Kolama Grida Para Hovara Kaise Laga Em



टेलविंड सीएसएस में, कॉलम ग्रिड प्रॉपर्टी प्रतिक्रियाशील कॉलम-आधारित लेआउट बनाने के लिए उपयोगिता कक्षाएं प्रदान करती है। यह उपयोगकर्ताओं को कॉलम की संख्या निर्दिष्ट करने, कॉलम की चौड़ाई समायोजित करने और बहुत कुछ करने की अनुमति देता है। इसके अलावा, उपयोगकर्ता शैलियों को लागू करने या ग्रिड आइटम पर माउस ले जाने पर कॉलम की संख्या को बदलने के लिए 'ग्रिड-कॉल्स' उपयोगिताओं पर होवर प्रभाव भी लागू कर सकते हैं।

यह आलेख टेलविंड सीएसएस में कॉलम ग्रिड पर होवर प्रभाव लागू करने की विधि प्रदर्शित करेगा।

टेलविंड में कॉलम ग्रिड पर होवर कैसे लगाएं?

टेलविंड में कॉलम ग्रिड पर होवर प्रभाव लागू करने के लिए, एक HTML फ़ाइल बनाएं और 'का उपयोग करें' मंडराना 'के साथ कक्षा' ग्रिड-कॉल्स-<मूल्य> HTML प्रोग्राम में उपयोगिता। जब माउस कॉलम ग्रिड पर घूमेगा तो यह कॉलम की संख्या बदल देगा। इसके बाद, वेब HTML पेज देखें और परिवर्तनों को सत्यापित करने के लिए ग्रिड आइटम पर माउस घुमाएँ।







व्यावहारिक कार्यान्वयन के लिए दिए गए चरणों का पालन करें:



चरण 1: HTML प्रोग्राम में कॉलम ग्रिड के साथ होवर प्रॉपर्टी का उपयोग करें
एक HTML प्रोग्राम बनाएं और 'का उपयोग करें' मंडराना 'संपत्ति के साथ' ग्रिड-कॉल्स-<मूल्य> ' उपयोगिता। उदाहरण के लिए, हमने 'का उपयोग किया है होवर:ग्रिड-कॉल्स-5 होवर पर कॉलम की संख्या बदलने के लिए 'संपत्ति:



< शरीर >

< डिव कक्षा = 'ग्रिड ग्रिड-कॉल्स-3 होवर:ग्रिड-कॉल्स-5 गैप-3 एम-3 टेक्स्ट-सेंटर' >

< डिव कक्षा = 'बीजी-टील-500 पी-5' > 1 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 2 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 3 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 4 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 5 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 6 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 7 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 8 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 9 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 10 < / डिव >

< / डिव >

< / शरीर >

यहां, मूल

तत्व में:





  • जाल 'क्लास का उपयोग ग्रिड लेआउट बनाने के लिए किया जाता है।
  • ग्रिड-कॉल्स-3 'वर्ग निर्दिष्ट करता है कि ग्रिड में 3 समान आकार के कॉलम होने चाहिए।
  • होवर:ग्रिड-कॉल्स-5 'क्लास निर्दिष्ट करता है कि जब माउस उस पर घूमता है तो ग्रिड को 5 समान आकार के कॉलम में बदला जाना चाहिए।
  • गैप -3 क्लास प्रत्येक ग्रिड आइटम के बीच 3 इकाइयों का अंतर निर्धारित करता है।
  • एम 3 क्लास ग्रिड कंटेनर के चारों ओर 3 इकाइयों का मार्जिन लागू करता है।
  • पाठ-केंद्र क्लास प्रत्येक ग्रिड आइटम के टेक्स्ट को केंद्र में सेट करता है।

चाइल्ड

तत्वों में:

  • 'ग्रिड आइटमों की संख्या का प्रतिनिधित्व करता है।
  • बीजी-टील-500 क्लास ग्रिड आइटम की पृष्ठभूमि पर चैती रंग सेट करता है।
  • पी-5 क्लास चाइल्ड
    आइटम के अंदर सामग्री में 5 इकाइयों की पैडिंग जोड़ता है।

चरण 2: आउटपुट सत्यापित करें
यह सुनिश्चित करने के लिए कि कॉलम ग्रिड पर होवर प्रभाव लागू किया गया है, वेब पेज देखें, और माउस को ग्रिड आइटम पर ले जाएँ:



यह देखा जा सकता है कि जब माउस ग्रिड आइटम पर घूमता है, तो कॉलम की संख्या बदल जाती है। यह इंगित करता है कि होवर प्रभाव कॉलम ग्रिड पर सफलतापूर्वक लागू किया गया है।

निष्कर्ष

टेलविंड में कॉलम ग्रिड पर होवर प्रभाव लागू करने के लिए, 'का उपयोग करें मंडराना 'के साथ कक्षा' ग्रिड-कॉल्स-<मूल्य> HTML प्रोग्राम में उपयोगिता। यह होवर पर कॉलमों की संख्या बदल देता है। परिवर्तन सुनिश्चित करने के लिए, वेब HTML पेज देखें और ग्रिड आइटम पर माउस घुमाएँ। इस आलेख में टेलविंड सीएसएस में कॉलम ग्रिड पर होवर प्रभाव लागू करने की विधि प्रदर्शित की गई है।