انتقل إلى محتوى الدرس

Contextual Table Colors ألوان الجداول السياقية

صمّم جداول بيانات احترافية ومتاحة في بوتستراب 5.3 باستخدام كلاس table والألوان السياقية وتخطيط الصفوف والأعمدة وتفاعل المرور والحدود المضغوطة والجداول المتجاوبة للتمرير.
3 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لتمييز حالة سجل معين بصرياً في تقارير المراقبة أو الفواتير، يوفر بوتستراب 5 ثمانية كلاسات لونية دلالية تبدأ من .table-primary و.table-success و.table-warning و.table-danger وصولاً إلى .table-info و.table-secondary و.table-light و.table-dark.

يمكنك تطبيق أي من هذه الكلاسات على وسم <table> بالكامل، أو على صف محدد <tr>، أو حتى على خلية مفردة <td>، مع الحرص على وجود نص واضح يفسر الحالة داخل الخلية وعدم الاكتفاء باللون وحده ضماناً لإتاحة قارئات الشاشة.

الصف 2 كود برمجي
HTML
<table class="table">
  <thead>
    <tr><th scope="col">#</th><th scope="col">Node</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>api-eu-central</td></tr>
    <tr class="table-info"><td>2</td><td>edge-me</td></tr>
  </tbody>
</table>
الصف 3 ملاحظة هامة