mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-28 07:39:57 +02:00
docs updates, forms updated to include error states and more examples, remove text-shadow from gradientbar mixin to fix bug
This commit is contained in:
Mark Otto
@@ -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">
|
||||
@@ -850,6 +887,16 @@
|
||||
<p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
|
||||
</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">
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user