mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-08 01:47:24 +01:00
9f2aeafe85
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
128 lines
3.1 KiB
Markdown
128 lines
3.1 KiB
Markdown
---
|
|
layout: page
|
|
title: Pagination
|
|
---
|
|
|
|
Provide pagination links for your site or app with the multi-page pagination component, or the simpler [pager alternative](#pagination-pager).
|
|
|
|
## Default pagination
|
|
|
|
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 %}
|
|
<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
|
|
|
|
Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
|
|
|
|
{% example html %}
|
|
<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 %}
|
|
<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 %}
|
|
|
|
|
|
### Sizing
|
|
|
|
Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
|
|
|
|
{% example html %}
|
|
<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 %}
|
|
<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
|
|
|
|
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="previous"><a href="#">← Older</a></li>
|
|
<li class="next"><a href="#">Newer →</a></li>
|
|
</ul>
|
|
</nav>
|
|
{% endexample %}
|
|
|
|
|
|
### Optional disabled state
|
|
|
|
Pager links also use the `.disabled` class.
|
|
|
|
{% highlight html %}
|
|
<nav>
|
|
<ul class="pager">
|
|
<li class="previous disabled"><a href="#">← Older</a></li>
|
|
<li class="next"><a href="#">Newer →</a></li>
|
|
</ul>
|
|
</nav>
|
|
{% endhighlight %}
|