diff options
Diffstat (limited to 'docs/templates')
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 36 |
1 files changed, 34 insertions, 2 deletions
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index ef68b1f59..a5d334fa3 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1012,7 +1012,7 @@ <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> - <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"> @@ -1030,10 +1030,13 @@ <input class="input-xlarge" type="text"> <input class="input-xxlarge" type="text"> </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> - <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"> @@ -1067,6 +1070,35 @@ <input class="span3" type="text"> </pre> + <p>{{_i}}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.{{/i}}</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>{{_i}}Uneditable inputs{{/i}}</h3> <p>{{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}</p> <form class="bs-docs-example"> |