يوفر Bootstrap تصميمًا واضحًا لإنشاء الجداول. يسرد الجدول التالي بعض عناصر الجدول التي تدعمها bootstrap:
فئة الجدول
يمكن استخدام أنماط الجدول التالية في الجداول:
<tr> و <h> و <td> فئات
يمكن استخدام فئات الجدول التالية للصفوف أو خلايا الجدول:
الجداول الأساسية
إذا كنت تريد جدولًا أساسيًا مع حشوة وتقسيم أفقي فقط ، أضف فئة .Table كما هو موضح في المثال التالي:
<viv> <tabl> <caption> تخطيط الجدول الأساسي </caption> <thead> <tr> <th> الرقم </th> <th> City </h> </tr> </thead> <tbody> <td> <td> no.1 </td> </td> beijing </td> <td> <td> </tbody> </table> </viv>
تأثير العرض:
فئة الجدول الاختيارية
بالإضافة إلى علامات الجدول الأساسية وفئات. سيتم تقديم هذه الفصول لك أدناه.
طاولة الشريط
عن طريق إضافة فئة .Table-Striped ، سترى الخطوط على الخطوط الموجودة داخل <tbody> كما هو موضح في المثال التالي:
<viv> <tabl> <caption> تخطيط جدول الشريط </caption> <thead> <tr> <th> الرقم </th> <th> المدينة </th> </tr> </tbody> <tbody> <td> <td> no.1 </td> <td> beijing </td> <td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </td> <td> No.4 </td> <td> nanjing </td> </tbody> </tbody> </table> </viv>
تأثير العرض:
جدول الحدود
عن طريق إضافة الفئة المحدودة .table ، سترى أن كل عنصر له حدود حوله ويتم تقريب الجدول بأكمله ، كما هو موضح في المثال التالي:
<viv> <tabl> <caption> تخطيط الجدول الحدودي </caption> <thead> <tr> <th> الرقم </th> <th> city </h> </tr> </thead> <tbody> <td> <td> no.1 </td> </td> beijing </td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </td> <td> No.4 </td> <td> nanjing </td> </tbody> </tbody> </table> </viv>
تأثير العرض:
طاولة التحويم
عن طريق إضافة فئة .table-hover ، تظهر خلفية رمادية فاتحة عندما يحوم المؤشر فوق الخط ، كما هو موضح في المثال التالي:
<viv> <tabl> <caption> تخطيط جدول hoom </caption> <thead> <tr> <th> الرقم </th> <th> City </h> </tr> </thead> <tbody> <td> <td> No.1 </td> <td> beijing </td> <td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </td> <td> No.4 </td> <td> nanjing </td> </tbody> </tbody> </table> </viv>
تأثير العرض:
شكل مبسط
عن طريق إضافة فئة محتملة. ، يتم قطع الحشو إلى نصفين لجعل الجدول يبدو أكثر إحكاما ، كما هو موضح في المثال أدناه. هذا مفيد جدًا عند محاولة جعل المعلومات تبدو أكثر إحكاما.
<viv> <tabl> <caption> تخطيط جدول مبسط </caption> <thead> <tr> <th> الرقم </th> <th> City </h> </tr> </thead> <tbody> <td> <td> No.1 </td> <td> beijing </td> <tbo> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </td> <td> No.4 </td> <td> nanjing </td> </tbody> </tbody> </table> </viv>
تأثير العرض:
فئة السياق
تتيح لك فئات السياق المدرجة في الجدول التالي تغيير لون خلفية صف الجدول أو خلية واحدة.
يمكن استخدام هذه الفئات في <tr> و <td> و <th> ، كما هو موضح في المثال التالي:
<viv> <tabl> <caption> تخطيط جدول السياق </caption> <thead> <tr> <th> الرقم </th> <th> المدينة </th> </tr> </tbody> <tbody> <td> <td> No.1 </td> <td> beijing </td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </td> <td> No.4 </td> <td> nanjing </td> </tbody> </tbody> </table> </viv>
تأثير العرض:
جدول استجابة
من خلال لف أي .table في فئة .Table المستجيبة ، يمكنك تمرير الجدول أفقيًا لتناسب الأجهزة الصغيرة (أقل من 768 بكسل). عند عرض الأجهزة الكبيرة التي يبلغ عرضها من 768 بكسل ، لن ترى أي فرق.
<viv> <tabl> <caption> تخطيط جدول استجابة </caption> <thead> <tr> <th> الرقم </th> <th> المدينة </th> </tr> </thead> <tbody> <td> <td> no.1 </td> <td> beijing </td> <td> <td> <td> <tr> <td> No.3 </td> <td> suzhou </td> </td> <td> No.4 </td> <td> nanjing </td> </tbody> </tbody> </table> </viv>
تأثير العرض:
إذا كنت ترغب في متابعة التعلم ، يمكنك النقر هنا للدراسة ثم إرفاق موضوع رائع لك: Bootstrap التعلم التعليمي
ما سبق هو كل شيء عن هذا المقال. آمل أن يساعدك في تعلم أفضل جدول Bootstrap Artstrap Component Table.