aboutsummaryrefslogtreecommitdiff
path: root/docs/base-css.html
diff options
context:
space:
mode:
authorJacob Thornton <[email protected]>2011-12-22 19:15:09 -0800
committerJacob Thornton <[email protected]>2011-12-22 19:15:09 -0800
commit35fdbad24b908714ff1a1221945598527a641863 (patch)
tree0a054ac3f3b913fb16f71731b4b04472311afc4a /docs/base-css.html
parent87ac818253a26bcf09fa55f78ae3f55759c54e64 (diff)
parent9fb380151d477f1741b7609ade7a9e7fd5450b2c (diff)
downloadbootstrap-35fdbad24b908714ff1a1221945598527a641863.tar.xz
bootstrap-35fdbad24b908714ff1a1221945598527a641863.zip
Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip
Conflicts: bootstrap.css docs/assets/js/application.js docs/base-css.html docs/components.html docs/index.html docs/javascript.html docs/less.html docs/scaffolding.html docs/upgrading.html
Diffstat (limited to 'docs/base-css.html')
-rw-r--r--docs/base-css.html83
1 files changed, 75 insertions, 8 deletions
diff --git a/docs/base-css.html b/docs/base-css.html
index 6173a4de6..34e844df3 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -762,6 +762,43 @@
<h1>Forms</h1>
</div>
+<!--
+
+Types of forms
+ default (stacked)
+ horizontal (change the class)
+ search
+ inline
+Form elements
+ form
+ fieldset
+ legend
+ label
+ input
+ text (password, email, etc)
+ radio
+ checkbox
+ textarea
+ rows
+ select
+ single
+ multiple
+ size
+Custom form elements
+ Input prepend and append (for @ and $)
+ checkbox and radio lists
+Explaining the default Bootstrap form structure
+ Bulletproofing our forms means adding a bit of extra structure and providing more classes for customization and event handling
+ Form vertical and horizontal forms, we require a wrapping element.
+ we suggest a fieldset
+ but could be anthing so long as it uses the proper class
+Form states
+ warning
+ error
+ success
+
+-->
+
<h2>Four types of forms</h2>
<table class="bordered-table striped-table">
<thead>
@@ -842,7 +879,7 @@
</div>
<div class="span9">
<form class="horizontal-form">
- <legend>Example form</legend>
+ <legend>Example form section</legend>
<fieldset class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
@@ -851,6 +888,16 @@
</div>
</fieldset>
<fieldset class="control-group">
+ <label class="control-label" for="prependedInput">Prepended text</label>
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">@</span>
+ <input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text">
+ </div>
+ <span class="help-block">Here's some help text</span>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
<label class="control-label" for="select01">Select list</label>
<div class="controls">
<select name="select01">
@@ -874,23 +921,44 @@
</select>
</div>
</fieldset>
- <legend>Example form</legend>
+ <legend>Example form section</legend>
+ <fieldset class="control-group">
+ <label class="control-label" for="textarea">Textarea</label>
+ <div class="controls">
+ <textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="fileInput">Disabled input</label>
+ <div class="controls">
+ <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here... carry on." disabled>
+ </div>
+ </fieldset>
<fieldset class="control-group">
<label class="control-label" for="fileInput">File input</label>
<div class="controls">
<input class="input-file" id="fileInput" name="fileInput" type="file">
</div>
</fieldset>
- <fieldset class="control-group has-error">
+ <fieldset class="control-group warning">
+ <label class="control-label" for="inputError">Input with warning</label>
+ <div class="controls">
+ <input type="text" name="inputError">
+ <span class="help-inline">Something may have gone wrong</span>
+ </div>
+ </fieldset>
+ <fieldset class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" name="inputError">
+ <span class="help-inline">Please correct the error</span>
</div>
</fieldset>
- <fieldset class="control-group has-error">
- <label class="control-label" for="textareaError">Textarea with error</label>
+ <fieldset class="control-group success">
+ <label class="control-label" for="inputError">Input with success</label>
<div class="controls">
- <textarea class="input-xlarge" rows="3"></textarea>
+ <input type="text" name="inputError">
+ <span class="help-inline">Woohoo!</span>
</div>
</fieldset>
<fieldset class="control-group">
@@ -1110,8 +1178,7 @@
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
- <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
- <script src="../js/tests/vendor/jquery.js"></script>
+ <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script>
<script src="assets/js/application.js"></script>