From 6d916763f82be8c2d4f87842275170c12bea72ec Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 14 Jan 2012 20:54:37 -0800
Subject: [PATCH] adding the pager component after rewriting the pagination
docs and css
---
bootstrap.css | 55 +++++++++++++++++-----
bootstrap.min.css | 18 ++++++--
docs/components.html | 106 ++++++++++++++++++++++++++++++++++---------
lib/bootstrap.less | 1 +
lib/pager.less | 25 ++++++++++
lib/pagination.less | 76 ++++++++++++++++---------------
6 files changed, 207 insertions(+), 74 deletions(-)
create mode 100644 lib/pager.less
diff --git a/bootstrap.css b/bootstrap.css
index da68a66a88..a93aaaee6c 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Jan 14 17:11:53 PST 2012
+ * Date: Sat Jan 14 20:53:46 PST 2012
*/
html, body {
margin: 0;
@@ -2082,7 +2082,8 @@ i {
/* IE7 inline-block hack */
*zoom: 1;
- margin: 0;
+ margin-left: 0;
+ margin-bottom: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
@@ -2100,26 +2101,58 @@ i {
padding: 0 14px;
line-height: 34px;
text-decoration: none;
- border-right: 1px solid;
- border-right-color: #ddd;
- border-right-color: rgba(0, 0, 0, 0.15);
- *border-right-color: #ddd;
- /* IE6-7 */
-
+ border-right: 1px solid #ddd;
+ border-right: 1px solid rgba(0, 0, 0, 0.15);
}
.pagination a:hover, .pagination .active a {
- background-color: #c7eefe;
+ background-color: #f5f5f5;
}
.pagination .disabled a, .pagination .disabled a:hover {
color: #999999;
background-color: transparent;
cursor: default;
}
-.pagination .next a {
+.pagination li:last-child a {
border: 0;
}
-.pagination.centered {
+.pagination-centered {
+ text-align: center;
+}
+.pagination-right {
+ text-align: right;
+}
+.pager {
+ margin-left: 0;
+ margin-bottom: 18px;
+ list-style: none;
text-align: center;
+ zoom: 1;
+}
+.pager:before, .pager:after {
+ display: table;
+ *display: inline;
+ content: "";
+ zoom: 1;
+}
+.pager:after {
+ clear: both;
+}
+.pager li {
+ display: inline;
+}
+.pager a {
+ display: inline-block;
+ padding: 6px 15px;
+ background-color: #f5f5f5;
+ -webkit-border-radius: 15px;
+ -moz-border-radius: 15px;
+ border-radius: 15px;
+}
+.pager .next a {
+ float: right;
+}
+.pager .previous a {
+ float: left;
}
.modal-backdrop {
position: fixed;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 0ed8fe1767..2d5774e34a 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -401,13 +401,21 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
.breadcrumb .divider{padding:0 5px;color:#999999;}
.breadcrumb .active a{color:#333333;}
-.pagination{height:36px;margin:18px 0;}.pagination ul{display:inline-block;*display:inline;*zoom:1;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
+.pagination{height:36px;margin:18px 0;}
+.pagination ul{display:inline-block;*display:inline;*zoom:1;margin-left:0;margin-bottom:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
.pagination li{display:inline;}
-.pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;}
-.pagination a:hover,.pagination .active a{background-color:#c7eefe;}
+.pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid #ddd;border-right:1px solid rgba(0, 0, 0, 0.15);}
+.pagination a:hover,.pagination .active a{background-color:#f5f5f5;}
.pagination .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;cursor:default;}
-.pagination .next a{border:0;}
-.pagination.centered{text-align:center;}
+.pagination li:last-child a{border:0;}
+.pagination-centered{text-align:center;}
+.pagination-right{text-align:right;}
+.pager{margin-left:0;margin-bottom:18px;list-style:none;text-align:center;zoom:1;}.pager:before,.pager:after{display:table;*display:inline;content:"";zoom:1;}
+.pager:after{clear:both;}
+.pager li{display:inline;}
+.pager a{display:inline-block;padding:6px 15px;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}
+.pager .next a{float:right;}
+.pager .previous a{float:left;}
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000000;}.modal-backdrop.fade{opacity:0;}
.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
.modal{position:fixed;top:50%;left:50%;z-index:1050;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
diff --git a/docs/components.html b/docs/components.html
index f934ac68eb..e88bd777c8 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -847,63 +847,127 @@
================================================== -->
<section id="pagination">
<div class="page-header">
- <h1>Pagination <small></small></h1>
+ <h1>Pagination <small>Two options for paging through content</small></h1>
</div>
+ <h2>Multi-page pagination</h2>
<div class="row">
- <div class="span3">
- <h2>Pagination</h2>
- <p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
+ <div class="span4">
+ <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>
</div>
- <div class="span9">
+ <div class="span4">
+ <h3>Examples</h3>
+ <p>The default pagination component is flexible and works in a number of variations.</p>
<div class="pagination">
<ul>
- <li class="prev disabled"><a href="#">← Previous</a></li>
+ <li class="disabled"><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 class="next"><a href="#">Next →</a></li>
+ <li><a href="#">Next →</a></li>
</ul>
</div>
<div class="pagination">
<ul>
- <li class="prev"><a href="#">←</a></li>
+ <li><a href="#">←</a></li>
+ <li><a href="#">10</a></li>
+ <li><a href="#">11</a></li>
+ <li class="active"><a href="#">12</a></li>
+ <li><a href="#">13</a></li>
+ <li><a href="#">14</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><a href="#">11</a></li>
<li class="disabled"><a href="#">…</a></li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
- <li class="next"><a href="#">→</a></li>
+ <li><a href="#">→</a></li>
</ul>
</div>
- <div class="pagination">
+ <div class="pagination pagination-centered">
<ul>
- <li class="prev"><a href="#">←</a></li>
- <li><a href="#">10</a></li>
- <li><a href="#">11</a></li>
- <li class="active"><a href="#">12</a></li>
- <li><a href="#">13</a></li>
- <li><a href="#">14</a></li>
- <li class="next"><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>
</ul>
</div>
+ </div>
+ <div class="span4">
+ <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 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>
</pre>
</div>
</div><!-- /row -->
+ <h2>Pager <small>For quick previous and next links</small></h2>
+ <div class="row">
+ <div class="span4">
+ <h3>About pager</h3>
+ <p>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.</p>
+ </div>
+ <div class="span4">
+ <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>
+<pre class="prettyprint linenums">
+<ul class="pager">
+ <li>
+ <a href="#">Previous</a>
+ </li>
+ <li>
+ <a href="#">Next</a>
+ </li>
+</ul>
+</pre>
+ </div>
+ <div class="span4">
+ <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>
+<pre class="prettyprint linenums">
+<ul class="pager">
+ <li>
+ <a href="#">&larr; Older</a>
+ </li>
+ <li>
+ <a href="#">Newer &rarr;</a>
+ </li>
+</ul>
+</pre>
+ </div>
+ </div><!-- /row -->
</section>
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index d71002c468..43b5120863 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -36,6 +36,7 @@
@import "navs.less";
@import "breadcrumbs.less";
@import "pagination.less";
+@import "pager.less";
// Components: Popovers
@import "modals.less";
diff --git a/lib/pager.less b/lib/pager.less
new file mode 100644
index 0000000000..de009afdaa
--- /dev/null
+++ b/lib/pager.less
@@ -0,0 +1,25 @@
+// PAGER
+// -----
+
+.pager {
+ margin-left: 0;
+ margin-bottom: @baseLineHeight;
+ list-style: none;
+ text-align: center;
+ .clearfix();
+}
+.pager li {
+ display: inline;
+}
+.pager a {
+ display: inline-block;
+ padding: 6px 15px;
+ background-color: #f5f5f5;
+ .border-radius(15px);
+}
+.pager .next a {
+ float: right;
+}
+.pager .previous a {
+ float: left;
+}
diff --git a/lib/pagination.less b/lib/pagination.less
index e388057604..655abe5a38 100644
--- a/lib/pagination.less
+++ b/lib/pagination.less
@@ -4,44 +4,46 @@
.pagination {
height: @baseLineHeight * 2;
margin: @baseLineHeight 0;
- ul {
- display: inline-block;
- .ie7-inline-block();
- margin: 0;
- border: 1px solid #ddd;
- border: 1px solid rgba(0,0,0,.15);
- .border-radius(3px);
- .box-shadow(0 1px 2px rgba(0,0,0,.05));
- }
- li {
+ }
+.pagination ul {
+ display: inline-block;
+ .ie7-inline-block();
+ margin-left: 0;
+ margin-bottom: 0;
+ border: 1px solid #ddd;
+ border: 1px solid rgba(0,0,0,.15);
+ .border-radius(3px);
+ .box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+.pagination li {
display: inline;
}
- a {
- float: left;
- padding: 0 14px;
- line-height: (@baseLineHeight * 2) - 2;
- text-decoration: none;
- border-right: 1px solid;
- border-right-color: #ddd;
- border-right-color: rgba(0,0,0,.15);
- *border-right-color: #ddd; /* IE6-7 */
- }
- a:hover,
- .active a {
- background-color: lighten(@blue, 45%);
- }
- .disabled a,
- .disabled a:hover {
- color: @grayLight;
- background-color: transparent;
- cursor: default;
- }
- .next a {
- border: 0;
- }
+.pagination a {
+ float: left;
+ padding: 0 14px;
+ line-height: (@baseLineHeight * 2) - 2;
+ text-decoration: none;
+ border-right: 1px solid #ddd;
+ border-right: 1px solid rgba(0,0,0,.15);
+}
+.pagination a:hover,
+.pagination .active a {
+ background-color: #f5f5f5;
+}
+.pagination .disabled a,
+.pagination .disabled a:hover {
+ color: @grayLight;
+ background-color: transparent;
+ cursor: default;
+}
+.pagination li:last-child a {
+ border: 0;
+}
- // Centered
- &.centered {
- text-align: center;
- }
+// Centered
+.pagination-centered {
+ text-align: center;
+}
+.pagination-right {
+ text-align: right;
}
--
GitLab