Bootstrap 5 Buttons
-
بنتعلم بهذا الدرس كيف ممكن نطبق Bootstrap class على الازرار Buttons عن طريق مجموعن من classes المعرفة مسبقا في Bootstrap وال بنستخدمها في صفحات الانترنت، لتنفيذ الاوامر المطلوبة
هذه classes المعرفة مسبقا هي :
btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark, btn-link
نطبق مثال عملي في صفحة 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">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
النتيجة بتكون :
يمكن تطبيق هذه classes على elements التالية:
<a>, <button>, <input>
الي تعرف باسم
Button tags
نطبق مثال على هذه الاناع ونشوف النتيجة:
<!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">
<h2>Button Elements</h2>
<a href="#" class="btn btn-success">Link Button</a>
<button type="button" class="btn btn-primary">Button</button>
<input type="button" class="btn btn-secondary" value="Input Button">
<input type="submit" class="btn btn-danger" value="Submit Button">
<input type="reset" class="btn btn-warning" value="Reset Button">
</div>
</body>
</html>
النتيجة بتكون :
ملاحظة: استخدمنا الرمز # في الكود:
<a href="#" class="btn btn-success">Link Button</a>
السبب لان ما عندنا رابط في هذا المثال لربطه مع <a> وحتي ما يتم الانتقل الى صفحة خطأ عند النقر فوق <a> استخدمنا هذا الامر. جرب احذف هذا الرمز وانقر فوق <a> وشوف النتيجة.
هذه الاناع يمكن استخدامها ك ازرار في صفحات HTML
Disable text wrapping
اذا كان النص في button بحجم اكبر من عرض button اكيد حيلتف النص الى اسفل وبالتالي ممكن يكون في مشكلة بمظهر الصفحة يمكن تعطيل هذا الالتفاف باستخدام class باسم text-nowrap. في CSS او من خلال Sass باستخدام
$btn-white-space: nowrap
نطبق الكود التالي حتى نفهم الموضوع.
<!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">
<h2>Button Elements</h2>
<button type="button" class="btn btn-success text-nowrap" style="width:100px">Button Button Button </button>
<button type="button" class="btn btn-primary" style="width:100px">Button Button Button </button>
</div>
</body>
</html>
النتيجة :
اولا عملنا تحديد لعرض button بحيث يساوي 100px عن طريق اضافة الكود:
style="width:100px"
وبعدها في Button الاول اضفنا text-nowrap وبناء عليه بتكون النتيجة ان النص تم اقتطاعه وما التف للاسفل، اما button الثاني تم عرض النص في اكثر من سطر حسب حجم الكلام والعرض.
Outline buttons
في هذا class بتم عرض button دون خلفيات الوان او صور فقط عرض اطار بالوان معينه حول button وبسنتخدم classes التالية للتعامل هنا:
btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-outline-danger, btn-outline-warning, btn-outline-info, btn-outline-light, btn-outline-dark
نطبق المثال التالي في صفحة 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">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div>
</body>
</html>
النتيجة:
Sizes
يمكن ايضا التحكم بحجم Button من خلال Bootstrap عن طريقة classes هي :
.btn-lg
.btn-sm
نطبق المثال التالي :
<!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">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
</div>
</body>
</html>
النتيجة :
Active/Disabled Buttons
يمكن ضبط الزر على حالة active (يظهر مضغوطًا) أو حالة تعطيل (غير قابلة للنقر) وبنستخدمclass disabled
نطبق المثال التالي:
<!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">
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
</div>
</body>
</html>
النتيجة:
حاول تحرك المؤشر فوق button وشوف كيف النتيجة.
Spinner Buttons
يمكن اضافة "spinners" إلى الزر والي ممكن تستخدم لاضافة اشارة للتحميل ممكن عند النقر فوق الزر للاشارة الى ان جاري العمل.
نطبق المثال التالي:
<!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">
<h2>Spinner Buttons</h2>
<p>Add spinners to buttons:</p>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-info">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-secondary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-danger" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
</div>
</body>
</html>
النتيجة بتكون:
اترك تعليقك