diff --git a/docs/components/pagination.md b/docs/components/pagination.md index 8b97b1a738..115e19cd5b 100644 --- a/docs/components/pagination.md +++ b/docs/components/pagination.md @@ -3,25 +3,13 @@ layout: page title: 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 %} +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 %} -{% endhighlight %} +{% endexample %} -Links are customizable for different circumstances. Use .disabled
for unclickable links and .active
to indicate the current page.
You can optionally swap out active or disabled anchors for <span>
to remove click functionality while retaining intended styles.
Fancy larger or smaller pagination? Add .pagination-lg
or .pagination-sm
for additional sizes.
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
+{% example html %} + +{% endexample %} -By default, the pager centers links.
- -{% highlight html %} +{% example html %} + +{% 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 %} -{% endhighlight %} +{% endexample %} -Alternatively, you can align each link to the sides:
- -{% highlight html %} +### Aligned links + +Alternatively, you can align each link to the sides: + +{% example html %} -{% endhighlight %} +{% endexample %} -Pager links also use the general .disabled
utility class from the pagination.