الفرق بين المراجعتين ل"Bootstrap/colors"
اذهب إلى التنقل
اذهب إلى البحث
(إنشاء الصفحة) |
(4.5) |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الألوان في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:الألوان في إطار العمل Bootstrap}}</noinclude> | ||
| − | [[تصنيف:Bootstrap]][[تصنيف:Bootstrap utilities]] | + | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] |
| + | [[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]] | ||
| + | استخدم الألوان لتوصيل رسائلك باستخدام أصناف الألوان الخدميّة التي يوفّرها إطار العمل Bootstrap. تتضمّن أدوات الألوان في Bootstrap دعم تنسيق الروابط في حالة الحومان (hover). | ||
| + | |||
| + | == الألوان == | ||
| + | <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-body">.text-body</p> | ||
| + | <p class="text-muted">.text-muted</p> | ||
| + | <p class="text-white bg-dark">.text-white</p> | ||
| + | <p class="text-black-50">.text-black-50</p> | ||
| + | <p class="text-white-50 bg-dark">.text-white-50</p> | ||
| + | </syntaxhighlight>تعمل أصناف سياق النصّ (<code>.text-*</code>) السابقة كذلك على الروابط وتوفّر تنسيقات لحالة الحومان وتركيز المؤشّر. '''تُرجَى ملاحظة أنّ الصنفيْن <code>.text-white</code> و<code>.text-muted</code> لا يوفّران أنماط تنسيق للروابط'''.<syntaxhighlight lang="html"> | ||
| + | <p><a href="#" class="text-primary">Primary link</a></p> | ||
| + | <p><a href="#" class="text-secondary">Secondary link</a></p> | ||
| + | <p><a href="#" class="text-success">Success link</a></p> | ||
| + | <p><a href="#" class="text-danger">Danger link</a></p> | ||
| + | <p><a href="#" class="text-warning">Warning link</a></p> | ||
| + | <p><a href="#" class="text-info">Info link</a></p> | ||
| + | <p><a href="#" class="text-light bg-dark">Light link</a></p> | ||
| + | <p><a href="#" class="text-dark">Dark link</a></p> | ||
| + | <p><a href="#" class="text-muted">Muted link</a></p> | ||
| + | <p><a href="#" class="text-white bg-dark">White link</a></p> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == ألوان الخلفية == | ||
| + | يمكن تعيين ألوان خلفيّات العناصر بسهولة على نحو مماثل لألوان النصّ السابقة. يعتم لون خلفيّة الروابط عند الحومان فوقها، كما يحدُث لألوان النصوص. '''لا تعيّن''' أدوات الخلفيّة قيمة الخاصيّة <code>[[CSS/color|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> | ||
| + | <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</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>[[HTML/div|<nowiki><div></nowiki>]]</code> يُطبَّق عليه الصنف السيّاقي المطلوب. | ||
| + | |||
| + | تنبيه: توصيل المعنى إلى التقنيّات المساعدة | ||
| + | |||
| + | يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي) أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف <code>.sr-only</code>. | ||
| + | |||
| + | == مصادر == | ||
| + | * [https://getbootstrap.com/docs/4.5/utilities/colors/ صفحة Colors في توثيق Bootstrap]. | ||
المراجعة الحالية بتاريخ 08:03، 14 يوليو 2020
استخدم الألوان لتوصيل رسائلك باستخدام أصناف الألوان الخدميّة التي يوفّرها إطار العمل Bootstrap. تتضمّن أدوات الألوان في Bootstrap دعم تنسيق الروابط في حالة الحومان (hover).
الألوان
<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-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
تعمل أصناف سياق النصّ (.text-*) السابقة كذلك على الروابط وتوفّر تنسيقات لحالة الحومان وتركيز المؤشّر. تُرجَى ملاحظة أنّ الصنفيْن .text-white و.text-muted لا يوفّران أنماط تنسيق للروابط.
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</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>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</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.