adding the pager component after rewriting the pagination docs and css

6d916763 · Mark Otto · 1c6048ba · 6d916763 · 6d916763 · 6d916763
Commit 6d916763 authored Jan 14, 2012 by Mark Otto
6 changed files
--- 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: 1px solid #ddd;
-  border-right-color: #ddd;
+  border-right: 1px solid rgba(0, 0, 0, 0.15);
-  border-right-color: rgba(0, 0, 0, 0.15);
-  *border-right-color: #ddd;
-  /* IE6-7 */
 }
 .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;

--- 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{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:#c7eefe;}
+.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 li:last-child a{border:0;}
-.pagination.centered{text-align:center;}
+.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%;}

--- 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">
+    <div class="span4">
-      <h2>Pagination</h2>
+      <h3>When to use</h3>
-      <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>
+      <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="#">&larr; Previous</a></li>
+          <li class="disabled"><a href="#">&larr; 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 &rarr;</a></li>
+          <li><a href="#">Next &rarr;</a></li>
        </ul>
      </div>
      <div class="pagination">
        <ul>
-          <li class="prev"><a href="#">&larr;</a></li>
+          <li><a href="#">&larr;</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="#">&rarr;</a></li>
+        </ul>
+      </div>
+      <div class="pagination">
+        <ul>
+          <li><a href="#">&larr;</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="#">&rarr;</a></li>
+          <li><a href="#">&rarr;</a></li>
        </ul>
      </div>
-      <div class="pagination">
+      <div class="pagination pagination-centered">
        <ul>
-          <li class="prev"><a href="#">&larr;</a></li>
+          <li class="active"><a href="#">1</a></li>
-          <li><a href="#">10</a></li>
+          <li><a href="#">2</a></li>
-          <li><a href="#">11</a></li>
+          <li><a href="#">3</a></li>
-          <li class="active"><a href="#">12</a></li>
+          <li><a href="#">4</a></li>
-          <li><a href="#">13</a></li>
+          <li><a href="#">5</a></li>
-          <li><a href="#">14</a></li>
-          <li class="next"><a href="#">&rarr;</a></li>
        </ul>
      </div>
+    </div>
+    <div class="span4">
+      <h3>Markup</h3>
+      <p>Wrapped in a <code>&lt;div&gt;</code>, pagination is just a <code>&lt;ul&gt;</code>.</p>
 <pre class="prettyprint linenums">
 &lt;div class="pagination"&gt;
  &lt;ul&gt;
-    &lt;li class="prev disabled"&gt;&lt;a href="#"&gt;&amp;larr; Previous&lt;/a&gt;&lt;/li>
+    &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li>
-    &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
+    &lt;li class="active"&gt;
+      &lt;a href="#"&gt;1&lt;/a&gt;
+    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li>
-    &lt;li class="next"&gt;&lt;a href="#"&gt;Next &amp;rarr;&lt;/a&gt;&lt;/li>
  &lt;/ul&gt;
 &lt;/div&gt;
 </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">
+&lt;ul class="pager"&gt;
+  &lt;li&gt;
+    &lt;a href="#"&gt;Previous&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href="#"&gt;Next&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</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="#">&larr; Older</a></li>
+        <li class="next"><a href="#">Newer &rarr;</a></li>
+      </ul>
+<pre class="prettyprint linenums">
+&lt;ul class="pager"&gt;
+  &lt;li&gt;
+    &lt;a href="#"&gt;&amp;larr; Older&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href="#"&gt;Newer &amp;rarr;&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
 </section>

--- 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";

--- a/lib/pager.less
+++ b/lib/pager.less
+// 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;
+}
--- a/lib/pagination.less
+++ b/lib/pagination.less
@@ -4,44 +4,46 @@
 .pagination {
  height: @baseLineHeight * 2;
  margin: @baseLineHeight 0;
-  ul {
+ }
+.pagination ul {
  display: inline-block;
  .ie7-inline-block();
-    margin: 0;
+  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));
-  }
+}
-  li {
+.pagination li {
    display: inline;
  }
-  a {
+.pagination a {
  float: left;
  padding: 0 14px;
  line-height: (@baseLineHeight * 2) - 2;
  text-decoration: none;
-    border-right: 1px solid;
+  border-right: 1px solid #ddd;
-    border-right-color: #ddd;
+  border-right: 1px solid rgba(0,0,0,.15);
-    border-right-color: rgba(0,0,0,.15);
+}
-    *border-right-color: #ddd; /* IE6-7 */
+.pagination a:hover,
-  }
+.pagination .active a {
-  a:hover,
+  background-color: #f5f5f5;
-  .active a {
+}
-    background-color: lighten(@blue, 45%);
+.pagination .disabled a,
-  }
+.pagination .disabled a:hover {
-  .disabled a,
-  .disabled a:hover {
  color: @grayLight;
  background-color: transparent;
  cursor: default;
-  }
+}
-  .next a {
+.pagination li:last-child a {
  border: 0;
-  }
+}
-  // Centered
+// Centered
-  &.centered {
+.pagination-centered {
  text-align: center;
-  }
+}
+.pagination-right {
+  text-align: right;
 }