diff options
| author | Mark Otto <[email protected]> | 2016-01-06 14:57:51 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-01-06 14:57:51 -0800 |
| commit | 095dd9ffb068ade2cf636951553430b969b34196 (patch) | |
| tree | 3e5c077c4deff913c6f5657725613cc519f0c87a /docs/components | |
| parent | c06cb8e3205776c0830cd4c7b541012f14f9461b (diff) | |
| parent | 20261385eacd6e86a362a08d56b4b4241ef248df (diff) | |
| download | bootstrap-095dd9ffb068ade2cf636951553430b969b34196.tar.xz bootstrap-095dd9ffb068ade2cf636951553430b969b34196.zip | |
Merge pull request #18782 from twbs/v4-rip-pager
v4: Drop pager component
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/pagination.md | 51 |
1 files changed, 3 insertions, 48 deletions
diff --git a/docs/components/pagination.md b/docs/components/pagination.md index 1ec25b789..9804da83f 100644 --- a/docs/components/pagination.md +++ b/docs/components/pagination.md @@ -11,7 +11,7 @@ Provide pagination links for your site or app with the multi-page pagination com * Will be replaced with the ToC, excluding the "Contents" header {:toc} -## Default pagination +## Overview 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. @@ -39,7 +39,7 @@ Simple pagination inspired by Rdio, great for apps and search results. The large </nav> {% endexample %} -### Disabled and active states +## Disabled and active states Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page. @@ -49,7 +49,6 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality. {% endcallout %} - {% example html %} <nav> <ul class="pagination"> @@ -93,7 +92,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the {% endexample %} -### Sizing +## Sizing Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes. @@ -140,47 +139,3 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for </ul> </nav> {% endexample %} - -## Pager - -Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines. - -### Default example - -By default, the pager centers links. - -{% example html %} -<nav> - <ul class="pager"> - <li><a href="#">Previous</a></li> - <li><a href="#">Next</a></li> - </ul> -</nav> -{% endexample %} - -### Aligned links - -Alternatively, you can align each link to the sides: - -{% example html %} -<nav> - <ul class="pager"> - <li class="pager-prev"><a href="#">Older</a></li> - <li class="pager-next"><a href="#">Newer</a></li> - </ul> -</nav> -{% endexample %} - - -### Optional disabled state - -Pager links also support the `.disabled` class (though note that the same advice about keyboard focus as for the default pagination applies here as well). - -{% example html %} -<nav> - <ul class="pager"> - <li class="pager-prev disabled"><a href="#" tabindex="-1">Older</a></li> - <li class="pager-next"><a href="#">Newer</a></li> - </ul> -</nav> -{% endexample %} |
