Skip to main content

分页(Pagination)

默认样式#


<ul class="pagination">
<li class="pagination__item disabled">
<a class="pagination__link" href="#url">
«
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#url">
1
</a>
</li>
<li class="pagination__item pagination__item--active">
<a class="pagination__link" href="#url">
2
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#url">
3
</a>
</li>
<li class="pagination__item">
<span>...</span>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#url">
»
</a>
</li>
</ul>

Small#


<ul class="pagination pagination--sm">
<li class="pagination__item">
<a class="pagination__link" href="#url">
«
</a>
</li>
<li class="pagination__item">
<span>...</span>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#url">
5
</a>
</li>
<li class="pagination__item pagination__item--active">
<a class="pagination__link" href="#url">
6
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#url">
7
</a>
</li>
<li class="pagination__item">
<span>...</span>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#url">
»
</a>
</li>
</ul>

Large#


<ul class="pagination pagination--lg">
<li class="pagination__item">
<a class="pagination__link" href="#url">
«
</a>
</li>
<li class="pagination__item">
<span>...</span>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#url">
7
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#url">
8
</a>
</li>
<li class="pagination__item pagination__item--active">
<a class="pagination__link" href="#url">
9
</a>
</li>
<li class="pagination__item disabled">
<a class="pagination__link" href="#url">
»
</a>
</li>
</ul>