From 0c817bf5e2ab635777c17e00caed829e6939f34f Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
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 @@
<h1>Breadcrumbs <small></small></h1>
</div>
- <h3>Why use them</h3>
- <p>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.</p>
-
- <h3>Examples</h3>
+ <h2>Examples</h2>
<p>A single example shown as it might be displayed across multiple pages.</p>
- <ul class="breadcrumb">
- <li class="active">Home</li>
- </ul>
- <ul class="breadcrumb">
- <li><a href="#">Home</a> <span class="divider">/</span></li>
- <li class="active">Library</li>
- </ul>
- <ul class="breadcrumb">
- <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>
-
- <h3>Markup</h3>
- <p>HTML is your standard unordered list with links.</p>
+ <div class="bs-docs-example">
+ <ul class="breadcrumb">
+ <li class="active">Home</li>
+ </ul>
+ <ul class="breadcrumb">
+ <li><a href="#">Home</a> <span class="divider">/</span></li>
+ <li class="active">Library</li>
+ </ul>
+ <ul class="breadcrumb" style="margin-bottom: 5px;">
+ <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>
+ </div>
<pre class="prettyprint linenums">
<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>
</pre>
@@ -1120,85 +1112,119 @@
<h1>Pagination <small>Two options for paging through content</small></h1>
</div>
- <h2>Multicon-page pagination</h2>
-
- <h3>When to use</h3>
- <p>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.</p>
- <h3>Stateful page links</h3>
- <p>Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.</p>
- <h3>Flexible alignment</h3>
- <p>Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
-
- <h3>Examples</h3>
- <p>The default pagination component is flexible and works in a number of variations.</p>
- <div class="pagination">
- <ul>
- <li class="disabled"><a href="#">«</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="#">»</a></li>
- </ul>
- </div>
- <div class="pagination">
- <ul>
- <li><a href="#">«</a></li>
- <li><a href="#">10</a></li>
- <li class="active"><a href="#">11</a></li>
- <li><a href="#">12</a></li>
- <li><a href="#">»</a></li>
- </ul>
- </div>
- <div class="pagination">
- <ul>
- <li><a href="#">«</a></li>
- <li class="active"><a href="#">10</a></li>
- <li class="disabled"><a href="#">...</a></li>
- <li><a href="#">20</a></li>
- <li><a href="#">»</a></li>
- </ul>
- </div>
- <div class="pagination pagination-centered">
- <ul>
- <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>
- </ul>
+ <h2>Standard pagination</h2>
+ <p>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.</p>
+ <div class="bs-docs-example">
+ <div class="pagination">
+ <ul>
+ <li><a href="#">«</a></li>
+ <li><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><a href="#">»</a></li>
+ </ul>
+ </div>
</div>
-
- <h3>Markup</h3>
- <p>Wrapped in a <code><div></code>, pagination is just a <code><ul></code>.</p>
<pre class="prettyprint linenums">
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
- <li class="active">
- <a href="#">1</a>
- </li>
+ <li><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="#">Next</a></li>
+ <li><a href="#">Next</a></li>
</ul>
</div>
</pre>
- <h2>Pager <small>For quick previous and next links</small></h2>
- <h3>About pager</h3>
- <p>The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
- <h4>Optional disabled state</h4>
- <p>Pager links also use the general <code>.disabled</code> class from the pagination.</p>
+ <hr class="bs-docs-separator">
+
+
+ <h2>Options</h2>
+
+ <h3>Disabled and active states</h3>
+ <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
+ <div class="bs-docs-example">
+ <div class="pagination pagination-centered">
+ <ul>
+ <li class="disabled"><a href="#">«</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><a href="#">»</a></li>
+ </ul>
+ </div>
+ </div>
+<pre class="prettyprint linenums">
+<div class="pagination ">
+ <ul>
+ <li class="disabled"><a href="#">Prev</a></li>
+ <li class="active"><a href="#">1</a></li>
+ ...
+ </ul>
+</div>
+</pre>
+
+ <h3>Alignment</h3>
+ <p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
+ <div class="bs-docs-example">
+ <div class="pagination pagination-centered">
+ <ul>
+ <li><a href="#">«</a></li>
+ <li><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><a href="#">»</a></li>
+ </ul>
+ </div>
+ </div>
+<pre class="prettyprint linenums">
+<div class="pagination pagination-centered">
+ ...
+</div>
+</pre>
+ <div class="bs-docs-example">
+ <div class="pagination pagination-right">
+ <ul>
+ <li><a href="#">«</a></li>
+ <li><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><a href="#">»</a></li>
+ </ul>
+ </div>
+ </div>
+<pre class="prettyprint linenums">
+<div class="pagination pagination-right">
+ ...
+</div>
+</pre>
+
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>Pager</h2>
+ <p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
<h3>Default example</h3>
<p>By default, the pager centers links.</p>
- <ul class="pager">
- <li><a href="#">Previous</a></li>
- <li><a href="#">Next</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="pager">
+ <li><a href="#">Previous</a></li>
+ <li><a href="#">Next</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="pager">
<li>
@@ -1212,10 +1238,12 @@
<h3>Aligned links</h3>
<p>Alternatively, you can align each link to the sides:</p>
- <ul class="pager">
- <li class="previous"><a href="#">← Older</a></li>
- <li class="next"><a href="#">Newer →</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="pager">
+ <li class="previous"><a href="#">← Older</a></li>
+ <li class="next"><a href="#">Newer →</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="pager">
<li class="previous">
@@ -1225,6 +1253,23 @@
<a href="#">Newer &rarr;</a>
</li>
</ul>
+</pre>
+
+ <h3>Optional disabled state</h3>
+ <p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
+ <div class="bs-docs-example">
+ <ul class="pager">
+ <li class="previous disabled"><a href="#">← Older</a></li>
+ <li class="next"><a href="#">Newer →</a></li>
+ </ul>
+ </div>
+<pre class="prettyprint linenums">
+<ul class="pager">
+ <li class="previous disabled">
+ <a href="#">&larr; Older</a>
+ </li>
+ ...
+</ul>
</pre>
</section>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index aa1032c06d..149d816449 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1000,34 +1000,26 @@
<h1>{{_i}}Breadcrumbs{{/i}} <small></small></h1>
</div>
- <h3>{{_i}}Why use them{{/i}}</h3>
- <p>{{_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}}</p>
-
- <h3>{{_i}}Examples{{/i}}</h3>
+ <h2>{{_i}}Examples{{/i}}</h2>
<p>{{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}</p>
- <ul class="breadcrumb">
- <li class="active">{{_i}}Home{{/i}}</li>
- </ul>
- <ul class="breadcrumb">
- <li><a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span></li>
- <li class="active">{{_i}}Library{{/i}}</li>
- </ul>
- <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 class="active">{{_i}}Data{{/i}}</li>
- </ul>
-
- <h3>{{_i}}Markup{{/i}}</h3>
- <p>{{_i}}HTML is your standard unordered list with links.{{/i}}</p>
+ <div class="bs-docs-example">
+ <ul class="breadcrumb">
+ <li class="active">{{_i}}Home{{/i}}</li>
+ </ul>
+ <ul class="breadcrumb">
+ <li><a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span></li>
+ <li class="active">{{_i}}Library{{/i}}</li>
+ </ul>
+ <ul class="breadcrumb" style="margin-bottom: 5px;">
+ <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>
+ </div>
<pre class="prettyprint linenums">
<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>
</pre>
@@ -1043,85 +1035,119 @@
<h1>{{_i}}Pagination{{/i}} <small>{{_i}}Two options for paging through content{{/i}}</small></h1>
</div>
- <h2>{{_i}}Multicon-page pagination{{/i}}</h2>
-
- <h3>{{_i}}When to use{{/i}}</h3>
- <p>{{_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}}</p>
- <h3>{{_i}}Stateful page links{{/i}}</h3>
- <p>{{_i}}Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.{{/i}}</p>
- <h3>{{_i}}Flexible alignment{{/i}}</h3>
- <p>{{_i}}Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p>
-
- <h3>{{_i}}Examples{{/i}}</h3>
- <p>{{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}</p>
- <div class="pagination">
- <ul>
- <li class="disabled"><a href="#">«</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="#">»</a></li>
- </ul>
- </div>
- <div class="pagination">
- <ul>
- <li><a href="#">«</a></li>
- <li><a href="#">10</a></li>
- <li class="active"><a href="#">11</a></li>
- <li><a href="#">12</a></li>
- <li><a href="#">»</a></li>
- </ul>
- </div>
- <div class="pagination">
- <ul>
- <li><a href="#">«</a></li>
- <li class="active"><a href="#">10</a></li>
- <li class="disabled"><a href="#">...</a></li>
- <li><a href="#">20</a></li>
- <li><a href="#">»</a></li>
- </ul>
- </div>
- <div class="pagination pagination-centered">
- <ul>
- <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>
- </ul>
+ <h2>{{_i}}Standard pagination{{/i}}</h2>
+ <p>{{_i}}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.{{/i}}</p>
+ <div class="bs-docs-example">
+ <div class="pagination">
+ <ul>
+ <li><a href="#">«</a></li>
+ <li><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><a href="#">»</a></li>
+ </ul>
+ </div>
</div>
-
- <h3>{{_i}}Markup{{/i}}</h3>
- <p>{{_i}}Wrapped in a <code><div></code>, pagination is just a <code><ul></code>.{{/i}}</p>
<pre class="prettyprint linenums">
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
- <li class="active">
- <a href="#">1</a>
- </li>
+ <li><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="#">Next</a></li>
+ <li><a href="#">Next</a></li>
</ul>
</div>
</pre>
- <h2>{{_i}}Pager{{/i}} <small>{{_i}}For quick previous and next links{{/i}}</small></h2>
- <h3>{{_i}}About pager{{/i}}</h3>
- <p>{{_i}}The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
- <h4>{{_i}}Optional disabled state{{/i}}</h4>
- <p>{{_i}}Pager links also use the general <code>.disabled</code> class from the pagination.{{/i}}</p>
+ <hr class="bs-docs-separator">
+
+
+ <h2>{{_i}}Options{{/i}}</h2>
+
+ <h3>{{_i}}Disabled and active states{{/i}}</h3>
+ <p>{{_i}}Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.{{/i}}</p>
+ <div class="bs-docs-example">
+ <div class="pagination pagination-centered">
+ <ul>
+ <li class="disabled"><a href="#">«</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><a href="#">»</a></li>
+ </ul>
+ </div>
+ </div>
+<pre class="prettyprint linenums">
+<div class="pagination ">
+ <ul>
+ <li class="disabled"><a href="#">Prev</a></li>
+ <li class="active"><a href="#">1</a></li>
+ ...
+ </ul>
+</div>
+</pre>
+
+ <h3>{{_i}}Alignment{{/i}}</h3>
+ <p>{{_i}}Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p>
+ <div class="bs-docs-example">
+ <div class="pagination pagination-centered">
+ <ul>
+ <li><a href="#">«</a></li>
+ <li><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><a href="#">»</a></li>
+ </ul>
+ </div>
+ </div>
+<pre class="prettyprint linenums">
+<div class="pagination pagination-centered">
+ ...
+</div>
+</pre>
+ <div class="bs-docs-example">
+ <div class="pagination pagination-right">
+ <ul>
+ <li><a href="#">«</a></li>
+ <li><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><a href="#">»</a></li>
+ </ul>
+ </div>
+ </div>
+<pre class="prettyprint linenums">
+<div class="pagination pagination-right">
+ ...
+</div>
+</pre>
+
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>{{_i}}Pager{{/i}}</h2>
+ <p>{{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
<h3>{{_i}}Default example{{/i}}</h3>
<p>{{_i}}By default, the pager centers links.{{/i}}</p>
- <ul class="pager">
- <li><a href="#">{{_i}}Previous{{/i}}</a></li>
- <li><a href="#">{{_i}}Next{{/i}}</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="pager">
+ <li><a href="#">{{_i}}Previous{{/i}}</a></li>
+ <li><a href="#">{{_i}}Next{{/i}}</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="pager">
<li>
@@ -1135,10 +1161,12 @@
<h3>{{_i}}Aligned links{{/i}}</h3>
<p>{{_i}}Alternatively, you can align each link to the sides:{{/i}}</p>
- <ul class="pager">
- <li class="previous"><a href="#">{{_i}}← Older{{/i}}</a></li>
- <li class="next"><a href="#">{{_i}}Newer →{{/i}}</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="pager">
+ <li class="previous"><a href="#">{{_i}}← Older{{/i}}</a></li>
+ <li class="next"><a href="#">{{_i}}Newer →{{/i}}</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="pager">
<li class="previous">
@@ -1148,6 +1176,23 @@
<a href="#">{{_i}}Newer &rarr;{{/i}}</a>
</li>
</ul>
+</pre>
+
+ <h3>{{_i}}Optional disabled state{{/i}}</h3>
+ <p>{{_i}}Pager links also use the general <code>.disabled</code> utility class from the pagination.{{/i}}</p>
+ <div class="bs-docs-example">
+ <ul class="pager">
+ <li class="previous disabled"><a href="#">{{_i}}← Older{{/i}}</a></li>
+ <li class="next"><a href="#">{{_i}}Newer →{{/i}}</a></li>
+ </ul>
+ </div>
+<pre class="prettyprint linenums">
+<ul class="pager">
+ <li class="previous disabled">
+ <a href="#">{{_i}}&larr; Older{{/i}}</a>
+ </li>
+ ...
+</ul>
</pre>
</section>
--
GitLab