انتقل إلى محتوى الدرس

Base Button Class Variants كلاس الزر الأساسي وألوانه

أتقن تصميم الأزرار وزر الإغلاق في بوتستراب 5.3 من الألوان الدلالية والأزرار المفرغة والأحجام إلى أزرار العرض الكامل عبر d-grid وحالات التعطيل ومكوّن btn-close.
4 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تُمثل الأزرار نقطة التفاعل الأهم في أي تطبيق ويب؛ فمن خلالها يُرسل المستخدم نموذجاً، أو يحفظ إعداداته، أو يحذف سجلاً حساساً. يعتمد Bootstrap 5.3 بنية ثنائية الطبقات لتنسيق الأزرار: الطبقة الأولى هي الكلاس الأساسي .btn الذي يضبط الحشو الداخلي واستدارة الزوايا والمحاذاة وحلقة التركيز، والطبقة الثانية هي كلاس الهوية اللونية مثل .btn-primary للإجراء الأساسي، و.btn-secondary، و.btn-success، و.btn-danger للحذف، وحتى .btn-link الذي يمنح الزر مظهر الرابط النصي مع احتفاظه بسلوك الزر وحشوه.

الصف 2 صورة توضيحية
مخطط هندسة الأزرار وأزرار العرض الكامل وزر الإغلاق في بوتستراب 5.3
الصف 3 كود برمجي
HTML
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success">Send</button>
<button type="button" class="btn btn-warning">Hold</button>
<button type="button" class="btn btn-danger">Drop</button>
<button type="button" class="btn btn-link">Cancel</button>
الصف 4 ملاحظة هامة