نشان‌ها و برچسب‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


نشان ها

نشان‌ها شاخص‌های عددی هستند که نشان می‌دهند چند آیتم به یک لینک مرتبط است:[۱]


عددهای (۵، ۱۰ و ۲) نشان‌ها هستند.

از کلاس .badge درون عناصر <span> برای ایجاد نشان‌ها استفاده کنید:

مثال

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>


مشاهدهٔ نتیجه


نشان‌ها می‌توانند درون عنصر‌های دیگر هم به کار روند مانند کلید‌ها:


مثال زیر نحوه اضافه کردن نشان‌ها را به کلیدها بیان می‌کند:

مثال

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>


مشاهدهٔ نتیجه


برچسب ها

برچسب‌ها برای ارائه اطلاعات اضافی در مورد چیزی استفاده می‌شوند: از کلاس .label به همراه یکی از شش کلاس متنی .label-default، .label-primary، .label-success، .label-info، .label-info، .label-warning یا .label-danger درون عنصر <span> برای ایجاد یک برچسب استفاده کنید:

مثال

<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>


مشاهدهٔ نتیجه


مثال زیر همه کلاس‌های برچسب متنی را نشان می‌دهد:


مثال

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>


مشاهدهٔ نتیجه


منابع آموزشی