टेलविंड में पंक्तियों का विस्तार कैसे करें?

Telavinda Mem Panktiyom Ka Vistara Kaise Karem



टेलविंड सीएसएस में, पंक्ति अवधि एक तत्व को ग्रिड के भीतर दो या अधिक पंक्तियों पर कब्जा कर लेती है। इसका उपयोग यह परिभाषित करने के लिए किया जाता है कि किसी तत्व को कितनी पंक्तियाँ घेरनी/फैलनी चाहिए। यह उपयोगकर्ताओं को कई पंक्तियों में ग्रिड आइटम के आकार और स्थिति को समायोजित करने और विभिन्न लेआउट बनाने की अनुमति देता है। इसके अलावा, इसका उपयोग वेब पेजों के लिए लचीले और उत्तरदायी ग्रिड लेआउट बनाने के लिए किया जा सकता है।

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







टेलविंड में रो स्पैन कैसे बनाएं?

टेलविंड में पंक्तियों को विस्तारित करने के लिए, एक HTML प्रोग्राम बनाएं। फिर, 'का उपयोग करें पंक्ति-अवधि-<मूल्य> ” उपयोगिता और विस्तार की जाने वाली पंक्तियों की संख्या को परिभाषित करें। प्रत्येक विशिष्ट तत्व में पंक्तियों की संख्या को परिभाषित करना आवश्यक है। अंत में, सत्यापन के लिए HTML वेब पेज पर परिवर्तन देखें।



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



चरण 1: HTML प्रोग्राम में कॉलम स्पैन बनाएं

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





< शरीर >

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

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

< / डिव >

< / शरीर >

यहां, मूल

तत्व में:

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

चाइल्ड

तत्वों में:



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

चरण 2: आउटपुट सत्यापित करें

यह सत्यापित करने के लिए HTML वेब पेज देखें कि पंक्ति अवधि लागू की गई है या नहीं:

उपरोक्त आउटपुट में, यह देखा जा सकता है कि पंक्ति अवधि को उसके अनुसार सफलतापूर्वक लागू किया गया है जिसके अनुसार इसे निर्दिष्ट किया गया था।

निष्कर्ष

टेलविंड में पंक्तियों को विस्तारित करने के लिए, ' का उपयोग करें पंक्ति-अवधि-<मूल्य> HTML प्रोग्राम में उपयोगिता और प्रत्येक तत्व में फैली पंक्तियों की संख्या निर्दिष्ट करें। सत्यापन के लिए, HTML वेब पेज पर परिवर्तन देखें। इस लेख में टेलविंड सीएसएस में पंक्तियों को विस्तारित करने की विधि का उदाहरण दिया गया है।