twitter-bootstrap
таблицы
Поиск…
замечания
Контент содержания и сложные таблицы. Остерегайтесь того, что стиль table-reflow изменяет визуальный порядок содержимого. Убедитесь, что вы применяете этот стиль только к хорошо сформированным и простым таблицам данных (и, в частности, не используйте это для таблиц макета) с соответствующими ячейками заголовка таблицы для каждой строки и столбца.
Кроме того, этот класс не будет корректно работать для таблиц с ячейками, которые охватывают несколько строк или столбцов (используя атрибуты rowspan или colspan).
Основная таблица
Bootstrap определяет пользовательский стиль для таблицы, используя класс .table
. Просто добавьте класс .table
в любую <table>
чтобы увидеть горизонтальные разделители и отступы:
<table class="table">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Стол с расширенным дизайном
Bootstrap предоставляет несколько классов для расширенного стиля таблицы.
Полосатые ряды
У вас будет таблица с полосатыми рядами, если вы добавите .table-striped
:
<table class="table table-striped">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Обратите внимание, что:
Полосатые таблицы стилизованы с помощью селектора CSS
:nth-child
, который недоступен в Internet Explorer 8.
Граничный стол
У вас будет таблица с границами со всех сторон таблицы и ячеек, если вы добавите .table-bordered
:
<table class="table table-bordered">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Наведение по строкам
Если вы добавите .table-hover
, у вас будет таблица с выделенными строками, когда пользователь будет .table-hover
над строкой:
<table class="table table-hover">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Сжатый стол
Если вы добавите .table-condensed
, то по умолчанию для ячейки будет разрезано пополам, поэтому у вас будет более компактная таблица:
<table class="table table-hover">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Контекстные классы
Столы Bootstrap поддерживают контекстные цвета. Для того, чтобы изменить цвет фона строки таблицы или ячейки нужно просто добавить один из следующих классов: contexual .active
, .success
, .info
, .warning
, .danger
<table class="table">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr class="success"><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td class="info">Bloggs</td></tr>
</tbody>
</table>
Реагирующие таблицы
Вы должны обернуть любой .table
в контейнере html .table-responsive
для создания .table-responsive
таблиц:
<div class="table-responsive">
<table class="table">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
</div>
Ревизионные таблицы будут прокручиваться горизонтально на небольших устройствах (<768 пикселей). Не будет различий для экранов размером более 768 пикселей.
Таблица Reflow - Вертикальные заголовки
Получение таблицы с вертикальными заголовками.
Twitter bootstrap теперь поддерживает вертикальный заголовок в хорошо отформатированной нормальной таблице. Для этого просто используйте .table-reflow
Используйте класс twitter bootstrap .table-reflow
на хорошо сформированном столе, чтобы получить таблицу с вертикальными заголовками. Кроме того, вы можете комбинировать с использованием .table-striped
и .table-hover
для зависания столбцов на этот раз.
<table class="table table-striped table-hover table-reflow">
<thead>
<tr>
<th ><strong> First Name: </strong></th>
<th ><strong> Last Name: </strong></th>
<th ><strong> Email: </strong></th>
</tr>
</thead>
<tbody>
<tr>
<td> John </td>
<td> Doe </td>
<td> [email protected] </td>
</tr>
<tr>
<td> Joane </td>
<td> Donald </td>
<td> [email protected] </td>
</tr>
</tbody>
</table>
Вы должны проверить v4 alpha docs здесь: twitter-bootstrap .table-reflow