Bootstrap Colors
الالوان في BootStrap
ستتعلم في هذا الدرس كيفية تلوين النصوص بسهولة بعد اضافة بعض الكلاسات باستخدام اطار عمل bootstrap.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap Colors
الالوان في BootStrap
</>
BootStrap Background Colors
الوان الخلفية في BootStrap
يحتوي bootstrap على مجموعة كلاسات تستخدم لاضافة خلفية لاي عنصر بالوان تتناسب مع الغرض من هذا العنصر اذا كان عنوان رئيسي او تحذير او معلومات وغيرها.
الكلاس المستخدمة لاعطاء background هو *-bg حيث * هي احد هذه القيم ( primary - secondary - info- success - danger - warning - dark - light - white - body - transparent ).
Background Color Classes
استخدام كلاسات تغيير لون الخلفية.
<div class="container">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors".</p>
<p>Note that you can also add a .text-* class if you want a different text color:</p>
<p class="bg-primary text-white">This text is important.</p>
<p class="bg-success text-white">This text indicates success.</p>
<p class="bg-info text-white">This text represents some information.</p>
<p class="bg-warning text-white">This text represents a warning.</p>
<p class="bg-danger text-white">This text represents danger.</p>
</div>
</>
BootStrap Background Gradient
الخلفية المتدرجة في bootstrap
لا يكتفي bootstrap باضافة لون للخلفية فقط, بل يوفر ايضا كلاسات لعمل gradient background خلفية متدرجة باستخدام كلاس bg-gradient عندما يتم اضافته بجانب كلاسات لون الخلفية التي ذكرناها قبل قليل.
Background Gradient
عمل خلفية متدرجة في bootstrap.
<div class="bg-primary bg-gradient text-white mt-3">primary gradient</div>
</>
Bootstrap Text Colors
الوان النصوص في bootstrap
يحتوي bootstrap على مجموعة كلاسات يمكنها التحكم في الوان النصوص وكل لون له معني فمثلاً لعمل رساله تحذيرية فيمكنك استخدام كلاس warning. او كلاس danger.
وهذه هي كل كلاسات الالوان المتاحة في bootstrap حتى الان:
| الكلاس | لون النص |
| text-primary | ازرق فاتح |
| text-secondary | رمادي |
| text-info | لبني |
| text-success | اخضر |
| text-danger | احمر |
| text-warning | برتقالي |
| text-dark | رمادي غامق |
| text-white | ابيض |
| text-light | رمادي بشفافية عالية |
| text-muted | رمادي فاتح |
| text-body | لون نص عنصر body |
Text Colors
تطبيق الكلاسات الخاصة بالوان النصوص.
<div class="container">
<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>
</div>
هام
- يمكن استخدام text color classes كلاسات الوان النصوص مع جميع العناصر مثل links الروابط و headings العناوين و paragraphs الفقرات.
</>
BootStrap Text Opacity
شفافية النص في bootstrap
في حالة استخدام كلاس text-black. (اللون الافتراضي للنص) او text-white. فيمكن كتابتهما بهذا الشكل text-black-50. او text-white-50. لاضافة شفافية بنسبة 50% لهذا النص.
Text Opacity
عمل شفافية بنسبة 50% للنصوص.
<div class="bg-danger text-white-50">Text Opacity 50%</div> <div class="bg-warning text-black-50">Text Opacity 50%</div>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
