تنبيهات W3.CSS
تعتبر فئة w3-panel هي الفئة المثالية لعرض جميع أنواع التنبيهات:
خطر!
غالبًا ما يشير اللون الأحمر إلى موقف خطير أو سلبي.
غالبًا ما يتم عرض التنبيهات باستخدام لون قوي:
خطر!
غالبًا ما يشير اللون الأحمر إلى موقف خطير أو سلبي.
مثال
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
عرض التحذيرات
تحذير!
غالبًا ما يشير اللون الأصفر إلى تحذير قد يحتاج إلى الاهتمام.
تحذير!
غالبًا ما يشير اللون الأصفر إلى تحذير قد يحتاج إلى الاهتمام.
مثال
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
عرض النجاحات
نجاح!
غالبًا ما يشير اللون الأخضر إلى شيء ناجح أو إيجابي.
نجاح!
غالبًا ما يشير اللون الأخضر إلى شيء ناجح أو إيجابي.
مثال
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
عرض المعلومات
معلومات!
غالبًا ما يشير اللون الأزرق إلى تغيير أو إجراء إعلامي محايد.
معلومات!
غالبًا ما يشير اللون الأزرق إلى تغيير أو إجراء إعلامي محايد.
مثال
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
باستخدام الحاوية
يمكن أيضًا استخدام فئة w3-container لعرض التنبيهات:
مثال
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
تنبيهات بكل الألوان
غالبًا ما يتم عرض التنبيهات بألوان خاصة ، ولكن يمكن استخدام أي لون:
خطر!
غالبًا ما يشير اللون الأحمر إلى موقف خطير أو سلبي.
خطر!
غالبًا ما يشير اللون الأحمر إلى موقف خطير أو سلبي.
خطر!
غالبًا ما يشير اللون الأحمر إلى موقف خطير أو سلبي.
خطر!
غالبًا ما يشير اللون الأحمر إلى موقف خطير أو سلبي.
خطر!
غالبًا ما يشير اللون الأحمر إلى موقف خطير أو سلبي.
مثال
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
تنبيهات الإغلاق
لإغلاق مربع التنبيه ، انقر فوق X في الزاوية اليمنى العليا:
خطر!
غالبًا ما يشير اللون الأحمر إلى موقف خطير أو سلبي.
لإنشاء علامة X التي تغلق التنبيه ، أضف عنصر <span> مع فئة w3 -button وحدث onclick :
مثال
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
نصيحة: HTML & times؛ الكيان هو الرمز المفضل لأزرار الإغلاق (بدلاً من الحرف "X").
تنبيهات مدورة
استخدم فئات w3-round إذا كنت تريد زوايا دائرية:
نجاح!
هنا يتم استخدام w3-round.
نجاح!
هنا يتم استخدام w3-round-large.
نجاح!
هنا يتم استخدام w3-round-xxlarge.
مثال
<div class="w3-panel w3-green w3-round">
تنبيه كبطاقة
استخدم فئة بطاقة w3 إذا كنت تريد عرض التنبيه كبطاقة:
تحذير!
غالبًا ما يشير اللون الأصفر إلى شيء يحتاج إلى الاهتمام.
مثال
<div class="w3-panel w3-yellow w3-card-4">