Основной учебник Bootstrap

Bootstrap плагины

Таблицы Bootstrap

Bootstrap предоставляет четкую структуру для создания таблиц. В таблице ниже перечислены некоторые элементы таблицы, поддерживаемые Bootstrap:

Тэг	Описание
<table>	Добавьте базовый стиль к таблице.
<thead>	Элемент контейнера для заголовка таблицы в <tr>, используемый для идентификации столбцов.
<tbody>	Элемент контейнера для строк таблицы в <tbody>.
<tr>	Элемент контейнера для группы ячеек таблицы,出现的 в одной строке (<td> или <th>).
<td>	Стандартные ячейки таблицы.
<th>	Специальные ячейки таблицы, используемые для идентификации строк или столбцов (в зависимости от диапазона и положения). Должны использоваться в <thead>.
<caption>	Описание или резюме содержимого таблицы.

Классы таблицы

Следующие стили таблицы можно использовать в таблице:

Класс	Описание	Пример
.table	Добавьте базовый стиль к любому <table> (только горизонтальные разделители)	Попробуйте
.table-striped	Добавьте полосатый узор в виде зебры в <tbody> (IE8 не поддерживает)	Попробуйте
.table-bordered	Добавьте рамку к всем ячейкам таблицы	Попробуйте
.table-hover	Включите состояние при наведении мыши на любую строку в <tbody>	Попробуйте
.table-condensed	Сделайте таблицу более компактной	Попробуйте
Сочетание всех классов таблицы		Попробуйте

<tr>, <th> и <td> классы

Следующие классы можно использовать для строк или ячеек таблицы:

Класс	Описание	Пример
.active	Применение цвета при наведении на строку или ячейку	Попробуйте
.success	Отображает успешное действие	Попробуйте
.info	Отображает действие с изменением информации	Попробуйте
.warning	Отображает предупреждающее действие	Попробуйте
.danger	Отображает опасное действие	Попробуйте

Базовая таблица

Если вы хотите создать базовую таблицу с внутренним отступом (padding) и горизонтальной линией разделения, добавьте класс .tableнапример, в следующем примере:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - базовая таблица</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
	<caption>Базовая структура таблицы</caption>
　　　<thead>
　　　　　　<tr>
　　　　　　　　　<th>Имя</th>
　　　　　　　　　<th>Город</th>
　　　　　　</tr>
　　　</thead>
　　　<tbody>
　　　　　　<tr>
　　　　　　　　　<td>Tanmay</td>
　　　　　　　　　<td>Bangalore</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　<td>Sachin</td>
　　　　　　　　　<td>Mumbai</td>
　　　　　　</tr>
　　　</tbody>
</table>
</body>
</html>

Проверьте, посмотрите < › >

Результаты показаны ниже:

Дополнительные классы таблицы

Кроме базовых маркеров таблиц и класса .table, есть еще классы, которые можно использовать для определения стиля маркеров. Ниже мы представим вам эти классы.

Таблица с полосами

Добавление .table-striped class, на строках внутри <tbody> вы увидите полосы, как показано в следующем примере:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Таблица с полосами</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
	<caption>Таблица с полосами</caption>
	<thead>
		<tr>
			<th>Имя</th>
			<th>Город</th>
			<th>Почтовый индекс</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Проверьте, посмотрите < › >

Результаты показаны ниже:

Таблица с рамками

Добавление .table-bordered class, вокруг каждого элемента будет рамка, и углы таблицы будут закруглены, как показано в следующем примере:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Таблица с рамками</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered">
	<caption>Таблица с рамками</caption>
	<thead>
		<tr>
			<th>Имя</th>
			<th>Город</th>
			<th>Почтовый индекс</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Проверьте, посмотрите < › >

Результаты показаны ниже:

Таблица с наведением

Добавление .table-hover class, при наведении курсора на строку появится светло-серый фон, как показано в следующем примере:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Таблица с наведением</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-hover">
	<caption>Таблица с наведением</caption>
	<thead>
		<tr>
			<th>Имя</th>
			<th>Город</th>
			<th>Почтовый индекс</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Проверьте, посмотрите < › >

Результаты показаны ниже:

Упрощенная таблица

Добавление .table-condensed class, внутренний отступ (padding) разделен пополам, чтобы сделать таблицу более компактной, как показано в следующем примере. Это очень полезно, когда вы хотите сделать информацию более компактной.

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Упрощенная таблица</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-condensed">
	<caption>Упрощенная таблица</caption>
	<thead>
		<tr>
			<th>Имя</th>
			<th>Город</th>
			<th>Почтовый индекс</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr>
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr>
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Проверьте, посмотрите < › >

Результаты показаны ниже:

Контекстные классы

Контекстные классы, указанные в таблице, позволяют изменить цвет фона строки или отдельной ячейки таблицы.

Класс	Описание
.active	Применение цвета при наведении к определенной строке или ячейке
.success	表示一个成功的或积极的动作
.warning	表示一个需要注意的警告
.danger	表示一个危险的或潜在的负面动作

Эти классы могут применяться к <tr>, <td> или <th>.

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример Bootstrap - Классы контекста</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
	<caption>Респонсивная разметка таблицы контекста</caption>
	<thead>
		<tr>
			<th>Товар</th>
			<th>Дата оплаты</th>
			<th>Статус</th>
		</tr>
	</thead>
	<tbody>
		<tr class="active">
			<td>Товар 1</td>
			<td>23/11/2013</td>
			<td>В ожидании отгрузки</td>
		</tr>
		<tr class="success">
			<td>Товар 2</td>
			<td>10/11/2013</td>
			<td>В пути</td>
		</tr>
		<tr class="warning">
			<td>Продукт 3</td>
			<td>20/10/2013</td>
			<td>В ожидании подтверждения</td>
		</tr>
		<tr class="danger">
			<td>Продукт 4</td>
			<td>20/10/2013</td>
			<td>Возврат товара</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Проверьте, посмотрите < › >

Результаты показаны ниже:

респонсивные таблицы

перемещая любые .table включает .table-responsive В классе, вы можете сделать таблицу горизонтально скролируемой для малогабаритных устройств (менее 768px). При просмотре на больших устройствах шириной более 768px, никакой разницы не будет заметно.

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример Bootstrap - Респонсивная таблица</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="table-responsive">
	<table class="table">
		<caption>Респонсивная разметка таблицы</caption>
		<thead>
			<tr>
				<th>Товар</th>
				<th>Дата оплаты</th>
				<th>Статус</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Товар 1</td>
				<td>23/11/2013</td>
				<td>В ожидании отгрузки</td>
			</tr>
			<tr>
				<td>Товар 2</td>
				<td>10/11/2013</td>
				<td>В пути</td>
			</tr>
			<tr>
				<td>Продукт 3</td>
				<td>20/10/2013</td>
				<td>В ожидании подтверждения</td>
			</tr>
			<tr>
				<td>Продукт 4</td>
				<td>20/10/2013</td>
				<td>Возврат товара</td>
			</tr>
		</tbody>
</table>
</div>　　	
</body>
</html>

Проверьте, посмотрите < › >

Результаты показаны ниже:

Формы Bootstrap Код Bootstrap