aboutsummaryrefslogtreecommitdiff
path: root/docs/components
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2016-01-06 14:47:33 -0800
committerMark Otto <[email protected]>2016-01-06 14:47:33 -0800
commitd5b2dea1a5b9d71a22a5948aff03f546181363f4 (patch)
tree857e2e687c515453e929690c02106424962a979c /docs/components
parentd46c7ef5651801bade1c4cb274db5dc55f6dbb21 (diff)
downloadbootstrap-d5b2dea1a5b9d71a22a5948aff03f546181363f4.tar.xz
bootstrap-d5b2dea1a5b9d71a22a5948aff03f546181363f4.zip
Rip out the 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 %}