diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/base-css.html | 80 | ||||
| -rw-r--r-- | docs/components.html | 107 | ||||
| -rw-r--r-- | docs/upgrading.html | 2 |
3 files changed, 169 insertions, 20 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 209897402..63ec53306 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"> diff --git a/docs/components.html b/docs/components.html index 56e71b0f7..11d83c51a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -201,11 +201,33 @@ -<!-- Navigation +<!-- Autocomplete ================================================== --> -<section id="navigation"> +<section id="autocomplete"> <div class="page-header"> - <h1>Navigation</h1> + <h1>Autocomplete <small></small></h1> + </div> + +</section> + + + +<!-- Carousel +================================================== --> +<section id="carousel"> + <div class="page-header"> + <h1>Carousel <small></small></h1> + </div> + +</section> + + + +<!-- Navbar +================================================== --> +<section id="navbar"> + <div class="page-header"> + <h1>Navbar</h1> </div> <h2>Fixed navbar</h2> <div class="navbar navbar-static" data-dropdown="dropdown"> @@ -262,11 +284,19 @@ </div> <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> - <br> +</section> + + + +<!-- Tabs & Pills +================================================== --> +<section id="tabsAndPills"> + <div class="page-header"> + <h1>Tabs and pills <small></small></h1> + </div> <div class="row"> <div class="span3"> - <h2>Tabs and pills</h2> <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p> <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p> </div> @@ -428,10 +458,19 @@ </div> </div><!-- /row --> - <!-- Breadcrumbs --> +</section> + + + +<!-- Breadcrumbs +================================================== --> +<section id="breadcrumbs"> + <div class="page-header"> + <h1>Breadcrumbs <small></small></h1> + </div> + <div class="row"> <div class="span3"> - <h2>Breadcrumbs</h2> <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p> </div> <div class="span9"> @@ -464,10 +503,20 @@ </div> </div> +</section> + + + +<!-- Step nav +================================================== --> +<section id="stepNav"> + <div class="page-header"> + <h1>Step nav <small></small></h1> + </div> + <!-- Step nav --> <div class="row"> <div class="span3"> - <h2>Step nav</h2> <p>Placeholder for now!</p> </div> <div class="span9"> @@ -486,7 +535,17 @@ </div> </div> - <!-- Pagination --> +</section> + + + +<!-- Pagination +================================================== --> +<section id="carousel"> + <div class="page-header"> + <h1>Pagination <small></small></h1> + </div> + <div class="row"> <div class="span3"> <h2>Pagination</h2> @@ -644,11 +703,11 @@ </section> -<!-- Popovers +<!-- Modals ================================================== --> <section id="popovers"> <div class="page-header"> - <h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1> + <h1>Modals <small></small></h1> </div> <div class="row"> <div class="span3"> @@ -676,7 +735,17 @@ </div> </div><!-- /row --> - <!-- Tooltips --> +</section> + + + +<!-- Twipsies +================================================== --> +<section id="carousel"> + <div class="page-header"> + <h1>Twipsy tooltips <small></small></h1> + </div> + <div class="row"> <div class="span3"> <h2>Tooltips</h2> @@ -694,7 +763,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </div> </div><!-- /row --> - <!-- Popovers --> +</section> + + + +<!-- Popovers +================================================== --> +<section id="popovers"> + <div class="page-header"> + <h1>Popovers <small></small></h1> + </div> + <div class="row"> <div class="span3"> <h2>Popovers</h2> @@ -721,6 +800,8 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </section> + + <!-- Footer ================================================== --> <footer class="footer"> diff --git a/docs/upgrading.html b/docs/upgrading.html index cd0ca8e22..60c9c325b 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -38,7 +38,7 @@ <li><a href="./base-css.html">Base CSS</a></li> <li><a href="./components.html">Components</a></li> <li><a href="./javascript.html">Javascript plugins</a></li> - <li class="active"><a href="./less.html">Using LESS</a></li> + <li><a href="./less.html">Using LESS</a></li> </ul> </div> </div> |