mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-28 20:52:21 +01:00
start rearranging form docs and clear up messaging about required classes and default styles
This commit is contained in:
parent
369ca13c75
commit
d6680a50b9
Binary file not shown.
@ -875,11 +875,9 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
|
||||
<h2>Example forms <small>using just form controls, no extra markup</small></h2>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span6">
|
||||
<h3>Basic form</h3>
|
||||
<p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<p>Smart and lightweight defaults without extra markup.</p>
|
||||
<form class="well">
|
||||
<label>Label name</label>
|
||||
<input type="text" class="span3" placeholder="Type something…">
|
||||
@ -893,39 +891,30 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<form class="well">
|
||||
<label>Label name</label>
|
||||
<input type="text" class="span3" placeholder="Type something…">
|
||||
<span class="help-inline">Associated help text!</span>
|
||||
<span class="help-block">Example block-level help text here.</span>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
<button type="submit" class="btn">Submit</button>
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>Search form</h3>
|
||||
<p>Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<form class="well form-search">
|
||||
<input type="text" class="input-medium search-query">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>Search form</h3>
|
||||
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p>
|
||||
<form class="well form-search">
|
||||
<input type="text" class="input-medium search-query">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="well form-search">
|
||||
<input type="text" class="input-medium search-query">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
|
||||
<h3>Inline form</h3>
|
||||
<p>Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<p>Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.</p>
|
||||
<form class="well form-inline">
|
||||
<input type="text" class="input-small" placeholder="Email">
|
||||
<input type="password" class="input-small" placeholder="Password">
|
||||
@ -944,7 +933,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<button type="submit" class="btn">Sign in</button>
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
</div><!-- /.span -->
|
||||
</div><!-- /row -->
|
||||
|
||||
<br>
|
||||
|
39
docs/templates/pages/base-css.mustache
vendored
39
docs/templates/pages/base-css.mustache
vendored
@ -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 @@
|
||||
<form class="well">
|
||||
<label>{{_i}}Label name{{/i}}</label>
|
||||
<input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
|
||||
<span class="help-inline">Associated help text!</span>
|
||||
<span class="help-block">Example block-level help text here.</span>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> {{_i}}Check me out{{/i}}
|
||||
</label>
|
||||
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
|
||||
</form>
|
||||
</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">
|
||||
<form class="well form-search">
|
||||
<input type="text" class="input-medium search-query">
|
||||
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
|
||||
</form>
|
||||
</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 @@
|
||||
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
</div><!-- /.span -->
|
||||
</div><!-- /row -->
|
||||
|
||||
<br>
|
||||
|
Loading…
x
Reference in New Issue
Block a user