टेलविंड में बैकग्राउंड क्लिप के साथ ब्रेकप्वाइंट और मीडिया क्वेरीज़ का उपयोग कैसे करें

Telavinda Mem Baikagra Unda Klipa Ke Satha Brekapva Inta Aura Midiya Kveriza Ka Upayoga Kaise Karem



किसी वेब पेज में अलग-अलग अनुभाग बनाते समय, ऐसे परिदृश्य हो सकते हैं जहां प्रोग्रामर को सामग्री जमा करने के लिए पृष्ठभूमि को क्लिप करने या इसे संशोधित करने की आवश्यकता होती है। यह पद्धति संलग्न सामग्री को प्रभावी ढंग से प्रबंधित करने के साथ-साथ विभिन्न पृष्ठ अनुभागों को स्टाइल करने में सहायक है।

यह ब्लॉग निम्नलिखित मूल अवधारणाओं पर विस्तार से बताता है:

टेलविंड में बैकग्राउंड क्लिप के साथ ब्रेकप्वाइंट और मीडिया क्वेरीज़ का उपयोग/उपयोग कैसे करें?

बीजी-क्लिप-{कीवर्ड} उपयोगिता का उपयोग तत्व की पृष्ठभूमि के बाउंडिंग बॉक्स को सेट करने के लिए किया जाता है। इस उपयोगिता का उपयोग कई गुणों के साथ किया जा सकता है, जैसे ' गद्दी-बॉक्स ', ' बॉर्डर-बॉक्स ', ' सामग्री बॉक्स ', और ' पाठ बॉक्स ”।







उदाहरण 1: टेलविंड में बैकग्राउंड क्लिप के साथ ब्रेकप्वाइंट लागू करना

यह उदाहरण लागू 'के माध्यम से पृष्ठभूमि क्लिप के साथ ब्रेकप्वाइंट लागू करता है' बीजी-क्लिप-{कीवर्ड} 'के साथ उपयोगिता' एमडी 'यानी, मध्यम आकार की स्क्रीन और' एलजी यानी, बड़े आकार की स्क्रीन कक्षाएं:




< एचटीएमएल >
< सिर >
< मेटा charset = 'यूटीएफ-8' >
< मेटा नाम = 'व्यूपोर्ट' सामग्री = 'चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1' >
< लिखी हुई कहानी स्रोत = 'https://cdn.tailwindcss.com' < / लिखी हुई कहानी >
< / सिर >
< शरीर >
< पाठ क्षेत्र कक्षा = 'बीजी-क्लिप-बॉर्डर पी-6 बीजी-पीला-500 बॉर्डर-4 बॉर्डर-लाल-500 बॉर्डर-डैश्ड एमडी: बीजी-क्लिप-टेक्स्ट एलजी: बीजी-क्लिप-पैडिंग' > यह टेलविंड सीएसएस है < / पाठ क्षेत्र >
< / शरीर >
< / एचटीएमएल >

इन कोड पंक्तियों के अनुसार:



  • सबसे पहले, टेलविंड कार्यात्मकताओं का उपयोग करने के लिए सीडीएन पथ निर्दिष्ट करें।
  • फिर, एक '