add another code example for horizontal forms

This commit is contained in:
Mark Otto 2012-02-05 01:41:45 -08:00
parent 83cb105317
commit abf4ecac4d
3 changed files with 34 additions and 1 deletions

Binary file not shown.

View File

@ -869,7 +869,8 @@ For example, <code>section</code> should be wrapped as inline.
<pre class="prettyprint linenums">
&lt;form class="well"&gt;
&lt;label&gt;Label name&lt;/label&gt;
&lt;input type="text" class="span3" placeholder="Type something…"&gt; &lt;span class="help-inline"&gt;Associated help text!&lt;/span&gt;
&lt;input type="text" class="span3" placeholder="Type something…"&gt;
&lt;span class="help-inline"&gt;Associated help text!&lt;/span&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; Check me out
&lt;/label&gt;
@ -983,6 +984,22 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div>
</fieldset>
</form>
<h3>Example markup</h3>
<p>Given the above example form layout, here's the markup associated with the first input and control group.</p>
<pre class="prettyprint linenums">
&lt;form class="form-horizontal"&gt;
&lt;fieldset&gt;
&lt;legend&gt;Legend text&lt;/legend&gt;
&lt;div class="control-group"&gt;
&lt;label class="control-label" for="input01"&gt;Text input&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-xlarge" id="input01"&gt;
&lt;p class="help-block"&gt;Supporting help text&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</pre>
</div>
<div class="span4">
<h3>What's included</h3>

View File

@ -908,6 +908,22 @@
</div>
</fieldset>
</form>
<h3>{{_i}}Example markup{{/i}}</h3>
<p>{{_i}}Given the above example form layout, here's the markup associated with the first input and control group.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;form class="form-horizontal"&gt;
&lt;fieldset&gt;
&lt;legend&gt;{{_i}}Legend text{{/i}}&lt;/legend&gt;
&lt;div class="control-group"&gt;
&lt;label class="control-label" for="input01"&gt;{{_i}}Text input{{/i}}&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-xlarge" id="input01"&gt;
&lt;p class="help-block"&gt;{{_i}}Supporting help text{{/i}}&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</pre>
</div>
<div class="span4">
<h3>{{_i}}What's included{{/i}}</h3>