جدول‌های پایه
مثال پایه
برای یک ظاهر طراحی شده پایه ، لایه باز سبک و فقط تقسیم کننده های افقی ، کلاس پایه را اضافه کنید .table به هر جدولی
<table>.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | ملیکا | اوتوا | @mdo |
| 2 | جمیله | تورتن | @fat |
| 3 | لعیا | پرنده |
جدول تیره
همچنین می توانید رنگها را با متن روشن با زمینه های تاریک معکوس کنید .table-dark.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | ملیکا | اوتوا | @mdo |
| 2 | جمیله | تورتن | @fat |
| 3 | لعیا | پرنده |
هد جدول
از دو کلاس برای تعیین رنگ هد جدول مانند زیر میتوانید استفاده کنید<thead>تیره و روشن
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | ملیکا | اوتوا | @mdo |
| 2 | جمیله | تورتن | @fat |
| 3 | لعیا | پرنده |
ردیف راه راه
از کلاس رو به رو .table-striped برای اعمال این حالت به جدول استفاده کنید در کد <tbody>.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | ملیکا | اوتوا | @mdo |
| 2 | جمیله | تورتن | @fat |
| 3 | لعیا | پرنده |
جدول خط دار
کلاس رو به رو را اضافه کنید .table-bordered برای خط دار شدن همه جدول
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | ملیکا | اوتوا | @mdo |
| 2 | جمیله | تورتن | @fat |
| 3 | لعیا | پرنده |
جدول بدون خط
کد رو به رو را برای جدول بدون خط .table-borderless اضافه کنید
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | ملیکا | اوتوا | @mdo |
| 2 | جمیله | تورتن | @fat |
| 3 | لعیا | پرنده |
ردیف قابل هاور شدن
کد های روبه رو را مانند نمونه زیر به جدول خود اضافه کنید .table-hover to تا قابلیت هاور شدن فعال شود <tbody>.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | ملیکا | اوتوا | @mdo |
| 2 | جمیله | تورتن | @fat |
| 3 | لعیا | پرنده |
جدول کوچک
با افزودن کلاس رو به رو .table-sm اندازه جدول شما به نصف کاهش پیدا میکند
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | ملیکا | اوتوا | @mdo |
| 2 | جمیله | تورتن | @fat |
| 3 | لعیا | پرنده | |
| 4 | ملیکا | اوتوا | @mdo |
| 5 | جمیله | تورتن | @fat |
کلاس های متنی
از کلاسهای متنی برای رنگ آمیزی سطرهای جدول یا سلولهای فردی استفاده کنید.
| # | عنوان ستون | عنوان ستون | عنوان ستون |
|---|---|---|---|
| 1 | محتوای ستون | محتوای ستون | محتوای ستون |
| 2 | محتوای ستون | محتوای ستون | محتوای ستون |
| 3 | محتوای ستون | محتوای ستون | محتوای ستون |
| 4 | محتوای ستون | محتوای ستون | محتوای ستون |
| 5 | محتوای ستون | محتوای ستون | محتوای ستون |
کپشن
با استفاده از کپشن <caption>می توانید به کاربرانی که جدول را میبینند به طور خلاصه توضیح دهید که جدول در چه موردی است
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | ملیکا | اوتوا | @mdo |
| 2 | جمیله | تورتن | @fat |
| 3 | لعیا | پرنده |
جدول رسپانسیو
با استفاده از کد رو به رو .table در .table-responsiveمی توانید جدول را رسپانسیو کنید در در تمامی دستگاه ها خوب به نظر برسد
| # | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول |
|---|---|---|---|---|---|---|
| 1 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |
| 2 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |
| 3 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |
