BS jadvallar
Oddiy Bootstrap jadvali
Oddiy Bootstrap jadvali yengil ichki chekinish (padding) va faqat 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 |
Ixcham jadval
.table-condensed klassi kataklarning ichki chekinishini (padding) ikki barobar kamaytirib, jadvalni ixchamroq qiladi:
Misol
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Kontekstual klasslar
Kontekstual klasslar yordamida jadval qatorlarini (<tr>) yoki jadval kataklarini (<td>) bo‘yash mumkin:
Misol
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | def@somemail.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 |
Foydalanish mumkin bo‘lgan kontekstual klasslar:
| Klass | Tavsif |
|---|---|
.active |
Jadval qatori yoki katagiga hover rangini qo‘llaydi |
.success |
Muvaffaqiyatli yoki ijobiy harakatni bildiradi |
.info |
Neytral, axborot beruvchi o‘zgarish yoki harakatni bildiradi |
.warning |
E’tibor talab qilishi mumkin bo‘lgan ogohlantirishni bildiradi |
.danger |
Xavfli yoki salbiy oqibatga olib kelishi mumkin bo‘lgan harakatni bildiradi |
Moslashuvchan jadvallar
.table-responsive klassi moslashuvchan jadval yaratadi. Shunda jadval kichik qurilmalarda (768px dan kichik) gorizontal aylantiriladi. Kengligi 768px dan katta ekranlarda hech qanday farq bo‘lmaydi:
Misol
<div class="table-responsive">
<table class="table">
...
</table>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap jadvallari bo‘yicha to‘liq ma’lumotnoma
Barcha jadval klasslari bo‘yicha to‘liq ma’lumot uchun Bootstrap jadvallar ma’lumotnomamizga o‘ting.
Bilasizmi?
W3.CSS — Bootstrap’ga ajoyib muqobil.
W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!
