Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS jadvallar

ULASHISH

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 Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
O‘zingiz sinab ko‘ring »

Yo‘l-yo‘l qatorlar

.table-striped klassi jadvalga zebra kabi yo‘l-yo‘l chiziqlar qo‘shadi:

Misol

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
O‘zingiz sinab ko‘ring »

Chegarali jadval

.table-bordered klassi jadval va kataklarning barcha tomonlariga chegara qo‘shadi:

Misol

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
O‘zingiz sinab ko‘ring »

Hover effektli qatorlar

.table-hover klassi jadval qatorlariga hover effektini (sichqoncha ustiga olib borilganda kulrang fon) qo‘shadi:

Misol

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
O‘zingiz sinab ko‘ring »

Ixcham jadval

.table-condensed klassi kataklarning ichki chekinishini (padding) ikki barobar kamaytirib, jadvalni ixchamroq qiladi:

Misol

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
O‘zingiz sinab ko‘ring »

Kontekstual klasslar

Kontekstual klasslar yordamida jadval qatorlarini (<tr>) yoki jadval kataklarini (<td>) bo‘yash mumkin:

Misol

Firstname Lastname Email
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
O‘zingiz sinab ko‘ring »

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 »

Mashqlar yordamida o‘zingizni sinang

Mashq:

Jadvalni oddiy Bootstrap jadvali ko‘rinishida bezash uchun class atributini qo‘shing.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@example.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@example.com</td>
  </tr>
</table>

Mashqni boshlash

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.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish