simpler forms docs structure
This commit is contained in:
parent
88887f8c00
commit
5bed9f4635
22
css.html
22
css.html
|
@ -1532,11 +1532,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
<h2 id="forms-extending">Extending form controls</h2>
|
||||
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
||||
|
||||
<h3 id="forms-input-groups">Input groups</h3>
|
||||
<h2 id="forms-input-groups">Input groups</h3>
|
||||
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p>
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
|
@ -1583,7 +1579,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Optional sizes</h4>
|
||||
<h3>Optional sizes</h3>
|
||||
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="input-group col-lg-9">
|
||||
|
@ -1618,7 +1614,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Buttons instead of text</h4>
|
||||
<h3>Buttons instead of text</h3>
|
||||
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="input-group col-lg-7">
|
||||
|
@ -1651,7 +1647,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Button dropdowns</h4>
|
||||
<h3>Button dropdowns</h3>
|
||||
<p></p>
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="input-group col-lg-7">
|
||||
|
@ -1712,7 +1708,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div><!-- /input-group -->
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Segmented dropdown groups</h4>
|
||||
<h3>Segmented dropdown groups</h3>
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="input-group col-lg-7">
|
||||
<div class="input-group-btn">
|
||||
|
@ -1766,10 +1762,10 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="forms-control-sizes">Control sizing</h3>
|
||||
<h2 id="forms-control-sizes">Control sizing</h2>
|
||||
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-lg-*</code> classes.</p>
|
||||
|
||||
<h4>Relative sizing</h4>
|
||||
<h3>Relative sizing</h3>
|
||||
<p>Create larger or smaller form controls that match button sizes.</p>
|
||||
<form class="bs-example bs-example-control-sizing">
|
||||
<div class="controls docs-input-sizes">
|
||||
|
@ -1798,7 +1794,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<select class="form-control input-small">...</select>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Column sizing</h4>
|
||||
<h3>Column sizing</h3>
|
||||
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
|
||||
<form class="bs-example" style="padding-bottom: 15px;">
|
||||
<div class="row">
|
||||
|
@ -1827,7 +1823,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="forms-help-text">Help text</h3>
|
||||
<h2 id="forms-help-text">Help text</h2>
|
||||
<p>Block level help text for form controls.</p>
|
||||
<form class="bs-example">
|
||||
<input type="text" class="form-control">
|
||||
|
|
Loading…
Reference in New Issue