آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کار با نشان برجسته Badges در Bootstrap 4

دوره های مرتبط با این مقاله

آموزش کار با نشان برجسته (Badges) در Bootstrap 4:

از امکان برجسته یا به انگلیسی Badges در بوت استرپ 4، می توان برای اضافه کردن اطلاعات بیشتر به یک محتوا استفاده کرد.

آموزش کار با نشان برجسته (Badges) در Bootstrap 4

برای مثال می توانید از یک عنصر با کلاس .badges به همراه یک عنصر دیگر که دارای کلاس های رنگی متنی (مثلا کلاس .badges-secondary) است مثل یک المنت <span> برای ایجاد یک نشان مستطیل رنگی، استفاده کنید.

توجه داشته باشید که چنانچه عنصر badge درون یک عنصر مادر یا parent باشد، اندازه خود را بر حسب بزرگی یا کوچکی آن ، تنظیم می کند.

مثال عملی: در کد مثال عملی زیر، نحوه ایجاد یک عنصر badge را درون تگ های عنوان <h1> تا <h6> نشان داده ایم:

مثال 1

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
امتحان کنید

آموزش استفاده از کلاس های متنی رنگی برای badge:

آموزش استفاده از کلاس های متنی رنگی برای badge

می توانید از کلاس های متنی رنگی پیش فرض بوت استرپ 4 ، که در بخش های قبلی آن ها را آموزش دادیم، برای تعیین رنگ عنصر badge استفاده نمایید.

مثال عملی : در کد مثال عملی زیر، انواع badge های رنگی را به وسیله کلاس های متنی رنگی Bootstrap 4 استفاده کرده ایم:

مثال 2

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
امتحان کنید

آموزش ساخت نشانه های گرد (Pill Badges) در بوت استرپ 4 :

آموزش ساخت نشانه های گرد (Pill Badges) در بوت استرپ 4

از کلاس .badges-pill می توانید برای گرد کردن گوشه های عنصر badge در Bootstrap 4 استفاده کنید.

مثال: در کد مثال عملی زیر، نحوه استفاده از کلاس .badge-pill و ساخت Pill Badge را نشان داده ایم :

مثال 3

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
امتحان کنید

آموزش استفاده از Badge درون یک عنصر دیگر :

آموزش استفاده از Badge درون یک عنصر دیگر

در کد مثال عملی زیر، از یک عنصر Badge در یک دکمه استفاده کرده ایم:

مثال 4

Messages 4

امتحان کنید
  • 39
  •    18
  • تاریخ ارسال :   1398/07/26

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .