تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

الجداول

توثيق وأمثلة لتصميم الجداول (نظرًا لاستخدامها السائد في ملحقات جافا سكريبت) مع Bootstrap.

ملخص

نظرًا للاستخدام الواسع <table>للعناصر عبر أدوات الطرف الثالث مثل التقويمات ومنتقي التواريخ ، فإن جداول Bootstrap قابلة للاشتراك . أضف الفئة الأساسية .tableإلى أي فئة <table>، ثم قم بتوسيعها باستخدام فئات التعديل الاختيارية أو الأنماط المخصصة. لا يتم توريث كل أنماط الجدول في Bootstrap ، مما يعني أنه يمكن تصميم أي جدول متداخل بشكل مستقل عن الأصل.

باستخدام أبسط ترميز الجدول ، إليك كيف .tableتبدو الجداول المستندة إلى كيفية في Bootstrap.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

المتغيرات

استخدم الفئات السياقية لتلوين الجداول أو صفوف الجدول أو الخلايا الفردية.

فصل عنوان عنوان
تقصير خلية خلية
الأولية خلية خلية
ثانوي خلية خلية
النجاح خلية خلية
خطر خلية خلية
تحذير خلية خلية
معلومات خلية خلية
خفيفة خلية خلية
مظلم خلية خلية
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>
إيصال المعنى للتقنيات المساعدة

يوفر استخدام اللون لإضافة معنى فقط إشارة مرئية ، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة - مثل قارئات الشاشة. تأكد من أن المعلومات التي يشير إليها اللون إما واضحة من المحتوى نفسه (مثل النص المرئي) ، أو يتم تضمينها من خلال وسائل بديلة ، مثل النص الإضافي المخفي مع .visually-hiddenالفصل.

طاولات معلّقة

صفوف مخططة

استخدمه .table-stripedلإضافة مخطط حمار وحشي إلى أي صف جدول داخل ملف <tbody>.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-striped">
  ...
</table>

يمكن أيضًا إضافة هذه الفئات إلى متغيرات الجدول:

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-dark table-striped">
  ...
</table>
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-success table-striped">
  ...
</table>

صفوف يمكن تحريكها

إضافة .table-hoverلتمكين حالة التمرير على صفوف الجدول داخل ملف <tbody>.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-hover">
  ...
</table>
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-dark table-hover">
  ...
</table>

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

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-striped table-hover">
  ...
</table>

الجداول النشطة

قم بتمييز صف أو خلية في جدول بإضافة .table-activeفئة.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

كيف تعمل المتغيرات والجداول المميزة؟

بالنسبة للجداول المعلمة ( الصفوف المخططة والصفوف القابلة للتحويم والجداول النشطة ) ، استخدمنا بعض الأساليب لجعل هذه التأثيرات تعمل مع جميع متغيرات الجدول لدينا :

  • نبدأ بتعيين خلفية خلية الجدول مع --bs-table-bgالخاصية المخصصة. ثم تقوم جميع متغيرات الجدول بتعيين تلك الخاصية المخصصة لتلوين خلايا الجدول. بهذه الطريقة ، لن نواجه مشكلة إذا تم استخدام الألوان شبه الشفافة كخلفيات طاولة.
  • ثم نضيف ظل مربع داخلي على خلايا الجدول مع box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);طبقة فوق أي محدد background-color. نظرًا لأننا نستخدم انتشارًا هائلاً بدون تمويه ، فسيكون اللون رتيبًا. نظرًا لعدم --bs-table-accent-bgضبطه افتراضيًا ، فليس لدينا ظل مربع افتراضي.
  • عند إضافة أي من الفئات أو .table-stripedالفئات ، يتم تعيين اللون على لون شبه شفاف لتلوين الخلفية..table-hover.table-active--bs-table-accent-bg
  • لكل متغير في الجدول ، نقوم بإنشاء --bs-table-accent-bgلون بأعلى تباين بناءً على ذلك اللون. على سبيل المثال ، يكون لون التمييز لـ .table-primaryأغمق بينما .table-darkيكون له لون تمييز أفتح.
  • يتم إنشاء ألوان النص والحدود بنفس الطريقة ، ويتم توريث ألوانها افتراضيًا.

خلف الكواليس يبدو الأمر كما يلي:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

حدود الجدول

الجداول ذات الحدود

أضف .table-borderedللحدود الموجودة على كل جوانب الجدول والخلايا.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-bordered">
  ...
</table>

يمكن إضافة أدوات لون الحدود لتغيير الألوان:

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-bordered border-primary">
  ...
</table>

جداول بلا حدود

أضف .table-borderlessلجدول بلا حدود.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-borderless">
  ...
</table>
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-dark table-borderless">
  ...
</table>

طاولات صغيرة

أضفه .table-smلجعله .tableأكثر إحكاما عن طريق قص كل الخلايا paddingإلى نصفين.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-sm">
  ...
</table>
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-dark table-sm">
  ...
</table>

انحياز عمودي

<thead>يتم دائمًا محاذاة خلايا الجدول الرأسية للأسفل. <tbody>ترث خلايا الجدول المحاذاة الخاصة بهم من <table>الأعلى ويتم محاذاتها إلى الأعلى افتراضيًا. استخدم فئات المحاذاة الرأسية لإعادة المحاذاة عند الحاجة.

