Source

Табліцы

Дакументацыя і прыклады выбарнага стылю табліц (улічваючы іх шырокае выкарыстанне ў плагінах JavaScript) з дапамогай Bootstrap.

Прыклады

З-за шырокага выкарыстання табліц у віджэтах іншых вытворцаў, такіх як календары і сродкі выбару даты, мы распрацавалі нашы табліцы для выбару . Проста дадайце базавы клас .tableу любы <table>, а затым пашырыце карыстальніцкімі стылямі або нашымі рознымі ўключанымі класамі-мадыфікатарамі.

Выкарыстоўваючы самую базавую разметку табліц, вось як .tableтабліцы на аснове выглядаюць у Bootstrap. Усе стылі табліц успадкоўваюцца ў Bootstrap 4 , што азначае, што любыя ўкладзеныя табліцы будуць стылізаваны такім жа чынам, што і бацькоўскія.

# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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.

# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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або .thead-dark, каб яны <thead>выглядалі светла- або цёмна-шэрымі.

# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
3 Лары птушка @twitter
# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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>.

# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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>
# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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для межаў з усіх бакоў табліцы і вочак.

# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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>
# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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для табліцы без межаў.

# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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таксама можна выкарыстоўваць на цёмных сталах.

# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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>.

# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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>
# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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, каб зрабіць табліцы больш кампактнымі, скараціўшы пракладку вочак напалову.

# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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>
# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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класам.

Стварыце адаптыўныя табліцы, абгарнуўшы любую .tableтабліцай .table-responsive{-sm|-md|-lg|-xl}, каб табліца пракручвалася гарызантальна ў кожнай max-widthкропцы перапынку да (але не уключаючы) 576 пікселяў, 768 пікселяў, 992 пікселяў і 1120 пікселяў адпаведна.

Звярніце ўвагу, што паколькі браўзеры ў цяперашні час не падтрымліваюць кантэкстныя запыты дыяпазону , мы абыходзім абмежаванні прэфіксаў min-іmax- вокнаў прагляду з дробавай шырынёй (якія могуць узнікаць пры пэўных умовах, напрыклад, на прыладах з высокім dpi), выкарыстоўваючы значэнні з больш высокай дакладнасцю для гэтых параўнанняў .

Тытры

Функцыянуе <caption>як загаловак табліцы. Гэта дапамагае карыстальнікам з праграмамі чытання з экрана знайсці табліцу і зразумець, пра што яна, а таксама вырашыць, ці хочуць яны яе прачытаць.

Спіс карыстальнікаў
# Першы Апошні Ручка
1 Марк Ота @mdo
2 Якаў Торнтан @тоўсты
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>