diff options
| author | Mark Otto <[email protected]> | 2014-09-17 15:21:31 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-09-17 15:21:31 -0700 |
| commit | 9f2aeafe851bdca522b886c29afcece1ee0060e1 (patch) | |
| tree | be13d5ce0d68631543f28af8d9b444a7bd44917e /docs/components/pagination.md | |
| parent | 7d9f55c3d5dcc5b12882af96245dab27be5fa346 (diff) | |
| parent | c5c67d0f54674dede58fc924d4d7c0f1d65705d9 (diff) | |
| download | bootstrap-9f2aeafe851bdca522b886c29afcece1ee0060e1.tar.xz bootstrap-9f2aeafe851bdca522b886c29afcece1ee0060e1.zip | |
Merge branch 'master' into derp
Conflicts:
Gruntfile.js
dist/css/bootstrap-theme.css.map
dist/css/bootstrap.css
dist/css/bootstrap.css.map
dist/css/bootstrap.min.css
dist/fonts/glyphicons-halflings-regular.svg
docs/_includes/components/badges.html
docs/_includes/components/input-groups.html
docs/_includes/components/pagination.html
docs/_includes/css/forms.html
docs/_includes/footer.html
docs/_includes/getting-started/browser-device-support.html
docs/_includes/getting-started/grunt.html
docs/_includes/home-nav.html
docs/_includes/js/alerts.html
docs/_includes/js/buttons.html
docs/_includes/js/carousel.html
docs/_includes/js/collapse.html
docs/_includes/js/modal.html
docs/_includes/js/popovers.html
docs/_includes/js/tooltips.html
docs/_includes/nav/getting-started.html
docs/_includes/nav/javascript.html
docs/assets/css/docs.min.css
docs/assets/css/src/docs.css
docs/assets/js/customize.min.js
docs/assets/js/raw-files.min.js
docs/browser-bugs.html
docs/dist/css/bootstrap-theme.css.map
docs/dist/css/bootstrap.css
docs/dist/css/bootstrap.css.map
docs/dist/css/bootstrap.min.css
docs/dist/fonts/glyphicons-halflings-regular.svg
fonts/glyphicons-halflings-regular.svg
less/_button-group.less
less/_jumbotron.less
less/_variables.less
less/mixins/vendor-prefixes.less
less/panels.less
less/thumbnails.less
package.json
Diffstat (limited to 'docs/components/pagination.md')
| -rw-r--r-- | docs/components/pagination.md | 114 |
1 files changed, 65 insertions, 49 deletions
diff --git a/docs/components/pagination.md b/docs/components/pagination.md index 115e19cd5..7b6aaa5c5 100644 --- a/docs/components/pagination.md +++ b/docs/components/pagination.md @@ -10,15 +10,17 @@ Provide pagination links for your site or app with the multi-page pagination com 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. {% example html %} -<ul class="pagination"> - <li><a href="#">«</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><a href="#">»</a></li> -</ul> +<nav> + <ul class="pagination"> + <li><a href="#">«</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><a href="#">»</a></li> + </ul> +</nav> {% endexample %} ### Disabled and active states @@ -26,25 +28,29 @@ Simple pagination inspired by Rdio, great for apps and search results. The large Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page. {% example html %} -<ul class="pagination"> - <li class="disabled"><a href="#">«</a></li> - <li class="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><a href="#">»</a></li> -</ul> +<nav> + <ul class="pagination"> + <li class="disabled"><a href="#">«</a></li> + <li class="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><a href="#">»</a></li> + </ul> +</nav> {% endexample %} You can optionally swap out active or disabled anchors for `<span>` to remove click functionality while retaining intended styles. {% highlight html %} -<ul class="pagination"> - <li class="disabled"><span>«</span></li> - <li class="active"><span>1 <span class="sr-only">(current)</span></span></li> - ... -</ul> +<nav> + <ul class="pagination"> + <li class="disabled"><span>«</span></li> + <li class="active"><span>1 <span class="sr-only">(current)</span></span></li> + ... + </ul> +</nav> {% endhighlight %} @@ -53,23 +59,27 @@ You can optionally swap out active or disabled anchors for `<span>` to remove cl Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes. {% example html %} -<ul class="pagination pagination-lg"> - <li><a href="#">«</a></li> - <li><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">»</a></li> -</ul> +<nav> + <ul class="pagination pagination-lg"> + <li><a href="#">«</a></li> + <li><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">»</a></li> + </ul> +</nav> {% endexample %} {% example html %} -<ul class="pagination pagination-sm"> - <li><a href="#">«</a></li> - <li><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">»</a></li> -</ul> +<nav> + <ul class="pagination pagination-sm"> + <li><a href="#">«</a></li> + <li><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">»</a></li> + </ul> +</nav> {% endexample %} ## Pager @@ -81,10 +91,12 @@ Quick previous and next links for simple pagination implementations with light m By default, the pager centers links. {% example html %} -<ul class="pager"> - <li><a href="#">Previous</a></li> - <li><a href="#">Next</a></li> -</ul> +<nav> + <ul class="pager"> + <li><a href="#">Previous</a></li> + <li><a href="#">Next</a></li> + </ul> +</nav> {% endexample %} ### Aligned links @@ -92,10 +104,12 @@ By default, the pager centers links. Alternatively, you can align each link to the sides: {% example html %} -<ul class="pager"> - <li class="previous"><a href="#">← Older</a></li> - <li class="next"><a href="#">Newer →</a></li> -</ul> +<nav> + <ul class="pager"> + <li class="previous"><a href="#">← Older</a></li> + <li class="next"><a href="#">Newer →</a></li> + </ul> +</nav> {% endexample %} @@ -104,8 +118,10 @@ Alternatively, you can align each link to the sides: Pager links also use the `.disabled` class. {% highlight html %} -<ul class="pager"> - <li class="previous disabled"><a href="#">← Older</a></li> - <li class="next"><a href="#">Newer →</a></li> -</ul> +<nav> + <ul class="pager"> + <li class="previous disabled"><a href="#">← Older</a></li> + <li class="next"><a href="#">Newer →</a></li> + </ul> +</nav> {% endhighlight %} |
