HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

جداول التمهيد 4

❮ سابق التالي ❯

Bootstrap 4 Basic Table

يحتوي جدول Bootstrap 4 الأساسي على حشوة خفيفة وفواصل أفقية.

يضيف الفصل .tableنمطًا أساسيًا إلى الجدول:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

صفوف مخططة

يضيف الفصل .table-stripedخطوط حمار وحشي إلى طاولة:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

جدول يحد

يضيف الفصل .table-borderedحدودًا على جميع جوانب الجدول والخلايا:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

تحوم الصفوف

يضيف الفصل .table-hoverتأثير التمرير (لون الخلفية الرمادي) على صفوف الجدول:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

طاولة سوداء / داكنة

يضيف الفصل .table-darkخلفية سوداء إلى الجدول:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

طاولة مخططة داكنة

قم بدمجها .table-darkوإنشاء .table-stripedطاولة مخططة داكنة:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

طاولة مظلمة قابلة للتحويم

يضيف الفصل .table-hoverتأثير التمرير (لون الخلفية الرمادي) على صفوف الجدول:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

طاولة بلا حدود

الفصل .table-borderlessيزيل الحدود من الجدول:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

الفئات السياقية

يمكن استخدام الفئات السياقية لتلوين الجدول بالكامل ( <table>) أو صفوف الجدول ( <tr>) أو خلايا الجدول ( <td>).

مثال

Firstname Lastname Email
Default Defaultson [email protected]
Primary Joe [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]
Secondary Secondson [email protected]
Light Angie [email protected]
Dark Bo [email protected]

الفئات السياقية التي يمكن استخدامها هي:

فصل وصف
.table-primary الأزرق: يشير إلى إجراء مهم
.table-success الأخضر: يشير إلى إجراء ناجح أو إيجابي
.table-danger أحمر: يشير إلى عمل خطير أو سلبي محتمل
.table-info أزرق فاتح: يشير إلى تغيير أو إجراء إعلامي محايد
.table-warning البرتقالي: يشير إلى تحذير قد يحتاج إلى عناية
.table-active الرمادي: لتطبيق لون التمرير على صف الجدول أو خلية الجدول
.table-secondary الرمادي: يشير إلى إجراء أقل أهمية قليلاً
.table-light طاولة رمادية فاتحة أو خلفية صف الجدول
.table-dark جدول رمادي غامق أو خلفية صف الجدول

ألوان رأس الجدول

يضيف الفصل .thead-darkخلفية سوداء إلى رؤوس الجدول ، .thead-lightويضيف الفصل خلفية رمادية إلى رؤوس الجدول:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

طاولة صغيرة

الفصل .table-smيجعل الجدول أصغر عن طريق قطع حشوة الخلية إلى النصف:

مثال

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

جداول الاستجابة

يضيف الفصل .table-responsiveشريط تمرير إلى الجدول عند الحاجة (عندما يكون كبيرًا جدًا أفقيًا):

مثال

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

يمكنك أيضًا تحديد الوقت الذي يجب أن يحصل فيه الجدول على شريط تمرير ، اعتمادًا على عرض الشاشة:

فصل عرض الشاشة
.table-responsive-sm <576 بكسل
.table-responsive-md <768 بكسل
.table-responsive-lg <992 بكسل
.table-responsive-xl <1200 بكسل

مثال

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

❮ سابق التالي ❯