टेलविंड में ग्रिड ऑटो फ्लो पर होवर कैसे लागू करें?

Telavinda Mem Grida Oto Phlo Para Hovara Kaise Lagu Karem



टेलविंड सीएसएस में, ग्रिड कंटेनर के भीतर ग्रिड आइटम के स्वचालित प्लेसमेंट व्यवहार को नियंत्रित करने के लिए 'ग्रिड-ऑटो-फ्लो' उपयोगिता वर्ग का उपयोग किया जाता है। डिफ़ॉल्ट रूप से, 'ग्रिड-ऑटो-फ्लो' एक पंक्ति में सेट होता है लेकिन उपयोगकर्ता इसे कॉलम में बदल सकते हैं। इसके अलावा, उपयोगकर्ता शैलियों को लागू करने या ग्रिड आइटमों पर माउस ले जाने पर उनके स्थान को बदलने के लिए 'ग्रिड-पंक्तियों' उपयोगिताओं पर होवर प्रॉपर्टी का भी उपयोग कर सकते हैं।

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

टेलविंड में ग्रिड ऑटो फ्लो पर होवर कैसे लागू करें?

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







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



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



< शरीर >

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

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

< / डिव >

< / शरीर >

यहाँ:





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

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



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

निष्कर्ष

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