جدول‌های پایه
نمونه پایه
برای جدول های پایه دارای فقط خطوط افقی، کلاس .table را به هر <table> اضافه کنید.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | مارک | زاکربرگ | @mdo |
| 2 | بیل | گیتس | @fat |
| 3 | پاول | دوروف |
جدول تیره
همچنین میتوانید با استفاده از کلاس .table-dark رنگ جدول را معکوس به رنگ تیره با متن روشن کنید.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | مارک | زاکربرگ | @mdo |
| 2 | بیل | گیتس | @fat |
| 3 | پاول | دوروف |
سرتیتر جدول
از یکی از دو کلاس کاربردی .thead-light یا .thead-dark بر روی <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 | پاول | دوروف |
سطر های قابل Hover
ااز کلاس .table-hover برای فعال کردن وضعیت هاور بر روی سطر های داخل <tbody> استفاده کنید.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | مارک | زاکربرگ | @mdo |
| 2 | بیل | گیتس | @fat |
| 3 | پاول | دوروف |
جدول کوچک
از کلاس .table-sm برای داشتن جدول های فشرده تر استفاده کنید.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | مارک | زاکربرگ | @mdo |
| 2 | بیل | گیتس | @fat |
| 3 | پاول | دوروف | |
| 4 | مارک | زاکربرگ | @mdo |
| 5 | بیل | گیتس | @fat |
کلاس های کاربردی
از کلاس های کمکی برای مشخص کردن رنگ سطر ها و یا خانه های جدول استفاده کنید.
| # | عنوان ستون | عنوان ستون | عنوان ستون |
|---|---|---|---|
| 1 | محتویات ستون | محتویات ستون | محتویات ستون |
| 2 | محتویات ستون | محتویات ستون | محتویات ستون |
| 3 | محتویات ستون | محتویات ستون | محتویات ستون |
| 4 | محتویات ستون | محتویات ستون | محتویات ستون |
| 5 | محتویات ستون | محتویات ستون | محتویات ستون |
عناوین
یک <caption> مانند یک تیتر برای جدول عمل می کند. این المان به کاربران دارای screen reader کمک میکند تا یک جدول را یافته و موضوع آن را درک کنند و در مورد خواندن جدول تصمیم گیری کنند.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | مارک | زاکربرگ | @mdo |
| 2 | بیل | گیتس | @fat |
| 3 | پاول | دوروف |
جدول‌های واکنشگرا
جدول های واکنش گرا را با قرار دادن هر .table داخل .table-responsive میتوانید ایجاد کنید تا در دستگاه های کوچک (زیر 768px) به صورت افقی اسکرول شوند.
| # | لورم ایپسوم متن | لورم ایپسوم متن | لورم ایپسوم متن | لورم ایپسوم متن | لورم ایپسوم متن | لورم ایپسوم متن |
|---|---|---|---|---|---|---|
| 1 | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم |
| 2 | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم |
| 3 | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم | لورم ایپسوم |
