الفرق بين المراجعتين ل"Bootstrap/colors"
اذهب إلى التنقل
اذهب إلى البحث
(إنشاء الصفحة) |
(إضافة محتوى الصفحة) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الألوان في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:الألوان في إطار العمل Bootstrap}}</noinclude> | ||
| − | [[تصنيف:Bootstrap]][[تصنيف:Bootstrap utilities]] | + | [[تصنيف:Bootstrap]] |
| + | [[تصنيف:Bootstrap utilities]] | ||
| + | استخدم الألوان لتوصيل رسائلك باستخدام أصناف الألوان الخدميّة التي يوفّرها إطار العمل Bootstrap. تتضمّن أدوات الألوان في Bootstrap دعم تنسيق الروابط في حالة الجومان. | ||
| + | |||
| + | == الألوان == | ||
| + | <syntaxhighlight lang="html"> | ||
| + | <p class="text-primary">.text-primary</p> | ||
| + | <p class="text-secondary">.text-secondary</p> | ||
| + | <p class="text-success">.text-success</p> | ||
| + | <p class="text-danger">.text-danger</p> | ||
| + | <p class="text-warning">.text-warning</p> | ||
| + | <p class="text-info">.text-info</p> | ||
| + | <p class="text-light bg-dark">.text-light</p> | ||
| + | <p class="text-dark">.text-dark</p> | ||
| + | <p class="text-muted">.text-muted</p> | ||
| + | <p class="text-white bg-dark">.text-white</p> | ||
| + | </syntaxhighlight>تعمل أصناف سياق النصّ (<code>.text-*</code>) السابقة كذلك على الروابط وتوفّر تنسيقات لحالة الحومان وتركيز المؤشّر. '''تُرجَى ملاحظة أنّ الصنفيْن <code>.text-white</code> و<code>.text-muted</code> لا يوفّران أنماط تنسيق للروابط'''.<syntaxhighlight lang="html"> | ||
| + | <p><a href="#" class="text-primary">رابط أوّليّ</a></p> | ||
| + | <p><a href="#" class="text-secondary">رابط ثانويّ</a></p> | ||
| + | <p><a href="#" class="text-success">رابط نجاح</a></p> | ||
| + | <p><a href="#" class="text-danger">رابط خطر</a></p> | ||
| + | <p><a href="#" class="text-warning">رابط تحذير</a></p> | ||
| + | <p><a href="#" class="text-info">رابط معلومة</a></p> | ||
| + | <p><a href="#" class="text-light bg-dark">رابط خفيف</a></p> | ||
| + | <p><a href="#" class="text-dark">رابط غامق</a></p> | ||
| + | <p><a href="#" class="text-muted">رابط مكتوم</a></p> | ||
| + | <p><a href="#" class="text-white bg-dark">رابط أبيض</a></p> | ||
| + | |||
| + | |||
| + | </syntaxhighlight> | ||
| + | |||
| + | == ألوان الخلفيّة == | ||
| + | يمكن تعيين ألوان خلفيّات العناصر بسهولة على نحو مماثل لألوان النصّ السابقة. يعتم لون خلفيّة الروابط عند الحومان فوقها، كما يحدُث لألوان النصوص. '''لا تعيّن''' أدوات الخلفيّة قيمة الخاصيّة <code>color</code>، لذا قد تحتاج أحيانًا إلى استخدام الأصناف <code>.text-*</code>.<syntaxhighlight lang="html"> | ||
| + | <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> | ||
| + | <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> | ||
| + | <div class="p-3 mb-2 bg-success text-white">.bg-success</div> | ||
| + | <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> | ||
| + | <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> | ||
| + | <div class="p-3 mb-2 bg-info text-white">.bg-info</div> | ||
| + | <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> | ||
| + | <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> | ||
| + | <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == التدرّج في ألوان الخلفيّة == | ||
| + | يمكن استخدام الأصناف الخدميّة <code>.bg-gradient-</code> إذا أُسنِدت القيمة <code>true</code> إلى المتغيّر <code>$enable-gradients</code>. '''تُعطَّل تدرّجات الخلفيّة (<code>$enable-gradients</code>) مبدئيّا. لن يعمل المثال التالي في الإعدادات المبدئيّة'''. ضُبِطت الإعدادات بهذه الطريقة لتسهيل تخصيص المظهر من اللحظة التي تبدأ فيها باستخدام إطار العمل Bootstrap. راجع [[Bootstrap/theming#.D8.AE.D9.8A.D8.A7.D8.B1.D8.A7.D8.AA Sass|خيّارات Sass]] لمعرفة كيفيّة تفعيل هذه الأصناف والمزيد من التفاصيل عن تخصيص المظهر في Bootstrap.<syntaxhighlight lang="html"> | ||
| + | <div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div> | ||
| + | <div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div> | ||
| + | <div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div> | ||
| + | <div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div> | ||
| + | <div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div> | ||
| + | <div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div> | ||
| + | <div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div> | ||
| + | <div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | ==== التعامل مع المحدِّدات ==== | ||
| + | قد لا تعمل الأصناف السيّاقيّة المذكورة هنا نظرًا لأنّ محدِّدًا آخر أكثر تحديدا. قد يكفي أحيانًا تغليف محتوى العنصُر المطلوب تطبيق التنسيقات عليه في عنصُر <code><nowiki><div></nowiki></code> يُطبَّق عليه الصنف السيّاقي المطلوب. | ||
| + | |||
| + | ==== تنبيه:توصيل المعنى إلى التقنيّات المساعدة ==== | ||
| + | يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي)أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف <code>.sr-only</code>. | ||
| + | |||
| + | == مصادر == | ||
| + | * [https://getbootstrap.com/docs/4.0/utilities/colors/ صفحة Colors في توثيق Bootstrap]. | ||
مراجعة 12:34، 13 أبريل 2018
استخدم الألوان لتوصيل رسائلك باستخدام أصناف الألوان الخدميّة التي يوفّرها إطار العمل Bootstrap. تتضمّن أدوات الألوان في Bootstrap دعم تنسيق الروابط في حالة الجومان.
الألوان
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
تعمل أصناف سياق النصّ (.text-*) السابقة كذلك على الروابط وتوفّر تنسيقات لحالة الحومان وتركيز المؤشّر. تُرجَى ملاحظة أنّ الصنفيْن .text-white و.text-muted لا يوفّران أنماط تنسيق للروابط.
<p><a href="#" class="text-primary">رابط أوّليّ</a></p>
<p><a href="#" class="text-secondary">رابط ثانويّ</a></p>
<p><a href="#" class="text-success">رابط نجاح</a></p>
<p><a href="#" class="text-danger">رابط خطر</a></p>
<p><a href="#" class="text-warning">رابط تحذير</a></p>
<p><a href="#" class="text-info">رابط معلومة</a></p>
<p><a href="#" class="text-light bg-dark">رابط خفيف</a></p>
<p><a href="#" class="text-dark">رابط غامق</a></p>
<p><a href="#" class="text-muted">رابط مكتوم</a></p>
<p><a href="#" class="text-white bg-dark">رابط أبيض</a></p>
ألوان الخلفيّة
يمكن تعيين ألوان خلفيّات العناصر بسهولة على نحو مماثل لألوان النصّ السابقة. يعتم لون خلفيّة الروابط عند الحومان فوقها، كما يحدُث لألوان النصوص. لا تعيّن أدوات الخلفيّة قيمة الخاصيّة color، لذا قد تحتاج أحيانًا إلى استخدام الأصناف .text-*.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
التدرّج في ألوان الخلفيّة
يمكن استخدام الأصناف الخدميّة .bg-gradient- إذا أُسنِدت القيمة true إلى المتغيّر $enable-gradients. تُعطَّل تدرّجات الخلفيّة ($enable-gradients) مبدئيّا. لن يعمل المثال التالي في الإعدادات المبدئيّة. ضُبِطت الإعدادات بهذه الطريقة لتسهيل تخصيص المظهر من اللحظة التي تبدأ فيها باستخدام إطار العمل Bootstrap. راجع خيّارات Sass لمعرفة كيفيّة تفعيل هذه الأصناف والمزيد من التفاصيل عن تخصيص المظهر في Bootstrap.
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>
التعامل مع المحدِّدات
قد لا تعمل الأصناف السيّاقيّة المذكورة هنا نظرًا لأنّ محدِّدًا آخر أكثر تحديدا. قد يكفي أحيانًا تغليف محتوى العنصُر المطلوب تطبيق التنسيقات عليه في عنصُر <div> يُطبَّق عليه الصنف السيّاقي المطلوب.
تنبيه:توصيل المعنى إلى التقنيّات المساعدة
يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي)أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف .sr-only.