Руководство Bootstrap Pagination

1- Pagination (Пагинация)

Если у вас есть страница с большим количеством данных (или что-то наподобии), оно будет слишком длинное для отображения на единственной странице, поэтому вам нужно разделить данные на разные части. Каждая часть это страница, она отображает только некоторые данные и вам нужно собрать ссылки (Link), чтобы пользователь переходил к следующей странице (Или предыдущей странице). Набор этих ссылок называется компонент Pagination (Компонент Пагинации).Пример Pagination (Компонент Пагинации):

В данной статье мы изучим как создать компонент Pagination (Компонент Пагинации) с помощью Bootstrap.

<h4 class="mb-5">Pagination example:</h4>
 
<nav aria-label="Search results pages">
   <ul class="pagination">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">1</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">3</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">Next</a>
      </li>
   </ul>
</nav>

Это структура Bootstrap Pagination:

На самом деле вы можете создать компонент Bootstrap Pagination без применения элемента <nav>, но рекомендуется этого не делать. Так как <nav> похож на подсказку, что это навигационная зона, и имеет пользу для таких устройств как Screen Reader. Вы можете заменить <nav> с помощью <div role="nav"> чтобы получить индентичное значение.

<nav aria-label="Search results pages">
   ...
</nav>
 
 
<div role="nav" aria-label="Search results pages">
  ...
</div>

Icon

Элементы "Next" или "Previous" можно заменить иконками, но стоит оставить подсказки для Screen Reader используя ".sr-only", данный элемент полностью скрыт для всех устройств за исключением Screen Reader.

<h4 class="mb-5">Pagination example:</h4>
 
<nav aria-label="Page navigation example">
   <ul class="pagination">
      <li class="page-item">
         <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
         </a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">1</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">3</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
         </a>
      </li>
   </ul>
</nav>

2- .disable & .active

Используйте класс .active для Pagination-item чтобы подчеркнуть данный item и акцентировать на то, что данная страница просматривается пользователем (текущая страница). И используя класс .disabled для ссылок (Link), если вы хотите отключить ее, пользователь не сможет нажать на данную ссылку.

<h4 class="mb-5">Pagination (.active & .disabled):</h4>
 
<nav aria-label="Something..">
   <ul class="pagination">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">1</a>
      </li>
      <li class="page-item active">
         <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
         <a class="page-link" href="#">Next</a>
      </li>
   </ul>
</nav>

3- Размер (Sizing)

Если вы хотите, чтобы компонент Pagination немного увеличился, используйте класс .pagination-lg:

<h5 class="mb-2">Pagination (.pagination .pagination-lg):</h5>
 
<nav aria-label="Something">
   <ul class="pagination pagination-lg">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">1</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
   </ul>
</nav>

Или если вы хотите иметь Pagination меньше, используйте класс .pagination-sm:

<h5 class="mb-2">Pagination (.pagination .pagination-sm):</h5>
 
<nav aria-label="Something">
   <ul class="pagination pagination-sm">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">1</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
   </ul>
</nav>

4- Justify (Выравнивание)

Bootstrap Pagination на самом деле является Flex Container, так как он был построен Css property {display: flex}. Поэтому некоторые утилитарные классы Bootstrap Flex могут применяться для Pagination:

justify-content-start
justify-content-center
justify-content-end
justify-content-between
justify-content-around

.pagination .justify-content-center

<h6 class="mb-3">.pagination .justify-content-center</h6>
 
<nav aria-label="Something">
   <ul class="pagination justify-content-center bg-light">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
         <a class="page-link" href="#">Next</a>
      </li>
   </ul>
</nav>

.pagination .justify-content-end

<h6 class="mb-3">.pagination .justify-content-end</h6>
 
<nav aria-label="Something">
   <ul class="pagination justify-content-end bg-light">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
         <a class="page-link" href="#">Next</a>
      </li>
   </ul>
</nav>

У данной публикации нет комментариев.

admin

Автор

7-04-2020, 20:28

Дата пуликации

Учебник Bootstrap

Категория

Комментариев: 0
Просмотров: 56

Учебник Bootstrap

Руководство Bootstrap Form

Учебник Bootstrap

Руководство Bootstrap NavBar

Учебник Bootstrap

Bootstrap Nav, Tab, Pill

Учебник Bootstrap

Система сеток Bootstrap 4

Bootstrap шаблоны

Шаблон начальной загрузки на Bootstrap 4

Украшения для сайта

Новогодние украшения от яндекса

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Перебей баннер

