BS4 jadvallar
Bootstrap 4 oddiy jadvali
Oddiy Bootstrap 4 jadvali yengil ichki chekinish (padding) va gorizontal ajratgich chiziqlarga ega.
.table klassi jadvalga asosiy stillarni qo‘shadi:
Misol
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Yo‘l-yo‘l qatorlar
.table-striped klassi jadvalga zebra kabi yo‘l-yo‘l chiziqlar qo‘shadi:
Misol
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Chegarali jadval
.table-bordered klassi jadval va kataklarning barcha tomonlariga chegara qo‘shadi:
Misol
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Hover effektli qatorlar
.table-hover klassi jadval qatorlariga hover effektini (sichqoncha ustiga olib borilganda kulrang fon) qo‘shadi:
Misol
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Qora/to‘q rangli jadval
.table-dark klassi jadvalga qora fon qo‘shadi:
Misol
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
To‘q rangli yo‘l-yo‘l jadval
To‘q rangli, yo‘l-yo‘l jadval yaratish uchun .table-dark va .table-striped ni birgalikda qo‘llang:
Misol
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Hover effektli to‘q rangli jadval
.table-hover klassi jadval qatorlariga hover effektini (sichqoncha ustiga olib borilganda kulrang fon) qo‘shadi:
Misol
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Chegarasiz jadval
.table-borderless klassi jadvaldan chegaralarni olib tashlaydi:
Misol
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Kontekstual klasslar
Kontekstual klasslar yordamida butun jadvalni (<table>), jadval qatorlarini (<tr>) yoki jadval kataklarini (<td>) bo‘yash mumkin.
Misol
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | def@somemail.com |
| Primary | Joe | joe@example.com |
| Success | Doe | john@example.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@example.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
| Secondary | Secondson | sec@example.com |
| Light | Angie | angie@example.com |
| Dark | Bo | bo@example.com |
Foydalanish mumkin bo‘lgan kontekstual klasslar:
| Klass | Tavsif |
|---|---|
.table-primary |
Ko‘k: muhim harakatni bildiradi |
.table-success |
Yashil: muvaffaqiyatli yoki ijobiy harakatni bildiradi |
.table-danger |
Qizil: xavfli yoki salbiy oqibatlarga olib kelishi mumkin bo‘lgan harakatni bildiradi |
.table-info |
Och ko‘k: neytral, axborot beruvchi o‘zgarish yoki harakatni bildiradi |
.table-warning |
To‘q sariq: e’tibor talab qilishi mumkin bo‘lgan ogohlantirishni bildiradi |
.table-active |
Kulrang: jadval qatori yoki katagiga hover rangini qo‘llaydi |
.table-secondary |
Kulrang: biroz kamroq muhim harakatni bildiradi |
.table-light |
Och kulrang jadval yoki jadval qatori foni |
.table-dark |
To‘q kulrang jadval yoki jadval qatori foni |
Jadval sarlavhasi ranglari
.thead-dark klassi jadval sarlavhalariga qora fon, .thead-light klassi esa kulrang fon qo‘shadi:
Misol
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Kichik jadval
.table-sm klassi kataklarning ichki chekinishini (padding) ikki baravar qisqartirib, jadvalni kichikroq qiladi:
Misol
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Moslashuvchan jadvallar
.table-responsive klassi kerak bo‘lganda (jadval gorizontal bo‘yicha juda katta bo‘lganda) jadvalga aylantirish chizig‘ini (scrollbar) qo‘shadi:
Misol
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Shuningdek, ekran kengligiga qarab jadvalda aylantirish chizig‘i qachon paydo bo‘lishini ham belgilashingiz mumkin:
| Klass | Ekran kengligi |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
Misol
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
O‘zingiz sinab ko‘ring »
Bilasizmi?
W3.CSS — Bootstrap’ga ajoyib muqobil.
W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!