diff options
| author | Mark Otto <[email protected]> | 2016-12-28 14:43:49 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-28 15:13:43 -0800 |
| commit | 5ec35d800d4c2b7e8f85e3397916f0c806e37e88 (patch) | |
| tree | 6c13a44aa7fc1a2324245ce322d723941c2810e5 /docs | |
| parent | 2b6276f6856c5d1198e951ac75407d2919784a61 (diff) | |
| download | bootstrap-5ec35d800d4c2b7e8f85e3397916f0c806e37e88.tar.xz bootstrap-5ec35d800d4c2b7e8f85e3397916f0c806e37e88.zip | |
add a working with icons example
frees us up to not have to encourage so much markup throughout these pagination examples
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/pagination.md | 8 |
1 files changed, 5 insertions, 3 deletions
diff --git a/docs/components/pagination.md b/docs/components/pagination.md index e23c25720..62536e165 100644 --- a/docs/components/pagination.md +++ b/docs/components/pagination.md @@ -30,8 +30,12 @@ In addition, as pages likely have more than one such navigation section, it's ad </nav> {% 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 %} -<nav aria-label="Page navigation"> +<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <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="#">2</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"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> |