2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00

start rearranging form docs and clear up messaging about required classes and default styles

This commit is contained in:
Mark Otto
2012-03-28 18:00:05 -07:00
parent 369ca13c75
commit d6680a50b9
3 changed files with 28 additions and 50 deletions
+14 -25
View File
@@ -798,11 +798,9 @@
<h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
<div class="row">
<div class="span3">
<div class="span6">
<h3>{{_i}}Basic form{{/i}}</h3>
<p>{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}</p>
</div>
<div class="span9">
<p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p>
<form class="well">
<label>{{_i}}Label name{{/i}}</label>
<input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
@@ -816,39 +814,30 @@
&lt;form class="well"&gt;
&lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
&lt;input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"&gt;
&lt;span class="help-inline"&gt;Associated help text!&lt;/span&gt;
&lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
&lt;/label&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
&lt;/form&gt;
</pre>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span3">
<h3>{{_i}}Search form{{/i}}</h3>
<p>{{_i}}Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.{{/i}}</p>
</div>
<div class="span9">
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</form>
</div>
<div class="span6">
<h3>{{_i}}Search form{{/i}}</h3>
<p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</p>
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</form>
<pre class="prettyprint linenums">
&lt;form class="well form-search"&gt;
&lt;input type="text" class="input-medium search-query"&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
&lt;/form&gt;
</pre>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span3">
<h3>{{_i}}Inline form{{/i}}</h3>
<p>{{_i}}Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.{{/i}}</p>
</div>
<div class="span9">
<p>{{_i}}Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.{{/i}}</p>
<form class="well form-inline">
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
@@ -867,7 +856,7 @@
&lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt;
&lt;/form&gt;
</pre>
</div>
</div><!-- /.span -->
</div><!-- /row -->
<br>