From 0c817bf5e2ab635777c17e00caed829e6939f34f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 10 Jun 2012 16:46:46 -0700 Subject: redo pagination and breadcrumbs --- docs/components.html | 229 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 137 insertions(+), 92 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 5fae8d4b5..5ff824476 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1077,34 +1077,26 @@

Breadcrumbs

-

Why use them

-

Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.

- -

Examples

+

Examples

A single example shown as it might be displayed across multiple pages.

- - - - -

Markup

-

HTML is your standard unordered list with links.

+
+ + + + 
 <ul class="breadcrumb">
-  <li>
-    <a href="#">Home</a> <span class="divider">/</span>
-  </li>
-  <li>
-    <a href="#">Library</a> <span class="divider">/</span>
-  </li>
+  <li><a href="#">Home</a> <span class="divider">/</span></li>
+  <li><a href="#">Library</a> <span class="divider">/</span></li>
   <li class="active">Data</li>
 </ul>
@@ -1120,85 +1112,119 @@

Pagination Two options for paging through content

-

Multicon-page pagination

- -

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.

- - - -