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

Создание страничной навигации с помощью Twitter Bootstrap

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

<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>

Например: блок страничной навигации, состоящий из 5 страниц.

Навигационный блок с активными и неактивными состояниями элементов

Ссылки внутри навигационного блока могут быть настроены для различных ситуаций. Например: когда пользователь переходит на первую или последнюю страницу и для выделения порядкового номера текущей страницы. Для создания неактивной ссылки используйте класс .disabled, а для выделения текущей страницы класс .active.

<ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li class="active"><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>

Например: блок страничной навигации с активным и неактивным состоянием элементов.

Примечание: Класс .disabled изменяет только внешний вид ссылки, но не отменяет её функциональность. Для отмены функциональности необходимо заменить тег ссылки <a> на логический тег <span>.

<ul class="pagination">
  <li class="disabled"><span>«</span></li>
  <li class="active"><span>1</span></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>

Выше приведенный код будет выглядеть примерно так:

Изменение размеров блока страничной навигации

С помощью классов .pagination-lg и .pagination-sm вы можете увеличить или уменьшить размеры блока страничной навигации.

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Например: большой, стандартный и маленький размеры блока страничной навигации.

Компонент "Пейджер" (Pager)

Компонент "Пейджер" представляет собой ссылки для перехода на предыдущую и следующую страницу вашего сайта. Для его создания необходимо использовать класс .pager.

<ul class="pager">
  <li><a href="#">Предыдущая</a></li>
  <li><a href="#">Следующая</a></li>
</ul>

Например: компонент "Пейджер", состоящий из 2 ссылок на предыдущую и следующую страницу.

Выравнивание "Пейджера"

По умолчанию, ссылки на страницы компонента "Пейджер" выравниваются в горизонтальном направлении по центру. Но, Twitter Bootstrap с помощью класса .previous позволяет выравнять ссылку на предыдущую страницу по левому краю, а с помощью класса .next ссылку на следующую страницу по правому краю.

<ul class="pager">
  <li class="previous"><a href="#">← Предыдущая</a></li>
  <li class="next"><a href="#">Следующая →</a></li>
</ul>

Например: компонент "Пейджер" с выравниванием ссылок.

Компонент "Пейджер" может использовать классы блока страничной навигации .disabled и .active

<ul class="pager">
  <li class="previous disabled"><a href="#">← Предыдущая</a></li>
  <li class="next"><a href="#">Следующая →</a></li>
</ul>

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