آموزش بوت استرپ

ایجاد جدول بوت استرپ bootstrap table

اموزش چگونگی و نحوه ساخت جدول table در بوت استرپ bootstrap را یادخواهیم گرفت.

جدول پایه بوت استرپ

یک جدول پایه بوت استرپ دارای یک پد نور و تنها دارای تقسیم بندی افقی است.
کلاس .table ویژگی را اضافه می کند:
یک ظاهر پایه به یک جدول:

مثال

 

ردیف های راه راه

کلاس .table-striped نوار جبری را به یک جدول اضافه می کند:

مثال

 

جدول مرزی

کلاس Striped Rows .table-bordered ویژگی را می افزاید:

Border را در تمام قسمت های جدول و سلول ها اضافه می کند:

 

ردیفهای شناور

کلاس Hover Rows در بوت استرپ .table-hover ویژگی را اضافع می کند:
یک اثر شناور (رنگ پس زمینه خاکستری) روی ردیف های جدول ایجاد می کند:

 

جدول Condensed

جدول Condensed در بوت استرپ
کلاس های متراکم تبدیل با استفاده از برش سطوح سلولی در نیمه یک جدول را کم می کند.

 

کلاسهای متنی

کلاس Contextual در بوت استرپ
کلاس های متنی را می توان برای رنگ ردیف های جدول ( <tr> ) یا سلول های جدول ( <td> ) استفاده کرد:
مثال

 

 

کلاس های متنی که می توانند مورد استفاده قرار گیرند عبارتند از:

کلاس شرح
.active رنگ مربوط به ستون جدول یا سلول جدول را اعمال می کند
.success یک عمل مثبت یا مثبت نشان می دهد
.info
.warning نشان دهنده یک هشدار است که ممکن است نیاز به توجه داشته باشد
.danger یک اقدام خطرناک یا بالقوه منفی نشان می دهد

جداول ریسپانسیو

کلاس .table-responsive یک جدول ریسپانسیو responsive یا واکنشگرا ایجاد می کند. سپس جدول روی دستگاه های کوچک (زیر ۷۶۸ پیکسل) به صورت افقی نمایش میدهد و با زمانی که اندازه صفحه بزرگتر از ۷۶۸ پیکسل است فرقی نمی کند.

در مرحله قبل با تایپوگرافی بوت استرپ اشنا شدید.

 

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بستن