Bootstrap 5 Colors
-
بنتعلم في هذا الدرس نظام الألوان في Bootstrap ويعتبر نظام شامل يستخدم مع HTML Elements.هذه الامر اكيد يتيح إمكانية تخصيص وامتداد اكثر شمولاً لأي مشروع.ويحتوي Bootstrap على مجموعة من class المعرفة مسبقا التي يمكن استخدامها
Text Theme Colors
text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body
نبدأ بتطبيق مثال على هذه Class حتى نفهم الموضوع:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Welcome, 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>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>
</body>
</html>
يحتوي على مجموعه من class المعرفة مسبقا لألوان الخلفيات. مثل:
bg-danger, bg-dark, bg-info, bg-light, bg-primary, bg-secondary, bg-success, bg-transparent, bg-warning, bg-white
نطبق الكود التالي في صفحة HTML ونشوف النتيجة:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Welcome, 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>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="bg-danger">This text is muted.</p>
<p class="bg-dark">This text is important.</p>
<p class="bg-info">This text indicates success.</p>
<p class="bg-light">This text represents some information.</p>
<p class="bg-primary">This text represents a warning.</p>
<p class="bg-secondary">This text represents danger.</p>
<p class="bg-success">Secondary text.</p>
<p class="bg-transparent">This text is dark grey.</p>
<p class="bg-warning">Default body color (often black).</p>
<p class="bg-white">This text is light grey (on white background).</p>
</div>
</body>
</html>
تغيير درجة العتامه opacity في Bootstrap
يمكن التحكم بدرجة العتامه للنص باستخدام الكود التالي :
class="text-black-50"
هذا الكود يعني ان بتكون درجة opacity تساوي 50% ل لون النص
طبق الكود التالي :
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Welcome, 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>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-black-50 bg-danger">This text is muted.</p>
<p class="text-black-50 bg-info">This text is important.</p>
<p class="text-black bg-info">This text indicates success.</p>
</div>
</body>
</html>
النتيجة :
اترك تعليقك