الروابط الملونة (Colored links)

الروابط الملونة مع حالات التمرير/التحويم

في هذه الصفحة

ألوان الروابط (Link colors)

يمكنك استخدام الفئات (classes) .link-* لتلوين الروابط. وعلى عكس الفئات (classes) .text-* [([[docsref:/utilities/colors]])]، فإن هذه الفئات تمتلك حالة :hover و :focus. تستخدم بعض أنماط الروابط لون مقدمة فاتح نسبياً، ويجب استخدامها فقط على خلفية داكنة من أجل الحصول على تباين كافٍ.

تنبيه! .link-body-emphasis هو حالياً الرابط الملون الوحيد الذي يتكيف مع أنماط الألوان. يتم التعامل معه كحالة خاصة حتى وصول الإصدار v6 حيث يمكننا إعادة بناء ألوان السمة (theme colors) لأنماط الألوان بشكل أكثر شمولاً. وحتى ذلك الحين، فهو لون رابط فريد وعالي التباين مع أنماط :hover و :focus مخصصة. ومع ذلك، فإنه لا يزال يستجيب لأدوات الروابط الجديدة.

html

<p><a href="#" class="link-primary">Primary link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a></p>
<p><a href="#" class="link-success">Success link</a></p>
<p><a href="#" class="link-danger">Danger link</a></p>
<p><a href="#" class="link-warning">Warning link</a></p>
<p><a href="#" class="link-info">Info link</a></p>
<p><a href="#" class="link-light">Light link</a></p>
<p><a href="#" class="link-dark">Dark link</a></p>
<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>

نصيحة حول إمكانية الوصول: استخدام اللون لإضافة معنى يوفر إشارة بصرية فقط، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة مثل قارئات الشاشة. يرجى التأكد من أن المعنى واضح من المحتوى نفسه (على سبيل المثال، النص المرئي مع كافٍ تباين الألوان) أو مدرج عبر وسائل بديلة، مثل نص إضافي مخفي باستخدام الفئة (class) .visually-hidden.

أدوات الروابط

تمت الإضافة في الإصدار v5.3.0

يمكن أيضاً تعديل الروابط الملونة بواسطة أدوات الروابط الخاصة بنا.