Question

如何创建类似于图像中的页面指示器？我不知道从哪里开始。该页面只能包含5个元素，所有其他元素都必须转到以下页面。

Answer 1

您要查找的内容称为分页，有时甚至称为分页，有很多方法可以实现它。由于您在标题中提到了引导程序，因此这里是其主题相关文档的链接：https://getbootstrap.com/docs/4.0/components/pagination/

Answer 2

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

</head>

<body>
<div class="container">
 
<nav aria-label="Demo of active current page number">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Prev</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 active"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">6</a></li>
    <li class="page-item"><a class="page-link" href="#">7</a></li>                
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>
</div>
</body>
</html>

使用html，css和bootstrap创建页面指示器

2 个答案: