Source

Таблицалар

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

Мисалдар

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

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

# Биринчи Акыркы 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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Сиз ошондой эле түстөрдү - караңгы фондогу ачык текст менен - ​​менен алмаштыра аласыз .table-dark.

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

Стол башынын параметрлери

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

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

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

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

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

Чектелген үстөл

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

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

Чексиз үстөл

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

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

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

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

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

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

Кичинекей үстөл

.table-smКлетка толтургучтарын экиге бөлүп, үстөлдөрдү компакттуу кылуу үчүн кошуңуз .

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

Контексттик класстар

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

Класс рубрика рубрика
Активдүү Клетка Клетка
Демейки Клетка Клетка
Негизги Клетка Клетка
Экинчи Клетка Клетка
Ийгилик Клетка Клетка
коркунуч Клетка Клетка
Эскертүү Клетка Клетка
Маалымат Клетка Клетка
Жарык Клетка Клетка
Караңгы Клетка Клетка 
<!-- 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>

Кадимки үстөлдүн фонунун варианттары караңгы таблицада жеткиликсиз, бирок окшош стилдерге жетүү үчүн текстти же фондо утилиттерди колдонсоңуз болот.

# рубрика рубрика
1 Клетка Клетка
2 Клетка Клетка
3 Клетка Клетка
4 Клетка Клетка
5 Клетка Клетка
6 Клетка Клетка
7 Клетка Клетка
8 Клетка Клетка
9 Клетка Клетка 
<!-- 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>
Көмөкчү технологияларга маани берүү

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

576px, 768px, 992px жана 1120px чейин (бирок аны кошпогондо) ар бир үзүлүү чекинде таблицаны туурасынан сыдыртып, каалаганын ороп .table, жооп берүүчү таблицаларды түзүңүз ..table-responsive{-sm|-md|-lg|-xl}max-width

Браузердер учурда диапазондун контексттик сурамдарын колдобогондуктан , биз бул салыштыруулар үчүн жогорку тактыктагы маанилерди колдонуу менен, бөлчөк кеңдиктеги (мисалы, жогорку dpi түзмөктөрүндө белгилүү бир шарттарда пайда болушу мүмкүн ) чектөөлөр min-менен max-префикстердин жана көрүү портторунун тегерегинде иштейбиз. .

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

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

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

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

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

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

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

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

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

# рубрика рубрика рубрика рубрика рубрика рубрика рубрика рубрика рубрика
1 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
2 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
3 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

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

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

# рубрика рубрика рубрика рубрика рубрика рубрика рубрика рубрика
1 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
2 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
3 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# рубрика рубрика рубрика рубрика рубрика рубрика рубрика рубрика
1 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
2 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
3 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# рубрика рубрика рубрика рубрика рубрика рубрика рубрика рубрика
1 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
2 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
3 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# рубрика рубрика рубрика рубрика рубрика рубрика рубрика рубрика
1 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
2 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка
3 Клетка Клетка Клетка Клетка Клетка Клетка Клетка Клетка 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>