Bootstrap - Таблицы
Bootstrap предоставляет чистый макет для создания таблиц. Некоторые из элементов таблицы, поддерживаемые Bootstrap:
| Sr. No. | Тег и описание |
|---|---|
| 1 | <table> Элемент упаковки для отображения данных в табличном формате |
| 2 | <thead> Элемент контейнера для строк заголовков таблицы (<tr>) для маркировки столбцов таблицы. |
| 3 | <tbody> Элемент контейнера для строк таблицы (<tr>) в теле таблицы. |
| 4 | <tr> Элемент контейнера для набора ячеек таблицы (<td> или <th>), который отображается в одной строке. |
| 5 | <td> Ячейка таблицы по умолчанию. |
| 6 | <th> Специальная ячейка таблицы для меток столбцов (или строк, в зависимости от области действия и размещения). Должен использоваться в <thead> |
| 7 | <caption> Описание или сводка того, что содержит таблица. |
Базовая таблица
Если вам нужен красивый базовый стиль таблицы с небольшим отступом и горизонтальными разделителями, добавьте базовый класс .table к любой таблице, как показано в следующем примере:
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>Дополнительные классы таблиц
Наряду с разметкой базовой таблицы и классом .table есть несколько дополнительных классов, которые можно использовать для стилизации разметки. Следующие разделы дадут вам представление обо всех этих классах.
Полосатый стол
Добавив класс .table-striped , вы получите полосы в строках внутри <tbody>, как показано в следующем примере:
<table class = "table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Таблица с границами
Добавив класс .table-bordered , вы получите границы, окружающие каждый элемент, и закругленные углы вокруг всей таблицы, как показано в следующем примере:
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Стол при наведении
При добавлении класса .table-hover к строкам будет добавлен светло-серый фон при наведении курсора на них, как показано в следующем примере:
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Сводная таблица
При добавлении класса .table-condensed отступы строк сокращаются вдвое, чтобы сжать таблицу. как показано в следующем примере. Это полезно, если вам нужна более подробная информация.
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Контекстные классы
Контекстные классы, показанные в следующей таблице, позволят вам изменить цвет фона строк или отдельных ячеек таблицы.
| Sr. No. | Класс и описание |
|---|---|
| 1 | .active Применяет цвет наведения к определенной строке или ячейке |
| 2 | .success Указывает на успешное или положительное действие |
| 3 | .warning Указывает на предупреждение, которое может потребовать внимания |
| 4 | .danger Указывает на опасное или потенциально негативное действие |
Эти классы могут применяться к <tr>, <td> или <th>.
<table class = "table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class = "danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>Адаптивные таблицы
К оберточным любому .table в .table реагирующего класса, вы будете делать таблицы прокрутки по горизонтали до небольших устройств (под 768px). При просмотре на объектах шириной более 768 пикселей вы не увидите никакой разницы в этих таблицах.
<div class = "table-responsive">
<table class = "table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>