ساخت label و badge و کار با انها در بوت استرپ bootstrap
نحوه کار و ساخت یا ایجاد badge و برچسب یا label در بوت استرپ bootstrap
مقالات
مدالها Badges
مدالها شاخص های عددی هستند که تعداد موارد را با یک لینک مرتبط می کند:
اعداد (5، 10 و 2) مدالها هستند.
استفاده از کلاس .badge در عناصر <span> برای ایجاد مدالها:
مثال
|
1 2 3 |
<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> |
مدالها badge نیز می توانند در داخل عناصر دیگر مانند دکمه ها استفاده شوند:
مثال زیر نشان می دهد چگونگی اضافه کردن مدالها badge به دکمه ها:
مثال
|
1 |
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button> |
برچسب ها Labels
برچسب ها برای ارائه اطلاعات اضافی در مورد چیزی استفاده می شوند:
برای ایجاد برچسب در بوت استرپ از کلاس .label استفاده کنید، و بعد از آن یکی از شش کلاس متنی زیر در امتداد کلاس قبلی استفاده کنید
.label-default، .label-primary، .label-success، .label-info، .label-warning یا .label-danger، در یک عنصر <span> برای ایجاد برچسب:
مثال
|
1 2 3 4 5 6 |
<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> |
مثال زیر تمام کلاس برچسب های متنی contextual label را نشان می دهد:
|
1 2 3 4 5 6 7 |
<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> Try it Yourself » |
مطالب زیر را حتما مطالعه کنید
افزونه و کلاس Carousel در بوت استرپ bootstrap
کلاس collapse در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
دیدگاهتان را بنویسید