جمعية البرمجيات الحرة وغنو لينكس
  • الرئيسية
  • تصنيفات
    • اخبار
    • العاب
    • برامج
    • مراجعات
    • مقابلات
    • مقالات
    • دروس
      • بوتستراب
    • عتاد
  • النوادي
    • النادي الحر
    • نادي التوطين و التوثيق
    • نادي الانترنت و الحماية
    • نادي الغرافيكس و الالعاب
    • نادي الملتيميديا
    • نادي البرمجة
  • نشاطات الجمعية
  • ليبر بلانت الجزائر
اختر صفحة
لـ aleua mehani | 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 .

 

 

دورة بوتستراب 3 - الدرس الثالث bootstrap typography
دورة البوتستراب 3 - الدرس الخامس Bootstrap 3 Images

مقالات ذات صلة

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

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

    السلام عليكم و رحمة الله و بركاته . مرحبا بكم في الدرس السابع من دورتنا حول البوتستراب و الذي سيكون حول رسائل... دورة بوتستراب 3 – الدرس السابع bootstrap alerts اقرأ المزيد
  • دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells

    دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells

      السلام عليكم و رحمة الله وبركاته . سنتعرف في هذا الدرس على ثلاث عناصر جديدة في البوتستراب 3 وهي : jumbotron ,... دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells اقرأ المزيد
  • دورة البوتستراب 3 – الدرس الخامس  Bootstrap 3 Images

    دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images

      السلام عليكم و رحمة الله و بركاته . سنتطرق في هذا الدرس إن شاء الله إلى مجموعة جديدة من خصائص البوتستراب 3 و التي... دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images اقرأ المزيد

أرسل إلغاء الرد

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

أحدث المقالات

  • مع shellinabox وداعا لبرامج الـ shh
  • اطلاق اوبنتو 19.10 (Eoan Ermin)
  • دورة بوتستراب 3 – الدرس السابع bootstrap alerts
  • دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells
  • دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images

أحدث التعليقات

  • hasan mohamed على مع shellinabox وداعا لبرامج الـ shh
  • khammaci hachemi على فيديو: د.رتشارد ستالمان : ماهي البرمجيات الحرة
  • aleua mehani على دورة بوتستـراب 3 – الدرس الأول
  • حياة على دورة بوتستـراب 3 – الدرس الأول
  • Alili Mohamed على البرمجيات المفتوحة المصدر ، مصدر مفتوح لتعدد اللغة كيفما تشاء ..
بتقنية مهارتي | ووردبريس