mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-15 18:14:17 +02:00
Code Issues Releases Wiki Activity

.pagination>{li => .page}

Browse Source
This commit is contained in:
Chris Rebert
2015-10-29 21:51:31 -07:00
parent 7eadfbc9b2
commit a878c4f0c6
3 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docs/components/pagination.md
View File

@@ -18,18 +18,18 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
{% example html %} {% example html %}
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li> <li class="page">
<a href="#" aria-label="Previous"> <a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li><a href="#">1</a></li> <li class="page"><a href="#">1</a></li>
<li><a href="#">2</a></li> <li class="page"><a href="#">2</a></li>
<li><a href="#">3</a></li> <li class="page"><a href="#">3</a></li>
<li><a href="#">4</a></li> <li class="page"><a href="#">4</a></li>
<li><a href="#">5</a></li> <li class="page"><a href="#">5</a></li>
<li> <li class="page">
<a href="#" aria-label="Next"> <a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
@@ -46,20 +46,20 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
{% example html %} {% example html %}
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="disabled"> <li class="page disabled">
<a href="#" aria-label="Previous"> <a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li class="active"> <li class="page active">
<a href="#">1 <span class="sr-only">(current)</span></a> <a href="#">1 <span class="sr-only">(current)</span></a>
</li> </li>
<li><a href="#">2</a></li> <li class="page"><a href="#">2</a></li>
<li><a href="#">3</a></li> <li class="page"><a href="#">3</a></li>
<li><a href="#">4</a></li> <li class="page"><a href="#">4</a></li>
<li><a href="#">5</a></li> <li class="page"><a href="#">5</a></li>
<li> <li class="page">
<a href="#" aria-label="Next"> <a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</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 %} {% example html %}
<nav> <nav>
<ul class="pagination"> <ul class="pagination">
<li class="disabled"> <li class="page disabled">
<span aria-label="Previous"> <span aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</span> </span>
</li> </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> </ul>
</nav> </nav>
{% endexample %} {% endexample %}
@@ -93,16 +93,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
{% example html %} {% example html %}
<nav> <nav>
<ul class="pagination pagination-lg"> <ul class="pagination pagination-lg">
<li> <li class="page">
<a href="#" aria-label="Previous"> <a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li><a href="#">1</a></li> <li class="page"><a href="#">1</a></li>
<li><a href="#">2</a></li> <li class="page"><a href="#">2</a></li>
<li><a href="#">3</a></li> <li class="page"><a href="#">3</a></li>
<li> <li class="page">
<a href="#" aria-label="Next"> <a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</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 %} {% example html %}
<nav> <nav>
<ul class="pagination pagination-sm"> <ul class="pagination pagination-sm">
<li> <li class="page">
<a href="#" aria-label="Previous"> <a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li><a href="#">1</a></li> <li class="page"><a href="#">1</a></li>
<li><a href="#">2</a></li> <li class="page"><a href="#">2</a></li>
<li><a href="#">3</a></li> <li class="page"><a href="#">3</a></li>
<li> <li class="page">
<a href="#" aria-label="Next"> <a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>

12
scss/_pagination.scss
View File

@@ -5,7 +5,7 @@
margin-bottom: $spacer-y; margin-bottom: $spacer-y;
@include border-radius(); @include border-radius();
> li { .page {
display: inline; // Remove list-style and block-level defaults display: inline; // Remove list-style and block-level defaults
> a, > a,
@@ -35,8 +35,8 @@
} }
} }
> li > a, .page > a,
> li > span { .page > span {
@include hover-focus { @include hover-focus {
color: $pagination-hover-color; color: $pagination-hover-color;
background-color: $pagination-hover-bg; background-color: $pagination-hover-bg;
@@ -44,8 +44,8 @@
} }
} }
> .active > a, .page.active > a,
> .active > span { .page.active > span {
@include plain-hover-focus { @include plain-hover-focus {
z-index: 2; z-index: 2;
color: $pagination-active-color; color: $pagination-active-color;
@@ -55,7 +55,7 @@
} }
} }
> .disabled { .page.disabled {
> span, > span,
> a { > a {
@include plain-hover-focus { @include plain-hover-focus {

2
scss/mixins/_pagination.scss
View File

@@ -1,7 +1,7 @@
// Pagination // Pagination
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
> li { .page {
> a, > a,
> span { > span {
padding: $padding-vertical $padding-horizontal; padding: $padding-vertical $padding-horizontal;