دليل Bootstrap4 الأساسي

شريط التقدم في Bootstrap4 مجموعات الأزرار في Bootstrap4

الشعارات في Bootstrap4

تستخدم الشارات عادةً في صفحات الويب لتحديد بعض المعلومات القيمة، مثل العناوين المهمة، الرسائل التحذيرية، مراجم العدادات، إلخ. الشارات (Badges) تستخدم لتحديد العناصر الجديدة أو غير المقرآة. إذا كنت ترغب في استخدام الشارات، فما عليك سوى إضافة فئة .badge مع فئة اللون المحددة (مثل .badge-secondary) إلى <span> يمكن تغيير حجم الشارات بناءً على حجم العنصر الأب:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>الشعارات</h2>
<h1>Bootstrap عنوان <span　class="badge　badge-secondary">جديد</span></h1>
<h2>Bootstrap عنوان <span　class="badge　badge-secondary">جديد</span></h2>
<h3>Bootstrap عنوان <span　class="badge　badge-secondary">جديد</span></h3>
<h4>Bootstrap عنوان <span　class="badge　badge-secondary">جديد</span></h4>
<h5>Bootstrap عنوان <span　class="badge　badge-secondary">جديد</span></h5>
<h6>Bootstrap عنوان <span　class="badge　badge-secondary">جديد</span></h6>
</div>
</body>
</html>

اختبار لرؤية ‹/›

الشعارات بألوان متنوعة

الشعارات بألوان متنوعة المذكورة أدناه:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>الشعارات بألوان متنوعة</h2>
　　<span　class="badge　badge-primary">مهم</span>
　　<span　class="badge　badge-secondary">ثانوي</span>
　　<span　class="badge　badge-success">نجاح</span>
　　<span　class="badge　badge-danger">خطير</span>
　　<span　class="badge　badge-warning">تحذير</span>
　　<span class="badge badge-info">معلومات</span>
　　<span class="badge badge-light">فاتح</span>
　　<span class="badge badge-dark">داكن</span>
</div>
</body>
</html>

اختبار لرؤية ‹/›

شريط الشهرة على شكل حبة

استخدم صفة .badge-pill لضبط شريط الشهرة على شكل حبة:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>شريط الشهرة على شكل حبة</h2>
　　<span class="badge badge-pill badge-default">افتراضي</span>
　　<span class="badge badge-pill badge-primary">أساسي</span>
　　<span class="badge badge-pill badge-success">نجاح</span>
　　<span class="badge badge-pill badge-info">معلومات</span>
　　<span class="badge badge-pill badge-warning">تحذير</span>
　　<span class="badge badge-pill badge-danger">مخاطرة</span>
</div>
</body>
</html>

اختبار لرؤية ‹/›

شريط الشهرة يمكن إدراجه داخل العنصر

في هذا المثال، سيتم إدراج شريط الشهرة داخل الزر:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>إدراج الشعار في الزر</h2>
　　<button type="button" class="btn btn-primary">
　　　　رسائل <span class="badge badge-light">4</span>
　　</button>
　　<button type="button" class="btn btn-danger">
　　　　إشعارات <span class="badge badge-light">7</span>
　　</button>
</div>
</body>
</html>

اختبار لرؤية ‹/›

شريط التقدم في Bootstrap4 مجموعات الأزرار في Bootstrap4