Пагинация (pagination) – Bootstrap3

Всем привет!
В уроке № 12 я затрагивал немного тему пагинации, а здесь, в этой статье, я хочу показать еще пару фишек в bootstrap 3 с пагинацией.
Почему решил дополнить тему «Пагинация»? Совестно стало, что основу дал, а «вкусностей» и «полезностей» никаких не оставил.
Поскольку фундаментальных основ здесь нет, поэтому подробно на чем-то останавливаться не буду, если вы прошли основы Bootstrap 3, то у вас не должно возникнуть вопросов.
Итак, вот стандартный код пагинации:

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

Результат:

• «
• 1
• 2
• 3
• 4
• 5
• »

Пагинация с выделением текущей страницы

Чтобы выделить текущую страницу, используйте класс «active»:

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

Результат:

• «
• 1
• 2
• 3
• 4
• 5
• »

Размеры пагинации

Чтобы задать размер, существует следующий класс:

«pagination-lg»  -  большой размер
«pagination-sm» - маленький размер

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

Результат:

• «
• 1
• 2
• 3
• 4
• 5
• »

• «
• 1
• 2
• 3
• 4
• 5
• »

• «
• 1
• 2
• 3
• 4
• 5
• »

Навигация – «Пейджер»

Еще одна постраничная навигация – «Пейджер».
Вы видели, на блогах часто используют такую фишку, например, две ссылки с надписью «Предыдущая» и «Следующая». При нажатии по этим ссылкам, вы просматриваете статьи, которые были написаны по очередности.
Добавьте класс «pager» к тегу <ul>

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

Результат:

• ← Предыдущая
• Следующая →

Если нужно прижать навигацию «Пейджер» по левому и правому краю.

класса «previous» - левый край
класса «next» - правый край

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

Результат:

• ← Предыдущая
• Следующая →