From 0c817bf5e2ab635777c17e00caed829e6939f34f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 10 Jun 2012 16:46:46 -0700 Subject: [PATCH] redo pagination and breadcrumbs --- docs/assets/css/docs.css | 6 +- docs/components.html | 229 ++++++++++++++--------- docs/templates/pages/components.mustache | 229 ++++++++++++++--------- 3 files changed, 279 insertions(+), 185 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index fc9df07e22..83533ea784 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -743,9 +743,13 @@ form.well { .bs-docs-example .progress, .bs-docs-example .well, .bs-docs-example .alert, -.bs-docs-example .hero-unit { +.bs-docs-example .hero-unit, +.bs-docs-example .pagination { margin-bottom: 5px; } +.bs-docs-example .pagination { + margin-top: 0; +} form.bs-docs-example { padding-bottom: 19px; } diff --git a/docs/components.html b/docs/components.html index 5fae8d4b5a..5ff8244761 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.

- -

{{_i}}Why use them{{/i}}

-

{{_i}}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.{{/i}}

- -

{{_i}}Examples{{/i}}

+

{{_i}}Examples{{/i}}

{{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}

- - - - -

{{_i}}Markup{{/i}}

-

{{_i}}HTML is your standard unordered list with links.{{/i}}

+
+ + + + 
 <ul class="breadcrumb">
-  <li>
-    <a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span>
-  </li>
-  <li>
-    <a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span>
-  </li>
+  <li><a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span></li>
+  <li><a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span></li>
   <li class="active">{{_i}}Data{{/i}}</li>
 </ul>
@@ -1043,85 +1035,119 @@

{{_i}}Pagination{{/i}} {{_i}}Two options for paging through content{{/i}}

-

{{_i}}Multicon-page pagination{{/i}}

- -

{{_i}}When to use{{/i}}

-

{{_i}}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.{{/i}}

-

{{_i}}Stateful page links{{/i}}

-

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

-

{{_i}}Flexible alignment{{/i}}

-

{{_i}}Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}

- -

{{_i}}Examples{{/i}}

-

{{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}

-