یہ مضمون Tailwind میں 'کلیئر' یوٹیلیٹیز پر بریک پوائنٹس اور میڈیا کے سوالات کو لاگو کرنے کے طریقہ کار کی مثال دے گا۔
ٹیل ونڈ میں 'کلیئر' پر بریک پوائنٹس اور میڈیا سوالات کا استعمال کیسے کریں؟
Tailwind میں 'کلیئر' یوٹیلیٹیز پر مخصوص بریک پوائنٹس اور میڈیا کے سوالات کو لاگو کرنے کے لیے، ایک HTML ڈھانچہ بنائیں۔ پھر، مطلوبہ قدر کی وضاحت کریں ' واضح -
مثال
اس مثال میں، ہم استعمال کریں گے ' md 'کے ساتھ بریک پوائنٹ' واضح - دونوں 'افادیت اور' ایل جی 'کے ساتھ بریک پوائنٹ' واضح - کوئی نہیں 'میں افادیت' ' عنصر درمیانے اور بڑے اسکرین کے سائز پر اپنی پوزیشن کو تبدیل کرنے کے لیے:
< جسم >
< div کلاس = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' کلاس = 'فلوٹ-بائیں p-3 w-28 h-24' سب کچھ = 'تصویر' / >
< img src = 'tailwindcss_img.png' کلاس = 'فلوٹ دائیں p-3' سب کچھ = 'تصویر' / >
< ص کلاس = 'متن کا جواز صاف بائیں ایم ڈی:کلیئر دونوں ایل جی:کلیئر کوئی نہیں' > Tailwind CSS کسی عنصر کے گرد مواد کی ریپنگ کو کنٹرول کرنے کے لیے 'فلوٹ' یوٹیلیٹیز فراہم کرتا ہے۔
یہ مثال دکھائے گی کہ ٹیل ونڈ میں 'کلیئر' یوٹیلیٹی کے ساتھ بریک پوائنٹس اور میڈیا کے سوالات کیسے استعمال کیے جائیں۔ < / ص >
< / div >
< / جسم >
یہاں:
- 'بائیں طرف تیرنا' کلاس عناصر کو کنٹینر کے بائیں جانب تیرتا ہے۔
- 'فلوٹ دائیں' کلاس عناصر کو کنٹینر کے دائیں جانب تیرتا ہے۔
- 'صاف بائیں' کلاس
عنصر کو کنٹینر میں بائیں فلوٹ شدہ عنصر کے نیچے منتقل کرتا ہے۔
- 'ایم ڈی: واضح دونوں' کلاس بائیں اور دائیں دونوں فلوٹس کو صاف کرتا ہے اور ان کے نیچے
عنصر کو درمیانے اسکرین سائز پر رکھتا ہے۔
- 'lg:clear-none' کلاس
عنصر پر لاگو کسی بھی واضح کو غیر فعال کرتا ہے اور عنصر کو بڑی اسکرین کے سائز پر کنٹینر کے دونوں طرف تیرنے دیتا ہے۔
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ کے مطابق، مخصوص بریک پوائنٹس اور میڈیا کے سوالات کامیابی کے ساتھ 'کلیئر' یوٹیلیٹی پر لاگو کیے گئے ہیں۔
نتیجہ
Tailwind میں 'کلیئر' یوٹیلیٹیز پر بریک پوائنٹس اور میڈیا کے سوالات کو لاگو کرنے کے لیے، مطلوبہ قدر کی وضاحت کریں ' واضح -