टेलविंड सीएसएस में, प्रतिस्थापित तत्व वे तत्व हैं जिनकी सामग्री को बाहरी संसाधन, जैसे चित्र और वीडियो द्वारा प्रतिस्थापित किया जाता है। कभी-कभी, उपयोगकर्ताओं को कंटेनर के भीतर प्रतिस्थापित तत्व को रखने की चुनौती का सामना करना पड़ता है। ऐसा इसलिए है क्योंकि यदि इन तत्वों का आकार उपलब्ध स्थान से बड़ा है तो ये कंटेनर में ओवरफ्लो हो सकते हैं। टेलविंड सीएसएस यह नियंत्रित करने के लिए उपयोगिता कक्षाएं प्रदान करता है कि प्रतिस्थापित तत्व की सामग्री कंटेनर के भीतर कैसे स्थित और संरेखित है।
यह आलेख टेलविंड सीएसएस में एक कंटेनर के भीतर प्रतिस्थापित तत्वों को स्थापित करने की विधि का वर्णन करेगा।
टेलविंड में एक कंटेनर के भीतर बदले गए तत्वों की स्थिति कैसे तय करें?
टेलविंड में एक कंटेनर के भीतर प्रतिस्थापित तत्वों को रखने के लिए, एक HTML प्रोग्राम बनाएं और 'का उपयोग करें' वस्तु-<स्थिति/पक्ष> वांछित तत्वों के साथ उपयोगिताएँ। प्रतिस्थापित तत्वों को स्थान देने के लिए 'ऑब्जेक्ट-<स्थिति/पक्ष>' उपयोगिता में विशिष्ट पक्ष यानी बाएँ, दाएँ या केंद्र को परिभाषित करना आवश्यक है।
वाक्य - विन्यास
< तत्व कक्षा = 'वस्तु-<स्थिति/पक्ष>...' > ... तत्व >
उदाहरण
इस उदाहरण में, हम एक कंटेनर बनाएंगे और सभी का उपयोग करेंगे ' वस्तु-<स्थिति/पक्ष> 'के साथ उपयोगिताएँ' ” (छवि) तत्वों को कंटेनर के भीतर उनकी बदली हुई स्थिति निर्दिष्ट करने के लिए:
< शरीर >
< डिव कक्षा = 'बीजी-स्काई-300 ग्रिड ग्रिड-पंक्तियाँ-3 ग्रिड-फ्लो-कॉल एम-5 स्पेस-वाई-4 पी-4 जस्टिफाई-बीच' >
< आईएमजी कक्षा = 'ऑब्जेक्ट-कोई नहीं ऑब्जेक्ट-लेफ्ट-टॉप w-24 h-24 my-4' स्रोत = '637ए6सीईबीबी39डीसी3636110डी968बी0156351एफ411सी09एफ' >
< आईएमजी कक्षा = 'वस्तु-कोई नहीं वस्तु-बाएँ w-24 h-24' स्रोत = '637ए6सीईबीबी39डीसी3636110डी968बी0156351एफ411सी09एफ' >
< आईएमजी कक्षा = 'वस्तु-कोई नहीं वस्तु-बाएँ-नीचे w-24 h-24' स्रोत = '637ए6सीईबीबी39डीसी3636110डी968बी0156351एफ411सी09एफ' >
< आईएमजी कक्षा = 'ऑब्जेक्ट-कोई नहीं ऑब्जेक्ट-टॉप w-24 h-24' स्रोत = '637ए6सीईबीबी39डीसी3636110डी968बी0156351एफ411सी09एफ' >
< आईएमजी कक्षा = 'वस्तु-कोई नहीं वस्तु-केंद्र w-24 h-24' स्रोत = '637ए6सीईबीबी39डीसी3636110डी968बी0156351एफ411सी09एफ' >
< आईएमजी कक्षा = 'ऑब्जेक्ट-कोई नहीं ऑब्जेक्ट-बॉटम w-24 h-24' स्रोत = '637ए6सीईबीबी39डीसी3636110डी968बी0156351एफ411सी09एफ' >
< आईएमजी कक्षा = 'ऑब्जेक्ट-कोई नहीं ऑब्जेक्ट-राइट-टॉप w-24 h-24' स्रोत = '637ए6सीईबीबी39डीसी3636110डी968बी0156351एफ411सी09एफ' >
< आईएमजी कक्षा = 'ऑब्जेक्ट-कोई नहीं ऑब्जेक्ट-राइट w-24 h-24' स्रोत = '637ए6सीईबीबी39डीसी3636110डी968बी0156351एफ411सी09एफ' >
< आईएमजी कक्षा = 'ऑब्जेक्ट-कोई नहीं ऑब्जेक्ट-राइट-बॉटम w-24 h-24' स्रोत = '637ए6सीईबीबी39डीसी3636110डी968बी0156351एफ411सी09एफ' >
डिव >
शरीर >
यहां, मूल
- “ बीजी-आकाश-300 क्लास कंटेनर का पृष्ठभूमि रंग आसमान पर सेट करता है।
- “ ग्रिड क्लास ग्रिड लेआउट को सक्षम बनाता है।
- “ ग्रिड-पंक्तियाँ-3 क्लास ग्रिड में पंक्तियों की संख्या 3 पर सेट करता है।
- “ ग्रिड-प्रवाह-कर्नल क्लास कॉलम में ग्रिड आइटम के प्रवाह को परिभाषित करता है।
- “ एम 5 क्लास कंटेनर के चारों ओर मार्जिन की 5 इकाइयाँ जोड़ता है।
- “ स्पेस-वाई-4 क्लास कंटेनर के भीतर चाइल्ड
तत्वों के बीच 4 इकाइयों की ऊर्ध्वाधर दूरी जोड़ता है।
- “ पी 4 क्लास कंटेनर के अंदर सामग्री में पैडिंग की 4 इकाइयाँ जोड़ता है।
- “ औचित्य-बीच कक्षा कंटेनर के भीतर बाल तत्वों को संरेखित करती है और उन्हें समान रूप से वितरित करती है।
तत्वों में:
- “ वस्तु-कोई नहीं 'वर्ग तत्व पर कोई स्थिति लागू नहीं करता है और कंटेनर में तत्व को उसकी डिफ़ॉल्ट स्थिति में प्रदर्शित करता है।
- “ वस्तु-बाएँ-ऊपर वर्ग
तत्व को अपने कंटेनर के ऊपरी-बाएँ कोने में रखता है।
- “ वस्तु-बाएँ क्लास तत्व को कंटेनर के बाएं किनारे पर संरेखित करता है और इसे लंबवत रूप से केंद्रित रखता है।
- “ वस्तु-बाएँ-नीचे वर्ग
तत्व को अपने कंटेनर के निचले-बाएँ कोने में रखता है।
- “ वस्तु-शीर्ष क्लास तत्व को अपने कंटेनर के शीर्ष किनारे पर रखता है और इसे क्षैतिज रूप से केंद्रित करता है।
- “ वस्तु-केंद्र 'वर्ग तत्व को कंटेनर के केंद्र में रखता है और इसे क्षैतिज और लंबवत रूप से केंद्रित रखता है।
- “ वस्तु-तल क्लास तत्व को अपने कंटेनर के निचले किनारे पर रखता है और इसे क्षैतिज रूप से केंद्रित रखता है।
- “ वस्तु-दाएँ-शीर्ष क्लास
तत्व को कंटेनर के ऊपरी-दाएँ कोने में रखता है।
- “ वस्तु-सही वर्ग तत्व को अपने कंटेनर के दाहिने किनारे पर रखता है और इसे लंबवत रूप से केंद्रित रखता है।
- “ वस्तु-दाएँ-नीचे क्लास तत्व को अपने कंटेनर के निचले-दाएँ कोने में रखता है।
उत्पादन
उपरोक्त वेब पेज में, यह देखा जा सकता है कि सभी प्रतिस्थापित तत्व की सामग्री को सफलतापूर्वक तैनात किया गया है।
निष्कर्ष
टेलविंड में एक कंटेनर के भीतर प्रतिस्थापित तत्वों को स्थापित करने के लिए, ' वस्तु-<स्थिति/पक्ष> उपयोगिताओं का उपयोग छवियों जैसे वांछित तत्वों के साथ किया जाता है। उपयोगकर्ताओं को प्रतिस्थापित तत्वों को स्थान देने के लिए 'ऑब्जेक्ट-<स्थिति/पक्ष>' उपयोगिता में विशिष्ट स्थिति या पक्ष यानी बाएं, दाएं या केंद्र को परिभाषित करने की आवश्यकता है। इस आलेख में टेलविंड सीएसएस में एक कंटेनर के भीतर प्रतिस्थापित तत्वों को स्थापित करने की विधि का वर्णन किया गया है।