Source

Jadvallar

Bootstrap yordamida jadvallarni (JavaScript plaginlarida keng qo'llanilishini hisobga olgan holda) sozlash uchun hujjatlar va misollar.

Misollar

Jadvallardan taqvimlar va sana tanlagichlar kabi uchinchi tomon vidjetlarida keng qoʻllanilganligi sababli, biz jadvallarimizni roʻyxatdan oʻtish uchun yaratdik . .tableShunchaki har qanday ga asosiy sinfni qo'shing <table>, so'ngra maxsus uslublar yoki turli xil o'z ichiga olgan modifikator sinflarimiz bilan kengaytiring.

Eng oddiy jadval belgilaridan foydalanib, .tableBootstrap-da asoslangan jadvallar qanday ko'rinishga ega. Barcha jadval uslublari Bootstrap 4 da meros qilib olingan , ya'ni har qanday ichki o'rnatilgan jadvallar ota-ona bilan bir xil uslubda bo'ladi.

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Shuningdek, siz ranglarni – qorong‘u fonda ochiq matn bilan – yordamida o‘zgartirishingiz mumkin .table-dark.

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Stol boshi variantlari

Jadvallar va quyuq jadvallarga o'xshab, o'zgartiruvchi sinflardan foydalaning yoki .thead-lights ochiq yoki to'q kulrang ko'rinishga ega bo'lsin..thead-dark<thead>

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Chiziqli qatorlar

.table-stripedichidagi istalgan jadval qatoriga zebra-chiziq qo'shish uchun foydalaning <tbody>.

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Chegaralangan stol

.table-borderedJadval va kataklarning barcha tomonidagi chegaralar uchun qo'shing .

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Chegarasiz stol

.table-borderlessChegarasiz jadval uchun qo'shing .

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter 
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-borderlessqorong'i stollarda ham foydalanish mumkin.

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter 
<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Ko'chma qatorlar

.table-hoverJadval qatorlarida hover holatini yoqish uchun qo'shing <tbody>.

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Kichik stol

Jadvallarni .table-smyanada ixcham qilish uchun hujayra to'plamini yarmiga bo'ling.

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Kontekstli sinflar

Jadval satrlari yoki alohida kataklarni ranglash uchun kontekstli sinflardan foydalaning.

Sinf Sarlavha Sarlavha
Faol Hujayra Hujayra
Standart Hujayra Hujayra
Asosiy Hujayra Hujayra
Ikkilamchi Hujayra Hujayra
Muvaffaqiyat Hujayra Hujayra
Xavfli Hujayra Hujayra
Ogohlantirish Hujayra Hujayra
Ma'lumot Hujayra Hujayra
Nur Hujayra Hujayra
Qorong'i Hujayra Hujayra 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Oddiy jadval fon variantlari qorong'i jadvalda mavjud emas, ammo shunga o'xshash uslublarga erishish uchun matn yoki fon yordam dasturlaridan foydalanishingiz mumkin.

# Sarlavha Sarlavha
1 Hujayra Hujayra
2 Hujayra Hujayra
3 Hujayra Hujayra
4 Hujayra Hujayra
5 Hujayra Hujayra
6 Hujayra Hujayra
7 Hujayra Hujayra
8 Hujayra Hujayra
9 Hujayra Hujayra 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
Yordamchi texnologiyalarga ma'no etkazish

Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan belgilangan ma'lumotlar mazmunning o'zidan (masalan, ko'rinadigan matn) aniq bo'lishiga yoki .sr-onlysinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.

576px, 768px, 992px va 1120px gacha boʻlgan (lekin shu jumladan emas) har bir toʻxtash nuqtasida jadvalni gorizontal ravishda aylantirib, har birini .tableoʻrash orqali javob beruvchi jadvallar yarating ..table-responsive{-sm|-md|-lg|-xl}max-width

Brauzerlar hozirda diapazondagi kontekst so‘rovlarini qo‘llab-quvvatlamagani uchun biz ushbu taqqoslashlar uchun yuqori aniqlikdagi qiymatlardan foydalangan holda fraksiyonel kengliklarga ega bo‘lgan (masalan, yuqori dpi qurilmalarda ma’lum sharoitlarda yuzaga kelishi mumkin bo‘lgan) ko‘rish oynalari min-va max-prefikslari cheklovlari atrofida ishlaymiz. .

Taglavhalar

A <caption>jadval sarlavhasi kabi ishlaydi. Bu ekranni o'qish dasturlari bo'lgan foydalanuvchilarga jadvalni topishga va u nima haqida ekanligini tushunishga va uni o'qishni xohlash yoki xohlamasliklarini hal qilishga yordam beradi.

Foydalanuvchilar ro'yxati
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Javob beruvchi jadvallar

Javob beruvchi jadvallar jadvallarni gorizontal ravishda osongina aylantirish imkonini beradi. .tablebilan oʻrash orqali har qanday jadvalni barcha koʻrish oynalarida sezgir qiling .table-responsive. Yoki dan foydalanib, javob beruvchi jadvalga ega bo'ladigan maksimal to'xtash nuqtasini tanlang .table-responsive{-sm|-md|-lg|-xl}.

Vertikal kesish/kesish

Javob beruvchi jadvallar jadvalning overflow-y: hiddenpastki yoki yuqori chetlaridan tashqariga chiqadigan har qanday tarkibni o'chirib qo'yadigan dan foydalanadi. Xususan, bu ochiladigan menyular va boshqa uchinchi tomon vidjetlarini kesib tashlashi mumkin.

Har doim sezgir

Har bir to'xtash nuqtasi bo'ylab, .table-responsivegorizontal aylantiruvchi jadvallar uchun foydalaning.

# Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha
1 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra
2 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra
3 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Maxsus uzilish nuqtasi

.table-responsive{-sm|-md|-lg|-xl}Muayyan to'xtash nuqtasigacha javob beruvchi jadvallarni yaratish uchun kerak bo'lganda foydalaning . Ushbu to'xtash nuqtasidan va undan yuqoriga qarab, jadval odatdagidek ishlaydi va gorizontal ravishda aylanmaydi.

Ushbu jadvallar ma'lum ko'rish maydoni kengliklarida javob berish uslublari qo'llanilmaguncha buzilgan ko'rinishi mumkin.

# Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha
1 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra
2 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra
3 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha
1 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra
2 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra
3 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha
1 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra
2 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra
3 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha Sarlavha
1 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra
2 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra
3 Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra Hujayra 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>