rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Rip out the pager component

Browse Source
This commit is contained in:
Mark Otto 2016-01-06 14:47:33 -08:00
parent d46c7ef565
commit d5b2dea1a5
3 changed files with 3 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
docs/components/pagination.md
View File

@ -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 %}

58
scss/_pager.scss
View File

@ -1,58 +0,0 @@
.pager {
padding-left: 0;
margin-top: $spacer-y;
margin-bottom: $spacer-y;
text-align: center;
list-style: none;
@include clearfix();
li {
display: inline;
> a,
> span {
display: inline-block;
padding: 5px 14px;
background-color: $pager-bg;
border: $pager-border-width solid $pager-border-color;
border-radius: $pager-border-radius;
}
> a {
@include hover-focus {
text-decoration: none;
background-color: $pager-hover-bg;
}
}
}
.disabled {
> a {
@include plain-hover-focus {
color: $pager-disabled-color;
pointer-events: none;
cursor: $cursor-disabled;
background-color: $pager-bg;
}
}
> span {
color: $pager-disabled-color;
cursor: $cursor-disabled;
background-color: $pager-bg;
}
}
}
.pager-next {
> a,
> span {
float: right;
}
}
.pager-prev {
> a,
> span {
float: left;
}
}

1
scss/bootstrap.scss vendored
View File

@ -33,7 +33,6 @@
@import "card";
@import "breadcrumb";
@import "pagination";
@import "pager";
@import "labels";
@import "jumbotron";
@import "alert";