From 55c660102e9c385c00746942f6bf083f415f4cac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jul 2014 02:13:29 -0700 Subject: move pagination --- docs/components/pagination.md | 153 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 docs/components/pagination.md (limited to 'docs/components') diff --git a/docs/components/pagination.md b/docs/components/pagination.md new file mode 100644 index 000000000..09f0bbc95 --- /dev/null +++ b/docs/components/pagination.md @@ -0,0 +1,153 @@ +
+

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 %} + +{% 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 %} +
-- cgit v1.2.3