2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +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 -10
View File
@@ -1625,7 +1625,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Relative sizing</h4>
<p>Create larger or smaller form controls that match button sizes.</p>
<form class="bs-example" style="padding-bottom: 15px;">
<form class="bs-example bs-example-control-sizing">
<div class="controls docs-input-sizes">
<input class="input-large" type="text" placeholder=".input-large">
<input type="text" placeholder="Default input">
@@ -1738,7 +1738,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2 id="buttons-sizes">Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for additional sizes.</p>
<div class="bs-example">
<p>
<button type="button" class="btn btn-primary btn-large">Large button</button>
@@ -1752,10 +1752,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-primary btn-small">Small button</button>
<button type="button" class="btn btn-default btn-small">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
<button type="button" class="btn btn-default btn-mini">Mini button</button>
</p>
</div>
{% highlight html %}
<p>
@@ -1770,10 +1766,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-primary btn-small">Small button</button>
<button type="button" class="btn btn-default btn-small">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
<button type="button" class="btn btn-default btn-mini">Mini button</button>
</p>
{% endhighlight %}
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>