الاوسام Bootstrap 5 Badges
-
بنتعلم في هذا الدرس تطبيق Badges في Bootstrap 5 . وهي عبارة عن label بخلفية معينه. ممكن تستخدم مع التنبيهات مثلا لعرض عدد التنبيهات (عداد small count)، ايضا تسخدم لاعطاء اسم بلون خلفية ل labeling component
نطبق مثال بشكل سريع حتى نفهم شو يعني Badges
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="container mt-3">
<h2>Badges</h2>
<h1>Example heading h1 <span class="badge bg-secondary">New</span></h1>
<h2>Example heading h2 <span class="badge bg-secondary">New</span></h2>
<h3>Example heading h3<span class="badge bg-secondary">New</span></h3>
<h4>Example heading h4<span class="badge bg-secondary">New</span></h4>
<h5>Example heading h5<span class="badge bg-secondary">New</span></h5>
<h6>Example heading h6<span class="badge bg-secondary">New</span></h6>
</div>
</div>
</body>
</html>
النتيجة:
في هذا المثال استخدمنا class باسم badge. وطبقنا اللون الرمادي باستخدام class المسمى bg-secondary. يحتوي Bootstrap على عدد من classes بالوان مختلفه وهذه classes هي :
bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark
تطبيق Contextual Badges
نطبق المثال التالي بصفحة HTML ونشوف النتيجة:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="container mt-3">
<h2>Badges</h2>
<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>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
</div>
</div>
</body>
</html>
النتيجة:
في هذا الكود طبقنا class باسم badge وفي كل <span> طبقنا لون مختلف باستخدام class مختلف وهي :
bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark
تطبيق Pill Badges
ممكن نطبق badge في bootstrap بحيث يكون الاطار مدور قليلا rounded وبنستخدم الكود rounded-pill.
نطبق الكود التالي في صفحة HTML ونشوف النتيجة:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="container mt-3">
<h2>Badges</h2>
<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>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
</div>
</div>
</body>
</html>
النتيجة:
طبقنا class باسم rounded-pill. لكل <span> بلون مختلف باستخدام classes الخاصة بخلفية الألوان.
تطبيق Badge inside an Element
يمكن تطبيق Badge داخل Element لعرض قيمة معينه، مثال لعرض عداد صغير مثلا للتنبيهات.
نطبق الكود التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="container mt-3">
<h2>
Badge inside an Element
</h2>
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-danger">4</span>
</button>
</div>
</div>
</body>
</html>
النتيجة :
في هذا المثال اضفنا button وطبقنا عليه class باسم btn btn-primary لعرض كلمة Notifications وداخل هذا button اضفنا <Span> وطبقنا عليه class باسم badge bg-danger بهدف عرض هذا span على شكل badge واضافة اللون الاحمر كخلفيه له. والنتيجة عرض رقم بالتنبيهات يمكن استخدامها في التطبيقات.
تغيير مكان Badge inside an Element
في المثال السابق اضفنا عداد بلون احمر داخل button واكيد لاحظت ان مكان هذا العداد وسط button. يمكن في bootstrap التحكم بمكان هذا badge لعرض العداد في الزاوية العلوية اليمين ل button.
نطبق الكود التالي ونشوف النتيجة:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="container mt-3">
<h2>
Badge inside an Element
</h2>
<br />
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
15+
<span class="visually-hidden">unread messages</span>
</span>
</button>
</div>
</div>
</body>
</html>
النتيجة:
الكود السابق اضفنا button وطبقنا عليه class باسم btn btn-primary position-relative بهدف تغيير اللون وتحديد المكان. وبعدها داخل هاذ button اضفنا <span> وطبقنا عليها مجموعة class التالية
position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger
وهي المسؤوله عن عرض العداد باللون الاحمر بالمكان العلوي
اترك تعليقك