यह ब्लॉग टेलविंड में कई तत्वों के बीच समान स्थान आवंटित करने का विचार प्रदान करेगा।
टेलविंड में एकाधिक तत्वों के बीच समान स्थान कैसे निर्दिष्ट करें?
उपयोगकर्ता 'का उपयोग करके तत्वों के बीच समान स्थान निर्दिष्ट कर सकते हैं स्थान-{x/y}-{आकार} 'उपयोगिता वर्ग। उपयोगकर्ता पूर्णांक मान निर्दिष्ट करके x या y-अक्ष पर स्थान जोड़ सकते हैं। रिक्ति उपयोगिता आवश्यक है क्योंकि यह वेब पेज को आकर्षक बनाती है। यदि किसी वेबपेज में तत्वों के बीच उचित दूरी नहीं है, तो यह उपयोगकर्ताओं को आकर्षित नहीं करेगा।
आइए ग्रिड तत्वों के बीच समान स्थान निर्दिष्ट करने के लिए एक कोड उदाहरण लें।
विधि 1: एक्स-अक्ष पर स्थान निर्दिष्ट करना।
एक्स-अक्ष पर निर्दिष्ट समान स्थान तत्व के दाएं और बाएं समान अंतर बनाता है। x-अक्ष पर स्थान निर्दिष्ट करने के लिए निम्नलिखित सिंटैक्स का उपयोग करें:
अंतरिक्ष - एक्स - { आकार }
आकार कोई भी पूर्णांक मान हो सकता है.
x-अक्ष पर समान स्थान निर्दिष्ट करने के लिए नीचे दिए गए कोड पर विचार करें:
< शरीर >< डिव कक्षा = 'एमएक्स-4 ग्रिड ग्रिड-कोल्स-4 स्पेस-एक्स-4' >
< डिव कक्षा = 'बीजी-ग्रीन-400 एच-16 राउंडेड-एलजी बॉर्डर-2 बॉर्डर-ग्रीन-800' > 1 डिव >
< डिव कक्षा = 'बीजी-ग्रीन-400 एच-16 राउंडेड-एलजी बॉर्डर-2 बॉर्डर-ग्रीन-800' > 2 डिव >
< डिव कक्षा = 'बीजी-ग्रीन-400 एच-16 राउंडेड-एलजी बॉर्डर-2 बॉर्डर-ग्रीन-800' > 3 डिव >
< डिव कक्षा = 'बीजी-ग्रीन-400 एच-16 राउंडेड-एलजी बॉर्डर-2 बॉर्डर-ग्रीन-800' > 4 डिव >
डिव >
शरीर >
इस कोड में:
- “ एमएक्स-4 ” x-अक्ष (दाएँ और बाएँ) पर 4 px का मार्जिन जोड़ता है।
- “ ग्रिड 'कक्षा एक ग्रिड बनाती है।
- “ ग्रिड-कॉल्स-4 ग्रिड में 4 कॉलम बनाएं।
- “ स्पेस-x-4 ग्रिड के तत्वों के बीच 4px स्थान जोड़ता है।
- “ बीजी-हरा-400 'पृष्ठभूमि का रंग हरा पर सेट करता है।
- “ एच-16 ऊंचाई को 16px पर सेट करता है।
- “ गोलाकार-एल.जी कोने को गोल बनाता है और बॉर्डर का दायरा बड़ा होता है।
- “ सीमा-2 'तत्व के चारों ओर 2px बॉर्डर बनाता है।
- “ सीमा-हरा-800 “बॉर्डर को गहरा हरा बनाता है।
उत्पादन
उपरोक्त कोड द्वारा बनाए गए आउटपुट का पूर्वावलोकन करें:
यह देखा जा सकता है कि तत्वों के बीच 4px का अंतर दिया गया है।
विधि 2: y-अक्ष पर स्थान निर्दिष्ट करना।
उपरोक्त कोड में छोटे बदलाव करके, उपरोक्त विधि के समान y-अक्ष पर रिक्ति निर्दिष्ट की जा सकती है। यह y-अक्ष (ऊपर और नीचे) के साथ स्थान निर्दिष्ट करता है। इसके लिए वाक्यविन्यास है:
y-अक्ष के साथ रिक्त स्थान जोड़ने के लिए नीचे दिए गए कोड को लागू किया जा सकता है:
< शरीर >< डिव कक्षा = 'एमएक्स-4 माई-4 स्पेस-वाई-4' >
< डिव कक्षा = 'बीजी-ग्रीन-400 एच-16 राउंडेड-एलजी बॉर्डर-2 बॉर्डर-ग्रीन-800' > 1 डिव >
< डिव कक्षा = 'बीजी-ग्रीन-400 एच-16 राउंडेड-एलजी बॉर्डर-2 बॉर्डर-ग्रीन-800' > 2 डिव >
< डिव कक्षा = 'बीजी-ग्रीन-400 एच-16 राउंडेड-एलजी बॉर्डर-2 बॉर्डर-ग्रीन-800' > 3 डिव >
< डिव कक्षा = 'बीजी-ग्रीन-400 एच-16 राउंडेड-एलजी बॉर्डर-2 बॉर्डर-ग्रीन-800' > 4 डिव >
डिव >
शरीर >
इस कोड में:
- “ एमएक्स-4 आउटपुट को अधिक अनुकूलित बनाने के लिए तत्वों के बाएँ और दाएँ में 4px मार्जिन जोड़ता है।
- “ मेरा-4 ” y-अक्ष (ऊपर और नीचे) पर 4px मार्जिन जोड़ता है।
- “ स्पेस-वाई-4 ” y-अक्ष (ऊपर और नीचे) पर 4px का स्थान जोड़ता है।
उत्पादन
उपरोक्त कोड को सहेजें और रिक्ति देखने के लिए इसके द्वारा बनाए गए वेबपेज का पूर्वावलोकन करें:
यह सब तत्वों के बीच समान स्थान आवंटित करने के बारे में है।
निष्कर्ष
टेलविंड में कई तत्वों के बीच समान स्थान आवंटित करने के लिए, उपयोगकर्ता 'का उपयोग कर सकते हैं स्थान-{x/y}-{आकार} ” उपयोगिता वर्ग और आवश्यकता के अनुसार आकार के रूप में एक पूर्णांक मान निर्दिष्ट करें। तत्वों के बीच समान अंतर आउटपुट को अधिक स्केलेबल बनाता है और दर्शक वेबपेज से जुड़े रहते हैं। इस पोस्ट में टेलविंड में कई तत्वों के बीच समान स्थान आवंटित करने की विधि प्रदान की गई है।