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

Question

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

Answer 1

您要查找的内容称为分页，有时也称为分页，实现它的方法有很多种。由于您在标题中提到了 bootstrap，这里是他们关于该主题的文档的 link：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 创建页面指示器

Create a page indicator using html, css and bootstrap

html

css

angular8