Основной курс Bootstrap

Bootstrap плагины

Метки Bootstrap Навигация по бreadcrum Bootstrap

Страницы Bootstrap

В этой главе будет рассказано о поддерживаемых Bootstrap возможностях pagination. Pagination (Страницация) - это несписок, Bootstrap обрабатывает его так же, как и другие элементы интерфейса.

Страницация (Pagination)

В таблице перечислены классы, предоставляемые Bootstrap для обработки-pagination.

Класс	Описание	Пример кода
.pagination	Добавить этот класс, чтобы отобразить pagination на странице.	<ul> 　　<li><a href="#">«</a></li> 　　<li><a href="#">1</a></li> 　　...... </ul>
.disabled, .active	Вы можете настроить ссылки, используя .disabled Чтобы определить ссылку, которую нельзя нажать, используйте .active Чтобы указать текущую страницу.	<ul> 　　<li><a href="#">«</a></li> 　　<li><a href="#">1<span>(текущая)</span></a></li> 　　...... </ul>
.pagination-lg, .pagination-sm	Используйте эти классы для получения элементов различного размера.	<ul>...</ul> <ul>...</ul> <ul>...</ul>

Default pagination

Ниже приведены примеры, демонстрирующие классы, обсуждаемые в таблице .pagination Применение:

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

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Default pagination</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>
<ul class="pagination">
	<li><a href="#">«</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a></li>
</ul>
</body>
</html>

Проверьте, как это выглядит ›/‹

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

Статусы pagination

Ниже приведены примеры, демонстрирующие классы, обсуждаемые в таблице .disabled, .active Применение:

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

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Статусы pagination</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>
<ul class="pagination">
	<li><a href="#">«</a></li>
	<li class="active"><a href="#">1</a></li>
	<li class="disabled"><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a></li>
</ul>
</body>
</html>

Проверьте, как это выглядит ›/‹

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

Размеры pagination

Ниже приведены примеры, демонстрирующие классы, обсуждаемые в таблице .pagination-* Применение:

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

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Размеры pagination</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>
<ul class="pagination pagination-lg">
	<li><a href="#">«</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a></li>
</ul><br>
<ul class="pagination">
	<li><a href="#">«</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a></li>
</ul><br>
<ul class="pagination pagination-sm">
	<li><a href="#">«</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a></li>
</ul>
</body>
</html>

Проверьте, как это выглядит ›/‹

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

Переход на следующую страницу (Pager)

Если вы хотите создать простые ссылки на навигацию для пользователей, можно использовать переход на следующую страницу. Как и ссылки на навигацию, переход на следующую страницу также является несортированным списком. По умолчанию, ссылки выводятся по центру. В таблице ниже приведены классы, которые Bootstrap использует для обработки перехода на следующую страницу.

Класс	Описание	Пример кода
.pager	Добавить этот класс, чтобы получить ссылки на переход на следующую страницу.	<ul> 　　<li><a href="#">Предыдущая</a></li> 　　<li><a href="#">Следующая</a></li> </ul>
.previous, .next	Использовать класс .previous Сбросить ссылку влево, используя .next Сбросить ссылку вправо.	<ul> 　　<li><a href="#">← Старая</a></li> 　　<li><a href="#">Новая →</a></li> </ul>
.disabled	Добавьте этот класс, чтобы установить кнопку в состояние недоступности.	<ul> 　　<li><a href="#">← Старая</a></li> 　　<li><a href="#">Новая →</a></li> </ul>

Стандартная разбивка на страницы

Ниже приведены примеры, демонстрирующие классы, обсуждаемые в таблице .pager Применение:

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

Пример

<!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>
<ul class="pager">
	<li><a href="#">Предыдущая</a></li>
	<li><a href="#">Следующая</a></li>
</ul>
</body>
</html>

Проверьте, как это выглядит ›/‹

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

Выровненные ссылки

Ниже приведены примеры, демонстрирующие классы, обсуждаемые в таблице .previous, .next Применение:

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

Пример

<!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>
<ul class="pager">
	<li class="previous"><a href="#">← Старая</a></li>
	<li class="next"><a href="#">Новая →</a></li>
</ul>
</body>
</html>

Проверьте, как это выглядит ›/‹

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

Состояние разбивки на страницы

Ниже приведены примеры, демонстрирующие классы, обсуждаемые в таблице .disabled Применение:

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

Пример

<!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>
<ul class="pager">
	<li class="previous disabled"><a href="#">← Старая</a></li>
	<li class="next"><a href="#">Новая →</a></li>
</ul>
</body>
</html>

Проверьте, как это выглядит ›/‹

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

Более сложные примеры разбивки на страницы

Класс	Описание	Пример
.pager	Простая ссылка на страницу, выровненная по центру.	Попробуйте
.previous	Стиль кнопки "Предыдущая" в .pager, выравнивание влево	Попробуйте
.next	Стиль кнопки "Следующая" в .pager, выравнивание вправо	Попробуйте
.disabled	Запрещенные ссылки	Попробуйте
.pagination	Ссылки на страницу pagination	Попробуйте
.pagination-lg	Ссылки на страницу pagination с большим размером	Попробуйте
.pagination-sm	Ссылки на страницу pagination с мелким размером	Попробуйте
.disabled	Запрещенные ссылки	Попробуйте
.active	Стиль ссылки на текущую страницу	Попробуйте

Метки Bootstrap Навигация по бreadcrum Bootstrap