github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-24 03:00:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

make .input-* classes match .btn-* size classes

Browse Source
This commit is contained in:
Mark Otto
2012-09-25 22:16:47 -07:00
parent 0220015edd
commit 9e97098802
4 changed files with 117 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/templates/pages/base-css.mustache vendored
View File

@@ -1273,30 +1273,22 @@
<p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p>
<h4>{{_i}}Relative sizing{{/i}}</h4>
<p>{{_i}}Create larger or smaller form controls that match button sizes.{{/i}}</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-mini" type="text" placeholder=".input-mini">
</div>
</form>
<pre class="prettyprint linenums">
&lt;input class="input-mini" type="text" placeholder=".input-mini"&gt;
&lt;input class="input-small" type="text" placeholder=".input-small"&gt;
&lt;input class="input-medium" type="text" placeholder=".input-medium"&gt;
&lt;input class="input-large" type="text" placeholder=".input-large"&gt;
&lt;input class="input-xlarge" type="text" placeholder=".input-xlarge"&gt;
&lt;input class="input-xxlarge" type="text" placeholder=".input-xxlarge"&gt;
&lt;input class="input-small" type="text" placeholder=".input-small"&gt;
&lt;input class="input-mini" type="text" placeholder=".input-mini"&gt;
</pre>
<p>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input.
</p>
<h4>{{_i}}Grid sizing{{/i}}</h4>
<p>{{_i}}Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.{{/i}}</p>
<h4>{{_i}}Column sizing{{/i}}</h4>
<p>{{_i}}Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.{{/i}}</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">