Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

Jadvallar

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

Umumiy koʻrinish

<table>Kalendarlar va sana tanlagichlar kabi uchinchi tomon vidjetlarida elementlarning keng qoʻllanilishi tufayli Bootstrap jadvallari roʻyxatga olinadi . Asosiy sinfni .tableistalgan ga qo'shing <table>, so'ngra ixtiyoriy modifikator sinflarimiz yoki maxsus uslublarimiz bilan kengaytiring. Barcha jadval uslublari Bootstrap-da meros qilib olinmaydi, ya'ni har qanday ichki o'rnatilgan jadvallar ota-onadan mustaqil ravishda tuzilishi mumkin.

Eng oddiy jadval belgilaridan foydalanib, .tableBootstrap-da asoslangan jadvallar qanday ko'rinishga ega.

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Variantlar

Jadvallarni, jadval qatorlarini yoki alohida kataklarni ranglash uchun kontekstli sinflardan foydalaning.

Sinf Sarlavha Sarlavha
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>
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 .visually-hiddensinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.

Urg'uli jadvallar

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 Qush Larri @twitter
<table class="table table-striped">
  ...
</table>

Ushbu sinflar jadval variantlariga ham qo'shilishi mumkin:

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter
<table class="table table-success table-striped">
  ...
</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">
  ...
</table>
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter
<table class="table table-dark table-hover">
  ...
</table>

Ushbu turuvchi qatorlar chiziqli variant bilan ham birlashtirilishi mumkin:

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter
<table class="table table-striped table-hover">
  ...
</table>

Faol jadvallar

.table-activeSinf qo'shish orqali jadval qatori yoki katakchasini ajratib ko'rsatish .

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Variantlar va urg'uli jadvallar qanday ishlaydi?

Urg'uli jadvallar uchun ( chiziqli satrlar , turuvchi qatorlar va faol jadvallar ) biz ushbu effektlarni barcha jadval variantlarimiz uchun ishlashi uchun ba'zi usullardan foydalandik :

  • --bs-table-bgBiz shaxsiy xususiyatga ega bo'lgan jadval katakchasi fonini o'rnatishdan boshlaymiz . Keyin barcha jadval variantlari jadval katakchalarini ranglash uchun ushbu maxsus xususiyatni o'rnatadi. Shunday qilib, agar yarim shaffof ranglar stol foni sifatida ishlatilsa, muammoga duch kelmaymiz.
  • So'ngra jadval katakchalariga box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);har qanday ko'rsatilgan qatlam ustiga qo'shilgan soyani qo'shamiz background-color. Biz katta yoyilgan va xiralashmaganimiz sababli rang monoton bo'ladi. Sukut boʻyicha oʻrnatilmaganligi sababli --bs-table-accent-bgbizda birlamchi quti soyasi yoʻq.
  • .table-striped, yoki .table-hoversinflar .table-activeqo'shilsa, --bs-table-accent-bgfonni ranglash uchun yarim shaffof rangga o'rnatiladi.
  • Har bir jadval varianti uchun biz --bs-table-accent-bgushbu rangga qarab eng yuqori kontrastli rang hosil qilamiz. Misol uchun, uchun urg'u rangi .table-primaryquyuqroq bo'lsa .table-dark, engil aksent rangga ega.
  • Matn va chegara ranglari bir xil tarzda yaratiladi va ularning ranglari sukut bo'yicha meros qilib olinadi.

Sahna ortida shunday ko'rinadi:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Jadval chegaralari

Chegaralangan jadvallar

.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">
  ...
</table>

Ranglarni o'zgartirish uchun chegara rangi yordamchi dasturlari qo'shilishi mumkin:

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Chegarasiz jadvallar

.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">
  ...
</table>
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Kichik stollar

Barcha hujayralarni yarmiga bo'lish orqali ixchamroq .table-smqilish uchun qo'shing ..tablepadding

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter
<table class="table table-sm">
  ...
</table>
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter
<table class="table table-dark table-sm">
  ...
</table>

Vertikal tekislash

