rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/components/pagination.md
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>