Советы

Семь раз проверь - один спроси!

Лучший букс

Ваша реклама

Купить ссылку здесь за руб.

Поставить к себе на сайт

Комментарии

Pafnuti, В любом похожем шаблоне вытащить код. На счёт 14 версии незнаю , не тестироал

6 мая 2020 06:00

admin

Добрый день .Подскажите как на постере можно настроить отображение категории в нижнем правои углу ?

2. И очень прошу рассказать подробнее . Как можно снять ограничение в DLE v14 Установка видео в новость через гугл диск по html коду. Устанавливаю код. Отправляю новость. Но видео исчезает. В редакторе код уже не отображается (

28 апреля 2020 18:48

Pafnuti

&nbsp;

delete all because this site with some bugs and showing this code but need show just space

22 апреля 2020 17:07

mondolfo

users_search.tpl


<div class="panel panel-info">
&nbsp; <div class="panel-heading"><i class="fa fa-users" aria-hidden="true"></i> Paieška tarp vartotojų</div>
&nbsp; <div class="panel-body">

<div class="users_search">
&nbsp;&nbsp; &nbsp;<form action="" method="get">
<div class="input-group">
&nbsp;&nbsp;&nbsp; <input type="hidden" name="do" value="users" />
&nbsp; <span class="input-group-addon"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
&nbsp; <input type="text" name="login" class="form-control"&nbsp; value="{login}" placeholder="Vartotojo vardas" aria-describedby="sizing-addon2">
</div>
<div class =&nbsp; "row&nbsp; row-flex row-flex-wrap my">
&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp; Kiekis <select name="count" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{count}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>
&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ieškoti pagal
&nbsp; <select name="order" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{order}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>

&nbsp; <div class="clearfix visible-xs-block"></div>

&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Rodyti
&nbsp; <select name="sort" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{sort}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>
&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp; Rodyti tik
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<select name="usergroups" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{usergroups}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>
</div>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>
&nbsp;&nbsp; &nbsp;</form>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
&nbsp;&nbsp;&nbsp; <div class="panel-footer">{numbers} <input type="submit" class="btn btn-sm btn-primary pull-right" value="Paieška" style="margin: -3px -8px 0 0;"></div>
</div>

22 апреля 2020 17:02

mondolfo

Not uploaded users.tpl and users_search.tpl files

here is code:

users.tpl


<div class="panel panel-default">
&nbsp; <div class="panel-heading linka"><a {profile_m} href="{profile}">{usertitle}</a>[online]<span class="label label-success pull-right">Online</span>[/online][offline]<span class="label label-danger pull-right">Offline</span>[/offline]</div>
&nbsp; <div class="panel-body">
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
<div class="row">
&nbsp; <div class="col-md-2">
&nbsp; <center><a {profile_m} href="{profile}"><img class="user_ava" src="{foto}" title="{usertitle}" alt="{usertitle}" style="width: 118px;
&nbsp;&nbsp;&nbsp; height: 118px;
&nbsp;&nbsp;&nbsp; border-radius: 6%;
&nbsp;&nbsp;&nbsp; object-fit: cover;"></a> </center>
&nbsp; </div>
&nbsp; <div class="col-md-7">
&nbsp; <ul class="list-unstyled">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Vardas:</span> <b>[fullname]{fullname}[/fullname][not-fullname]---[/not-fullname]</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Registracijos data:</span> <b>{registration}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Paskutinis apsilankymas:</span> <b>{lastdate}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</ul>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ul class="list-unstyled">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Naujienos:</span> <b>{news-num}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Komentarai:</span> <b>{comm-num}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</ul> &nbsp;
&nbsp; </div>
&nbsp; <div class="col-md-3">
&nbsp; <div class="list-group">
&nbsp; <a href="{profile}" class=" btn btn-default btn-block">Profilis</a>
&nbsp; [pm]<a href="{pm}" class="btn btn-default btn-block">Siųsti pranešimą</a>[/pm]
&nbsp; [email]<a href="{email}" class="btn btn-default btn-block">Rašyti E-mail</a>[/email]
</div>
&nbsp; </div>
</div>
&nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; </div>
</div>

22 апреля 2020 17:01

mondolfo

Какую операционную систему вы используете

Руководство Bootstrap Pagination

1- Pagination (Пагинация)

Icon

2- .disable & .active

3- Размер (Sizing)

4- Justify (Выравнивание)

admin

7-04-2020, 20:28

Учебник Bootstrap

Авторизация