عنوان 1 العنوان 2 العنوان 3 العنوان 4
هذه الخلية ترث vertical-align: middle;من الجدول هذه الخلية ترث vertical-align: middle;من الجدول هذه الخلية ترث vertical-align: middle;من الجدول هذا بعض نص العنصر النائب ، الذي يهدف إلى شغل قدر كبير من المساحة الرأسية ، لتوضيح كيفية عمل المحاذاة الرأسية في الخلايا السابقة.
ترث هذه الخلية vertical-align: bottom;من صف الجدول ترث هذه الخلية vertical-align: bottom;من صف الجدول ترث هذه الخلية vertical-align: bottom;من صف الجدول هذا بعض نص العنصر النائب ، الذي يهدف إلى شغل قدر كبير من المساحة الرأسية ، لتوضيح كيفية عمل المحاذاة الرأسية في الخلايا السابقة.
هذه الخلية ترث vertical-align: middle;من الجدول هذه الخلية ترث vertical-align: middle;من الجدول هذه الخلية محاذاة إلى الأعلى. هذا بعض نص العنصر النائب ، الذي يهدف إلى شغل قدر كبير من المساحة الرأسية ، لتوضيح كيفية عمل المحاذاة الرأسية في الخلايا السابقة.
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

التعشيش

لا يتم توارث أنماط الحدود والأنماط النشطة ومتغيرات الجدول بواسطة الجداول المتداخلة.

# أولاً آخر يتعامل
1 علامة أوتو mdo
رأس رأس رأس
أ أولاً آخر
ب أولاً آخر
ج أولاً آخر
3 لاري الطائر @تويتر
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

كيف يعمل التعشيش

لمنع أي أنماط من التسرب إلى الجداول المتداخلة ، نستخدم >المحدد التابع () combinator () في CSS الخاص بنا. نظرًا لأننا نحتاج إلى استهداف جميع tds و ths في thead، tbodyو tfoot، فإن المحدد الخاص بنا سيبدو طويلاً جدًا بدونه. على هذا النحو ، نستخدم .table > :not(caption) > * > *محددًا غريب المظهر إلى حد ما لاستهداف جميع الجداول المتداخلة td، ولكن ليس أيًا من أي جداول متداخلة محتملة.th.table

لاحظ أنه إذا أضفت <tr>s كأطفال مباشرين للجدول ، <tr>فسيتم تغليفها <tbody>بشكل افتراضي ، مما يجعل المحددات الخاصة بنا تعمل على النحو المنشود.

تشريح

رأس الجدول

على غرار الجداول والجداول المظلمة ، استخدم فئات التعديل .table-lightأو .table-darkلجعلها <thead>تظهر باللون الرمادي الفاتح أو الغامق.

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

قدم الطاولة

# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
تذييل تذييل تذييل تذييل
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

التسميات التوضيحية

يعمل A <caption>كعنوان للجدول. يساعد المستخدمين الذين يستخدمون برامج قراءة الشاشة في العثور على جدول وفهم ما يدور حوله وتحديد ما إذا كانوا يريدون قراءته.

قائمة المستخدمين
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

يمكنك أيضًا وضع <caption>الجزء العلوي من الطاولة باستخدام .caption-top.

قائمة المستخدمين
# أولاً آخر يتعامل
1 علامة أوتو mdo
2 يعقوب ثورنتون @سمين
3 لاري الطائر @تويتر
<table class="table caption-top">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

تسمح الجداول المستجيبة بالتمرير أفقيًا بسهولة. اجعل أي جدول مستجيبًا عبر جميع إطارات العرض من خلال لفه .tableبـ .table-responsive. أو اختر حدًا أقصى لنقطة الفصل التي يمكنك من خلالها الحصول على جدول سريع الاستجابة باستخدامه .table-responsive{-sm|-md|-lg|-xl|-xxl}.

القطع / الاقتطاع العمودي

تستفيد الجداول المستجيبة من overflow-y: hiddenأي محتوى يتجاوز الحواف السفلية أو العلوية للجدول. على وجه الخصوص ، يمكن أن يؤدي هذا إلى قص القوائم المنسدلة وأدوات الطرف الثالث الأخرى.

دائما متجاوب

عبر كل نقطة توقف ، استخدم .table-responsiveالتمرير الأفقي للجداول.

# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية خلية
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

نقطة توقف محددة

استخدمه .table-responsive{-sm|-md|-lg|-xl|-xxl}حسب الحاجة لإنشاء جداول سريعة الاستجابة حتى نقطة توقف معينة. من نقطة التوقف هذه وما فوق ، سيتصرف الجدول بشكل طبيعي ولن يتم التمرير أفقيًا.

قد تظهر هذه الجداول مقطوعة حتى يتم تطبيق أنماطها المتجاوبة على عروض محددة لإطار العرض.

# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية
# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية
# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية
# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية
# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية
# عنوان عنوان عنوان عنوان عنوان عنوان عنوان عنوان
1 خلية خلية خلية خلية خلية خلية خلية خلية
2 خلية خلية خلية خلية خلية خلية خلية خلية
3 خلية خلية خلية خلية خلية خلية خلية خلية
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

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

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

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

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

ساس

المتغيرات

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

عقدة

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

التخصيص

  • تستخدم متغيرات العامل ( $table-striped-bg-factor، $table-active-bg-factor& $table-hover-bg-factor) لتحديد التباين في متغيرات الجدول.
  • بصرف النظر عن متغيرات الجدول الفاتحة والداكنة ، يتم تفتيح ألوان التصميم بواسطة $table-bg-levelالمتغير.