في Tailwind CSS ، ' مربع الديكور كسر 'تحديد عرض خلفية العنصر والحدود والمساحة المتروكة عندما يمتد على عدة خطوط أو أعمدة. لها فئتان أي ' شريحة ' و ' استنساخ '. يمكن للمستخدمين استخدام خاصية 'box-decoration-break' مع نقاط التوقف واستعلامات الوسائط لتحديد كيفية تغيير تخطيط ومظهر العناصر بناءً على عرض الجهاز وتطبيق أنماط مختلفة بناءً على نقاط التوقف.
ستوضح هذه المقالة طريقة استخدام فاصل زخرفة الصندوق بنقاط التوقف واستعلامات الوسائط.
كيفية استخدام Box Decoration Break مع نقاط التوقف واستعلامات الوسائط في Tailwind؟
لاستخدام فاصل زخرفة المربع مع نقاط التوقف واستعلامات الوسائط ، يلزم تحديد قيم وأنماط مختلفة لأحجام الشاشات المختلفة في برنامج HTML. بعد ذلك ، قم بعرض صفحة الويب عن طريق تشغيل برنامج HTML للتحقق.
لفهم أفضل ، تحقق من الخطوات المذكورة أدناه:
الخطوة 1: استخدم نقاط التوقف واستعلامات الوسائط مع استراحة زخرفة الصندوق
قم بإنشاء برنامج HTML وحدد قيمًا وأنماط مختلفة لأحجام شاشات مختلفة. على سبيل المثال ، حددنا ' م ' و ' إل جي 'نقاط التوقف مع أسلوبهم:
< جسم >< فترة فصل = '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 'لتطبيق لون خلفية أصفر على العنصر من أجل' م 'نقطة توقف (شاشات متوسطة الحجم).
- ' lg: مربع-زخرفة-شريحة 'يعيّن تأثير التقطيع إلى زخرفة الصندوق لـ' إل جي 'نقطة توقف (شاشات كبيرة).
- ' نص أبيض 'يضبط اللون الأبيض على النص.
- ' نص 3xl 'يعين حجم الخط على 3xl.
- ' مقصف -2 'مساحة متروكة أفقية بمقدار 2 بكسل للعنصر .
الخطوة 2: تحقق من الإخراج
لضمان تطبيق استعلامات نقاط التوقف والوسائط بنجاح ، قم بتشغيل برنامج HTML واعرض صفحة الويب:
يمكن ملاحظة أن صفحة الويب تتغير وفقًا لنقاط التوقف واستعلامات الوسائط.
خاتمة
لاستخدام فاصل زخرفة مربع مع نقاط التوقف واستعلامات الوسائط في Tailwind ، أنشئ ملف HTML أولاً. بعد ذلك ، استخدم نقاط التوقف واستعلامات الوسائط في برنامج HTML من خلال تحديد قيم وأنماط مختلفة لأحجام الشاشات المختلفة. للتحقق ، قم بتشغيل برنامج HTML واعرض صفحة الويب. لقد أوضحت هذه المقالة طريقة استخدام فاصل زخرفة المربع بنقاط التوقف واستعلامات الوسائط.