لـ | 20/04/2018 | عام | 0 تعليقات

دورة بوتستراب 3 – الدرس الرابع bootstrap 3 tables

دورة بوتستراب 3 – الدرس الرابع bootstrap 3 tables

 

السلام عليكم و رحمة الله و بركاته.

مرحبا بكم في درس جديد في دورتنا حول البوتستراب 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 .

 

 

أرسل

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *