Source

Маси

Документация и примери за избор на стил на таблици (като се има предвид преобладаващата им употреба в JavaScript добавки) с Bootstrap.

Примери

Поради широкото използване на таблици в уиджети на трети страни, като календари и инструменти за избор на дати, ние проектирахме нашите таблици да бъдат избираеми . Просто добавете основния клас .tableкъм който и да е <table>, след което разширете с персонализирани стилове или нашите различни включени класове модификатори.

Използвайки най-основното маркиране на таблици, ето как .tableизглеждат базираните на таблици таблици в Bootstrap. Всички стилове на таблици са наследени в Bootstrap 4 , което означава, че всички вложени таблици ще бъдат стилизирани по същия начин като родителя.

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Лари птицата @туитър 
<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 Лари птицата @туитър 
<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 Лари птицата @туитър
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Лари птицата @туитър 
<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 Лари птицата @туитър 
<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 Лари птицата @туитър 
<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 Птицата Лари @туитър 
<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 Птицата Лари @туитър 
<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 Птицата Лари @туитър 
<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 Птицата Лари @туитър 
<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 Птицата Лари @туитър 
<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 Птицата Лари @туитър 
<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 Птицата Лари @туитър 
<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 Птицата Лари @туитър 
<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точка на прекъсване съответно до (но не включително) 576px, 768px, 992px и 1120px.

Обърнете внимание, че тъй като браузърите понастоящем не поддържат контекстни заявки за обхват , ние заобикаляме ограниченията на префиксите min-иmax- прозорците с частични ширини (които могат да възникнат при определени условия на устройства с висока dpi например), като използваме стойности с по-висока точност за тези сравнения .

Надписи

A <caption>функционира като заглавие за таблица. Помага на потребителите с екранни четци да намерят таблица и да разберат за какво става въпрос и да решат дали искат да я прочетат.

Списък на потребителите
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Лари птицата @туитър 
<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>

Отзивчиви маси

Отзивчивите таблици позволяват лесно превъртане на таблиците хоризонтално. Направете всяка таблица отзивчива във всички прозорци, като обвиете a .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>