Таблицалар

Bootstrap менен таблицаларды стилдештирүү үчүн документация жана мисалдар (алардын JavaScript плагиндеринде кеңири колдонулушун эске алуу менен).

Бул бетте

Обзор

<table>Календарлар жана даталарды тандоочулар сыяктуу үчүнчү тараптын виджеттери аркылуу элементтердин кеңири колдонулушуна байланыштуу , Bootstrap таблицалары кошулган . Негизги классты .tableкаалаган класска кошуп <table>, андан кийин биздин кошумча өзгөрткүч класстарыбыз же ыңгайлаштырылган стилдерибиз менен кеңейтиңиз. Бардык таблица стилдери Bootstrap'те тукум кууган эмес, башкача айтканда, ар кандай уя салынган таблицалар ата-энеден көз карандысыз стилде болушу мүмкүн.

Эң негизги таблица белгилерин колдонуу менен .table, Bootstrap'те негизделген таблицалар кантип көрүнөт.

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@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>

Варианттар

Таблицаларды, таблица саптарын же жеке уячаларды боёо үчүн контексттик класстарды колдонуңуз.

Класс	рубрика	рубрика
Демейки	Клетка	Клетка
Негизги	Клетка	Клетка
Экинчи	Клетка	Клетка
Ийгилик	Клетка	Клетка
коркунуч	Клетка	Клетка
Эскертүү	Клетка	Клетка
Маалымат	Клетка	Клетка
Жарык	Клетка	Клетка
Караңгы	Клетка	Клетка

<!-- 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>

Көмөкчү технологияларга маани берүү

Маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн (мисалы, көрүнүүчү текст) ачык-айкын болушун же .visually-hiddenкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.

Акценттелген таблицалар

Чаардуу катарлар

.table-stripedичиндеги каалаган таблица саптарына зебра тилкесин кошуу үчүн колдонуңуз <tbody>.

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-striped">
  ...
</table>

Бул класстарды таблица варианттарына да кошууга болот:

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-success table-striped">
  ...
</table>

Үзүлүүчү катарлар

.table-hoverичинде таблицанын саптарында өтүүчү абалды иштетүү үчүн кошуу <tbody>.

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-hover">
  ...
</table>

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Бул кыймылдаткыч саптарды сызыкча варианты менен да айкалыштырса болот:

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-striped table-hover">
  ...
</table>

Активдүү столдор

.table-activeКласс кошуу менен таблицанын сабын же уячасын белгилеңиз .

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@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>

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@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>

Варианттар жана акценттик таблицалар кантип иштешет?

Акценти бар таблицалар үчүн ( чаар саптар , жылдырылуучу саптар жана активдүү таблицалар ) бул эффекттерди биздин бардык таблица варианттары үчүн иштеши үчүн кээ бир ыкмаларды колдондук :

--bs-table-bgБиз ыңгайлаштырылган касиети менен таблица уячасынын фонун коюу менен баштайбыз . Бардык таблица варианттары андан кийин таблицанын клеткаларын түстүү кылуу үчүн ошол ыңгайлаштырылган касиетти орнотот. Ошентип, жарым тунук түстөр үстөлдүн фону катары колдонулса, биз кыйынчылыкка кабылбайбыз.
Андан кийин биз столдун уячаларына кыстарылган кутуча көлөкөсүн кошобуз, анын box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);үстүнө кайсы бир көрсөтүлгөн катмардын үстүнө катмар кошобуз background-color. Биз чоң жайылган жана бүдөмүк эмес колдонгондуктан, түс монотондуу болот. Демейки --bs-table-accent-bgбоюнча коюлбагандыктан, бизде демейки кутуча көлөкөсү жок.
.table-striped, же класстар кошулганда, .table-hoverфонду түскө салуу үчүн жарым тунук түскө коюлат..table-active--bs-table-accent-bg
Ар бир таблица варианты үчүн --bs-table-accent-bgошол түскө жараша эң жогорку контраст менен түстү түзөбүз. Мисалы, үчүн акцент түсү .table-primaryкүңүрт, ал эми .table-darkачык акцент түсү бар.
Текст жана чектин түстөрү бирдей түзүлөт жана алардын түстөрү демейки боюнча мураска алынат.

Сахна артында мындай көрүнөт:

@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));
  }
}

Таблица чек аралары

Чектелген столдор

.table-borderedЖадыбалдын жана уячалардын бардык тарабындагы чектерди кошуңуз .

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-bordered">
  ...
</table>

Чек түсүнүн утилиталарын түстөрдү өзгөртүү үчүн кошууга болот:

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Чек аралары жок столдор

.table-borderlessЧек аралары жок таблицага кошуу .

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-borderless">
  ...
</table>

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Чакан столдор

Бардык уячаны жарымга бөлүү менен дагы да компакттуу .table-smкылуу үчүн кошуңуз ..tablepadding

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

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

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Вертикалдуу тегиздөө

Жадыбал уячалары <thead>ар дайым вертикалдуу ылдый жагына тегизделген. Таблицадагы уячалар <tbody>алардын тегиздөөсүн мурастап алышат <table>жана демейки боюнча жогору жагына тегизделген. Керектүү жерде кайра тегиздөө үчүн вертикалдык тегиздөө класстарын колдонуңуз .

