Twitter Bootstrap учебник по разбиению на страницы

Последнее обновление 28 мая 2019 06:50:26 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Вступление

В этом уроке вы увидите, как создать пагинацию с помощью Twitter Bootstrap.

Многостраничная нумерация страниц

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

CSS-класс "pagination" файла bootstrap.css, который находится в строке от 2756 до 1814, содержит стили для создания этого вида нумерации страниц.

Еще два CSS-класса «отключен» и «активен» могут быть использованы, чтобы сделать ссылку внутри пагинации кликабельной и неотключаемой. Строки с 2793 по 2797 содержат стили для класса «отключен» для нумерации страниц вместе с некоторыми другими классами. Строки с 2786 по 2792 имеют стили для «активного» класса для нумерации страниц.

Чтобы установить выравнивание ссылок на страницы, используются CSS-классы «pagination-centrated» и «pagination-right». Они расположены от строки 2809 до 2814 файла bootstrap.css (версия 2.0.1).

Пример многостраничной нумерации страниц

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Multicon-page pagination example</title> 
<meta name="description" content="Twitter Bootstrap Multicon-page pagination example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
 <li class="active">
 <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="#">Next</a></li>
</ul>
</div>
</body>
</html>

Помогите нам предоставить вам лучший контент.

Обратите внимание, что дополнительный стиль для добавления полей к элементу body применяется только в демонстрационных целях.

Посмотреть пример в прямом эфире .

Пейджер

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

CSS-класс «пейджер» находится в строке с 2815 по 2850 файла bootstrap.css (версия 2.0.1). Вы можете применить «отключенный» класс CSS, чтобы сделать ссылку и здесь неактивной.

Пример пейджера со следующим и предыдущим

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap pager with next and previous example</title> 
<meta name="description" content="Twitter Bootstrap pager with next and previous example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class="pager">
<li>
<a href="#">Previous</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>
</body>
</html>

Посмотреть пример в прямом эфире .

Пример пейджера со старым и новым

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap pager with older and newer example</title> 
<meta name="description" content="Twitter Bootstrap pager with older and newer example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class="pager">
  <li class="previous">
    <a href="#">← Older</a>
  </li>
  <li class="next">
    <a href="#">Newer →</a>
  </li>
</ul>
</body>
</html>

Посмотреть пример в прямом эфире .

Вы можете скачать все файлы HTML, CSS, JS и изображения, используемые в наших руководствах, здесь.

Предыдущая: Твиттер Учебник по начальной загрузке
Далее: учебник по оповещениям и ошибкам Twitter Bootstrap