Bootstrap

Bootstrap Colors
الالوان في BootStrap

ستتعلم في هذا الدرس كيفية تلوين النصوص بسهولة بعد اضافة بعض الكلاسات باستخدام اطار عمل bootstrap.

التاريخ

01 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1816

المواضيع

6
الشروحات chevron_left Bootstrap Colors chevron_left 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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.