نشان ها


مثال ها

با استفاده از اندازه نسبی مانند واحدهای em نشان‌ها را برای مطابقت با اندازه موردنظر تغییر دهید.

عنوان جدید

عنوان جدید

عنوان جدید

عنوان جدید

عنوان جدید
عنوان جدید
<h1>عنوان <span class="badge text-bg-secondary">جدید</span></h1>
				<h2>عنوان <span class="badge text-bg-secondary">جدید</span></h2>
				<h3>عنوان <span class="badge text-bg-secondary">جدید</span></h3>
				<h4>عنوان <span class="badge text-bg-secondary">جدید</span></h4>
				<h5>عنوان <span class="badge text-bg-secondary">جدید</span></h5>
				<h6>عنوان <span class="badge text-bg-secondary">جدید</span></h6>
				

رنگ پس زمینه نسخه 1

با کلاس های از قبل تعریف شده میتوانید رنگ پس زمینه و رنگ متن را تغییر دهید برای مثال میتوانید کلاس های text-bg-light را برای تغییر پس زمینه و رنگ متن استفاده کنید.

پیش فرض تایید موفق خطر هشدار پیغام روشن تیره
<span class="badge text-bg-primary">پیش فرض</span>
				<span class="badge text-bg-secondary">تایید</span>
				<span class="badge text-bg-success">موفق</span>
				<span class="badge text-bg-danger">خطر</span>
				<span class="badge text-bg-warning">هشدار</span>
				<span class="badge text-bg-info">پیغام</span>
				<span class="badge text-bg-light">روشن</span>
				<span class="badge text-bg-dark">تیره</span>
				

آیکُن دار نسخه 1

شما میتوانید از font icon یا آیکن SVG استفاده کنید.

<a href="#" class="badge text-bg-primary"><i class="fas fa-circle ms-2 small fw-bold"></i>پیش فرض</a>
				<a href="#" class="badge text-bg-secondary"><i class="fas fa-circle ms-2 small fw-bold"></i>تایید</a>
				<a href="#" class="badge text-bg-success"><i class="fas fa-circle ms-2 small fw-bold"></i>موفق</a>
				<a href="#" class="badge text-bg-danger"><i class="fas fa-circle ms-2 small fw-bold"></i>خطر</a>
				<a href="#" class="badge text-bg-warning"><i class="fas fa-circle ms-2 small fw-bold"></i>هشدار</a>
				<a href="#" class="badge text-bg-info"><i class="fas fa-circle ms-2 small fw-bold"></i>پیغام</a>
				<a href="#" class="badge text-bg-light"><i class="fas fa-circle ms-2 small fw-bold"></i>روشن</a>
				<a href="#" class="badge text-bg-dark"><i class="fas fa-circle ms-2 small fw-bold"></i>تیره</a>
				

رنگ پس زمینه نسخه 2

با کلاس های از قبل تعریف شده میتوانید رنگ پس زمینه و رنگ متن را تغییر دهید برای مثال میتوانید کلاس bg-primary را برای تغییر پس زمینه و برای تغییر رنگ متن از کلاس text-primary استفاده کنید و برای تغییر میزان شفافیت رنگ پس زمینه از کلاس bg-opacity-10 استفاده کنید.

<a href="#" class="badge bg-primary bg-opacity-10 text-primary">پیش فرض</a>
				<a href="#" class="badge bg-secondary bg-opacity-10 text-secondary">تایید</a>
				<a href="#" class="badge bg-success bg-opacity-10 text-success">موفق</a>
				<a href="#" class="badge bg-danger bg-opacity-10 text-danger">خطر</a>
				<a href="#" class="badge bg-warning bg-opacity-10 text-warning">هشدار</a>
				<a href="#" class="badge bg-info bg-opacity-10 text-info">پیغام</a>
				<a href="#" class="badge bg-dark bg-opacity-10 text-dark">تیره</a>
				

آیکُن دار نسخه 2

شما میتوانید از font icon یا آیکن SVG استفاده کنید.

<a href="#" class="badge bg-primary bg-opacity-10 text-primary"><i class="fas fa-circle ms-2 small fw-bold"></i>پیش فرض</a>
				<a href="#" class="badge bg-secondary bg-opacity-10 text-secondary"><i class="fas fa-circle ms-2 small fw-bold"></i>تایید</a>
				<a href="#" class="badge bg-success bg-opacity-10 text-success"><i class="fas fa-circle ms-2 small fw-bold"></i>موفق</a>
				<a href="#" class="badge bg-danger bg-opacity-10 text-danger"><i class="fas fa-circle ms-2 small fw-bold"></i>خطر</a>
				<a href="#" class="badge bg-warning bg-opacity-15 text-warning"><i class="fas fa-circle ms-2 small fw-bold"></i>هشدار</a>
				<a href="#" class="badge bg-info bg-opacity-10 text-info"><i class="fas fa-circle ms-2 small fw-bold"></i>پیغام</a>
				

کسب اطلاعات بیشتر در سایت رسمی Bootstrap