جدول پایه
جدول من
برای یک ظاهر طراحی اولیه - بالشتک چراغ و فقط تقسیم کننده های افقی - کلاس پایه را اضافه کنید.table به هر <table>.
| نام | شماره تلفن | تاریخ تولد | فعال؟ |
|---|---|---|---|
| ریزا دی پیرسون | 336-508-2157 | دی 24, 1390 |
|
| آن سی تامپسون | 646-473-2057 | دی 25, 1390 |
|
| پل جی. | 281-308-0793 | دی 1, 1398 |
|
| لیندا جی اسمیت | 606-253-1207 | دی 3, 1396 |
|
جدول معکوس
همچنین می توانید رنگ ها را با متن سبک در پس زمینه های تاریک معکوس کنید .table-dark.
| نام | شماره تلفن | تاریخ تولد | فعال؟ |
|---|---|---|---|
| ریزا دی پیرسون | 336-508-2157 | دی 24, 1390 |
|
| آن سی تامپسون | 646-473-2057 | دی 25, 1390 |
|
| پل جی. | 281-308-0793 | دی 1, 1398 |
|
| شان سی نگوین | 269-714-6825 | دی 5, 1390 |
|
آن سی تامپسون
شان سی نگوین
گزینه های سر جدول
برای ساخت از یکی از دو کلاس اصلاح کننده استفاده کنید <thead> روشن یا خاکستری تیره به نظر می رسد.
| محصول | پیک | فرآیند | وضعیت |
|---|---|---|---|
| کمر بلند | فدرال اکسپرس |
|
تحویل دار |
| پیراهن سبک مارکو | پست |
|
حمل شده |
| پیراهن نصف آستین | روشن |
|
سفارش دریافت شده |
| ژاکت سبک | فدرال اکسپرس |
|
تحویل دار |
گزینه های سر جدول
برای ساخت از یکی از دو کلاس اصلاح کننده استفاده کنید<thead>S سبک یا خاکستری تیره به نظر می رسد.
| محصول | پیک | فرآیند | وضعیت |
|---|---|---|---|
| کمر بلند | فدرال اکسپرس |
|
تحویل دار |
| پیراهن سبک مارکو | پست |
|
حمل شده |
| پیراهن نیمه آستین | روشن |
|
سفارش دریافت شده |
| ژاکت سبک | فدرال اکسپرس |
|
تحویل دار |
ردیف های قابل شناور
اضافه کردن .table-hover برای فعال کردن حالت شناور در ردیف های جدول در<tbody>.
| محصول | قیمت | تعداد | مقدار |
|---|---|---|---|
| کمر بلند | 79.49 تومان | 82 عدد | 6,518.18 تومان |
| پیراهن سبک مارکو | 128.50 تومان | 37 عدد | 4,754.50 تومان |
| پیراهن نیمه آستین | 39.99 تومان | 64 عدد | 2,559.36 تومان |
| ژاکت سبک | 20.00 تومان | 184 عدد | 3,680.00 تومان |
ردیف های قابل شناور معکوس
اضافه کردن .table-hoverبرای فعال کردن حالت شناور در ردیف های جدول در <tbody>.
| محصول | قیمت | تعداد | مقدار |
|---|---|---|---|
| کمر بلند | 79.49 تومان | 82 عدد | 6,518.18 تومان |
| پیراهن سبک مارکو | 128.50 تومان | 37 عدد | 4,754.50 تومان |
| پیراهن نیمه آستین | 39.99 تومان | 64 عدد | 2,559.36 تومان |
| ژاکت سبک | 20.00 تومان | 184 عدد | 3,680.00 تومان |
ریزا دی پیرسون
پل جی.
شان سی نگوین
همیشه پاسخگو است
در هر نقطه شکست ، استفاده کنید
.table-responsive برای جداول پیمایش افقی.استفاده کردن
.table-responsive{-sm|-md|-lg|-xl} در صورت نیاز برای ایجاد جداول پاسخگو تا یک نقطه شکست خاص.از آن نقطه شکست و بالا ، جدول رفتار خواهد کرد
به طور معمول و نه به صورت افقی.
| # | تیتر | تیتر | تیتر | تیتر | تیتر | تیتر | تیتر | تیتر | تیتر |
|---|---|---|---|---|---|---|---|---|---|
| 1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
| 3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
مثال اساسی بدون مرز
اضافه کردن .table-borderless برای یک جدول بدون مرز.
| نام | شماره تلفن | تاریخ تولد | فعال؟ |
|---|---|---|---|
| ریزا دی پیرسون | 336-508-2157 | دی 24, 1390 |
|
| آن سی تامپسون | 646-473-2057 | دی 25, 1390 |
|
| پل جی. | 281-308-0793 | دی 1, 1398 |
|
| لیندا جی اسمیت | 606-253-1207 | دی 3, 1396 |
|
جدول بدون مرز
اضافه کردن .table-borderless برای یک جدول بدون مرز.
| نام | شماره تلفن | تاریخ تولد | فعال؟ |
|---|---|---|---|
| ریزا دی پیرسون | 336-508-2157 | دی 24, 1390 |
|
| آن سی تامپسون | 646-473-2057 | دی 25, 1390 |
|
| پل جی. | 281-308-0793 | دی 1, 1398 |
|
| شان سی نگوین | 269-714-6825 | دی 5, 1390 |
|
جدولهای فعال
با اضافه کردن یک ردیف یا سلول جدول را برجسته کنید.table-active طبقه.
| نام | شماره تلفن | تاریخ تولد | فعال؟ |
|---|---|---|---|
| ریزا دی پیرسون | 336-508-2157 | دی 24, 1390 |
|
| آن سی تامپسون | 646-473-2057 | دی 25, 1390 |
|
| پل جی. | 281-308-0793 | دی 1, 1398 |
|
| لیندا جی اسمیت | 606-253-1207 |
|
|
| پل جی. | 281-308-0793 | دی 1, 1398 |
|
لانه سازی
سبک های مرزی ، سبک های فعال و انواع جدول توسط جداول تو در تو به ارث نمی رسند.
| نام | شماره تلفن | تاریخ تولد | فعال؟ | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ریزا دی پیرسون | 336-508-2157 | دی 24, 1390 |
|
||||||||||||
|
|||||||||||||||
| لیندا جی اسمیت | 606-253-1207 | دی 2, 1398 |
|
||||||||||||
جدول کوچک
اضافه کردن .table-sm برای جمع آوری جداول با برش بالشتک سلول به نصف.
| محصول | قیمت | تعداد | مقدار |
|---|---|---|---|
| کمر بلند | 79.49 تومان | 82 عدد | 6,518.18 تومان |
| پیراهن سبک مارکو | 128.50 تومان | 37 عدد | 4,754.50 تومان |
| پیراهن نصف آستین | 39.99 تومان | 64 عدد | 2,559.36 تومان |
| ژاکت سبک | 20.00 تومان | 184 عدد | 3,680.00 تومان |
| کفش های مارکو | 28.49 تومان | 69 عدد | 1,965.81 تومان |
| کمر بلند | 79.49 تومان | 82 عدد | 6,518.18 تومان |
پای جدول
اضافه کردن .table-sm برای جمع آوری جداول با برش بالشتک سلول به نصف.
| محصول | قیمت | تعداد | مقدار |
|---|---|---|---|
| کمر بلند | 79.49 تومان | 82 عدد | 6,518.18 تومان |
| پیراهن سبک مارکو | 128.50 تومان | 37 عدد | 4,754.50 تومان |
| پیراهن نیمه آستین | 39.99 تومان | 64 عدد | 2,559.36 تومان |
| ژاکت سبک | 20.00 تومان | 184 عدد | 3,680.00 تومان |
| فوتر | فوتر | فوتر | فوتر |
زیرنویس
اضافه کردن .table-sm برای جمع آوری جداول با برش بالشتک سلول به نصف.
| محصول | قیمت | تعداد | مقدار |
|---|---|---|---|
| کمر بلند | 79.49 تومان | 82 عدد | 6,518.18 تومان |
| پیراهن سبک مارکو | 128.50 تومان | 37 عدد | 4,754.50 تومان |
| پیراهن نصف آستین | 39.99 تومان | 64 عدد | 2,559.36 تومان |
| ژاکت سبک | 20.00 تومان | 184 عدد | 3,680.00 تومان |
زیرنویس
اضافه کردن .table-sm برای جمع آوری جداول با برش بالشتک سلول به نصف.
| محصول | قیمت | تعداد | مقدار |
|---|---|---|---|
| کمر بلند | 79.49 تومان | 82 عدد | 6,518.18 تومان |
| پیراهن سبک مارکو | 128.50 تومان | 37 عدد | 4,754.50 تومان |
| پیراهن نصف آستین | 39.99 تومان | 64 عدد | 2,559.36 تومان |
| ژاکت سبک | 20.00 تومان | 184 عدد | 3,680.00 تومان |