Bootstrap Пагинация, разбивка на страницы
Базовая разбивка на страницы
Если у вас есть веб-сайт с большим количеством страниц, вы можете добавить какую-то разбивку на страницы на каждой странице.
Базовая разбивка на страницы в Bootstrap выглядит следующим:
Чтобы создать основную разбивку на страницы, добавьте .pagination класс к <ul> элементу:
Пример
<ul class="pagination">
<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>
</ul>
Активное состояние
В активном состоянии отображается текущая страница:
Добавьте класс, .active чтобы пользователь знал, на какой странице он находится:
Пример
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Отключенное состояние
Отключенная ссылка не может быть нажата:
Добавьте класс, .disabled Если ссылка по какой-либо причине отключена:
Пример
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Разбиение на страницы
Разбиение на страницы также может быть увеличено до большего размера или меньшего размера:
Добавьте класс .pagination-lg для больших блоков или .pagination-sm для небольших блоков:
Пример
<ul class="pagination pagination-lg">
<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>
</ul>
<ul class="pagination pagination-sm">
<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>
</ul>
Сухарях
Другая форма для разбиения на страницы, является панировочные сухари:
.breadcrumb класс указывает расположение текущей страницы в навигационной иерархии:
Пример
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
Полная ссылка на навигацию Bootstrap
Для полного справочника всех классов навигации, перейдите к нашей полной Ссылка на навигацию Bootstrap.
