Pagination

  1. صفحه اصلی
  2. صفحات
  3. Pagination

Paginations

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.


<nav>
                            <ul class="pagination">
                            <li>
                            <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                            </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                            <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                            </a>
                            </li>
                            </ul>
</nav>

Disabled and active states


<nav>
                            <ul class="pagination">
                            <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
                            </ul>
</nav>

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.


<nav>
                            <ul class="pagination">
                            <li class="disabled">
                            <span>
                            <span aria-hidden="true">&laquo;</span>
                            </span>
                            </li>
                            <li class="active">
                            <span>1 <span class="sr-only">(current)</span></span>
                            </li>
    ...
                            </ul>
</nav>

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.


<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>

Pager

یک متن دلخواه در این زمینه قرار داده ایم تا شما بفهمید که خاصیت مورد نظر چگونه نمایش داده می شود 


<nav>
                            <ul class="pager">
                            <li><a href="#">Previous</a></li>
                            <li><a href="#">Next</a></li>
                            </ul>
</nav>

Aligned links

Alternatively, you can align each link to the sides:


<nav>
                            <ul class="pager">
                            <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
                            <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
                            </ul>
</nav>

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.


<nav>
                            <ul class="pager">
                            <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
                            <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
                            </ul>
</nav>

Paginations Theme Colored


<nav>
                            <ul class="pagination theme-color-sky">
                            <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
                            </ul>
</nav>

Pager Theme Colored

یک متن دلخواه در این زمینه قرار داده ایم تا شما بفهمید که خاصیت مورد نظر چگونه نمایش داده می شود 


<nav>
                            <ul class="pager theme-color-sky">
                            <li><a href="#">Previous</a></li>
                            <li><a href="#">Next</a></li>
                            </ul>
</nav>

Paginations Dark


<nav>
                            <ul class="pagination dark">
                            <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
                            </ul>
</nav>

Pager Dark

یک متن دلخواه در این زمینه قرار داده ایم تا شما بفهمید که خاصیت مورد نظر چگونه نمایش داده می شود 


<nav>
                            <ul class="pager dark">
                            <li><a href="#">Previous</a></li>
                            <li><a href="#">Next</a></li>
                            </ul>
</nav>