SOURCE

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

// 重置样式
a{
  text-decoration: none;
  &:hover{
    text-decoration: underline;
  }
}
ul, ol{
  list-style: none;
  padding-left: 0;
}
// 屏幕阅读器可见
.sr-only{
  display: none;
}
.pagination{
  display: flex;
  border-radius: .25rem;
}

.page-link{
  position: relative;
  display: block;
  padding:.5rem .75rem;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
  // 折叠 border
  margin-left: -1px;
  text-decoration: none;
  &:hover{
    color: darken(#007bff, 15%);
    background-color: #e9ecef;
    text-decoration: none;
  }
  &:not(.disabled):not(:disabled){
    cursor: pointer;
  }
}
/* 写样式的时候，先写普通的，在写 active 的，最后写 disabled */
.page-item{
  &:first-child{
    .page-link{
      // 第一个 border 不需要重叠
      margin-left: 0;
      // 左边圆角
      border-radius: .25rem 0 0 .25rem ;
    }
  }
  &:last-child{
    .page-link{
      // 右边圆角
      border-radius: 0 .25rem .25rem 0;  
    }
  }
  &.active .page-link{
    color: #fff;
    background-color: #007bff;
  }
  &.disabled .page-link{
    color: #6c757d;
    background-color: #fff;
    pointer-events: none;
    cursor: not-allowed;
  }
}