Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Bootstrap3 дополнение » Пагинация (pagination) – Bootstrap3

10.12.2016


17:08


2053


пока нет


Пагинация (pagination) – Bootstrap 3

Пагинация (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>

Результат:

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

Чтобы выделить текущую страницу, используйте класс «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>

Результат:

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

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

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

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

Результат:

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

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

Результат:



Случайные записи:

  1. Знакомство с CSS. Основы CSS для начинающих. Урок №1
  2. Кнопки. Основы bootstrap 3 для начинающих. Урок №7
  3. Состояние кнопки – Bootstrap 3
  4. Тег div в HTML. Основы HTML для начинающих. Урок №17
  5. Бегущая строка на HTML. Основы HTML для начинающих. Урок №9

Последние записи рубрики:

  1. Состояние кнопки – Bootstrap 3

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?