1-башкы	2-башкы	3-башкы	4-башкы
Бул клетка `vertical-align: middle;`таблицадан мураска алат	Бул клетка `vertical-align: middle;`таблицадан мураска алат	Бул клетка `vertical-align: middle;`таблицадан мураска алат	Бул жерде мурунку уячаларда вертикалдуу тегиздөө кандайча иштээрин көрсөтүү үчүн бир аз вертикалдык мейкиндикти ээлөө үчүн арналган толтургуч текст.
Бул уяча `vertical-align: bottom;`таблица саптарынан мураска алат	Бул уяча `vertical-align: bottom;`таблица саптарынан мураска алат	Бул уяча `vertical-align: bottom;`таблица саптарынан мураска алат	Бул жерде мурунку уячаларда вертикалдуу тегиздөө кандайча иштээрин көрсөтүү үчүн бир аз вертикалдык мейкиндикти ээлөө үчүн арналган толтургуч текст.
Бул клетка `vertical-align: middle;`таблицадан мураска алат	Бул клетка `vertical-align: middle;`таблицадан мураска алат	Бул уяча жогору жагына тегизделген.	Бул жерде мурунку уячаларда вертикалдуу тегиздөө кандайча иштээрин көрсөтүү үчүн бир аз вертикалдык мейкиндикти ээлөө үчүн арналган толтургуч текст.

<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>

Уя салуу

Чек ара стилдери, активдүү стилдер жана таблица варианттары уя салынган таблицалар тарабынан мурасталбайт.

Биринчи

Акыркы

Handle

Марк

Отто

@mdo

Header	Header	Header
А	Биринчи	Акыркы
В	Биринчи	Акыркы
C	Биринчи	Акыркы

Ларри

чымчык

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Уя кантип иштейт

Кандайдыр бир стилдердин уяланган таблицаларга агып кетишинин алдын алуу үчүн , биз CSS'ибизде бала комбинатор ( >) селекторун колдонобуз. Биз , , жана ичиндеги бардык tds жана ths белгилерин бутага алышыбыз керек болгондуктан , ансыз биздин селектор абдан узак көрүнөт. Ошентип, биз бардык s жана s бутага алуу үчүн абдан кызыктай көрүнгөн селекторду колдонобуз , бирок потенциалдуу уя салынган таблицалардын бири да жок.theadtbodytfoot.table > :not(caption) > * > *tdth.table

Эскертүү, эгер сиз <tr>s сандарын таблицанын түз балдары катары кошсоңуз, алар демейки боюнча <tr>aга оролуп, биздин селекторлор ойдогудай иштешин камсыздайт.<tbody>

Анатомия

Стол башчысы

Таблицаларга жана караңгы таблицаларга окшоп, өзгөрткүч класстарды колдонуңуз .table-lightже s .table-darkачык <thead>же кочкул боз болуп көрүнсүн.

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри	чымчык	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри	чымчык	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Столдун буту

#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри	чымчык	@twitter
Колонтитул	Колонтитул	Колонтитул	Колонтитул

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Коштомо жазуулар

А <caption>столдун аталышы сыяктуу функцияларды аткарат. Бул экранды окугучтары бар колдонуучуларга таблицаны табууга жана ал эмне жөнүндө экенин түшүнүүгө жана аны окууну каалаарын чечүүгө жардам берет.

Колдонуучулардын тизмеси
#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Сиз ошондой эле менен үстөлдүн үстүнө коюуга <caption>болот .caption-top.

Колдонуучулардын тизмеси
#	Биринчи	Акыркы	Handle
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри	чымчык	@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>

Жооптуу таблицалар

Жооптуу таблицалар таблицаларды горизонталдуу түрдө оңой жылдырууга мүмкүндүк берет. .tableменен ороп, каалаган таблицаны бардык көрүнүштөр боюнча жооп бериңиз .table-responsive. Же колдонуу менен жооп берүүчү таблицага ээ боло турган максималдуу үзүү чекин тандаңыз .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Вертикалдуу кесүү/кесүү

Жооптуу таблицалар overflow-y: hiddenүстөлдүн астыңкы же үстүнкү четтеринен ашкан бардык мазмунду өчүрүүчү колдонот. Атап айтканда, бул ачылуучу менюларды жана башка үчүнчү тараптын виджеттерин кесип алат.

Ар дайым жооп берет

Ар бир үзүү чекиттеринде .table-responsiveгоризонталдуу сыдыруучу таблицалар үчүн колдонуңуз.

#	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика
1	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
2	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
3	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка

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

Үзүлүү чекити конкреттүү

.table-responsive{-sm|-md|-lg|-xl|-xxl}Белгилүү бир үзгүлтүккө чейин жооп берүүчү таблицаларды түзүү үчүн керек болсо колдонуңуз . Ошол үзгүлтүккө чейин жана андан өйдө, таблица кадимкидей иштейт жана туурасынан жылбайт.

Бул таблицалар алардын жооп берүүчү стилдери белгилүү бир көрүү терезесинин кеңдигинде колдонулмайынча сынган көрүнүшү мүмкүн.

#	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика
1	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
2	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
3	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка

#	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика
1	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
2	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
3	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка

#	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика
1	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
2	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
3	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка

#	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика
1	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
2	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
3	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка

#	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика
1	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
2	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
3	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка

#	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика	рубрика
1	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
2	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка
3	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка	Клетка

<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

Өзгөрмөлөр

$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,
);

Ыңгайлаштыруу

Факторлордун өзгөрмөлөрү ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) таблица варианттарындагы контрастты аныктоо үчүн колдонулат.
Ачык жана караңгы столдун варианттарынан тышкары, тема түстөрү $table-bg-levelөзгөрмө тарабынан жарыктандырылган.