ألوان الحدود وسماكتها | الحدود والأبعاد والظلال في بوتستراب 5

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

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

بعد تفعيل الإطار الأساسي بكلاس .border (أو أحد أضلاعه)، يمكنك تلوينه بلوحة الألوان الدلالية مثل .border-primary و.border-success و.border-danger، أو اختيار الدرجات الناعمة الهادئة المضافة في الإصدار 5.3 مثل .border-primary-subtle مع التحكم بشفافية الخط عبر .border-opacity-50 أو .border-opacity-25.

ولضبط سماكة الخط من رفيع إلى عريض، يوفر الإطار خمس درجات رقمية من .border-1 (1px) حتى .border-5 (5px).

الصف 2 كود برمجي

HTML

<div class="p-3 mb-2 border border-2 border-primary">
  Full 2px primary border box
</div>
<div class="p-3 border-start border-4 border-success
  bg-success-subtle text-success-emphasis">
  4px logical start accent callout
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Border Color and Width ألوان الحدود وسماكتها

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

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