شارات
توثيق وأمثلة للشارات ، ومكوننا الصغير للعدد والتسمية.
أمثلة
مقياس الشارات لمطابقة حجم العنصر الأصل المباشر باستخدام حجم الخط النسبي em
والوحدات. اعتبارًا من الإصدار 5 ، لم يعد للشارات أنماط تركيز أو تحوم للروابط.
العناوين
عنوان المثالجديد
عنوان المثالجديد
عنوان المثالجديد
عنوان المثالجديد
عنوان المثالجديد
عنوان المثالجديد
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
أزرار
يمكن استخدام الشارات كجزء من الروابط أو الأزرار لتوفير عداد.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
لاحظ أنه بناءً على كيفية استخدامها ، قد تكون الشارات مربكة لمستخدمي برامج قراءة الشاشة والتقنيات المساعدة المماثلة. بينما يوفر تصميم الشارات إشارة مرئية للغرض منها ، سيتم تقديم محتوى الشارة لهؤلاء المستخدمين ببساطة. اعتمادًا على الموقف المحدد ، قد تبدو هذه الشارات مثل كلمات أو أرقام إضافية عشوائية في نهاية الجملة أو الرابط أو الزر.
ما لم يكن السياق واضحًا (كما هو الحال مع مثال "الإشعارات" ، حيث يُفهم أن الرقم "4" هو عدد الإخطارات) ، ففكر في تضمين سياق إضافي مع جزء مخفي مرئي من النص الإضافي.
تموضع
استخدم الأدوات المساعدة لتعديل .badge
ووضعه في زاوية ارتباط أو زر.
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
يمكنك أيضًا استبدال .badge
الفصل ببعض الأدوات المساعدة دون احتساب مؤشر أكثر عمومية.
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
ألوان الخلفية
استخدم فئات الأدوات المساعدة في الخلفية لتغيير مظهر الشارة بسرعة. يرجى ملاحظة أنه عند استخدام Bootstrap الافتراضي .bg-light
، ستحتاج على الأرجح إلى أداة مساعدة لألوان النص مثل .text-dark
التصميم المناسب. هذا لأن الأدوات المساعدة في الخلفية لا تحدد أي شيء سوى background-color
.
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
إيصال المعنى للتقنيات المساعدة
يوفر استخدام اللون لإضافة معنى فقط إشارة مرئية ، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة - مثل قارئات الشاشة. تأكد من أن المعلومات التي يشير إليها اللون إما واضحة من المحتوى نفسه (مثل النص المرئي) ، أو يتم تضمينها من خلال وسائل بديلة ، مثل النص الإضافي المخفي مع .visually-hidden
الفصل.
شارات حبوب منع الحمل
استخدم .rounded-pill
فئة المنفعة لجعل الشارات أكثر تقريبًا مع أكبر border-radius
.
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
ساس
المتغيرات
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold;
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: $border-radius;