جداول پایه
مثال پایه
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. .table به هر که <table>.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | نبی | عبدی | @mdo |
| 2 | کاربر | وردپرس | @karbarwp |
| 3 | صیدرا | مایکل |
جدول برگشتی
شما همچنین می توانید رنگ ها را با متن نور در پس زمینه های تاریک-با .table-dark.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | نبی | عبدی | @mdo |
| 2 | کاربر | وردپرس | @karbarwp |
| 3 | صیدرا | مایکل |
گزینه های جدول
از یکی از دو کلاس اصلاح کننده استفاده کنید <thead>به نظر می رسد نور یا خاکستری تیره.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | نبی | عبدی | @mdo |
| 2 | کاربر | وردپرس | @karbarwp |
| 3 | صیدرا | مایکل |
ردیف های راه راه
با استفاده از .table-striped to add zebra-striping to any table row
within the <tbody>.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | نبی | عبدی | @mdo |
| 2 | کاربر | وردپرس | @karbarwp |
| 3 | صیدرا | مایکل |
جدول مرزی
افزودن .table-bordered برای مرزها در همه طرفهای میز و سلولها.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | نبی | عبدی | @mdo |
| 2 | کاربر | وردپرس | @karbarwp |
| 3 | صیدرا مایکل | ||
جدول بدون حاشیه
افزودن .table-borderless برای یک جدول بدون مرز
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | نبی | عبدی | @mdo |
| 2 | کاربر | وردپرس | @karbarwp |
| 3 | صیدرا مایکل | ||
ردیف های شناور
افزودن .table-hover برای فعال کردن حالت شناور روی سطرهای جدول در داخل <tbody>.
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | نبی | عبدی | @mdo |
| 2 | کاربر | وردپرس | @karbarwp |
| 3 | صیدرا مایکل | ||
میز کوچک
افزودن .table-sm برای ساخت جداول بیشتر با کاهش برش سلولی در نیمه
| # | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | نبی | عبدی | @mdo |
| 2 | کاربر | وردپرس | @karbarwp |
| 3 | صیدرا مایکل | ||
کلاسهای متنی
استفاده از کلاس های متنی برای رنگ کردن سطرهای جدول یا سلول های جداگانه.
| # | عنوان ستون | عنوان ستون | عنوان ستون |
|---|---|---|---|
| 1 | محتوای ستون | محتوای ستون | محتوای ستون |
| 2 | محتوای ستون | محتوای ستون | محتوای ستون |
| 3 | محتوای ستون | محتوای ستون | محتوای ستون |
| 4 | محتوای ستون | محتوای ستون | محتوای ستون |
| 5 | محتوای ستون | محتوای ستون | محتوای ستون |
| 6 | محتوای ستون | محتوای ستون | محتوای ستون |
| 7 | محتوای ستون | محتوای ستون | محتوای ستون |
| 8 | محتوای ستون | محتوای ستون | محتوای ستون |
| 9 | محتوای ستون | محتوای ستون | محتوای ستون |
جداول ریسپانسیو
ایجاد بسته های پاسخگو با بسته بندی کردن هر .table یک .table-responsive
آنها را به صورت افقی روی دستگاه های کوچک حرکت دهید (زیر 768 پیکسل).
| # | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول |
|---|---|---|---|---|---|---|
| 1 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |
| 2 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |
| 3 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |
