diff options
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 36 |
1 files changed, 34 insertions, 2 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 0c5bf0bea..88f443642 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1074,7 +1074,7 @@ For example, <code>section</code> should be wrapped as inline. <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p> <h4>Relative sizing</h4> - <form class="bs-docs-example"> + <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"> @@ -1092,10 +1092,13 @@ For example, <code>section</code> should be wrapped as inline. <input class="input-xlarge" type="text"> <input class="input-xxlarge" type="text"> </pre> + <p> + <span class="label label-info">Heads up!</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>Grid sizing</h4> <p>Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.</p> - <form class="bs-docs-example"> + <form class="bs-docs-example" style="padding-bottom: 15px;"> <div class="controls docs-input-sizes"> <input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> @@ -1129,6 +1132,35 @@ For example, <code>section</code> should be wrapped as inline. <input class="span3" type="text"> </pre> + <p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p> + <form class="bs-docs-example" style="padding-bottom: 15px;"> + <div class="controls"> + <input class="span5" type="text" placeholder=".span5"> + </div> + <div class="controls controls-row"> + <input class="span4" type="text" placeholder=".span4"> + <input class="span1" type="text" placeholder=".span1"> + </div> + <div class="controls controls-row"> + <input class="span3" type="text" placeholder=".span3"> + <input class="span2" type="text" placeholder=".span2"> + </div> + <div class="controls controls-row"> + <input class="span2" type="text" placeholder=".span2"> + <input class="span3" type="text" placeholder=".span3"> + </div> + <div class="controls controls-row"> + <input class="span1" type="text" placeholder=".span1"> + <input class="span4" type="text" placeholder=".span4"> + </div> + </form> +<pre class="prettyprint linenums"> +<div class="controls controls-row"> + <input class="span4" type="text" placeholder=".span4"> + <input class="span1" type="text" placeholder=".span1"> +</div> +</pre> + <h3>Uneditable inputs</h3> <p>Present data in a form that's not editable without using actual form markup.</p> <form class="bs-docs-example"> |