Bootstrap основной таблицы
Основная Bootstrap таблица имеет легкую отступы и только горизонтальные разделители.
.table Класс добавляет основные стили к таблице:
пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Полосатые Ряды
.table-striped класс добавляет зебры полосы к столу:
пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Выложенные Таблица
.table-bordered класс добавляет границы со всех сторон стола и клеток:
пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Hover Ряды
.table-hover класс позволяет состояние парения на строки таблицы:
пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Сгущенное Таблица
.table-condensed класс делает стол более компактным за счет сокращения клеток отступы пополам:
пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Контекстные Классы
Контекстные классы могут быть использованы для цвета строк таблицы ( <tr> ) или ячейки таблицы ( <td> ):
пример
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Контекстных классы, которые могут быть использованы, являются:
| Класс | Описание |
|---|---|
.active | Применяется цвет при наведении курсора на строку таблицы или ячейки таблицы |
.success | Указывает на успешное или положительное действие |
.info | Указывает нейтральный информативный изменение или действие |
.warning | Указывает на предупреждение, что, возможно, нуждаются во внимании |
.danger | Указывает на опасную или потенциально негативное действие |
Отзывчивый Столы
.table-responsive класс создает ответную таблицу. Таблица будет затем прокрутки по горизонтали на небольших устройствах (под 768px). При просмотре на что-либо большее, чем 768px широкий, нет никакой разницы:
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»
Полная Bootstrap Table Reference Bootstrap Table Reference
Для полного ведения всех классов таблиц, перейдите на наш полный Bootstrap Таблицы Reference .