kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

simpler forms docs structure

Browse source
This commit is contained in:
Mark Otto 2013-07-26 21:52:23 -07:00
parent 88887f8c00
commit 5bed9f4635
1 changed files with 9 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
css.html
View file

@ -1532,11 +1532,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h2 id="forms-input-groups">Input groups</h3>
<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>
<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>&lt;input&gt;</code>.</p> <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>&lt;input&gt;</code>.</p>
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
@ -1583,7 +1579,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
<h4>Optional sizes</h4> <h3>Optional sizes</h3>
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p> <p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form">
<div class="input-group col-lg-9"> <div class="input-group col-lg-9">
@ -1618,7 +1614,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% 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> <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"> <form class="bs-example bs-example-form">
<div class="input-group col-lg-7"> <div class="input-group col-lg-7">
@ -1651,7 +1647,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
<h4>Button dropdowns</h4> <h3>Button dropdowns</h3>
<p></p> <p></p>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form">
<div class="input-group col-lg-7"> <div class="input-group col-lg-7">
@ -1712,7 +1708,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /input-group --> </div><!-- /input-group -->
{% endhighlight %} {% endhighlight %}
<h4>Segmented dropdown groups</h4> <h3>Segmented dropdown groups</h3>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form">
<div class="input-group col-lg-7"> <div class="input-group col-lg-7">
<div class="input-group-btn"> <div class="input-group-btn">
@ -1766,10 +1762,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% 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> <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> <p>Create larger or smaller form controls that match button sizes.</p>
<form class="bs-example bs-example-control-sizing"> <form class="bs-example bs-example-control-sizing">
<div class="controls docs-input-sizes"> <div class="controls docs-input-sizes">
@ -1798,7 +1794,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<select class="form-control input-small">...</select> <select class="form-control input-small">...</select>
{% endhighlight %} {% 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> <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;"> <form class="bs-example" style="padding-bottom: 15px;">
<div class="row"> <div class="row">
@ -1827,7 +1823,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% 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> <p>Block level help text for form controls.</p>
<form class="bs-example"> <form class="bs-example">
<input type="text" class="form-control"> <input type="text" class="form-control">