تفصيل استخدام جدول Bootstrap

الجدول أدناه يعرض بعض عناصر الجداول التي يدعمها Bootstrap:

فئات الجدول:

.table: إضافة النمط الأساسي إلى أي <table> (يحتوي فقط على خطوط أفقية)
.table-striped: إضافة نطاطات تشبه نطاطات البزاق في <tbody> (لا يدعمها IE8)
.table-bordered: إضافة حواف إلى جميع خلايا الجدول
.table-hover: تعطيل حالة الاستدعاء بالفأرة في أي سطر داخل <tbody>
.table-condensed: تجعل الجدول أكثر تضيقا

<tr>, <th> و <td> classes:

.active: تطبيق لون النشطة على السطر أو الخلية
.success: تشير إلى عملية ناجحة
.info: تشير إلى عملية تغيير المعلومات
.warning: تشير إلى عملية تحذير
.danger: تشير إلى عملية خطيرة

<table class="table"> 
 <caption>تنسيق جدول السياق</caption> 
 <thead> 
  <tr> 
   <th>المنتج</th> 
   <th>تاريخ الدفع</th> 
   <th>الحالة</th></tr> 
 </thead> 
 <tbody> 
  <tr class="active"> 
   <td>منتج 1</td> 
   <td>23/11/2013</td> 
   <td>في طور الشحن</td></tr> 
  <tr class="success"> 
   <td>منتج 2</td> 
   <td>10/11/2013</td> 
   <td>في طور الشحن</td></tr> 
  <tr class="warning"> 
   <td>منتج 3</td> 
   <td>20/10/2013</td> 
   <td>في الانتظار للتحقق</td></tr> 
  <tr class="danger"> 
   <td>منتج 4</td> 
   <td>20/10/2013</td> 
   <td>تم إرجاع المنتج</td></tr> 
 </tbody> 
</table> 

جدول تفاعلي

من خلال وضع أي .table في داخلي .table-responsive class، يمكنك جعل الجدول يتحرك أفقيًا للتكيف مع الأجهزة الصغيرة (أقل من 768px). عند عرضه على أجهزة كبيرة أوسع من 768px، لن ترى أي فرق.

هذا هو نهاية محتوى هذا المقال، آمل أن يكون قد ساعدكم في التعلم، وأتمنى أن تدعموا دليل التعليمات.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ويتمتع المالك الأصلي بحقوق الملكية، ويتم جمع المحتويات من إسهامات المستخدمين عبر الإنترنت الذين يقومون بتحميلها بأنفسهم، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتويات بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا رأيت محتوى يشتبه في حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وتقديم الدليل على ذلك، إذا تم التحقق من ذلك، فإن هذا الموقع سيرفع المحتوى المشبوه فورًا.