kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Updated pagination to support .pagination-large, .pagination-small, .pagination-mini matching button sizes. Updated related docs.

This commit is contained in:
Brian Campbell 2012-09-12 14:10:03 -06:00
parent 0489c708c7
commit 2c8eff0eec
12 changed files with 9235 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1061
bootstrap/css/bootstrap-responsive.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

9
bootstrap/css/bootstrap-responsive.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

5829
bootstrap/css/bootstrap.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

9
bootstrap/css/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
bootstrap/img/glyphicons-halflings-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
bootstrap/img/glyphicons-halflings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

2027
bootstrap/js/bootstrap.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

6
bootstrap/js/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

55
docs/assets/css/bootstrap.css vendored
View File

@ -4735,11 +4735,6 @@ input[type="submit"].btn.btn-mini {
color: #999999;
}
.pagination {
height: 40px;
margin: 20px 0;
}
.pagination ul {
display: inline-block;
*display: inline;
@ -4761,8 +4756,6 @@ input[type="submit"].btn.btn-mini {
.pagination ul > li > a,
.pagination ul > li > span {
float: left;
padding: 0 14px;
line-height: 38px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
@ -4812,6 +4805,54 @@ input[type="submit"].btn.btn-mini {
text-align: right;
}
.pagination {
height: 30px;
margin: 17px 0;
font-size: 14px;
}
.pagination ul > li > a,
.pagination ul > li > span {
padding: 0 12px;
line-height: 28px;
}
.pagination-large {
height: 38px;
margin: 20px 0;
font-size: 16px;
}
.pagination-large ul > li > a,
.pagination-large ul > li > span {
padding: 0 15px;
line-height: 36px;
}
.pagination-small {
height: 26px;
margin: 15px 0;
font-size: 12px;
}
.pagination-small ul > li > a,
.pagination-small ul > li > span {
padding: 0 10px;
line-height: 22px;
}
.pagination-mini {
height: 23px;
margin: 10px 0;
font-size: 11px;
}
.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
padding: 0 8px;
line-height: 21px;
}
.pager {
margin: 20px 0;
text-align: center;

99
docs/components.html
View File

@ -1473,6 +1473,105 @@
<hr class="bs-docs-separator">
<h2>Sizes</h2>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
<div class="bs-docs-example">
<div class="pagination pagination-large">
<ul>
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination">
<ul>
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination pagination-small">
<ul>
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination pagination-mini">
<ul>
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination pagination-large"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&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;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&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;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination pagination-small"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&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;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination pagination-mini"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&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;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<hr class="bs-docs-separator">
<h2>Options</h2>
<h3>Disabled and active states</h3>

99
docs/templates/pages/components.mustache vendored
View File

@ -1402,6 +1402,105 @@
<hr class="bs-docs-separator">
<h2>{{_i}}Sizes{{/i}}</h2>
<p>{{_i}}Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.{{/i}}</p>
<div class="bs-docs-example">
<div class="pagination pagination-large">
<ul>
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination">
<ul>
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination pagination-small">
<ul>
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
<div class="pagination pagination-mini">
<ul>
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination pagination-large"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&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;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&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;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination pagination-small"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&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;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="pagination pagination-mini"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&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;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<hr class="bs-docs-separator">
<h2>{{_i}}Options{{/i}}</h2>
<h3>{{_i}}Disabled and active states{{/i}}</h3>

54
less/pagination.less
View File

@ -3,10 +3,6 @@
// --------------------------------------------------
.pagination {
height: @baseLineHeight * 2;
margin: @baseLineHeight 0;
}
.pagination ul {
display: inline-block;
.ie7-inline-block();
@ -21,8 +17,6 @@
.pagination ul > li > a,
.pagination ul > li > span {
float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
text-decoration: none;
background-color: @paginationBackground;
border: 1px solid @paginationBorder;
@ -62,3 +56,51 @@
.pagination-right {
text-align: right;
}
// Pagination Sizes
// --------------------------------------------------
// Default
.pagination {
margin: (@baseLineHeight - 3) 0;
height: @baseLineHeight + 10;
font-size: @baseFontSize;
ul > li > a,
ul > li > span {
padding: 0 12px;
line-height: @baseLineHeight + 8;
}
}
// Large
.pagination-large {
margin: @baseLineHeight 0;
height: @baseLineHeight + 18;
font-size: @baseFontSize + 2px;
ul > li > a,
ul > li > span {
padding: 0 15px;
line-height: (@baseLineHeight * 2) - 4;
}
}
// Small
.pagination-small {
margin: (@baseLineHeight - 5) 0;
height: @baseLineHeight + 6;
font-size: @baseFontSize - 2px;
ul > li > a,
ul > li > span {
padding: 0 10px;
line-height: @baseLineHeight + 2;
}
}
// Mini
.pagination-mini {
margin: (@baseLineHeight - 10) 0;
height: @baseLineHeight + 3;
font-size: @baseFontSize - 3px;
ul > li > a,
ul > li > span {
padding: 0 8px;
line-height: @baseLineHeight + 1;
}
}