mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
adding the pager component after rewriting the pagination docs and css
This commit is contained in:
Mark Otto
parent
1c6048bac2
commit
6d916763f8
55
bootstrap.css
vendored
55
bootstrap.css
vendored
@ -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;
|
||||
|
||||
18
bootstrap.min.css
vendored
18
bootstrap.min.css
vendored
@ -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%;}
|
||||
|
||||
@ -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 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>
|
||||
</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 class="next"><a href="#">→</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><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>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
1
lib/bootstrap.less
vendored
1
lib/bootstrap.less
vendored
@ -36,6 +36,7 @@
|
||||
@import "navs.less";
|
||||
@import "breadcrumbs.less";
|
||||
@import "pagination.less";
|
||||
@import "pager.less";
|
||||
|
||||
// Components: Popovers
|
||||
@import "modals.less";
|
||||
|
||||
25
lib/pager.less
Normal file
25
lib/pager.less
Normal file
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user