Bootstrap Форма
Bootstrap обеспечивает четкую макет созданную таблицу. В следующей таблице перечислены некоторые элементы таблицы Bootstrap поддержка:
| этикетка | описание |
|---|---|
| <Таблица> | Добавление для формирования основы стиля. |
| <THEAD> | Таблица контейнера строки заголовка элемента (<TR>), используемый для идентификации столбцов таблицы. |
| <TBODY> | Таблица контейнера элемент в теле строки таблицы (<TR>). |
| <Tr> | Группа появляется на одной строке в контейнере элемента ячейки таблицы (<TD> или <й>). |
| <Td> | Таблицы по умолчанию ячейки. |
| <Th> | Специальная ячейка таблицы, используемый для идентификации строки или столбца (в зависимости от размера и локализации). Вы должны использовать <THEAD> внутри. |
| <Подпись> | О магазине таблица описания содержания или резюме. |
Форма класса
В приведенных ниже таблицах таблицы стилей могут быть использованы:
| категория | описание | примеров |
|---|---|---|
| .table | Произвольное <таблица> Добавить базовый тип (только горизонтальный сепаратор) | пробовать |
| .table-полосатый | В <TBODY> в форме добавления зебра (IE8 не поддерживает) | пробовать |
| .table каймой | Добавить рамку для всех ячеек таблицы | пробовать |
| .table-Hover | В <TBODY> в любой строке включить состояние парения | пробовать |
| .table-конденсируется | Сделать более компактной форме | пробовать |
| Совместное использование всех классов форм | пробовать | |
<Tr>, <й> и <TD> Класс
Классы В приведенной ниже таблице могут быть использованы для формирования строки или ячейки:
| категория | описание | примеров |
|---|---|---|
| .active | Применение зависать цвета на линии или клетки | пробовать |
| .success | Это указывает на успешную операцию | пробовать |
| .info | Информация, представляющая изменяющуюся операционную | пробовать |
| .warning | Она представляет собой операцию предупреждения | пробовать |
| .danger | Она представляет собой опасную операцию | пробовать |
Основной формой
Если вы хотите , только с дополнением (дополнение) и базового уровня раскола таблицы добавить .tableкласс,как показано в следующих примерах:
примеров
Попробуйте »
Результаты следующие:
Дополнительный класс Form
В дополнение к базовой разметки таблиц и .table класса, и некоторые из них могут быть использованы в качестве маркера для определения классов стилей. Ниже будет познакомить вас с этими классами.
Полосатый стол
Путем добавления.table-полосатый класс,вы увидите полосы на линии <TBODY> изнутри, как показано в следующем примере:
примеров
Попробуйте »
Результаты следующие:
Таблица Border
Добавляя.table каймой класс,вы увидите , что каждый элемент имеет границу вокруг, а общая округлая форма, как показано в следующем примере:
примеров
Попробуйте »
Результаты следующие:
Hover стол
При добавлениикласса .table-парения,когда указатель мыши находится на строке , когда будет светло - серый фон, как показано в следующих примерах:
примеров
Попробуйте »
Результаты следующие:
Компактная форма
Добавив.table-конденсированные класс,рядный набивка (набивка) разрезают пополам, так что таблица выглядит более компактным, как это показано в следующем примере. Эта информация полезна, когда вы хотите выглядеть более компактным.
примеров
Попробуйте »
Результаты следующие:
класс Context
Контекст класса перечислены в следующей таблице позволяет изменить цвет фона строк таблицы или отдельных ячеек.
| 类 | 描述 |
|---|---|
| .active | 对某一特定的行或单元格应用悬停颜色 |
| .success | 表示一个成功的或积极的动作 |
| .warning | 表示一个需要注意的警告 |
| .danger | 表示一个危险的或潜在的负面动作 |
Эти классы могут быть применены к <TR>, <TD> или <й>.
примеров
Попробуйте »
Результаты следующие:
Отзывчивый стол
По любым.table, завернутые в.table реагирующих класса,вы можете иметь таблицу для прокрутки по горизонтали для размещения небольших устройств (менее 768px). При просмотре на крупногабаритного оборудования больше, чем 768px в ширину, вы не увидите никакой разницы.
примеров
Попробуйте »
Результаты следующие:
