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