aboutsummaryrefslogtreecommitdiff
path: root/docs/components
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2016-01-06 14:57:51 -0800
committerMark Otto <[email protected]>2016-01-06 14:57:51 -0800
commit095dd9ffb068ade2cf636951553430b969b34196 (patch)
tree3e5c077c4deff913c6f5657725613cc519f0c87a /docs/components
parentc06cb8e3205776c0830cd4c7b541012f14f9461b (diff)
parent20261385eacd6e86a362a08d56b4b4241ef248df (diff)
downloadbootstrap-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.md51
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 %}