بوت استرپ 5 بجها (Badges): بجهای زمینهای، بجهای Pill و بج در داخل عنصر
مقدمه:
بوت استرپ یک فریمورک محبوب برای توسعه وب است که امکانات متنوعی را در اختیار توسعه‌دهندگان قرار می‌دهد. یکی از اجزای کاربردی بوت استرپ بجها (Badges) هستند که برای نمایش اطلاعات کوچک و مهم در واجهه کاربری استفاده می‌شوند. در نسخه جدید بوت استرپ، یعنی بوت استرپ 5، بجها با امکانات و قابلیت‌های جدیدی بهبود یافته‌اند. در این مقاله، به معرفی بجهای زمینهای (Contextual Badges)، بجهای Pill و بج در داخل عنصر خواهیم پرداخت.
1. بجهای زمینهای (Contextual Badges):
بجهای زمینهای در بوت استرپ 5 به کاربران امکان می‌دهند تا بجها را با رنگ‌های مختلف برچسب‌گذاری کنند و آن‌ها را با اطلاعات مرتبط مشخص کنند. بجهای زمینهای با استفاده از کلاسهای مختلفی مانند `bg-primary`، `bg-secondary`، `bg-success` و غیره، قابل استفاده هستند. این استفاده از رنگ‌های مختلف به کاربران امکان می‌دهد تا بجها را بر اساس نوع اطلاعات یا وضعیت مرتبط با آن‌ها متمایز کنند.
2. بجهای Pill:
بجهای Pill شبیه به بجهای زمینهای هستند با این تفاوت که شکل آن‌ها گرد است. با استفاده از کلاس `rounded-pill`، بجها به شکل گرد درآمده و ظاهری زیبا و متفاوتی از بجهای زمینهای دارند. بجهای Pill برای نمایش برچسبهای دسته‌بندی، وضعیت‌ها، تگ‌ها و موارد مشابه مناسب هستند و به راحتی با استفاده از کلاسهای بوت استرپ قابل استفاده هستند.
3. بج در داخل عنصر:
در بوت استرپ 5، امکان قرار دادن بج در داخل عنصر‌های دیگر نیز فراهم شده است. این امکان به کاربران اجازه می‌دهد تا بج را در داخل دکمهها، نوار پیشرفت، منوها و سایر عناصر واجهه کاربری قرار دهند. با استفاده از کلاس `badge`، بج را در داخل عنصر مورد نظر ققرار داد و سپس با استفاده از کلاسهای بوت استرپ، شکل، رنگ و سبک ظاهری آن را تنظیم کنند. این قابلیت به کاربران امکان می‌دهد تا اطلاعات کوچک را به صورت بج در داخل عناصر بزرگتر نمایش دهند و به راحتی قابل توجه کاربران باشند.
مثال:
با استفاده از کد زیر، میتوانید از بجهای بوت استرپ 5 در وبسایت‌ها و واجهه کاربری خود استفاده کنید:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- لینک استایلهای بوت استرپ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
<title>Bootstrap 5 Badges</title>
</head>
<body>
<h1>Bootstrap 5 Badges Example</h1>
<!-- بجهای زمینهای -->
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<!-- بجهای Pill -->
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<!-- بج در داخل عنصر -->
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-light text-dark">5</span>
</button>
<!-- اسکریپت جی‌کوئری و استایلهای بوت استرپ -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```در این کد، از تگ `<span>` برای ایجاد بجها استفاده می‌شود. با اعمال کلاسهای بوت استرپ مختلف، میتوانید بجها را به صورت زمینهای (`bg-primary`, `bg-secondary` و غیره) یا به صورت Pill (`rounded-pill`) طراحی کنید. در نمونه کد بالا، تعدادی بج زمینهای و بج Pill نمایش داده شده است. همچنین، نمونه ایجاد بج در داخل یک عنصر دکمه نیز وجود دارد.
لازم به ذکر است که برای استفاده از بوت استرپ 5 باید استایل‌ها و اسکریپت‌های مربوطه را از منابع خارجی، مثل CDN بوت استرپ، در صفحه خود قرار دهید.
مقالات مرتبط:
سوالات متداول:
سوال 2: آیا میتوان رنگ و استایل بجها را سفارشی کرد؟
پاسخ: بله، میتوانید رنگ و استایل بجها را سفارشی کنید. در بوت استرپ 5، با استفاده از کلاسهای مختلف میتوانید رنگ بجها را تعیین کنید. همچنین، میتوانید با استفاده از استایلهای سفارشی در CSS، ظاهر بجها را به دلخواه خود تغییر دهید. بوت استرپ 5 امکانات زیادی برای سفارشیسازی رنگ، فونت، پسزمینه و سایر ویژگیهای بجها را فراهم میکند.
سوال 3: آیا بجها قابل استفاده در عناصر دیگر بجز بجهای زمینهای، بجهای Pill و بج در داخل عنصر هستند؟
پاسخ: بله، بجها قابل استفاده در عناصر دیگر نیز هستند. در بوت استرپ 5، میتوانید بجها را در داخل عناصر مختلفی مانند دکمهها، نوار پیشرفت، منوها و سایر عناصر واجهه کاربری قرار دهید. با استفاده از کلاس badge و با قرار دادن بج درون تگ مربوطه، میتوانید اطلاعات کوچک را در داخل عناصر بزرگتر نمایش دهید و ظاهری جذاب و قابل توجه برای کاربران ایجاد کنید.
نتیجه‌گیری:
بجها (Badges) در بوت استرپ 5 ابزاری کاربردی هستند که اطلاعات کوچک و مهم را در واجهه کاربری نمایش می‌دهند. در این مقاله، سه نوع اصلی بجها را معرفی کردیم: بجهای زمینهای که با استفاده از رنگ‌ها به اطلاعات مرتبط رنگ می‌دهند، بجهای Pill با شکل گرد و ظاهر زیبا و بج در داخل عنصر که به کاربران اجازه می‌دهد بج را در داخل عناصر دیگر قرار دهند. با استفاده از این امکانات، توسعه‌دهندگان می‌توانند اطلاعات را به صورت جذاب و متمایز در واجهه کاربری نمایش داده و تجربه کاربری بهتری را برای کاربران خلق کنند.
