diff options
Diffstat (limited to 'css.html')
| -rw-r--r-- | css.html | 40 |
1 files changed, 35 insertions, 5 deletions
@@ -1257,10 +1257,7 @@ For example, <code><section></code> should be wrapped as inline. {% endhighlight %} - <h2>Optional layouts</h2> - <p>Included with Bootstrap are optional form layouts for common use cases.</p> - - <h3 id="forms-inline">Inline form</h3> + <h3 id="forms-inline">Inline form</h2> <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p> <div class="bs-callout bs-callout-danger"> <h4>Requires custom widths</h4> @@ -1289,7 +1286,7 @@ For example, <code><section></code> should be wrapped as inline. </form> {% endhighlight %} - <h3 id="forms-horizontal">Horizontal form</h3> + <h2 id="forms-horizontal">Horizontal form</h2> <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p> <form class="bs-example form-horizontal"> <div class="form-group"> @@ -1485,6 +1482,39 @@ For example, <code><section></code> should be wrapped as inline. {% endhighlight %} + <h2 id="forms-controls-static">Static text in horizontal forms</h2> + <p>When you need to place regular, static text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code><p></code>.</p> + <form class="bs-example form-horizontal"> + <div class="form-group"> + <label for="inputEmail" class="col-lg-2 control-label">Email</label> + <div class="col-lg-10"> + <p class="form-control-static">[email protected]</p> + </div> + </div> + <div class="form-group"> + <label for="inputPassword" class="col-lg-2 control-label">Password</label> + <div class="col-lg-10"> + <input type="password" class="form-control" id="inputPassword" placeholder="Password"> + </div> + </div> + </form> +{% highlight html %} +<form class="form-horizontal"> + <div class="form-group"> + <label for="inputEmail2" class="col-lg-2 control-label">Email</label> + <div class="col-lg-10"> + <p class="form-control-static">[email protected]</p> + </div> + </div> + <div class="form-group"> + <label for="inputPassword2" class="col-lg-2 control-label">Password</label> + <div class="col-lg-10"> + <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> + </div> + </div> +</form> +{% endhighlight %} + <h2 id="forms-control-states">Form control states</h2> <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p> |