• Гость
For-Web
  • Главная
  • Вебмастеру
    • Блог
    • SQL
    • PHP
    • JavaScript
    • CSS
    • HTML
    • Литература
  • Скрипты, Soft, APP
    • Bitcoin
    • Соц сети
    • Реклама, Буксы
    • Интернет магагзин
    • Браузерные игры
    • Скрипты хостинга
    • Мобильные приложения
    • Программы
  • Data Life Eingine
    • Модули
    • Хаки
    • DLE шаблоны
  • Bootstrap
    • Шаблоны
    • Плагины
    • Сниппеты
    • Пособие Bootstrap
  • Дизайн и Графика
    • PSD макеты
    • Mocups Free
    • Иконки, Кнопки
    • Шрифты,Текст
    • Текстуры, Фон
    • Анимация
    • Формы
    • Палитра
    • Галерея
    • Раскладка
    • Модальное окно
    • Элементы загрузки
    • Меню и навигация
    • Таблицы
    • Украшения для сайта
    • Фотошоп
  • Шаблоны сайтов
    • WAP шаблоны
    • HTML 5 шаблоны
    • Админка
    • Автомобили
    • Аниме
    • Блоги
    • Бизнес и Финансы
    • Игровые
    • Женские
    • Заглушки
    • Кинопорталы
    • Кулинарные
    • Лендинг
    • Мобильные
    • Музыкальные
    • Новостные
    • ПО, IT
    • Портфолио
    • Природа
    • Строительство
    • Спорт
    • Хостинг
    • Адалт
    • Страницы 404
  • Инфо
    • О проекте
    • Обратная связь
    • Уроки
    • Статистика
    • Privacy Policy
главная » Учебник Bootstrap » Руководство Bootstrap Pagination

Руководство 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>

Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию. Это займёт не более минуты. Не волнуйтесь, мы не спамим!

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

Вы находитесь на странице скачивания файла. Все скрипты храняться на яндекс диске. Кнопки скачивания файла  находятся внизу страницы. Если нет кнопки  , то значит нет файла. Нет файла - просьба сообщить администратору  любым удобным способом. Спасибо большое за понимание!

Реклама - на страницах сайта, а также на странице загрузки файлов - это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламе, если конечно она вас не заинтересовала.

Да и самое важное, все материалы носят ознакомительный характер, все файлы взяты из открытых источников, соответственно Вы их используете на свой страх и риск. За риски связанные с утечкой данных, хищение средств и прочее при использовании скриптов администрация сайта ответственность не несёт!



  • Комментарии
  • О статье
  • Похожие новости
У данной публикации нет комментариев.

admin

Автор

7-04-2020, 20:28

Дата

Учебник Bootstrap

Категория
  • Комментариев: 0
  • Просмотров: 783
Учебник Bootstrap
Руководство Bootstrap NavBar
Учебник Bootstrap
Bootstrap Nav, Tab, Pill
Учебник Bootstrap
Руководство Bootstrap Form
Учебник Bootstrap
Руководство Bootstrap Card
Украшения для сайта
Новогодние украшения от яндекса
Учебник Bootstrap
Руководство Bootstrap Carousel
Информация

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

Комментарии
Дмитрий Николаев, Уже нет , этот я продал , не хотел , но устал . Так как админ хороший (она) не стала удалять права на
28 декабря 2022 20:07

nika

Дмитрий Николаев, Не за что , с наступающим Вас
28 декабря 2022 20:01

nika

как установить и зайти в админку. Нет файла install.php
26 декабря 2022 23:09

povar

nika, У вас два сайта?
24 декабря 2022 15:24

Дмитрий Николаев

nika,Спасибо! Вроде работает. 
24 декабря 2022 12:31

Дмитрий Николаев

Оцените работу движка

  • For-WEb.Ru 2018 - 2022  

Авторизация


Регистрация Забыл пароль