Source

الجداول

توثيق وأمثلة لتصميم الجداول (نظرًا لاستخدامها السائد في ملحقات جافا سكريبت) مع Bootstrap.

أمثلة

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

باستخدام أبسط ترميز الجدول ، إليك كيف .tableتبدو الجداول المستندة إلى كيفية في Bootstrap. يتم توريث جميع أنماط الجدول في Bootstrap 4 ، مما يعني أن أي جداول متداخلة سيتم تصميمها بنفس طريقة النمط الأصلي.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

يمكنك أيضًا عكس الألوان - بنص فاتح اللون على الخلفيات الداكنة - باستخدام .table-dark.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

خيارات رأس الجدول

على غرار الجداول والجداول المظلمة ، استخدم فئات التعديل .thead-lightأو .thead-darkلجعلها <thead>تظهر باللون الرمادي الفاتح أو الغامق.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

صفوف مخططة

استخدمه .table-stripedلإضافة مخطط حمار وحشي إلى أي صف جدول داخل ملف <tbody>.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

جدول بحدود

أضف .table-borderedللحدود الموجودة على كل جوانب الجدول والخلايا.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

طاولة بلا حدود

أضف .table-borderlessلجدول بلا حدود.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-borderlessيمكن استخدامها أيضًا على الطاولات المظلمة.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

صفوف يمكن تحريكها

إضافة .table-hoverلتمكين حالة التمرير على صفوف الجدول داخل ملف <tbody>.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

طاولة صغيرة

أضف .table-smلجعل الجداول أكثر إحكاما عن طريق قطع حشوة الخلايا إلى النصف.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

الفئات السياقية

استخدم الفئات السياقية لتلوين صفوف الجدول أو الخلايا الفردية.

فصل عنوان عنوان
نشيط خلية خلية
تقصير خلية خلية
الأولية خلية خلية
ثانوي خلية خلية
النجاح خلية خلية
خطر خلية خلية
تحذير خلية خلية
معلومات خلية خلية
خفيفة خلية خلية
مظلم خلية خلية 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

لا تتوفر متغيرات خلفية الجدول العادية مع الجدول المظلم ، ومع ذلك ، يمكنك استخدام أدوات مساعدة للنص أو الخلفية لتحقيق أنماط مماثلة.

# عنوان عنوان
1 خلية خلية
2 خلية خلية
3 خلية خلية
4 خلية خلية
5 خلية خلية
6 خلية خلية
7 خلية خلية
8 خلية خلية
9 خلية خلية 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
إيصال المعنى للتقنيات المساعدة

يوفر استخدام اللون لإضافة معنى فقط إشارة مرئية ، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة - مثل قارئات الشاشة. تأكد من أن المعلومات التي يشير إليها اللون إما واضحة من المحتوى نفسه (مثل النص المرئي) ، أو يتم تضمينها من خلال وسائل بديلة ، مثل النص الإضافي المخفي مع .sr-onlyالفصل.

أنشئ جداول متجاوبة بلف أي .tableمنها .table-responsive{-sm|-md|-lg|-xl}، مما يجعل الجدول يتم تمريره أفقيًا عند كل max-widthنقطة توقف تصل إلى (ولكن لا تشمل) 576 بكسل و 768 بكسل و 992 بكسل و 1120 بكسل على التوالي.

لاحظ أنه نظرًا لأن المتصفحات لا تدعم حاليًا استعلامات سياق النطاق ، فإننا نتعامل مع القيود والبادئات وإطارات min-العرضmax- ذات العروض الكسرية (والتي يمكن أن تحدث في ظل ظروف معينة على الأجهزة عالية الدقة ، على سبيل المثال) باستخدام قيم ذات دقة أعلى لهذه المقارنات .

التسميات التوضيحية

يعمل A <caption>كعنوان للجدول. يساعد المستخدمين الذين يستخدمون برامج قراءة الشاشة في العثور على جدول وفهم ما يدور حوله وتحديد ما إذا كانوا يريدون قراءته.

قائمة المستخدمين
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

جداول مستجيبة

تسمح الجداول المستجيبة بالتمرير أفقيًا بسهولة. اجعل أي جدول مستجيبًا عبر جميع إطارات العرض من خلال لفه .tableبـ .table-responsive. أو ، اختر حدًا أقصى لنقطة توقف بحيث يكون لديك جدول سريع الاستجابة باستخدامه .table-responsive{-sm|-md|-lg|-xl}.

القطع / الاقتطاع العمودي

تستفيد الجداول المستجيبة من overflow-y: hiddenأي محتوى يتجاوز الحواف السفلية أو العلوية للجدول. على وجه الخصوص ، يمكن أن يؤدي هذا إلى قص القوائم المنسدلة وأدوات الطرف الثالث الأخرى.

دائما متجاوب

عبر كل نقطة توقف ، استخدم .table-responsiveالتمرير الأفقي للجداول.

# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية خلية 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

نقطة توقف محددة

استخدمه .table-responsive{-sm|-md|-lg|-xl}حسب الحاجة لإنشاء جداول سريعة الاستجابة حتى نقطة توقف معينة. من نقطة التوقف هذه وما فوق ، سيتصرف الجدول بشكل طبيعي ولن يتم التمرير أفقيًا.

قد تظهر هذه الجداول مقطوعة حتى يتم تطبيق أنماطها المتجاوبة على عروض محددة لإطار العرض.

# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>