جدول ها
کلاس .table به جدول استایل های اولیه را اضافه میکند.
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته | رضایی | @feresh |
گزینه های سرجدول
مشابه جدول ها و جدول های تاریک از کلاس های مودیفایر استفاده کنید.thead-light یا .thead-dark برای ساختن <thead>هد های روشن یا خاکستری تیره
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته | رضایی | @feresh |
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته | رضایی | @feresh |
جدول بدون حاشیه
برای جدولی بدون حاشیه .table-borderless را اضافه کنید.
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته رضایی | @feresh | |
.table-borderless همچنین می تواند در جداول تاریک استفاده شود.
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته رضایی | @feresh | |
جدول کوچک
.table-sm لایه های جدول را فشرده تر کنید .
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته رضایی | @feresh | |
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته رضایی | @feresh | |
کپشن ها
یک <caption> مانند عنوان یک جدول عمل می کند. این به کاربران کمک میکند تا جدولی را پیدا کنند و یا بفهمند درباره چیست که تصمیم بگیرند که آیا میخواهند آن را بخوانند یا نه.
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته | رضایی | @feresh |
جدول تاریک
شما میتوانید رنگ ها را معکوس کنید با متن روشن در بک گراند تیره با .table-dark.
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته | رضایی | @feresh |
ردیف های راه راه
از .table-striped برای اضافه کردن استایل راه راه به هر ردیف جدول در <tbody> استفاده کنید.
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته | رضایی | @feresh |
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته | رضایی | @feresh |
ردیف های شناور
.table-hover را به حالت شناور فعال در ردیفهای جدول در <tbody> اضافه کنید
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته رضایی | @feresh | |
| # | نام | نام خانوادگی | یوزرنیم |
|---|---|---|---|
| 1 | سعید | رمضانی | @saeid21 |
| 2 | سینا | علیپور | @sinaalipour |
| 3 | فرشته رضایی | @feresh | |
کلاس های متنی
از کلاس های متنی برای رنگ آمیزی ردیف های جدول یا سلول های فردی استفاده کنید.
| کلاس | هدینگ | هدینگ |
|---|---|---|
| active | سلول | سلول |
| default | سلول | سلول |
| primary | سلول | سلول |
| secondary | سلول | سلول |
| success | سلول | سلول |
| danger | سلول | سلول |
| warning | سلول | سلول |
| info | سلول | سلول |
میتوانید از این لینک برای دستیابی به سبک های مشابه زیر استفاده کنید.
| # | هدینگ | هدینگ |
|---|---|---|
| 1 | سلول | سلول |
| 2 | سلول | سلول |
| 3 | سلول | سلول |
| 4 | سلول | سلول |
| 5 | سلول | سلول |
| 6 | سلول | سلول |
| 7 | سلول | سلول |
| 8 | سلول | سلول |
| 9 | سلول | سلول |
جدول های ریسپانسیو
جدول های ریسپانسیو نگرانی شما را از نمایش ناصحیح داده ها از بین میبرد و در هر سایزی قابل نمایش است، گاهی اوقات بسته به شرایط اسکرول فعال می شود.
| # | هدینگ | هدینگ | هدینگ | هدینگ | هدینگ | هدینگ | هدینگ | هدینگ | هدینگ |
|---|---|---|---|---|---|---|---|---|---|
| 1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |