میرممد

آموزش برنامه نویسی همراه با تکه کد های کاربردی از زبان های مختلف برنامه نویسی
سید محمد میرعالی

سید محمد میرعالی

امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.

دسته بندی مطالب آمار سایت
  • کل مطالب : 13
  • کل نظرات : 0
  • افراد آنلاین : 2
  • تعداد اعضا : 0
  • آی پی امروز : 16
  • آی پی دیروز : 25
  • بازدید امروز : 56
  • باردید دیروز : 61
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 117
  • بازدید ماه : 1,336
  • بازدید سال : 22,266
  • بازدید کلی : 22,266
  • آموزش کار با Badge در Bootstrap 4


    در اين مطلب از سايت ميرممد با Badge در بوتسترپ نسخه چهار كار خواهيم كرد.كلاس Badge براي اضافه كردن اطلاعات اضافي به يك المنت استفاده ميشه.مثلا در سايت در بخش نظرات،تعداد نظرات جديد رو ميشه با كلاس Badge بوتسترپ نشون بديم.خب يك نمونه كد از Badge در بوتسترپ نسخه چهار :

    <h5>نظرات جديد <span class="badge badge-secondary">3</span></h5>
    <h6>نظرات جديد <span class="badge badge-secondary">8</span></h6>
    خروجي كد بالا :
    نظرات جديد 3
    نظرات جديد 8

    رنگبندي Badge در Bootstrap 4 : 

     Badge در Bootstrap 4 نيز داراي رنگ هاي پيش فرض بوتسترپ 4 هست كه در زير انواع رنگ هاش رو ميذارم .

    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-secondary">Secondary</span>
    <span class="badge badge-success">Success</span>
    <span class="badge badge-danger">Danger</span>
    <span class="badge badge-warning">Warning</span>
    <span class="badge badge-info">Info</span>
    <span class="badge badge-light">Light</span>
    <span class="badge badge-dark">Dark</span>

    خروجي كد بالا :

    Primary Secondary Success Danger Warning Info Light Dark

    كلاس badge-pill در Bootstrap 4 :

    براي گرد كردن بيشتر حاشيه ي Badgeميشه از كلاس badge-pill به شكل زير استفاده كرد.

    <span class="badge badge-pill badge-default">Default</span>
    <span class="badge badge-pill badge-primary">Primary</span>
    <span class="badge badge-pill badge-success">Succeess</span>
    <span class="badge badge-pill badge-info">Info</span>
    <span class="badge badge-pill badge-warning">Warning</span>
    <span class="badge badge-pill badge-danger">Danger</span>

    خروجي كد بالا :

    Default Primary Succeess Info Warning Danger

    قرار دادن Badge درون يك المنت در Bootstrap 4

    <button type="button" class="btn btn-dark">
      نظرات <span class="badge badge-danger">4</span>
    </button>

    خروجي كد بالا :

     

    اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد

    ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.



    پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :

    آموزش DocType در HTML 5

    صفحه بندی در Bootstrap 4

    آموزش کار با Progress Bar در Bootstrap 4

    آموزش کار با Button در Bootstrap 4

    آموزش کار با Alerts در Bootstrap 4

    آموزش کار با Jumbotron در Bootstrap 4

    آموزش کار با جداول در Bootstrap 4

    آموزش استفاده از Tooltip در Bootstrap 4

    آموزش استفاده از تگ video در HTML5

    آموزش كار با تصاوير در Bootstrap 4

    بازدید : 582 یکشنبه 29 مهر 1397 : 8:34 نظرات ()
    ارسال نظر برای این مطلب

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی