<h2>Example forms <small>using just form controls, no extra markup</small></h2>
- <h3>Basic form</h3>
<div class="row">
<div class="span3">
+ <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">
</label>
<button type="submit" class="btn">Submit</button>
</form>
+<pre class="prettyprint linenums">
+<form class="well">
+ <label>Label name</label>
+ <input type="text" class="span3" placeholder="Type something…"> <span class="help-inline">Associated help text!</span>
+ <label class="checkbox">
+ <input type="checkbox"> Check me out
+ </label>
+ <button type="submit" class="btn">Submit</button>
+</form>
+</pre>
</div>
</div> <!-- /row -->
- <h3>Search form</h3>
<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">
<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 -->
- <h3>Inline form</h3>
<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">
<input type="password" class="input-small" placeholder="Password">
<button type="submit" class="btn">Go</button>
</form>
+<pre class="prettyprint linenums">
+<form class="well form-inline">
+ <input type="text" class="input-small" placeholder="Email">
+ <input type="password" class="input-small" placeholder="Password">
+ <button type="submit" class="btn">Go</button>
+</form>
+</pre>
</div>
</div><!-- /row -->
<h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
- <h3>{{_i}}Basic form{{/i}}</h3>
<div class="row">
<div class="span3">
+ <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">
</label>
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
</form>
+<pre class="prettyprint linenums">
+<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>
+ <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 -->
- <h3>{{_i}}Search form{{/i}}</h3>
<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">
<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 -->
- <h3>{{_i}}Inline form{{/i}}</h3>
<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">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
<button type="submit" class="btn">{{_i}}Go{{/i}}</button>
</form>
+<pre class="prettyprint linenums">
+<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}}">
+ <button type="submit" class="btn">{{_i}}Go{{/i}}</button>
+</form>
+</pre>
</div>
</div><!-- /row -->