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

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳


نشان ها

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

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

مثال

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

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


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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

مثال

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

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


برچسب ها

برچسب‌ها برای ارائه اطلاعات اضافی در مورد چیزی استفاده می‌شوند:Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

مثال

1 <h1>Example <span class="label label-default">New</span></h1>
2 <h2>Example <span class="label label-default">New</span></h2>
3 <h3>Example <span class="label label-default">New</span></h3>
4 <h4>Example <span class="label label-default">New</span></h4>
5 <h5>Example <span class="label label-default">New</span></h5>
6 <h6>Example <span class="label label-default">New</span></h6>

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


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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال

1 <span class="label label-default">Default Label</span>
2 <span class="label label-primary">Primary Label</span>
3 <span class="label label-success">Success Label</span>
4 <span class="label label-info">Info Label</span>
5 <span class="label label-warning">Warning Label</span>
6 <span class="label label-danger">Danger Label</span>

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


تمرینات بوت استرپ

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


منابع آموزشی