Jadval xujayralari <thead>har doim vertikal ravishda pastga qarab tekislanadi. Jadvaldagi katakchalar <tbody>o'zlarining hizalanishini meros qilib oladi <table>va sukut bo'yicha yuqoriga tekislanadi. Zarur bo'lganda qayta tekislash uchun vertikal tekislash sinflaridan foydalaning.

Sarlavha 1 Sarlavha 2 Sarlavha 3 Sarlavha 4
Bu hujayra vertical-align: middle;jadvaldan meros oladi Bu hujayra vertical-align: middle;jadvaldan meros oladi Bu hujayra vertical-align: middle;jadvaldan meros oladi Bu oldingi katakchalarda vertikal tekislash qanday ishlashini ko'rsatish uchun biroz vertikal bo'shliqni egallashga mo'ljallangan ba'zi to'ldiruvchi matn.
vertical-align: bottom;Bu katak jadval qatoridan meros oladi vertical-align: bottom;Bu katak jadval qatoridan meros oladi vertical-align: bottom;Bu katak jadval qatoridan meros oladi Bu oldingi katakchalarda vertikal tekislash qanday ishlashini ko'rsatish uchun biroz vertikal bo'shliqni egallashga mo'ljallangan ba'zi to'ldiruvchi matn.
Bu hujayra vertical-align: middle;jadvaldan meros oladi Bu hujayra vertical-align: middle;jadvaldan meros oladi Bu katak tepaga tekislangan. Bu oldingi katakchalarda vertikal tekislash qanday ishlashini ko'rsatish uchun biroz vertikal bo'shliqni egallashga mo'ljallangan ba'zi to'ldiruvchi matn.
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Uy qurish

Chegara uslublari, faol uslublar va jadval variantlari ichki o'rnatilgan jadvallar tomonidan meros qilib olinmaydi.

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
Sarlavha Sarlavha Sarlavha
A Birinchidan Oxirgi
B Birinchidan Oxirgi
C Birinchidan Oxirgi
3 Larri qush @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Uy qurish qanday ishlaydi

Har qanday uslublar ichki o'rnatilgan jadvallarga o'tib ketishining oldini olish uchun >biz CSS-da bolalar birlashtiruvchi ( ) selektoridan foydalanamiz . Biz , va dagi barcha tds va ths ni nishonga olishimiz kerakligi sababli , bizning selektorimiz unsiz uzoq vaqt ko'rinadi. Shunday qilib, biz barcha s va s ni nishonga olish uchun juda g'alati ko'rinishdagi selektordan foydalanamiz , lekin hech qanday potentsial ichki o'rnatilgan jadvallarning hech biri.theadtbodytfoot.table > :not(caption) > * > *tdth.table

<tr>E'tibor bering, agar siz jadvalning to'g'ridan-to'g'ri bolalari sifatida s qo'shsangiz , ular sukut <tr>bo'yicha a ichiga o'raladi va shu bilan bizning selektorlarimiz mo'ljallangan tarzda ishlaydi.<tbody>

Anatomiya

Stol boshi

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

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Stol oyog'i

# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter
Altbilgi Altbilgi Altbilgi Altbilgi
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Taglavhalar

<caption>Jadval sarlavhasi kabi funktsiyalarni bajaradi . 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 Qush Larri @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Bundan tashqari, <caption>bilan stolning yuqori qismiga qo'yishingiz mumkin .caption-top.

Foydalanuvchilar ro'yxati
# Birinchidan Oxirgi Tutqich
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter
<table class="table caption-top">
  <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|-xxl}.

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|-xxl}Muayyan to'xtash nuqtasigacha javob beradigan 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 sezgir uslublar 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
# 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
# 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
# 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
# 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
# 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">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>

Sass

O'zgaruvchilar

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Loop

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Moslashtirish

  • Faktor o'zgaruvchilari ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) jadval variantlaridagi kontrastni aniqlash uchun ishlatiladi.
  • Yorug'lik va quyuq stol variantlaridan tashqari, mavzu ranglari $table-bg-levelo'zgaruvchi tomonidan ochiladi.