使用 html、css 和 bootstrap 创建页面指示器答案

【问题标题】：Create a page indicator using html, css and bootstrap使用 html、css 和 bootstrap 创建页面指示器
【发布时间】：2019-12-28 20:22:58
【问题描述】：

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

【问题讨论】：

这称为分页。有很多不同的方法来解决它。但是请先尝试研究它并自己实现一些代码。然后，如果您遇到困难，请返回 StackOverflow。

标签： html css angular8

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：