From 6d916763f82be8c2d4f87842275170c12bea72ec Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 20:54:37 -0800 Subject: adding the pager component after rewriting the pagination docs and css --- docs/components.html | 106 +++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 85 insertions(+), 21 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index f934ac68e..e88bd777c 100644 --- a/docs/components.html +++ b/docs/components.html @@ -847,63 +847,127 @@ ================================================== -->
-

Pagination

+

Pagination Two options for paging through content

+

Multi-page pagination

-
-

Pagination

-

Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.

+
+

When to use

+

Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

+

Stateful page links

+

Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.

+

Flexible alignment

+

Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

-
+
+

Examples

+

The default pagination component is flexible and works in a number of variations.

+ - +
+

Markup

+

Wrapped in a <div>, pagination is just a <ul>.

 <div class="pagination">
   <ul>
-    <li class="prev disabled"><a href="#">&larr; Previous</a></li>
-    <li class="active"><a href="#">1</a></li>
+    <li><a href="#">Prev</a></li>
+    <li class="active">
+      <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 class="next"><a href="#">Next &rarr;</a></li>
+    <li><a href="#">Next</a></li>
   </ul>
 </div>
+

Pager For quick previous and next links

+
+
+

About pager

+

The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

+
+
+

Default example

+

By default, the pager centers links.

+ +
+<ul class="pager">
+  <li>
+    <a href="#">Previous</a>
+  </li>
+  <li>
+    <a href="#">Next</a>
+  </li>
+</ul>
+
+
+
+

Aligned links

+

Alternatively, you can align each link to the sides:

+ +
+<ul class="pager">
+  <li>
+    <a href="#">&larr; Older</a>
+  </li>
+  <li>
+    <a href="#">Newer &rarr;</a>
+  </li>
+</ul>
+
+
+
-- cgit v1.2.3