Skip to content

B
bootstrap
Commit 2c8eff0e authored by Brian Campbell's avatar Brian Campbell
Browse files
Options

Updated pagination to support .pagination-large, .pagination-small,... 

Updated pagination to support .pagination-large, .pagination-small, .pagination-mini matching button sizes. Updated related docs.
parent 0489c708
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 9235 additions and 13 deletions
bootstrap/css/bootstrap-responsive.css 0 → 100644
View file @ 2c8eff0e
This diff is collapsed.
bootstrap/css/bootstrap-responsive.min.css 0 → 100644
View file @ 2c8eff0e
This diff is collapsed.
bootstrap/css/bootstrap.css 0 → 100644
View file @ 2c8eff0e
This diff is collapsed.
bootstrap/css/bootstrap.min.css 0 → 100644
View file @ 2c8eff0e
This diff is collapsed.
bootstrap/js/bootstrap.js 0 → 100644
View file @ 2c8eff0e
This diff is collapsed.
bootstrap/js/bootstrap.min.js 0 → 100644
View file @ 2c8eff0e
This diff is collapsed.
docs/assets/css/bootstrap.css
View file @ 2c8eff0e
...@@ -4735,11 +4735,6 @@ input[type="submit"].btn.btn-mini { ...@@ -4735,11 +4735,6 @@ input[type="submit"].btn.btn-mini {
color: #999999; color: #999999;
} }
.pagination {
height: 40px;
margin: 20px 0;
}
.pagination ul { .pagination ul {
display: inline-block; display: inline-block;
*display: inline; *display: inline;
...@@ -4761,8 +4756,6 @@ input[type="submit"].btn.btn-mini { ...@@ -4761,8 +4756,6 @@ input[type="submit"].btn.btn-mini {
.pagination ul > li > a, .pagination ul > li > a,
.pagination ul > li > span { .pagination ul > li > span {
float: left; float: left;
padding: 0 14px;
line-height: 38px;
text-decoration: none; text-decoration: none;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #dddddd; border: 1px solid #dddddd;
...@@ -4812,6 +4805,54 @@ input[type="submit"].btn.btn-mini { ...@@ -4812,6 +4805,54 @@ input[type="submit"].btn.btn-mini {
text-align: right; 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 { .pager {
margin: 20px 0; margin: 20px 0;
text-align: center; text-align: center;
......
docs/components.html
View file @ 2c8eff0e
...@@ -1473,6 +1473,105 @@ ...@@ -1473,6 +1473,105 @@
<hr class="bs-docs-separator"> <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> <h2>Options</h2>
<h3>Disabled and active states</h3> <h3>Disabled and active states</h3>
......
docs/templates/pages/components.mustache
View file @ 2c8eff0e
...@@ -1402,6 +1402,105 @@ ...@@ -1402,6 +1402,105 @@
<hr class="bs-docs-separator"> <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> <h2>{{_i}}Options{{/i}}</h2>
<h3>{{_i}}Disabled and active states{{/i}}</h3> <h3>{{_i}}Disabled and active states{{/i}}</h3>
......
less/pagination.less
View file @ 2c8eff0e
...@@ -3,10 +3,6 @@ ...@@ -3,10 +3,6 @@
// -------------------------------------------------- // --------------------------------------------------
.pagination {
height: @baseLineHeight * 2;
margin: @baseLineHeight 0;
}
.pagination ul { .pagination ul {
display: inline-block; display: inline-block;
.ie7-inline-block(); .ie7-inline-block();
...@@ -21,8 +17,6 @@ ...@@ -21,8 +17,6 @@
.pagination ul > li > a, .pagination ul > li > a,
.pagination ul > li > span { .pagination ul > li > span {
float: left; float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
text-decoration: none; text-decoration: none;
background-color: @paginationBackground; background-color: @paginationBackground;
border: 1px solid @paginationBorder; border: 1px solid @paginationBorder;
...@@ -62,3 +56,51 @@ ...@@ -62,3 +56,51 @@
.pagination-right { .pagination-right {
text-align: 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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment