rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity
55c660102e
Bootstrap/docs/components/pagination.md
Mark Otto 55c660102e move pagination
2014-07-12 02:13:29 -07:00

5.0 KiB
Raw Blame History

Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

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.

{% highlight html %} {% endhighlight %}

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

{% highlight html %} {% endhighlight %}

You can optionally swap out active or disabled anchors for <span> to remove click functionality while retaining intended styles.

{% highlight html %}
  • «
  • 1 (current)
    • ...
{% endhighlight %}

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

{% highlight html %}
    ...
    ...
    ...
{% endhighlight %}

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.

{% highlight html %} {% endhighlight %}

Aligned links

Alternatively, you can align each link to the sides:

{% highlight html %} {% endhighlight %}

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

{% highlight html %} {% endhighlight %}