انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: الأزرار وزر الإغلاق في بوتستراب 5

Outline Button Styles الأزرار المفرغة الثانوية

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

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

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

عندما تضع ثلاثة أزرار ممتلئة بالألوان الصريحة بجانب بعضها، تتشتت عين المستخدم عن الإجراء الأهم في الشاشة. تعالج سلسلة الأزرار المفرغة .btn-outline-primary حتى .btn-outline-dark هذا التزاحم البصري بإزالة لون الخلفية وإبقاء إطار ملون ونص مطابق يمتلئ باللون الكامل فور تمرير المؤشر أو التركيز عليه، مما يجعلها الخيار الأمثل لأزرار «إلغاء» أو «معاينة» المجاورة لزر الحفظ الرئيسي.

الصف 2 كود برمجي
HTML 
<div class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-primary">
    Publish Course
  </button>
  <button type="button" class="btn btn-outline-dark">
    Save Draft
  </button>
</div>
جرّب بنفسك

جميع فقرات هذا الدرس (الأزرار وزر الإغلاق في بوتستراب 5)