Bootstrap

Bootstrap Tables
الجداول في BootStrap

ستتعلم في هذا الدرس عمل جداول متناسقه ومتجاوبة وان تتحكم في صفوف واعمدة الجدول بسهوله باستخدام bootsrap.

التاريخ

01 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1375

المواضيع

6
الشروحات chevron_left Bootstrap Tables chevron_left Bootstrap

Bootstrap Tables
الجداول في BootStrap

</> BootSrap Basic Table
الجدول الاساسي في bootstrap

بسبب انتشار استخدام الجداول في التطبيقات المختلفة; عمل bootstrap على توفير كلاسات تمكن المطورين من تنسيق اي جدول باشكال مختلفة.

يتم اضافة الكلاس table الى عنصر <table> داخل صفحة HTML لاعطاءه basic table format تنسيق الجدول الرئيسي والذي هو عبارة عن padding قليل وخطوط افقية بعد كل صف.

BootStrap Basic

عمل تنسيق اساسي للجدول باستخدام كلاس table.

<table class="table">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
</table>

</> BootStrap Striped Rows Table
الجدول ذو الصفوف المخططة في bootstrap

بعد اضافة كلاس table الى عنصر <table> لعمل التنسيقات الاساسية للجدول, يمكن اضافة كلاس اخر وهو table-striped لتلوين صفوف الجدول باللون الابيض والرمادي بالتبادل.

Striped Rows

استخدام كلاس table-striped لتخطيط الجدول بالابيض والرمادي.

<table class="table table-striped">
   <thead>
     <tr>
       <th>Firstname</th>
       <th>Lastname</th>
       <th>Email</th>
    </tr>
   </thead>
</table>

</> BootStrap Striped Columns
الاعمدة المخططة في bootstrap

يمكن اضافة كلاس table-striped-columns بجانب كلاس table في عنصر <table> لتخطيط اعمدة الجدول باللونين الابيض والرمادي. 

Striped Columns

عمل جدول باعمدة مخططة.

<table class="table table-striped-columns">
   <thead>
     <tr>
       <th>Firstname</th>
       <th>Lastname</th>
       <th>Email</th>
    </tr>
   </thead>
</table>

</> BootStrap Bordered Tables
الجداول ذات الحدود في bootstrap

  • يمكن استخدام كلاس table-bordered لاضافة اطار على كل جوانب الجدول ولكل cell خلية بداخله.
  • للتحكم في الوان border الاطار يتم اضافة كلاس *-border حيث * تاخذ القيم (primary - secondary - info - success - danger- warning - dark - light).
Bordered Table

عمل اطار لكل خلية داخل الجدول باستخدام كلاس bordered-tabled.

<table class="table table-bordered">
  <thead>
   <tr>
     <th>Firstname</th>
     <th>Lastname</th>
     <th>Email</th>
   </tr>
 </thead>
</table>

</> BootStrap Borderless Tables
جداول بدون اطارات في bootstrap

على عكس كلاس table-bordered الذي يقوم باضافة اطار لكل خلية في الجدول, كلاس table-borderless يقوم بازالة اي اطار موجود في الجدول.

Borderless Table

استخدام كلاس table-borderless لازالة جميع الاطارات من الجدول.

<table class="table table-borderless">
  <tbody>
   <tr>
      <td>Mohamed</td>
      <td>Ahmed</td>
      <td>[email protected]</td>
   </tr>
  </tbody>
 </table>

</> BootStrap Hoverable Rows Table
جدول ذو صفوف تقبل اجراء hover في bootstrap

يستخدم كلاس table-hover لاضافة خلفية رمادية لاي row صف داخل <tbody> جسم الجدول عند الوقف عليه بالمؤشر.

Hover Rows

تليون الصفوف بلون رمادي عند الوقف عليها بالمؤشر.

<table class="table table-hover">
  <tbody>
    <tr>
     <td>Mohamed</td>
     <td>Ahmed</td>
     <td>[email protected]</td>
    </tr>
  </tbody>
</table>
هام
لاحظ ان كلاس table-hover لا يعمل على الصف الموجود داخل عنصر thead.

</> BootStrap Table Contextual Classes
الكلاسات السياقية مع الجدول في bootstrap

  • contextual classes الكلاسات السياقية هي كلاسات تستخدم لاضافة الوان للنصوص والخلفيات والجدوال.
  • في حالة الجدول تكون الكلاسات القياسية بهذا الشكل *-table حيث * هي احد هذه الالوان(primary - secondary - info - success - danger - warning - dark - white - active).
Contextual Classes

استخدام الكلاسات السياقية لتغيير لون كل صف.

<table class="table">
  <tr class="table-primary">
    <td>Primary</td>
    <td>Joe</td>
    <td>[email protected]</td>
  </tr>  
</table>

</> BootStrap Small Table
الجدول الصغير في bootstrap

يتيح bootstrap امكانية التحكم في حجم الخلايا الخاصة بالجدول من خلال كلاس table-sm الذي يستخدم لتقليل padding الخلايا الى النصف مما يجعل الجدول اصغر.

Small Table

استخدام كلاس table-sm لتقليل حجم الجدول.

<table class="table table-sm table-bordered">
  <tr>
    <td>Default</td>
    <td>Defaultson</td>
    <td>[email protected]</td>
  </tr> 
</table>

</> BootStrap Responsive Tables
الجداول المتجاوبة في bootstrap

  • يستخدم كلاس table-responsive لاضافة scrollbar افقي للجدول في الاجهزة الصغيره ليتمكن الزائر من تحريك الجدول يميناً ويساراً لكي يقرأ جميع محتوي الجدول.
  • كلاس table-responsive يجعل الجدول متجاوبا مع جميع الاجهزة ولكن يجب اضافته للعنصر الاب الذي يحتوي الجدول وليس الى الجدول نفسه.
Responsive Table

مثال على الجدول المتجاوب

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
      </tr>
    </tbody>
  </table>
</div>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.