با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کامل bootstrap 3 را دنبال می کنند. در این آموزش قصد داریم شما را با انواع عناصر ایجاد برچسب در bootstrap 3 آشنا کنیم، بطور کلی در فریم ورک bootstrap 3 از دو برچسب badge و label استفاده می شود. که برچسب badge در bootstrap 3 برای مشخص کردن تعداد موارد یک لینک استفاده می شود. برچسب label در bootstrap 3 نیز برای ایجاد برچسب هایی متنوع با کاربردهای مختلف در قالب وب سایت استفاده می شود. در ادامه برای آشنایی بیشتر با عناصر Badge و Label در Bootstrap 3 با ما همراه باشید.
ابتدا به معرفی برچسب badge در bootstrap 3 و سپس به بررسی برچسب label در bootstrap 3 می پردازیم.
از عناصر برچسب برچسب badge در bootstrap 3 برای مشخص کردن تعداد موارد یا تعداد محتوای موجود در یک لینک استفاده می شود.
برای استفاده از badge در bootstrap 3 ،از یک کلاس .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 را به عنصر button اضافه می کند:
1 | <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button> |
برچسب ها برای ارائه اطلاعات اضافی در مورد چیزی استفاده می شوند:
در کلاس .label
همچنین می توان از کلاسهای متنی از جمله .label-default
, .label-primary
, .label-success
, .label-info
, .label-warning
یا.label-danger
برای نمایش حالات مختلف استفاده کرد.
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> |
مثال: کد زیر چگونگی استفاده از کلاسهای متنی label را نشان می دهد:
1 2 3 4 5 6 | <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> |
در مباحث آموزش فوق، با عناصر برچسب badge و برچسب label در فریم ورک bootstrap 3 و چگونگی استفاده از آنها در قالب وب سایت، آشنا شدید. امیدواریم که از مباحث عناصر badge و label در bootstrap 3 بخوبی استفاده کرده باشید.