mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

add a working with icons example

Browse Source 
frees us up to not have to encourage so much markup throughout these pagination examples
This commit is contained in:
Mark Otto
2016-12-28 14:43:49 -08:00
committed by Mark Otto
parent 2b6276f685
commit 5ec35d800d
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/pagination.md
+5 -3
View File
@@ -30,8 +30,12 @@ In addition, as pages likely have more than one such navigation section, it's ad
</nav> </nav>
{% endexample %} {% endexample %}
## Working with icons
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes and the `.sr-only` utility.
{% example html %} {% example html %}
<nav aria-label="Page navigation"> <nav aria-label="Page navigation example">
<ul class="pagination"> <ul class="pagination">
<li class="page-item"> <li class="page-item">
<a class="page-link" href="#" aria-label="Previous"> <a class="page-link" href="#" aria-label="Previous">
@@ -42,8 +46,6 @@ In addition, as pages likely have more than one such navigation section, it's ad
<li class="page-item"><a class="page-link" href="#">1</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"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><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"> <li class="page-item">
<a class="page-link" href="#" aria-label="Next"> <a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>