mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-15 11:59:39 +03:00
Code Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
bootstrap/css/bootstrap-responsive.css
Vendored
+1061
View File
File diff suppressed because it is too large Load Diff
bootstrap/css/bootstrap-responsive.min.css
Vendored
+9
View File
File diff suppressed because one or more lines are too long
bootstrap/css/bootstrap.css
Vendored
+5829
View File
File diff suppressed because it is too large Load Diff
bootstrap/css/bootstrap.min.css
Vendored
+9
View File
File diff suppressed because one or more lines are too long
bootstrap/img/glyphicons-halflings-white.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

bootstrap/img/glyphicons-halflings.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

bootstrap/js/bootstrap.js
Vendored
+2027
View File
File diff suppressed because it is too large Load Diff
bootstrap/js/bootstrap.min.js
Vendored
+6
View File
File diff suppressed because one or more lines are too long
docs/assets/css/bootstrap.css
Vendored
+48 -7
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;
docs/components.html
+99
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>
docs/templates/pages/components.mustache
Vendored
+99
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>
less/pagination.less
+48 -6
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;
}
}