آموزشگاه تحلیل داده ها

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با کار با لیست گروهی List Group در Bootstrap4 آشنا شدیم.

حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:

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

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

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

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

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

 

مثال 1

1<h1>Example heading New</h1>

1<h2>Example heading New</h2>

1<h3>Example heading New</h3>

1<h4>Example heading New</h4>

1<h5>Example heading New</h5>

1<h6>Example heading New</h6>

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

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

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

 

مثال 2

1<span class="badge badge-primary">Primary</span>

1<span class="badge badge-secondary">Secondary</span>

1<span class="badge badge-success">Success</span>

1<span class="badge badge-danger">Danger</span>

1<span class="badge badge-warning">Warning</span>

1<span class="badge badge-info">Info</span>

1<span class="badge badge-light">Light</span>

1<span class="badge badge-dark">Dark</span>

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

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