Основные Pagination
Если у вас есть веб-сайт с большим количеством страниц, вы можете добавить какую-то пагинацией на каждую страницу.
Основная нумерацией страниц в 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 State
Инвалид ссылка не может быть нажата:
Добавить класс .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 Sizing
Pagination блоки также могут иметь такие размеры, до большего размера или меньшего размера:
Добавьте класс .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> Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »
Полное Bootstrap Navigation Reference
Для полного ведения всех навигационных классов, перейдите на наш полный Bootstrap Navigation Reference .