aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2012-02-05 01:36:11 -0800
committerMark Otto <[email protected]>2012-02-05 01:36:11 -0800
commit83cb1053178241d95b0f53da062a4b742d0313cc (patch)
tree4eb012baf61d3d6441a4147aefefdeb103ca2eec /docs
parent9b5b8460b4e6d5e30357aaddbef5425a6150b0bf (diff)
downloadbootstrap-83cb1053178241d95b0f53da062a4b742d0313cc.tar.xz
bootstrap-83cb1053178241d95b0f53da062a4b742d0313cc.zip
adding code snippets to form examples
Diffstat (limited to 'docs')
-rw-r--r--docs/assets/bootstrap.zipbin52391 -> 52391 bytes
-rw-r--r--docs/base-css.html29
-rw-r--r--docs/templates/pages/base-css.mustache30
3 files changed, 53 insertions, 6 deletions
diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 91279e1ac..0700910d3 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
Binary files differ
diff --git a/docs/base-css.html b/docs/base-css.html
index 7f409e019..f84cbe774 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -852,9 +852,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<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">
@@ -866,11 +866,21 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</label>
<button type="submit" class="btn">Submit</button>
</form>
+<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;label class="checkbox"&gt;
+ &lt;input type="checkbox"&gt; Check me out
+ &lt;/label&gt;
+ &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
+&lt;/form&gt;
+</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">
@@ -878,11 +888,17 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</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;Search&lt;/button&gt;
+&lt;/form&gt;
+</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">
@@ -891,6 +907,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<input type="password" class="input-small" placeholder="Password">
<button type="submit" class="btn">Go</button>
</form>
+<pre class="prettyprint linenums">
+&lt;form class="well form-inline"&gt;
+ &lt;input type="text" class="input-small" placeholder="Email"&gt;
+ &lt;input type="password" class="input-small" placeholder="Password"&gt;
+ &lt;button type="submit" class="btn"&gt;Go&lt;/button&gt;
+&lt;/form&gt;
+</pre>
</div>
</div><!-- /row -->
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 443d5ca92..3327594b5 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -776,9 +776,9 @@
<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">
@@ -790,11 +790,22 @@
</label>
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
</form>
+<pre class="prettyprint linenums">
+&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;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 -->
- <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">
@@ -802,11 +813,17 @@
<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 -->
- <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">
@@ -815,6 +832,13 @@
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
<button type="submit" class="btn">{{_i}}Go{{/i}}</button>
</form>
+<pre class="prettyprint linenums">
+&lt;form class="well form-inline"&gt;
+ &lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt;
+ &lt;input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"&gt;
+ &lt;button type="submit" class="btn"&gt;{{_i}}Go{{/i}}&lt;/button&gt;
+&lt;/form&gt;
+</pre>
</div>
</div><!-- /row -->