Tailwind CSS میں، ' باکس-سجاوٹ-بریک ' پراپرٹی کسی عنصر کے پس منظر، بارڈر، اور پیڈنگ کی رینڈرنگ کا تعین کرتی ہے جب یہ متعدد لائنوں یا کالموں پر پھیلا ہوا ہے۔ اس کی دو کلاسیں ہیں یعنی ' ٹکڑا 'اور' کلون ' صارف بریک پوائنٹس اور میڈیا سوالات کے ساتھ 'باکس-ڈیکوریشن-بریک' پراپرٹی کا استعمال کر سکتے ہیں تاکہ یہ تعین کیا جا سکے کہ آلے کی چوڑائی کے لحاظ سے عناصر کی ترتیب اور ظاہری شکل کس طرح تبدیل ہوتی ہے اور بریک پوائنٹس کی بنیاد پر مختلف طرزیں لاگو کرتے ہیں۔
یہ مضمون بریک پوائنٹس اور میڈیا کے سوالات کے ساتھ باکس ڈیکوریشن بریک استعمال کرنے کے طریقہ کار کو ظاہر کرے گا۔
ٹیل ونڈ میں بریک پوائنٹس اور میڈیا سوالات کے ساتھ باکس ڈیکوریشن بریک کا استعمال کیسے کریں؟
بریک پوائنٹس اور میڈیا کے سوالات کے ساتھ باکس ڈیکوریشن بریک استعمال کرنے کے لیے، HTML پروگرام میں مختلف اسکرین سائزز کے لیے مختلف اقدار اور اسٹائل کی وضاحت کرنا ضروری ہے۔ پھر، تصدیق کے لیے HTML پروگرام چلا کر ویب صفحہ دیکھیں۔
بہتر تفہیم کے لیے، ذیل میں دیے گئے اقدامات کو دیکھیں:
مرحلہ 1: باکس ڈیکوریشن بریک کے ساتھ بریک پوائنٹس اور میڈیا سوالات کا استعمال کریں۔
ایک HTML پروگرام بنائیں اور اسکرین کے مختلف سائز کے لیے مختلف اقدار اور اسٹائل کی وضاحت کریں۔ مثال کے طور پر، ہم نے ' md 'اور' ایل جی ان کے اسٹائل کے ساتھ بریک پوائنٹس:
< جسم >< مدت کلاس = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
ہیلو < بی آر />
لینکس < بی آر />
اشارہ
مدت >
جسم >
یہاں:
- ' bg-teal-600 ” نیلے رنگ کو پس منظر پر سیٹ کرتا ہے۔
- ' باکس-سجاوٹ-کلون ” ایک حسب ضرورت کلاس ہے جو کلوننگ باکس کی سجاوٹ کے لیے استعمال ہوتی ہے۔
- ' md:bg-yellow-500 ' کے لیے عنصر پر پیلے رنگ کے پس منظر کا رنگ لاگو ہوتا ہے md بریک پوائنٹ (درمیانے سائز کی اسکرینیں)۔
- ' ایل جی: باکس ڈیکوریشن سلائس 'کے لئے باکس کی سجاوٹ پر ایک سلائسنگ اثر مرتب کرتا ہے' ایل جی بریک پوائنٹ (بڑی اسکرینز)۔
- ' متن سفید ” متن پر سفید رنگ سیٹ کرتا ہے۔
- ' text-3xl فونٹ کا سائز 3xl پر سیٹ کرتا ہے۔
- ' px-2 عنصر میں 2 پکسلز کی افقی پیڈنگ شامل کرتا ہے۔
مرحلہ 2: آؤٹ پٹ کی تصدیق کریں۔
اس بات کو یقینی بنانے کے لیے کہ بریک پوائنٹس اور میڈیا کے سوالات کامیابی کے ساتھ لاگو ہو گئے ہیں، HTML پروگرام چلائیں، اور ویب صفحہ دیکھیں:
یہ دیکھا جا سکتا ہے کہ ویب صفحہ تبدیل ہو رہا ہے جس کے مطابق بریک پوائنٹس اور میڈیا کے سوالات کی وضاحت کی گئی تھی۔
نتیجہ
Tailwind میں بریک پوائنٹس اور میڈیا کے سوالات کے ساتھ باکس ڈیکوریشن بریک استعمال کرنے کے لیے، پہلے ایک HTML فائل بنائیں۔ اس کے بعد، HTML پروگرام میں بریک پوائنٹس اور میڈیا کے سوالات کو مختلف اقدار اور مختلف اسکرین سائزز کے لیے اسٹائل بتا کر استعمال کریں۔ تصدیق کے لیے، HTML پروگرام چلائیں اور ویب صفحہ دیکھیں۔ اس مضمون میں بریک پوائنٹس اور میڈیا کے سوالات کے ساتھ باکس ڈیکوریشن بریک استعمال کرنے کا طریقہ دکھایا گیا ہے۔