توثيق وأمثلة للشارات ، ومكوننا الصغير للعدد والتسمية.
مثال
مقياس الشارات لمطابقة حجم العنصر الأصل المباشر باستخدام حجم الخط النسبي emوالوحدات.
عنوان المثالجديد
عنوان المثالجديد
عنوان المثالجديد
عنوان المثالجديد
عنوان المثالجديد
عنوان المثالجديد
يمكن استخدام الشارات كجزء من الروابط أو الأزرار لتوفير عداد.
لاحظ أنه بناءً على كيفية استخدامها ، قد تكون الشارات مربكة لمستخدمي برامج قراءة الشاشة والتقنيات المساعدة المماثلة. بينما يوفر تصميم الشارات إشارة مرئية للغرض منها ، سيتم تقديم محتوى الشارة لهؤلاء المستخدمين ببساطة. اعتمادًا على الموقف المحدد ، قد تبدو هذه الشارات مثل كلمات أو أرقام إضافية عشوائية في نهاية الجملة أو الرابط أو الزر.
ما لم يكن السياق واضحًا (كما هو الحال مع مثال "الإشعارات" ، حيث يُفهم أن الرقم "4" هو عدد الإخطارات) ، ضع في اعتبارك تضمين سياق إضافي مع جزء مخفي مرئي من النص الإضافي.
الاختلافات السياقية
أضف أيًا من فئات التعديل المذكورة أدناه لتغيير مظهر الشارة.
الأوليةثانويالنجاحخطرتحذيرمعلوماتخفيفةمظلم
إيصال المعنى للتقنيات المساعدة
يوفر استخدام اللون لإضافة معنى فقط إشارة مرئية ، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة - مثل قارئات الشاشة. تأكد من أن المعلومات التي يشير إليها اللون إما واضحة من المحتوى نفسه (مثل النص المرئي) ، أو يتم تضمينها من خلال وسائل بديلة ، مثل النص الإضافي المخفي مع .sr-onlyالفصل.
شارات حبوب منع الحمل
استخدم .badge-pillفئة المُعدِّل لجعل الشارات أكثر تقريبًا (مع border-radiusأفقي أكبر وإضافي padding). مفيد إذا فاتتك الشارات من الإصدار 3.
الأوليةثانويالنجاحخطرتحذيرمعلوماتخفيفةمظلم
الروابط
يوفر استخدام .badge-*الفئات السياقية في <a>عنصر ما بسرعة شارات قابلة للتنفيذ مع حالات التمرير والتركيز.