<p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p>
<p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p>
<tableclass="striped-table">
<tableclass="striped-table">
...
@@ -630,6 +633,9 @@
...
@@ -630,6 +633,9 @@
<table class="striped-table">
<table class="striped-table">
...
...
</table></pre>
</table></pre>
<br>
<h3>3. Bordered table</h3>
<h3>3. Bordered table</h3>
<p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p>
<p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p>
<p><spanclass="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p>
<p><spanclass="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p>
...
@@ -671,6 +677,9 @@
...
@@ -671,6 +677,9 @@
<table class="bordered-table">
<table class="bordered-table">
...
...
</table></pre>
</table></pre>
<br>
<h3>4. Condensed table</h3>
<h3>4. Condensed table</h3>
<p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p>
<p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p>
<tableclass="condensed-table">
<tableclass="condensed-table">
...
@@ -707,6 +716,9 @@
...
@@ -707,6 +716,9 @@
<table class="condensed-table">
<table class="condensed-table">
...
...
</table></pre>
</table></pre>
<br>
<h3>5. Striped table w/ TableSorter.js</h3>
<h3>5. Striped table w/ TableSorter.js</h3>
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <ahref="http://jquery.com">jQuery</a> and the <ahref="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <ahref="http://jquery.com">jQuery</a> and the <ahref="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
<tableclass="striped-table"id="sortTableExample">
<tableclass="striped-table"id="sortTableExample">
...
@@ -760,54 +772,32 @@
...
@@ -760,54 +772,32 @@
<divclass="page-header">
<divclass="page-header">
<h1>Forms</h1>
<h1>Forms</h1>
</div>
</div>
<divclass="row">
<!--
<divclass="span4">
<h2>Flexible HTML and CSS</h2>
Types of forms
<p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p>
default (stacked)
<p>More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.</p>
horizontal (change the class)
</div>
search
<divclass="span4">
inline
<h2>Four layouts included</h2>
Form elements
<p>Bootstrap comes with support for four types of form layouts:</p>
form
<ul>
fieldset
<li>Vertical (default)</li>
legend
<li>Search</li>
label
<li>Inline</li>
input
<li>Horizontal</li>
text (password, email, etc)
</ul>
radio
<p>Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.</p>
checkbox
</div>
textarea
<divclass="span4">
rows
<h2>Control states and more</h2>
select
<p>Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.</p>
single
<p>States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.</p>
multiple
</div>
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
-->
<divclass="row">
<divclass="span4">
<h3>Flexible markup and styles</h3>
<p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p>
</div>
<divclass="span4">
</div>
</div>
</div>
<h2>Four types of forms</h2>
<h2>Four types of forms</h2>
<p>Bootstrap provides simple markup and styles for four styles of common web forms.</p>
<tableclass="bordered-table striped-table">
<tableclass="bordered-table striped-table">
<thead>
<thead>
<tr>
<tr>
...
@@ -823,7 +813,7 @@ Form states
...
@@ -823,7 +813,7 @@ Form states
<td>Stacked, left-aligned labels over controls</td>
<td>Stacked, left-aligned labels over controls</td>
</tr>
</tr>
<tr>
<tr>
<th>Horiztonal</th>
<th>Horizontal</th>
<td><code>.horizontal-form</code></td>
<td><code>.horizontal-form</code></td>
<td>Float left, right-aligned labels on same line as controls</td>
<td>Float left, right-aligned labels on same line as controls</td>
</tr>
</tr>
...
@@ -841,78 +831,60 @@ Form states
...
@@ -841,78 +831,60 @@ Form states
</table>
</table>
<h2>Example forms <small>using just form controls, no extra markup</small></h2>
<divclass="row">
<divclass="row">
<divclass="span4">
<divclass="span4">
<h3>Why four types</h3>
<h3>Basic form</h3>
<p>With Bootstrap 2, we completely recoded our forms to allow for simple base styles and improved namespacing on labels and controls. To address the many uses of forms, we've included some base styles to help get you started.</p>
<p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p>
<p>Our default form styles are now vertical, not horizontal. This makes it easier to customize bare-bones forms, as well as forms in tricker situations like sign-up, modals, etc. <strong>They share the same exact markup; just swap the class.</strong></p>
<p>Reflecting default WebKit styles, just add <code>.search-form</code> for extra rounded search fields.</p>
<p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p>
<ul>
<li>text inputs (text, password, email, etc)</li>
<li>checkbox</li>
<li>radio</li>
<li>select</li>
<li>multiple select</li>
<li>file input</li>
<li>textarea</li>
</ul>
<hr>
<h3>New defaults with v2.0</h3>
<p>Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.</p>
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p>
<hr>
<h3>Form validation</h3>
<p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p>
Option two can is something else and selecting it will deselect options 1
Option two can is something else and selecting it will deselect option one
</label>
</label>
<pclass="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
</div>
</div>
</fieldset>
</fieldset>
<fieldsetclass="form-actions">
<fieldsetclass="form-actions">
...
@@ -1021,52 +1082,24 @@ Form states
...
@@ -1021,52 +1082,24 @@ Form states
</fieldset>
</fieldset>
</form>
</form>
</div>
</div>
</div><!-- /row -->
<divclass="span4">
<divclass="row">
<divclass="form-docs">
<divclass="span3">
<h3>Prepend & append inputs</h3>
<h2>Vertical form</h2>
<p>Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
</div>
<hr>
<divclass="span9">
<h3>Checkboxes and radios</h3>
<formclass="vertical-form">
<p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.</p>
