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,27 +2101,59 @@ 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; top: 0; 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 @@ ================================================== -->
-

Pagination

+

Pagination Two options for paging through content

+

Multi-page pagination

-
-

Pagination

-

Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.

+
+

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.

- + + +
+
+

Markup

+

Wrapped in a <div>, pagination is just a <ul>.

 <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>
+

Pager For quick previous and next links

+
+
+

About pager

+

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.

+
+
+

Default example

+

By default, the pager centers links.

+ +
+<ul class="pager">
+  <li>
+    <a href="#">Previous</a>
+  </li>
+  <li>
+    <a href="#">Next</a>
+  </li>
+</ul>
+
+
+
+

Aligned links

+

Alternatively, you can align each link to the sides:

+ +
+<ul class="pager">
+  <li>
+    <a href="#">&larr; Older</a>
+  </li>
+  <li>
+    <a href="#">Newer &rarr;</a>
+  </li>
+</ul>
+
+
+
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; - } - - // Centered - &.centered { - text-align: center; - } +.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 +.pagination-centered { + text-align: center; +} +.pagination-right { + text-align: right; }