توثيق وأمثلة لتصميم الجداول (نظرًا لاستخدامها السائد في ملحقات جافا سكريبت) مع Bootstrap.
على هذه الصفحة
ملخص
نظرًا للاستخدام الواسع <table>للعناصر عبر أدوات الطرف الثالث مثل التقويمات ومنتقي التواريخ ، فإن جداول Bootstrap قابلة للاشتراك . أضف الفئة الأساسية .tableإلى أي فئة <table>، ثم قم بتوسيعها باستخدام فئات التعديل الاختيارية أو الأنماط المخصصة. لا يتم توريث كل أنماط الجدول في Bootstrap ، مما يعني أنه يمكن تصميم أي جدول متداخل بشكل مستقل عن الأصل.
باستخدام أبسط ترميز الجدول ، إليك كيف .tableتبدو الجداول المستندة إلى كيفية في Bootstrap.
#
أولاً
آخر
يتعامل
1
علامة
أوتو
mdo
2
يعقوب
ثورنتون
@سمين
3
لاري الطائر
@تويتر
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
المتغيرات
استخدم الفئات السياقية لتلوين الجداول أو صفوف الجدول أو الخلايا الفردية.
فصل
عنوان
عنوان
تقصير
خلية
خلية
الأولية
خلية
خلية
ثانوي
خلية
خلية
النجاح
خلية
خلية
خطر
خلية
خلية
تحذير
خلية
خلية
معلومات
خلية
خلية
خفيفة
خلية
خلية
مظلم
خلية
خلية
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
إيصال المعنى للتقنيات المساعدة
يوفر استخدام اللون لإضافة معنى فقط إشارة مرئية ، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة - مثل قارئات الشاشة. تأكد من أن المعلومات التي يشير إليها اللون إما واضحة من المحتوى نفسه (مثل النص المرئي) ، أو يتم تضمينها من خلال وسائل بديلة ، مثل النص الإضافي المخفي مع .visually-hiddenالفصل.
طاولات معلّقة
صفوف مخططة
استخدمه .table-stripedلإضافة مخطط حمار وحشي إلى أي صف جدول داخل ملف <tbody>.
نبدأ بتعيين خلفية خلية الجدول مع --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يكون له لون تمييز أفتح.
يتم إنشاء ألوان النص والحدود بنفس الطريقة ، ويتم توريث ألوانها افتراضيًا.
<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;من الجدول
هذه الخلية محاذاة إلى الأعلى.
هذا بعض نص العنصر النائب ، الذي يهدف إلى شغل قدر كبير من المساحة الرأسية ، لتوضيح كيفية عمل المحاذاة الرأسية في الخلايا السابقة.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
التعشيش
لا يتم توارث أنماط الحدود والأنماط النشطة ومتغيرات الجدول بواسطة الجداول المتداخلة.
لمنع أي أنماط من التسرب إلى الجداول المتداخلة ، نستخدم >المحدد التابع () combinator () في CSS الخاص بنا. نظرًا لأننا نحتاج إلى استهداف جميع tds و ths في thead، tbodyو tfoot، فإن المحدد الخاص بنا سيبدو طويلاً جدًا بدونه. على هذا النحو ، نستخدم .table > :not(caption) > * > *محددًا غريب المظهر إلى حد ما لاستهداف جميع الجداول المتداخلة td، ولكن ليس أيًا من أي جداول متداخلة محتملة.th.table
لاحظ أنه إذا أضفت <tr>s كأطفال مباشرين للجدول ، <tr>فسيتم تغليفها <tbody>بشكل افتراضي ، مما يجعل المحددات الخاصة بنا تعمل على النحو المنشود.
تشريح
رأس الجدول
على غرار الجداول والجداول المظلمة ، استخدم فئات التعديل .table-lightأو .table-darkلجعلها <thead>تظهر باللون الرمادي الفاتح أو الغامق.
يعمل A <caption>كعنوان للجدول. يساعد المستخدمين الذين يستخدمون برامج قراءة الشاشة في العثور على جدول وفهم ما يدور حوله وتحديد ما إذا كانوا يريدون قراءته.
قائمة المستخدمين
#
أولاً
آخر
يتعامل
1
علامة
أوتو
mdo
2
يعقوب
ثورنتون
@سمين
3
لاري الطائر
@تويتر
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
يمكنك أيضًا وضع <caption>الجزء العلوي من الطاولة باستخدام .caption-top.
قائمة المستخدمين
#
أولاً
آخر
يتعامل
1
علامة
أوتو
mdo
2
يعقوب
ثورنتون
@سمين
3
لاري
الطائر
@تويتر
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="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التمرير الأفقي للجداول.
استخدمه .table-responsive{-sm|-md|-lg|-xl|-xxl}حسب الحاجة لإنشاء جداول سريعة الاستجابة حتى نقطة توقف معينة. من نقطة التوقف هذه وما فوق ، سيتصرف الجدول بشكل طبيعي ولن يتم التمرير أفقيًا.
قد تظهر هذه الجداول مقطوعة حتى يتم تطبيق أنماطها المتجاوبة على عروض محددة لإطار العرض.