mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
.pagination>{li => .page}
This commit is contained in:
parent
7eadfbc9b2
commit
a878c4f0c6
@ -18,18 +18,18 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li>
|
||||
<li class="page">
|
||||
<a href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li>
|
||||
<li class="page"><a href="#">1</a></li>
|
||||
<li class="page"><a href="#">2</a></li>
|
||||
<li class="page"><a href="#">3</a></li>
|
||||
<li class="page"><a href="#">4</a></li>
|
||||
<li class="page"><a href="#">5</a></li>
|
||||
<li class="page">
|
||||
<a href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
@ -46,20 +46,20 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="disabled">
|
||||
<li class="page disabled">
|
||||
<a href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<li class="page active">
|
||||
<a href="#">1 <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li>
|
||||
<li class="page"><a href="#">2</a></li>
|
||||
<li class="page"><a href="#">3</a></li>
|
||||
<li class="page"><a href="#">4</a></li>
|
||||
<li class="page"><a href="#">5</a></li>
|
||||
<li class="page">
|
||||
<a href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
@ -74,13 +74,13 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="disabled">
|
||||
<li class="page disabled">
|
||||
<span aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
|
||||
<li class="page active"><span>1 <span class="sr-only">(current)</span></span></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
@ -93,16 +93,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination pagination-lg">
|
||||
<li>
|
||||
<li class="page">
|
||||
<a href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li>
|
||||
<li class="page"><a href="#">1</a></li>
|
||||
<li class="page"><a href="#">2</a></li>
|
||||
<li class="page"><a href="#">3</a></li>
|
||||
<li class="page">
|
||||
<a href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
@ -115,16 +115,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm">
|
||||
<li>
|
||||
<li class="page">
|
||||
<a href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li>
|
||||
<li class="page"><a href="#">1</a></li>
|
||||
<li class="page"><a href="#">2</a></li>
|
||||
<li class="page"><a href="#">3</a></li>
|
||||
<li class="page">
|
||||
<a href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
|
@ -5,7 +5,7 @@
|
||||
margin-bottom: $spacer-y;
|
||||
@include border-radius();
|
||||
|
||||
> li {
|
||||
.page {
|
||||
display: inline; // Remove list-style and block-level defaults
|
||||
|
||||
> a,
|
||||
@ -35,8 +35,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
> li > a,
|
||||
> li > span {
|
||||
.page > a,
|
||||
.page > span {
|
||||
@include hover-focus {
|
||||
color: $pagination-hover-color;
|
||||
background-color: $pagination-hover-bg;
|
||||
@ -44,8 +44,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a,
|
||||
> .active > span {
|
||||
.page.active > a,
|
||||
.page.active > span {
|
||||
@include plain-hover-focus {
|
||||
z-index: 2;
|
||||
color: $pagination-active-color;
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
> .disabled {
|
||||
.page.disabled {
|
||||
> span,
|
||||
> a {
|
||||
@include plain-hover-focus {
|
||||
|
@ -1,7 +1,7 @@
|
||||
// Pagination
|
||||
|
||||
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
|
||||
> li {
|
||||
.page {
|
||||
> a,
|
||||
> span {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
Loading…
x
Reference in New Issue
Block a user