Последние учебники веб-разработки
 

Bootstrap Pagination


Основные 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 .