Маси
Документация и примери за избор на стил на таблици (като се има предвид преобладаващата им употреба в 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>