تلوين الروابط وبُعد الخط السفلي | أدوات النصوص والروابط في بوتستراب 5

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

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

أضاف الإصدار Bootstrap 5.3 عائلة متكاملة لتجميل الروابط النصية تتفوق على تلوين النص العادي؛ إذ يضبط الكلاس .link-primary وأخواته حتى .link-body-emphasis لون الرابط ولون التفاعل عند مرور المؤشر والتركيز تلقائياً دون الحاجة لكتابة محددات :hover مخصصة.

والأجمل هو إمكانية التحكم في المسافة الفاصلة بين الكلمات والخط السفلي عبر .link-offset-1 و.link-offset-2 و.link-offset-3 حتى لا يقطع الخط السفلي نقاط الحروف العربية كالياء والجيم، مع تلوين الخط السفلي وشفافيته بشكل مستقل عبر .link-underline-primary و.link-underline-opacity-25 و.link-underline-opacity-100-hover.

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

HTML

<div class="vstack gap-2">
  <a href="#docs" class="link-primary link-offset-2">
    Clear offset underline for readable typography
  </a>
  <a href="#api" class="link-success link-offset-3
    link-underline-opacity-25
    link-underline-opacity-100-hover">
    Subtle underline that brightens on hover
  </a>
</div>

جرّب بنفسك

الصف 3 معاينة حية

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

Colored Links and Offsets تلوين الروابط وبُعد الخط السفلي

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

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