السلام عليكم و رحمة الله و بركاته.
مرحبا بكم في درس جديد في دورتنا حول البوتستراب 3 و سيكون عن الجداول في البوتستراب 3 .
تحتوي البوتستراب 3 على مجموعة من الأصناف ( Css Classes ) التي تعمل على تنسيق جداول الـ Html , سنذكرها في هذا الدرس بالتفصيل صنف بصنف .
1 – صنف الـ table. :
الشكل الإفتراضي للجداول في البوتستراب 3 يظهر بإستخدام صنف الـ table. داخل وسم الـ <table> كما هو موضح الكود التالي :
<table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Operating System</th> </tr> </thead> <tbody> <tr> <td>Linus</td> <td>Trovaldo</td> <td>Linus@example.com</td> </tr> <tr> <td>Steve</td> <td>Jobs</td> <td>Steve@example.com</td> </tr> <tr> <td>Bill</td> <td>Gates</td> <td>Bill@example.com</td> </tr> </tbody> </table>
- مثال على إستخدام الـ table. :
2 – صنف الـ table-stripped. :
عند إضافة صنف الـ table-stripped. إلى صنف الـ table. يتغير لون الصفوف في الجدول إلى اللون الرمادي الفاتح صف بصف و لإظهار ذلك نستخدم هذا الكود :
<table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Operating System</th> </tr> </thead> <tbody> <tr> <td>Linus</td> <td>Trovaldo</td> <td>Linus@example.com</td> </tr> <tr> <td>Steve</td> <td>Jobs</td> <td>Steve@example.com</td> </tr> <tr> <td>Bill</td> <td>Gates</td> <td>Bill@example.com</td> </tr> </tbody> </table>
- مثال على إستخدام الـ table-stripped. :
3 – صنف الـ table-bordered. :
يسمح هذا الصنف عند إضافته لصنف الـ table. في وسم الـ <table> بوضع الجدول ضمن إطار , أي أن حدود الجدول ستكون ملونة باللون الرمادي الفاتح .
هذا الكود يوضح كيفية إستخدامه :
<table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Operating System</th> </tr> </thead> <tbody> <tr> <td>Linus</td> <td>Trovaldo</td> <td>Linus@example.com</td> </tr> <tr> <td>Steve</td> <td>Jobs</td> <td>Steve@example.com</td> </tr> <tr> <td>Bill</td> <td>Gates</td> <td>Bill@example.com</td> </tr> </tbody> </table>
– مثال على إستخدام الـ table-bordered. :
4 – صنف الـ table-hover. :
يستخدم هذا الصنف لإضافة هوفر للصفوف في الجدول أي أنه عند وضع مؤشر الفأرة فوق أي صف سيظهر الصف بخلفية رمادية فاتحة .
نستعمل نفس الطريقة في الأمثلة السابقة لاحظ الكود التالي :
<table class="table table-hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Operating System</th> </tr> </thead> <tbody> <tr> <td>Linus</td> <td>Trovaldo</td> <td>Linus@example.com</td> </tr> <tr> <td>Steve</td> <td>Jobs</td> <td>Steve@example.com</td> </tr> <tr> <td>Bill</td> <td>Gates</td> <td>Bill@example.com</td> </tr> </tbody> </table>
- مثال على إستخدام الـ table-hover. :
5 – تلوين صفوف الجدول بإستخدام ألون البوتستراب 3 :
يمكن إضافة بعض الأصناف الخاصة بالألوان في البوتستراب 3 على الجداول حيث كل لون له مدلول معين , الكود التالي يحتوي على كل الألون مع شرح حالات إضافة كل لون .
<table class="table table-bordered"> <thead> <tr> <th>Class Color</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Default</td> <td> اللون الإفتراضي للصف </td> </tr> <tr class="success"> <td>.Success</td> <td> يستخدم هذا اللون للدلالة على شيئ إيجابي أو صحيح </td> </tr> <tr class="danger"> <td>.Danger</td> <td> يستخدم هذا اللون للدلالة على شيئ سلبي أو خاطئ </td> </tr> <tr class="info"> <td> Info </td> <td> ستخدم هذا اللون للدلالة على معلومات محددة </td> </tr> <tr class="warning"> <td> .Warning </td> <td> يستخدم هذا اللون لتحذير من شيئ محدد </td> </tr> <tr class="active"> <td>.Active</td> <td> يستخدم هذا اللون لتأشير على صف معين </td> </tr> </tbody> </table>
- حيث يظهر هذا الكود بالشكل الآتي :
6 – صنف الـ table-responsive. :
يستعمل هذا الصنف لجعل الجدول متجاوب مع جميع أنواع الشاشات , حيث يظهر الجدول في الشاشة الصغيرة مع شريط التمرير الأ فقي ( scroll horizontally bar ) أسفل الجدول ليستطع المستخدم تصفح جميع خانات الجدول .
تفقد الكود التالي لتعرف كيفية إستعمال هذا الصنف :
<div class="table-responsive"> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Operating System</th> </tr> </thead> <tbody> <tr> <td>Linus</td> <td>Trovaldo</td> <td>Linus@example.com</td> </tr> <tr> <td>Steve</td> <td>Jobs</td> <td>Steve@example.com</td> </tr> <tr> <td>Bill</td> <td>Gates</td> <td>Bill@example.com</td> </tr> </tbody> </table> </div>
- مثال على الـ table-responsive. في البوتستراب 3 :
هذا كل ما يتعلق بتنسيق جداول الـ Html في البوتستراب 3 .
نرجو من الله أنكم إستفدتم من هذه المعلومات و شكرا جزيلا .
المصـادر : المصدر 1 , المصدر 2 , المصدر 3 .
أحدث التعليقات