2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-27 14:46:01 +03:00

Overhaul form control and button sizing, and some type styles

* New padding approach with separate horizontal and vertical padding
variables
* Improved sizing in large and small buttons and form controls
* Dropped the `.btn-mini` (since we have no `.input-mini` to match, and
holy fuck those were small buttons)
* Dropped the `.pagination-mini` as well because once again, to hell
with such small components
* Changed `@line-height-headings` to `@headings-line-height`
* Removed the `@headings-font-family` because it was honestly kind of
useless
This commit is contained in:
Mark Otto
2013-05-14 23:21:30 -07:00
parent a41d566d5e
commit 28a081cb20
9 changed files with 88 additions and 153 deletions
+2 -35
View File
@@ -748,7 +748,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% endhighlight %}
<h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
<p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
<p>Button dropdowns work with buttons of all sizes.</p>
<div class="bs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
@@ -775,18 +775,6 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
Mini button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div><!-- /example -->
{% highlight html %}
@@ -809,15 +797,6 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
...
</ul>
</div>
<!-- Mini button group -->
<div class="btn-group">
<button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
Mini button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
{% endhighlight %}
@@ -1540,7 +1519,7 @@ body {
<h3>Sizes</h3>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code> or <code>.pagination-small</code> for additional sizes.</p>
<div class="bs-example">
<div>
<ul class="pagination pagination-large">
@@ -1575,23 +1554,11 @@ body {
<li><a href="#">&raquo;</a></li>
</ul>
</div>
<div>
<ul class="pagination pagination-mini">
<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>
{% highlight html %}
<ul class="pagination pagination-large">...</ul>
<ul class="pagination pagination">...</ul>
<ul class="pagination pagination-small">...</ul>
<ul class="pagination pagination-mini">...</ul>
{% endhighlight %}