Нумерация страниц. Компоненты · Bootstrap. Версия v4.0.0

  • Обзор
  • Работа с иконками
  • Неактивные и активные состояния
  • Размеры
  • Выравнивание

Документация и примеры ссылок постраничного разделения для обозначения серии связанного контента на несколько страниц.

Обзор

Мы используем большой блок связанных между собой ссылок для нумерации страниц, который делает ссылки легко заметными и доступными подсчету – и с большой «зоной клика». Нумерация страниц создана списком элементов HTML, так что экранные читалки могут объявлять число доступных страниц. Оборачивайте всё в <nav> для возможности определять эту секцию как секцию навигации для экранных читалок и прочих вспомогательных технологий.

В дополнение – так как страницы с большой вероятностью имеют более одной навигационной секции – рекомендуется описывать назначение <nav> через aria-label

. Например – если компонент нумерации страниц используется для навигации между набором результатов поиска – правильным лейблом был бы aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Работа с иконками

Хотите использовать иконку или символ вместо текста нумерации страниц? Для правильной работы экранной читалки удостоверьтесь, что задали правильные атрибуты

aria и класс .sr-only.

<nav aria-label="Page navigation example">
  <ul>
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span>Previous</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span>Next</span>
      </a>
    </li>
  </ul>
</nav>

Ссылки в нумерации страниц можно настраивать под разные обстоятельства. Используйте класс .disabled для ссылок, которые должны выглядеть некликабельными, и .active — для обозначения текущей страницы.

Хотя в классе .disabled для попытки деактивации ссылочной функциональности элементов

<a> используется pointer-events: none, это свойство СSS еще не стандартизировано и не подходит для навигации с клавиатуры. Поэтому вам следует добавлять tabindex="-1" в деактивированные ссылки и использовать JavaScript для полной деактивации их функциональности.

<nav aria-label="...">
  <ul>
    <li>
      <a href="#" tabindex="-1">Previous</a>
    </li>
    <li><a href="#">1</a></li>
    <li>
      <a href="#">2 <span>(current)</span></a>
    </li>
    <li><a href="#">3</a></li>
    <li>
      <a href="#">Next</a>
    </li>
  </ul>
</nav>

Вы можете по желанию поменять\удалить активные или неактивные ссылки, связанные со <span>, или для удаления функциональности «клика» и предотвращения возможности фокусировки с клавиатуры, но с оставлением всех желаемых стилей, — исключить «якорь» в случае существования стрелок «пред\след».

<nav aria-label="...">
  <ul>
    <li>
      <span>Previous</span>
    </li>
    <li><a href="#">1</a></li>
    <li>
      <span>
        2
        <span>(current)</span>
      </span>
    </li>
    <li><a href="#">3</a></li>
    <li>
      <a href="#">Next</a>
    </li>
  </ul>
</nav>

Размеры

Добавьте классы .pagination-lg или .pagination-sm для создания дополнительных размеров.

<nav aria-label="...">
  <ul>
    <li>
      <a href="#" tabindex="-1">1</a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>
<nav aria-label=". ..">
  <ul>
    <li>
      <a href="#" tabindex="-1">1</a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

Выравнивание

Изменяйте выравнивание элементов нумерации классами флексбокса.

<nav aria-label="Page navigation example">
  <ul>
    <li>
      <a href="#" tabindex="-1">Previous</a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
      <a href="#">Next</a>
    </li>
  </ul>
</nav>
<nav aria-label="Page navigation example">
  <ul>
    <li>
      <a href="#" tabindex="-1">Previous</a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
      <a href="#">Next</a>
    </li>
  </ul>
</nav>
Please enable JavaScript to view the comments powered by Disqus.

Нумерация страниц : Пагинация : Pagination : UIkit 2

Нумерация страниц. Создавайте красивую нумерацию страниц для навигации по страницам с указанием номеров текущей и соседней.

  • Использование
  • Модификаторы выравнивания
  • Предыдущая и следующая
  • Нумерация страниц с иконами
  • JavaScript

Использование

Компонент Pagination состоит из стилизованных ссылок в стиле кнопок, которые расположены рядом друг с другом.

КлассОписание
.uk-paginationДобавьте этот класс к элементу <ul>, чтобы определить компонент Pagination.
Используйте тег <a> для нумерации страниц в списке.
. uk-activeДобавьте этот класс к элементу списка, чтобы применить активное состояние.
Используйте тег <span> вместо элемента <a>.
.uk-disabledДобавьте этот класс к элементу списка, чтобы применить отключенное состояние.
Используйте тег <span> вместо элемента <a>
.

Примечание Чтобы применить многоточие без какого-либо стиля, используйте элемент <span> вместо тега <a>.

Пример (Пагинация)
Разметка
<ul>
    <li>    <!-- Иконка назад, отключенное состояние -->
        <span><i></i></span>
    </li>
    <li><a href="">.1.</a></li>
    <li><a href="">.2.</a></li>
    <li><span>.3.</span></li>
    <li><span>. ..</span></li>    <!-- Отключенное состояние -->
    <li><span>...</span></li>    <!-- Многоточие, отключенное состояние -->
    <li>    <!-- Иконка -->
        <a href="#"><i></i></a>
    </li>
</ul>

Модификаторы выравнивания

Добавьте класс .uk-pagination-left или .uk-pagination-right к нумерации страниц, чтобы выровнять его влево или вправо.

Пример (Пагинация по левому краю)
Разметка
<ul>
    <li>...</li>
</ul>
Пример (Пагинация по правому краю)
Разметка
<ul>
    <li>...</li>
</ul>

Предыдущая и следующая

Создать нумерацию страниц с указателем на предыдущую или следующую страницу довольно просто. Добавьте класс .uk-pagination-previous или .uk-pagination-next к элементу <li>, чтобы выровнять предыдущую и следующую кнопки влево или вправо.

Пример
Разметка
<li>
    <a href="">Предыдущая</a>
</li>
<li>
    <a href="">Следующая</a>
</li>

Усовершенствуйте свою нумерацию страниц с помощью компонента Icon, добавив один из классов .uk-icon-* к элементу <i> или <span> в ссылке на нумерацию страниц.

Пример
Разметка
<!-- Рабочая ссылка -->
<li>
    <a href=""><i></i></a>
</li>
<!-- Активное состояние -->
<li>
    <span><i></i></span>
</li>
<!-- Отключенное состояние -->
<li>
    <span><i></i></span>
</li>
<!-- Многоточие, отключенное состояние -->
<li>
    <span>...</span>
</li>
<!-- Рабочая ссылка -->
<li>
    <a href=""><i></i></a>
</li>

JavaScript

Вы можете применить дополнительный компонент Dynamic Pagination для автоматического расчета страниц, например, чтобы инициировать событие для динамической загрузки новых элементов в представлении списка с поддержкой Ajax.

Как сделать пагинацию с помощью HTML и CSS?

< html >

 

< голова >

     < заголовок >

         Как сделать разбиение на страницы

         с помощью HTML и CSS?

     название >

 

     9000 7 < стиль >

 

         /* стиль заголовка */

         h2 {

             цвет: зеленый;

         }

 

         /* стиль позиции пагинации */

         . pagination_section {

             позиция: относительная;

         }

 

         /* стиль пагинации */

         .pagination_section a { ​​

             цвет: черный;

             заполнение: 10px 18px;

             украшение текста: нет;

         }

 

         /* эффект наведения на страницы для неактивных */ 9 0008

         .pagination_section a:hover:not(.active) {

             цвет фона: #031F3B;

             цвет: белый;

         }

 

         /* эффект наведения курсора на страницу*/ 9000 8

 

         a:nth-child(5) {

             background-color : зеленый;

             цвет: белый;

         }

 

         a:nth-child(1) {

             вес шрифта: полужирный;

         }

 

         a:nth-child(7) { 9000 8

             вес шрифта: полужирный;

         }

 

         . content {

             поле: 50 пикселей;

             отступ: 15 пикселей;

             ширина: 700 пикселей;

             высота: 200 пикселей;

             граница: 2 пикселя сплошного черного цвета;

         }

     стиль >

головка >

 

< корпус >

     < центр >

         9 0008  

        

         < h2 >GeeksforGeeks 90 007 h2 >

 

          

< p >Портал информатики для гиков p >

 

 

        

         < 90 008 div класс = "содержание" >

             < 9 0007 h4 >Впечатления от интервью : h4 >

 

             < артикул > 9 0008

                 Поделитесь своими вопросами/опытом или поделитесь

                 ваш «Опыт интервью», пожалуйста, напишите 9000 8

                ваш опыт собеседования по телефону

                review-team@geeksforgeeks. org. Кроме того, по номеру

                 поделитесь вопросами для интервью, добавьте

                 вопросов в Задайте вопрос! Вы

                 также можете найти интервью для конкретной компании

                Вопросы в нашей ПРАКТИКЕ портал!

             артикул >

         дел >

 

        

         < раздел класс = "pagination_section" >

9000 7              < a href = "#" ><< Предыдущий

             < a href = "#" название = "Алгоритм" >1 a >

             < a href 9000 8 = "#" заголовок = "Структура данных" >2 a >

             < a href = "#" title = "Языки" >3 a >

             < a href = "#" название = "Интервью" класс = "активный" >4 a >

             < a href 900 07 = "#" название = "практика" >5 a >

             < a href 9000 8 = "#" >Далее >> a >

         дел. 007 центр >

корпус >

 

html >

Пагинация - CSS: Cas Таблицы стилей cading

Этот шаблон поваренной книги демонстрирует шаблон навигации, используемый для отображения нумерации страниц, где пользователь может перемещаться между страницы контента, такие как результаты поиска.

Шаблон разбивки на страницы обычно отображает элементы в строке. Чтобы разбивка на страницы была понятна людям, использующим программу чтения с экрана, мы помечаем элементы как список внутри