Содержание:
Bootstrap обеспечивает чистый макет для построения таблиц. Некоторые элементы таблицы, поддерживаемые Bootstrap, - это:
| Тег | Описание |
|---|---|
| table | Элемент упаковки для отображения данных в табличном формате |
| thead | Элемент контейнера для строк заголовка таблицы (tr) для маркировки столбцов таблицы. |
| tbody | Контейнерный элемент для строк таблицы (tr) в теле таблицы. |
| tr | Элемент контейнера для набора ячеек таблицы (td или th), который отображается в одной строке. |
| td | Ячейка таблицы по умолчанию. |
| th | Специальная ячейка таблицы для меток столбцов (или строк, в зависимости от области и размещения). Должен использоваться в td |
| 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>
Контекстные классы
Контекстные классы, показанные в следующей таблице, позволят вам изменить цвет фона ваших строк таблицы или отдельных ячеек.
| Класс | Описание |
|---|---|
| .active | Применяет цвет наведения к определенной строке или ячейке |
| .success | Указывает на успешное или позитивное действие |
| .warning | Указывает предупреждение, которое может потребовать внимания |
| .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-responsive, вы заставите таблицу прокручиваться горизонтально на небольших устройствах (до 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>
