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

Группы списков Bootstrap4 Ленточные индикаторы Bootstrap4

Страницация Bootstrap4

Навигация по страницам — это процесс организации контента, заключающийся в разделении его на отдельные страницы.
Навигация по страницам используется практически во всех веб-приложениях в той или иной форме, например, поисковые системы используют навигацию по страницам для отображения ограниченного количества результатов на странице результатов поиска, или на блогах или форумах для отображения ограниченного количества статей на каждой странице.

В процессе разработки веб-страниц, если контент слишком量大， обычно используется навигация по страницам.

Bootstrap 4 может легко реализовать эффект навигации по страницам.

Чтобы создать базовую навигацию по страницам, добавьте класс .pagination к элементу <ul>. Затем добавьте класс .page-item к элементу <li>:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Навигация по страницам</h2>
　　<p>Чтобы создать базовую навигацию по страницам, добавьте класс .pagination к элементу ul. Затем добавьте класс .page-item к элементу li:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item"><a class="page-link" href="#">Предыдущая</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">Следующая</a></li>
　　</ul>
</div>
</body>
</html>

Проверьте, что ‹/›

Состояние номера страницы текущей страницы

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

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Состояние номера страницы текущей страницы</h2>
　　<p>Текущая страница может быть выделена с помощью класса .active:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item"><a class="page-link" href="#">Предыдущая</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item active"><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">Следующая</a></li>
　　</ul>
</div>
</body>
</html>

Проверьте, что ‹/›

Неактивные ссылки на страницы

.disabled класс позволяет установить ссылку на страницу неактивной:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Неактивные ссылки на страницы</h2>
　　<p>Класс .disabled позволяет установить ссылку на страницу неактивной:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item disabled"><a class="page-link" href="#">Предыдущая</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">Следующая</a></li>
　　</ul>
</div>
</body>
</html>

Проверьте, что ‹/›

Размеры отображения страниц

Элементы навигации по страницам можно установить с различным размером.

.pagination-lg класс устанавливает крупные шрифты для элементов навигации по страницам, .pagination-sm класс устанавливает мелкие шрифты для элементов навигации по страницам:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Размеры отображения страниц</h2>
　　<p>.pagination-lg класс устанавливает крупные шрифты для элементов навигации по страницам, .pagination-sm класс устанавливает мелкие шрифты для элементов навигации по страницам:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination pagination-lg">
　　　　<li class="page-item"><a class="page-link" href="#">Предыдущая</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">Следующая</a></li>
　　</ul>
　　　
　　<ul class="pagination pagination-sm">
　　　　<li class="page-item"><a class="page-link" href="#">Предыдущая</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item"><a class="page-link" href="#">Следующая</a></li>
　　</ul>
</div>
</body>
</html>

Проверьте, что ‹/›

Навигация по breadcrumb

.breadcrumb и .breadcrumb-item Класс используется для настройки навигации по breadcrumb:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Навигация по бейграмам</h2>
　　<p>Классы .breadcrumb и .breadcrumb-item используются для настройки навигации по бейграмам:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="breadcrumb">
　　　　<li class="breadcrumb-item"><a href="#">Фотографии</a></li>
　　　　<li class="breadcrumb-item"><a href="#">Лето 2017</a></li>
　　　　<li class="breadcrumb-item"><a href="#">Италия</a></li>
　　　　<li class="breadcrumb-item active">Рим</li>
　　</ul>
</div>
</body>
</html>

Проверьте, что ‹/›

Группы списков Bootstrap4 Ленточные индикаторы Bootstrap4