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

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

twitter-bootstrap
таблицы

Поиск…