Bootstrap Таблица
Базовая таблица начальной загрузки
Базовая таблица Bootstrap имеет светлую обивку и только горизонтальные разделители.
.table класс добавляет базовый стиль к таблице:
Пример
| Firstname | Lastname | |
|---|---|---|
| HTML | CSS | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Чередующиеся строки
.table-striped класс добавляет к таблице зебра-полосы:
Пример
| Firstname | Lastname | |
|---|---|---|
| HTML | CSS | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Граница таблицы
.table-bordered класс добавляет границы со всех сторон таблицы и ячеек:
Пример
| Firstname | Lastname | |
|---|---|---|
| HTML | CSS | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Наведите строки
.table-hover класс добавляет эффект наведения (серый цвет фона) в строках таблицы:
Пример
| Firstname | Lastname | |
|---|---|---|
| HTML | CSS | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Конденсированный стол
.table-condensed класс делает таблицу более компактной, сокращая заполнение ячеек пополам:
Пример
| Firstname | Lastname | |
|---|---|---|
| HTML | CSS | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Контекстные классы
Контекстные классы могут использоваться для окраски строк таблицы (<tr>) или ячеек таблицы (<td>):
Пример
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | [email protected] |
| Success | CSS | [email protected] |
| Danger | Moe | [email protected] |
| Info | Dooley | [email protected] |
| Warning | Refs | [email protected] |
| Active | Activeson | [email protected] |
Можно использовать следующие контекстные классы:
| Класс | Описание |
|---|---|
.active |
Применение цвета наведения к строке таблицы или ячейке таблицы |
.success |
Указывает на успешное или положительное действие |
.info |
Указывает нейтральное информативное изменение или действие |
.warning |
Указывает предупреждение, которое может потребоваться внимание |
.danger |
Указывает на опасное или потенциально отрицательное действие |
Адаптивные таблицы
.table-responsive класс создает адаптивную таблицу. Затем таблица будет прокручиваться по горизонтали на небольших устройствах (под 768px). При просмотре на что-либо больше, чем 768px широкий, нет никакой разницы:
Пример
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Полная справка на таблицу Bootstrap
Для полной справки всех классов таблиц, перейдите к нашей полной Справочник по таблицам начальной загрузки.
