جدول ها
جدول ساده
با استفاده از ابتداییترین نشانهگذاری جدول، در اینجا نحوه نمایش جدولهای مبتنی
بر .table
در بوت استرپ آمده است.
شناسه | نام | موقعیت | حقوق |
---|---|---|---|
1 | جوان پاول | برنامه نویس | 450,870 هزارتومان |
2 | گاوین گیبسون | مدیر حساب | 230540 هزارتومان |
3 | جولیان کر | برنامهنویس ارشد جاوا اسکریپت | 55300 هزارتومان |
4 | سدریک کلی | حسابدار | 234100 هزارتومان |
5 | سامانتا می | نویسنده فنی جوان | 43198 هزارتومان |
ردیف های خط خطی
از .table-striped
برای افزودن
zebra-striping به هر ردیف جدول در tbody.
استفاده کنید.
شناسه | نام | موقعیت | حقوق |
---|---|---|---|
1 | جوان پاول | برنامه نویس | 450,870 هزارتومان |
2 | گاوین گیبسون | مدیر حساب | 230540 هزارتومان |
3 | جولیان کر | برنامهنویس ارشد جاوا اسکریپت | 55300 هزارتومان |
4 | سدریک کلی | حسابدار | 234100 هزارتومان |
5 | سامانتا می | نویسنده فنی جوان | 43198 هزارتومان |
جدول خط دار
از .table-bordered
برای اضافه کردن
zebra-striping به هر ردیف جدول در tbody.
استفاده کنید.
شناسه | نام | موقعیت | حقوق |
---|---|---|---|
1 | جوان پاول | برنامه نویس | 450,870 هزارتومان |
2 | گاوین گیبسون | مدیر حساب | 230540 هزارتومان |
3 | جولیان کر | برنامهنویس ارشد جاوا اسکریپت | 55300 هزارتومان |
4 | سدریک کلی | حسابدار | 234100 هزارتومان |
5 | سامانتا می | نویسنده فنی جوان | 43198 هزارتومان |
جدول با ردیف های قابل هاور
از .table-hover
برای اضافه کردن
zebra-striping به هر ردیف جدول در tbody.
استفاده کنید.
شناسه | نام | موقعیت | حقوق |
---|---|---|---|
1 | جوان پاول | برنامه نویس | 450,870 هزارتومان |
2 | گاوین گیبسون | مدیر حساب | 230540 هزارتومان |
3 | جولیان کر | برنامهنویس ارشد جاوا اسکریپت | 55300 هزارتومان |
4 | سدریک کلی | حسابدار | 234100 هزارتومان |
5 | سامانتا می | نویسنده فنی جوان | 43198 هزارتومان |
جدول بدون خط
از .table-borderless
برای اضافه کردن
zebra-striping به هر ردیف جدول در tbody.
استفاده کنید.
شناسه | نام | موقعیت | حقوق |
---|---|---|---|
1 | جوان پاول | برنامه نویس | 450,870 هزارتومان |
2 | گاوین گیبسون | مدیر حساب | 230540 هزارتومان |
3 | جولیان کر | برنامهنویس ارشد جاوا اسکریپت | 55300 هزارتومان |
4 | سدریک کلی | حسابدار | 234100 هزارتومان |
5 | سامانتا می | نویسنده فنی جوان | 43198 هزارتومان |
جدول کوچک
.table-sm
را اضافه کنید تا هر .table
را با برش تمام سلولها فشردهتر کنید
پر کردن
به نصف.
شناسه | نام | موقعیت | حقوق |
---|---|---|---|
1 | جوان پاول | برنامه نویس | 450,870 هزارتومان |
2 | گاوین گیبسون | مدیر حساب | 230540 هزارتومان |
3 | جولیان کر | برنامهنویس ارشد جاوا اسکریپت | 55300 هزارتومان |
4 | سدریک کلی | حسابدار | 234100 هزارتومان |
5 | سامانتا می | نویسنده فنی جوان | 43198 هزارتومان |
جدول تو در تو
سبکهای حاشیه، سبکهای فعال و انواع جدول توسط جداول تودرتو به ارث نمیرسند.
شناسه | نام | موقعیت | حقوق | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | جوان پاول | برنامه نویس | 450,870 هزارتومان | ||||||||||||||||||||
|
|||||||||||||||||||||||
3 | جولیان کر | برنامهنویس ارشد جاوا اسکریپت | 55300 هزارتومان | ||||||||||||||||||||
4 | سدریک کلی | حسابدار | 234100 هزارتومان | ||||||||||||||||||||
5 | سامانتا می | نویسنده فنی جوان | 43198 هزارتومان |
جدول زمینه
از کلاس های متنی برای رنگ آمیزی جداول، ردیف های جدول یا سلول های جداگانه استفاده کنید.
شناسه | نام | موقعیت | حقوق |
---|---|---|---|
1 | جوان پاول | برنامه نویس | 450,870 هزارتومان |
2 | گاوین گیبسون | مدیر حساب | 230540 هزارتومان |
3 | گاوین گیبسون | مدیر حساب | 230540 هزارتومان |
4 | جولیان کر | برنامهنویس ارشد جاوا اسکریپت | 55300 هزارتومان |
5 | سدریک کلی | حسابدار | 234100 هزارتومان |
6 | سدریک کلی | حسابدار | 234100 هزارتومان |
7 | سدریک کلی | حسابدار | 234100 هزارتومان |
8 | سدریک کلی | حسابدار | 234100 هزارتومان |
9 | سدریک کلی | حسابدار | 234100 هزارتومان |
سربرگ جدول
مشابه جداول و جداول تیره، از کلاس های اصلاح کننده استفاده کنید .table-primary
یا .table-dark
در <thead>
شناسه | نام | موقعیت | حقوق |
---|---|---|---|
1 | جوان پاول | برنامه نویس | 450,870 هزارتومان |
2 | گاوین گیبسون | مدیر حساب | 230540 هزارتومان |
3 | جولیان کر | برنامهنویس ارشد جاوا اسکریپت | 55300 هزارتومان |
4 | سدریک کلی | حسابدار | 234100 هزارتومان |
5 | سامانتا می | نویسنده فنی جوان | 43198 هزارتومان |
جدول تیره
از .table-dark
برای اضافه کردن
zebra-striping به هر ردیف جدول در tbody.
استفاده کنید.
شناسه | نام | موقعیت | حقوق |
---|---|---|---|
1 | جوان پاول | برنامه نویس | 450,870 هزارتومان |
2 | گاوین گیبسون | مدیر حساب | 230540 هزارتومان |
3 | جولیان کر | برنامهنویس ارشد جاوا اسکریپت | 55300 هزارتومان |
4 | سدریک کلی | حسابدار | 234100 هزارتومان |
5 | سامانتا می | نویسنده فنی جوان | 43198 هزارتومان |