ای بازار

نمونه

مدالها برای مطابقت با اندازه عنصر والد فوری با استفاده از اندازه نسبی قلم و 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» تعداد اعلان‌ها است)، زمینه اضافه را با یک متن پنهان بصری اضافه کنید..

    <button type="button" class="btn btn-primary">
        Profile <span class="badge bg-secondary">9</span>
        <span class="visually-hidden">unread messages</span>
    </button>

رنگ های پس زمینه

از کلاس های ابزار پس زمینه ما برای تغییر سریع ظاهر یک نشان استفاده کنید. لطفاً توجه داشته باشید که هنگام استفاده از بوت استرپ پیش فرض .bg-light, احتمالاً به یک ابزار رنگ متن مانند نیاز خواهید داشت . برای استایل مناسب این به این دلیل است که ابزارهای پس زمینه چیزی جز تنظیم نمی کنند 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 ">Warning</span>
    <span class="badge bg-info">Info</span>
    <span class="badge bg-light ">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 ">Warning</span>
    <span class="badge rounded-pill bg-info">Info</span>
    <span class="badge rounded-pill bg-light ">Light</span>
    <span class="badge rounded-pill bg-dark">Dark</span>