Bootstrap Tables
الجداول في 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>
هام
</>
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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
