انگلیسی
فرانسوی
اسپانیایی
آلمانی
ایتالیایی
نشان های پیش فرض
نشان های بوت استرپ با استفاده از نشان کلاس و می تواند با کلاس های رنگی مانند .bg-primary, .bg-ثانویهو موارد دیگر برای مطابقت با نیازهای طراحی شما.
اولیه
ثانویه
موفقیت
اطلاعات
هشدار
خطر
تاریک
نور
<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-info">Info</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-dark">Dark</span>
<span class="badge bg-light text-body">Light</span>نشان قرص شکل
برای ایجاد یک نشان با پس زمینه اولیه و شکل قرص گرد، از کلاس های Bootstrap زیر استفاده کنید: نشان, .bg-primary، و .قرص گرد.
اولیه
ثانویه
موفقیت
اطلاعات
هشدار
خطر
تاریک
نور
<span class="badge bg-primary rounded-pill">Primary</span>
<span class="badge bg-secondary rounded-pill">Secondary</span>
<span class="badge bg-success rounded-pill">Success</span>
<span class="badge bg-info rounded-pill">Info</span>
<span class="badge bg-warning rounded-pill">Warning</span>
<span class="badge bg-danger rounded-pill">Danger</span>
<span class="badge bg-dark rounded-pill">Dark</span>
<span class="badge bg-light rounded-pill text-body">Light</span>نشان نور
برای ایجاد یک ظریف نشان با پس زمینه روشن و رنگ متن قابل خواندن، می توانید از آن استفاده کنید نشان, bg-primary-subtle، و .text-primary کلاس ها
اولیه
ثانویه
موفقیت
اطلاعات
هشدار
خطر
تاریک
نور
<span class="badge bg-primary rounded-pill">Primary</span>
<span class="badge bg-secondary rounded-pill">Secondary</span>
<span class="badge bg-success rounded-pill">Success</span>
<span class="badge bg-info rounded-pill">Info</span>
<span class="badge bg-warning rounded-pill">Warning</span>
<span class="badge bg-danger rounded-pill">Danger</span>
<span class="badge bg-dark rounded-pill">Dark</span>
<span class="badge bg-light rounded-pill text-body">Light</span>نشان های نور قرص شکل
برای ایجاد یک شیک نشان با پس زمینه رنگ اصلی و شکل قرص گرد، می توانید از آن استفاده کنید نشان, bg-primary-subtle، و .قرص گرد کلاس ها
اولیه
ثانویه
موفقیت
اطلاعات
هشدار
خطر
تاریک
نور
<span class="badge rounded-pill bg-primary-subtle text-primary">Primary</span>
<span class="badge rounded-pill bg-secondary-subtle text-secondary">Secondary</span>
<span class="badge rounded-pill bg-success-subtle text-success">Success</span>
<span class="badge rounded-pill bg-info-subtle text-info">Info</span>
<span class="badge rounded-pill bg-warning-subtle text-warning">Warning</span>
<span class="badge rounded-pill bg-danger-subtle text-danger">Danger</span>
<span class="badge rounded-pill bg-dark-subtle text-body">Dark</span>
<span class="badge rounded-pill bg-light-subtle text-body">Light</span>نشان های طرح کلی
استفاده کنید نشان های پیش فرض در بوت استرپ با نشان کلاس اضافه کردن کلاس های رنگ مانند مرز, .border-*و غیره، برای استایل دادن به نشان.
اولیه
ثانویه
موفقیت
اطلاعات
هشدار
خطر
تاریک
نور
<span class="badge border border-primary text-primary">Primary</span>
<span class="badge border border-secondary text-secondary">Secondary</span>
<span class="badge border border-success text-success">Success</span>
<span class="badge border border-info text-info">Info</span>
<span class="badge border border-warning text-warning">Warning</span>
<span class="badge border border-danger text-danger">Danger</span>
<span class="badge border border-dark text-body">Dark</span>
<span class="badge border border-light text-body">Light</span>نشان های طرح کلی به شکل قرص
ایجاد یک نشان با پس زمینه اولیه و شکل قرص گرد با استفاده از نشان, مرز, .border-* و .قرص گرد کلاس ها
اولیه
ثانویه
موفقیت
اطلاعات
هشدار
خطر
تاریک
نور
<span class="badge rounded-pill border border-primary text-primary">Primary</span>
<span class="badge rounded-pill border border-secondary text-secondary">Secondary</span>
<span class="badge rounded-pill border border-success text-success">Success</span>
<span class="badge rounded-pill border border-info text-info">Info</span>
<span class="badge rounded-pill border border-warning text-warning">Warning</span>
<span class="badge rounded-pill border border-danger text-danger">Danger</span>
<span class="badge rounded-pill border border-dark text-body">Dark</span>
<span class="badge rounded-pill border border-light text-body">Light</span>نشان های دکمه
a اضافه کنید نشان به یک دکمه بوت استرپ با قرار دادن یک <span class="badge"> عنصر داخل آن این برای نمایش تعداد اعلانها، بهروزرسانیها یا نشانگرها در خود دکمه مفید است.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-success ms-1">4</span>
</button>
<button type="button" class="btn btn-success">
Messages <span class="badge bg-danger ms-1">2</span>
</button>
<button type="button" class="btn btn-outline-secondary">
Draft <span class="badge bg-success ms-1">2</span>
</button>نشان های دکمه طرح کلی
ترکیب کنید دکمه های طرح کلی با نشان عناصری برای نمایش اعلان ها یا شمارش ها. از کلاس هایی مانند استفاده کنید btn-outline-* برای دکمه و نشان با ابزارهای پس زمینه مانند .bg-primary برای برجسته کردن محتوای نشان
<button type="button" class="btn btn-outline-primary">
Notifications <span class="badge bg-primary ms-1">4</span>
</button>
<button type="button" class="btn btn-outline-danger">
Notifications <span class="badge bg-danger rounded-pill ms-1">2</span>
</button>
<button type="button" class="btn btn-outline-success position-relative">
Notifications <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success">7
<span class="visually-hidden">New</span></span>
</button>
<button type="button" class="btn btn-outline-info position-relative">
Notifications <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">New
<span class="visually-hidden">New</span></span>
</button>
نشان های موقعیت دکمه
با قرار دادن a نشان ها را روی دکمه های Bootstrap قرار دهید <span class="badge position-absolute"> داخل دکمه از کلاس های کاربردی مانند استفاده کنید .top-0 و پایان-0 برای تنظیم موقعیت نشان
<button type="button" class="btn btn-primary position-relative">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success">+9 <span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-light position-relative">
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light-subtle rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-primary position-relative p-0 icon-btn rounded">
<i class="ri-mail-fill"></i>
<span class="position-absolute top-0 start-100 translate-middle badge border border-light-subtle rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-light position-relative p-0 icon-btn rounded-circle">
<i class="ri-notification-4-fill"></i>
</button>
<button type="button" class="btn btn-light position-relative p-0 icon-btn rounded-circle">
<i class="ri-menu-line"></i>
<span class="position-absolute top-0 start-100 translate-middle badge border border-light-subtle rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
</button>نشان با نمادها
نشانهای نماد را میتوان برای نمایش بصری عملکردها، وضعیتها یا اعلانها استفاده کرد. بوت استرپ را با هم ترکیب کنید نشان کلاس با یک <i> عنصر نماد برای یک رابط کاربری مدرن.
هشدارها
پیام ها
تصویب شد
اطلاعات
هشدارها
خطاها
تنظیمات پیام های خوانده نشده
<span class="badge bg-primary"><i class="ri-notification-3-line"></i> Alerts</span>
<span class="badge bg-secondary-subtle text-secondary"><i class="ri-mail-line"></i> Messages</span>
<span class="badge bg-outline-success text-success border border-success"><i class="ri-check-line"></i> Approved</span>
<span class="badge bg-info rounded-pill"><i class="ri-information-line"></i> Info</span>
<span class="badge bg-warning-subtle text-warning rounded-pill"><i class="ri-error-warning-line"></i> Warnings</span>
<span class="badge bg-outline-danger-subtle text-danger border border-danger rounded-pill"><i class="ri-close-line"></i> Errors</span>
<span class="badge bg-light text-body position-relative">
<i class="ri-settings-4-line"></i> Settings
<span class="position-absolute top-0 start-100 translate-middle badge border border-light-subtle rounded-circle bg-primary p-1">
<span class="visually-hidden">unread messages</span>
</span>
</span>مودالها با عنوان
با قرار دادن a نشان ها را به عنوان اضافه کنید <span class="badge"> در کنار متن عنوان این برای برجسته کردن اطلاعات یا شمارش های مهم مفید است.
عنوان مثال جدید
عنوان مثال جدید
عنوان مثال جدید
عنوان مثال جدید
عنوان مثال جدید
عنوان مثال جدید
<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-primary">New</span></h2>
<h3>Example heading <span class="badge bg-primary">New</span></h3>
<h4>Example heading <span class="badge bg-primary">New</span></h4>
<h5>Example heading <span class="badge bg-primary">New</span></h5>
<h6 class="mb-0">Example heading <span class="badge bg-primary">New</span></h6>نشان های مربعی
5
5
5
5
5
5
5
5
بایگانی رنگ تم فقط با اضافه کردن کلاس نشان
5
5
5
5
5
5
5
5
از رنگ های تم در نشان ها به سادگی با اضافه کردن آن استفاده کنید نشان
<span class="badge border border-primary bg-primary">5</span> <span class="badge border border-secondary bg-secondary">5</span> <span class="badge border border-success bg-success">5</span> <span class="badge border border-info bg-info">5</span> <span class="badge border border-warning bg-warning">5</span> <span class="badge border border-danger bg-danger">5</span> <span class="badge border border-dark bg-dark">5</span> <span class="badge border border-light bg-light text-light-emphasis">5</span><span class="badge rounded-pill text-primary bg-primary-subtle">5</span> <span class="badge rounded-pill text-secondary bg-secondary-subtle">5</span> <span class="badge rounded-pill text-success bg-success-subtle">5</span> <span class="badge rounded-pill text-info bg-info-subtle">5</span> <span class="badge rounded-pill text-warning bg-warning-subtle">5</span> <span class="badge rounded-pill text-danger bg-danger-subtle">5</span> <span class="badge rounded-pill text-dark bg-dark-subtle">5</span> <span class="badge rounded-pill text-dark bg-light-subtle">5</span><span class="badge border text-primary border-primary-subtle"><i class="ri-star-line"></i></span> <span class="badge border text-secondary border-secondary-subtle"><i class="ri-mail-line"></i></span> <span class="badge border text-success border-success-subtle"><i class="ri-check-line"></i></span> <span class="badge border text-info border-info-subtle"><i class="ri-information-line"></i></span> <span class="badge border text-warning border-warning-subtle"><i class="ri-error-warning-line"></i></span> <span class="badge border text-danger border-danger-subtle"><i class="ri-close-line"></i></span> <span class="badge border text-dark border-dark-subtle"><i class="ri-lock-line"></i></span> <span class="badge border text-dark border-light-subtle"><i class="ri-settings-4-line"></i></span>