دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۲
  • مرداد

جلسه ۱۲ : کار با عناصر Badge و Label در Bootstrap 3

  • دسته‌بندی‌ها :
جلسه ۱۲ : کار با عناصر Badge و Label در Bootstrap 3
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کامل bootstrap 3 را دنبال می کنند. در این آموزش قصد داریم شما را با انواع عناصر ایجاد برچسب در bootstrap 3 آشنا کنیم، بطور کلی در فریم ورک bootstrap 3 از دو برچسب badge و label استفاده می شود. که برچسب badge در bootstrap 3 برای مشخص کردن تعداد موارد یک لینک استفاده می شود. برچسب label در bootstrap 3 نیز برای ایجاد برچسب هایی متنوع با کاربردهای مختلف در قالب وب سایت استفاده می شود. در ادامه برای آشنایی بیشتر با عناصر Badge و Label در Bootstrap 3 با ما همراه باشید.

      عناصر badge و label در bootstrap 3

      ابتدا به معرفی برچسب badge در bootstrap 3 و سپس به بررسی برچسب label در bootstrap 3 می پردازیم.

      برچسب badge در bootstrap 3

      از عناصر برچسب برچسب badge در bootstrap 3 برای مشخص کردن تعداد موارد یا تعداد محتوای موجود در یک لینک استفاده می شود.

       

      برچسب badge در Bootstrap 3

      برچسب badge در bootstrap 3

      برای استفاده از badge در bootstrap 3 ،از یک کلاس .badge در یک عنصر <span> استفاده کنید:

      مثال : 

      همچنین می توان برچسب badge را در داخل عناصر دیگر نیز استفاده کرد:

      برچسب badge داخل عناصر دیگر

      برچسب badge داخل عناصر دیگر

      مثال: کد زیر برچسب badge را به عنصر button اضافه می کند:

      مثال : 

      برچسب label

      برچسب ها برای ارائه اطلاعات اضافی در مورد چیزی استفاده می شوند:

      برچسب label

      برچسب label

      در کلاس .label همچنین می توان از کلاسهای متنی از جمله .label-default.label-primary.label-success.label-info.label-warning یا.label-danger  برای نمایش حالات مختلف استفاده کرد.

      مثال : 

      مثال: کد زیر چگونگی استفاده از کلاسهای متنی label را نشان می دهد:

      کلاسهای متنی label

      کلاسهای متنی label


      مثال : 

      کلام آخر

      در مباحث آموزش فوق، با عناصر برچسب badge  و برچسب label در فریم ورک bootstrap 3 و چگونگی استفاده از آنها در قالب وب سایت، آشنا شدید. امیدواریم که از مباحث عناصر badge و label در bootstrap 3 بخوبی استفاده کرده باشید.

      QR:  جلسه ۱۲ : کار با عناصر Badge و Label در Bootstrap 3
      به اشتراک بگذارید