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

.page => .page-item

Browse Source
This commit is contained in:
Chris Rebert
2015-12-07 22:24:50 -08:00
parent 0c1df9912f
commit e7edf10473
3 changed files with 28 additions and 28 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 class="page"> <li class="page-item">
<a class="page-link" href="#" aria-label="Previous"> <a class="page-link" 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="page"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page"> <li class="page-item">
<a class="page-link" href="#" aria-label="Next"> <a class="page-link" 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="page disabled"> <li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous"> <a class="page-link" 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="page active"> <li class="page-item active">
<a class="page-link" href="#">1 <span class="sr-only">(current)</span></a> <a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
</li> </li>
<li class="page"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page"> <li class="page-item">
<a class="page-link" href="#" aria-label="Next"> <a class="page-link" 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="page disabled"> <li class="page-item disabled">
<span class="page-link" aria-label="Previous"> <span class="page-link" 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="page active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li> <li class="page-item active"><span class="page-link">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 class="page"> <li class="page-item">
<a class="page-link" href="#" aria-label="Previous"> <a class="page-link" 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="page"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page"> <li class="page-item">
<a class="page-link" href="#" aria-label="Next"> <a class="page-link" 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 class="page"> <li class="page-item">
<a class="page-link" href="#" aria-label="Previous"> <a class="page-link" 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="page"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page"> <li class="page-item">
<a class="page-link" href="#" aria-label="Next"> <a class="page-link" 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>

2
scss/_pagination.scss
View File

@@ -6,7 +6,7 @@
@include border-radius(); @include border-radius();
} }
.page { .page-item {
display: inline; // Remove list-style and block-level defaults display: inline; // Remove list-style and block-level defaults
&:first-child { &:first-child {

2
scss/mixins/_pagination.scss
View File

@@ -7,7 +7,7 @@
line-height: $line-height; line-height: $line-height;
} }
.page { .page-item {
&:first-child { &:first-child {
.page-link { .page-link {
@include border-left-radius($border-radius); @include border-left-radius($border-radius);