diff options
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 1373 |
1 files changed, 665 insertions, 708 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 7ed6c68ac..ee12d62e2 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -27,84 +27,50 @@ </head> - <body> - - <div class="bs-docs-nav"> - <h3 class="bs-docs-logo"><a href="./index.html">Bootstrap</a></h3> - <ul class="bs-nav"> - <li class=""> - <a href="./scaffolding.html">Scaffolding</a> - <ul> - <li><a href="./scaffolding.html#global">Global styles</a></li> - <li><a href="./scaffolding.html#gridSystem">Grid system</a></li> - <li><a href="./scaffolding.html#fluidGridSystem">Fluid grid system</a></li> - <li><a href="./scaffolding.html#gridCustomization">Customizing</a></li> - <li><a href="./scaffolding.html#layouts">Layouts</a></li> - <li><a href="./scaffolding.html#responsive">Responsive design</a></li> - </ul> - </li> - <li class="active"> - <a href="./base-css.html">Base CSS</a> - <ul> - <li><a href="./base-css.html#typography">Typography</a></li> - <li><a href="./base-css.html#code">Code</a></li> - <li><a href="./base-css.html#tables">Tables</a></li> - <li><a href="./base-css.html#forms">Forms</a></li> - <li><a href="./base-css.html#buttons">Buttons</a></li> - <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> - </ul> - </li> - <li class=""> - <a href="./components.html">Components</a> - <ul> - <li><a href="./components.html#buttonGroups">Button groups</a></li> - <li><a href="./components.html#buttonDropdowns">Button dropdowns</a></li> - <li><a href="./components.html#navs">Nav, tabs, pills</a></li> - <li><a href="./components.html#navbar">Navbar</a></li> - <li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li> - <li><a href="./components.html#pagination">Pagination</a></li> - <li><a href="./components.html#labels">Labels</a></li> - <li><a href="./components.html#badges">Badges</a></li> - <li><a href="./components.html#typography">Typography</a></li> - <li><a href="./components.html#thumbnails">Thumbnails</a></li> - <li><a href="./components.html#alerts">Alerts</a></li> - <li><a href="./components.html#progress">Progress bars</a></li> - <li><a href="./components.html#misc">Miscellaneous</a></li> - </ul> - </li> - <li class=""> - <a href="./javascript.html">Javascript</a> - <ul> - <li><a href="./javascript.html#javascript">All plugins</a></li> - <li><a href="./javascript.html#modals">Modal</a></li> - <li><a href="./javascript.html#dropdowns">Dropdown</a></li> - <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> - <li><a href="./javascript.html#tabs">Tab</a></li> - <li><a href="./javascript.html#tooltips">Tooltip</a></li> - <li><a href="./javascript.html#popovers">Popover</a></li> - <li><a href="./javascript.html#alerts">Alert</a></li> - <li><a href="./javascript.html#buttons">Button</a></li> - <li><a href="./javascript.html#collapse">Collapse</a></li> - <li><a href="./javascript.html#carousel">Carousel</a></li> - <li><a href="./javascript.html#typeahead">Typeahead</a></li> - </ul> - </li> - <li class=""> - <a href="./less.html">LESS</a> - <ul> - <li><a href="./less.html#builtWith">Built with Less</a></li> - <li><a href="./less.html#variables">Variables</a></li> - <li><a href="./less.html#mixins">Mixins</a></li> - <li><a href="./less.html#compiling">Compiling Bootstrap</a></li> - </ul> - </li> - <li class=""> - <a href="./download.html">Customize</a> - </li> - <li class=""> - <a href="./examples.html">Examples</a> - </li> - </ul> + <body data-spy="scroll" data-target=".subnav" data-offset="50"> + + <!-- Navbar + ================================================== --> + <div class="navbar navbar-fixed-top"> + <div class="navbar-inner"> + <div class="bs-docs-container"> + <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="brand" href="./index.html">Bootstrap</a> + <div class="nav-collapse collapse"> + <ul class="nav"> + <li class=""> + <a href="./index.html">Home</a> + </li> + <li class=""> + <a href="./scaffolding.html">Scaffolding</a> + </li> + <li class="active"> + <a href="./base-css.html">Base CSS</a> + </li> + <li class=""> + <a href="./components.html">Components</a> + </li> + <li class=""> + <a href="./javascript.html">Javascript</a> + </li> + <li class=""> + <a href="./less.html">LESS</a> + </li> + <li class="divider-vertical"></li> + <li class=""> + <a href="./download.html">Customize</a> + </li> + <li class=""> + <a href="./examples.html">Examples</a> + </li> + </ul> + </div> + </div> + </div> </div> <div class="bs-docs-container"> @@ -114,6 +80,16 @@ <header class="jumbotron subhead" id="overview"> <h1>Base CSS</h1> <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p> + <div class="subnav"> + <ul class="nav nav-pills"> + <li><a href="#typography">Typography</a></li> + <li><a href="#code">Code</a></li> + <li><a href="#tables">Tables</a></li> + <li><a href="#forms">Forms</a></li> + <li><a href="#buttons">Buttons</a></li> + <li><a href="#icons">Icons by Glyphicons</a></li> + </ul> + </div> </header> @@ -448,19 +424,6 @@ For example, <code>section</code> should be wrapped as inline. </pre> <p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p> <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p> - - <h2>Google Prettify</h2> - <p>Take the same <code><pre></code> element and add two optional classes for enhanced rendering.</p> -<pre class="prettyprint linenums" style="margin-bottom: 9px;"> -<p>Sample text here...</p> -</pre> -<pre class="prettyprint linenums" style="margin-bottom: 9px;"> -<pre class="prettyprint - linenums"> - &lt;p&gt;Sample text here...&lt;/p&gt; -</pre> -</pre> - <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p> </section> @@ -472,148 +435,8 @@ For example, <code>section</code> should be wrapped as inline. <h1>Tables <small>For, you guessed it, tabular data</small></h1> </div> - <h2>Table markup</h2> - - <table class="table table-bordered table-striped"> - <colgroup> - <col class="span1"> - <col class="span7"> - </colgroup> - <thead> - <tr> - <th>Tag</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <code><table></code> - </td> - <td> - Wrapping element for displaying data in a tabular format - </td> - </tr> - <tr> - <td> - <code><thead></code> - </td> - <td> - Container element for table header rows (<code><tr></code>) to label table columns - </td> - </tr> - <tr> - <td> - <code><tbody></code> - </td> - <td> - Container element for table rows (<code><tr></code>) in the body of the table - </td> - </tr> - <tr> - <td> - <code><tr></code> - </td> - <td> - Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row - </td> - </tr> - <tr> - <td> - <code><td></code> - </td> - <td> - Default table cell - </td> - </tr> - <tr> - <td> - <code><th></code> - </td> - <td> - Special table cell for column (or row, depending on scope and placement) labels<br> - Must be used within a <code><thead></code> - </td> - </tr> - <tr> - <td> - <code><caption></code> - </td> - <td> - Description or summary of what the table holds, especially useful for screen readers - </td> - </tr> - </tbody> - </table> -<pre class="prettyprint linenums"> -<table> - <thead> - <tr> - <th>…</th> - <th>…</th> - </tr> - </thead> - <tbody> - <tr> - <td>…</td> - <td>…</td> - </tr> - </tbody> -</table> -</pre> - - - <h2>Table options</h2> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th>Name</th> - <th>Class</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>Default</td> - <td class="muted">None</td> - <td>No styles, just columns and rows</td> - </tr> - <tr> - <td>Basic</td> - <td> - <code>.table</code> - </td> - <td>Only horizontal lines between rows</td> - </tr> - <tr> - <td>Bordered</td> - <td> - <code>.table-bordered</code> - </td> - <td>Rounds corners and adds outer border</td> - </tr> - <tr> - <td>Zebra-stripe</td> - <td> - <code>.table-striped</code> - </td> - <td>Adds light gray background color to odd rows (1, 3, 5, etc)</td> - </tr> - <tr> - <td>Condensed</td> - <td> - <code>.table-condensed</code> - </td> - <td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td> - </tr> - </tbody> - </table> - - - <h2>Example tables</h2> - - <h3>1. Default table styles</h3> - <p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p> + <h2>Default styles</h2> + <p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>.</p> <div class="bs-docs-example"> <table class="table"> <thead> @@ -652,9 +475,15 @@ For example, <code>section</code> should be wrapped as inline. </table> </pre> - <h3>2. Striped table</h3> - <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.</p> - <p class="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p> + + <hr class="bs-docs-separator"> + + + <h2>Optional classes</h2> + <p>Add any of the follow classes to the <code>.table</code> base class.</p> + + <h3><code>.table-striped</code></h3> + <p>Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).</p> <div class="bs-docs-example"> <table class="table table-striped"> <thead> @@ -693,9 +522,8 @@ For example, <code>section</code> should be wrapped as inline. </table> </pre> - - <h3>3. Bordered table</h3> - <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p> + <h3><code>.table-bordered</code></h3> + <p>Add borders and rounded corners to the table.</p> <div class="bs-docs-example"> <table class="table table-bordered"> <thead> @@ -738,8 +566,8 @@ For example, <code>section</code> should be wrapped as inline. </table> </pre> - <h3>4. Condensed table</h3> - <p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).</p> + <h3><code>.table-condensed</code></h3> + <p>Makes tables more compact by cutting cell padding in half.</p> <div class="bs-docs-example"> <table class="table table-condensed"> <thead> @@ -778,104 +606,115 @@ For example, <code>section</code> should be wrapped as inline. </pre> - <h3>5. Combine them all!</h3> - <p>Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.</p> - <div class="bs-docs-example"> - <table class="table table-striped table-bordered table-condensed"> - <thead> - <tr> - <th></th> - <th colspan="2">Full name</th> - <th></th> - </tr> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> - </tr> - </thead> - <tbody> - <tr> - <tr> - <td>1</td> - <td>Mark</td> - <td>Otto</td> - <td>@mdo</td> - </tr> - <tr> - <td>2</td> - <td>Jacob</td> - <td>Thornton</td> - <td>@fat</td> - </tr> - <tr> - <td>3</td> - <td colspan="2">Larry the Bird</td> - <td>@twitter</td> - </tr> - </tbody> - </table> - </div> -<pre class="prettyprint linenums" style="margin-bottom: 18px;"> -<table class="table table-striped table-bordered table-condensed"> - ... -</table> -</pre> - -</section> - + <hr class="bs-docs-separator"> -<!-- Forms -================================================== --> -<section id="forms"> - <div class="page-header"> - <h1>Forms</h1> - </div> - - <h2>Controls and layouts</h2> - <p>Forms include styles for all the base form controls like <code>input</code>, <code>textarea</code>, and <code>select</code> you'd expect. There are also a number of custom components like appended and prepended inputs and support for lists of checkboxes.</p> - <p>Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.</p> - <p>Error, warning, and success states are included for form controls, as wel as disabled.</p> + <h2>Supported table markup</h2> + <p>List of supported table HTML elements and how they should be used.</p> <table class="table table-bordered table-striped"> + <colgroup> + <col class="span1"> + <col class="span7"> + </colgroup> <thead> <tr> - <th>Name</th> - <th>Class</th> + <th>Tag</th> <th>Description</th> </tr> </thead> <tbody> <tr> - <th>Vertical (default)</th> - <td><code>.form-vertical</code> <span class="muted">(not required)</span></td> - <td>Stacked, left-aligned labels over controls</td> + <td> + <code><table></code> + </td> + <td> + Wrapping element for displaying data in a tabular format + </td> + </tr> + <tr> + <td> + <code><thead></code> + </td> + <td> + Container element for table header rows (<code><tr></code>) to label table columns + </td> </tr> <tr> - <th>Inline</th> - <td><code>.form-inline</code></td> - <td>Left-aligned label and inline-block controls for compact style</td> + <td> + <code><tbody></code> + </td> + <td> + Container element for table rows (<code><tr></code>) in the body of the table + </td> </tr> <tr> - <th>Search</th> - <td><code>.form-search</code></td> - <td>Extra-rounded text input for a typical search aesthetic</td> + <td> + <code><tr></code> + </td> + <td> + Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row + </td> + </tr> + <tr> + <td> + <code><td></code> + </td> + <td> + Default table cell + </td> + </tr> + <tr> + <td> + <code><th></code> + </td> + <td> + Special table cell for column (or row, depending on scope and placement) labels<br> + Must be used within a <code><thead></code> + </td> </tr> <tr> - <th>Horizontal</th> - <td><code>.form-horizontal</code></td> - <td>Float left, right-aligned labels on same line as controls</td> + <td> + <code><caption></code> + </td> + <td> + Description or summary of what the table holds, especially useful for screen readers + </td> </tr> </tbody> </table> +<pre class="prettyprint linenums"> +<table> + <thead> + <tr> + <th>…</th> + <th>…</th> + </tr> + </thead> + <tbody> + <tr> + <td>…</td> + <td>…</td> + </tr> + </tbody> +</table> +</pre> + +</section> + + + +<!-- Forms +================================================== --> +<section id="forms"> + <div class="page-header"> + <h1>Forms</h1> + </div> - <h2>Example forms <small>using just form controls, no extra markup</small></h2> - <h3>Basic form</h3> - <p>Smart and lightweight defaults without extra markup.</p> + <h2>Default styles</h2> + <p>Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p> <form class="bs-docs-example"> <label>Label name</label> - <input type="text" class="span3" placeholder="Type something…"> + <input type="text" placeholder="Type something…"> <p class="help-block">Example block-level help text here.</p> <label class="checkbox"> <input type="checkbox"> Check me out @@ -885,7 +724,7 @@ For example, <code>section</code> should be wrapped as inline. <pre class="prettyprint linenums"> <form class="well"> <label>Label name</label> - <input type="text" class="span3" placeholder="Type something…"> + <input type="text" placeholder="Type something…"> <span class="help-block">Example block-level help text here.</span> <label class="checkbox"> <input type="checkbox"> Check me out @@ -894,21 +733,28 @@ For example, <code>section</code> should be wrapped as inline. </form> </pre> + + <hr class="bs-docs-separator"></hr> + + + <h2>Optional layouts</h2> + <p>Included with Bootstrap are three optional form layouts for common use cases.</p> + <h3>Search form</h3> - <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p> + <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code><input></code> for an extra-rounded text input.</p> <form class="bs-docs-example form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form> <pre class="prettyprint linenums"> -<form class="well form-search"> +<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form> </pre> <h3>Inline form</h3> - <p>Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.</p> + <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p> <form class="bs-docs-example form-inline"> <input type="text" class="input-small" placeholder="Email"> <input type="password" class="input-small" placeholder="Password"> @@ -918,7 +764,7 @@ For example, <code>section</code> should be wrapped as inline. <button type="submit" class="btn">Sign in</button> </form> <pre class="prettyprint linenums"> -<form class="well form-inline"> +<form class="form-inline"> <input type="text" class="input-small" placeholder="Email"> <input type="password" class="input-small" placeholder="Password"> <label class="checkbox"> @@ -928,331 +774,424 @@ For example, <code>section</code> should be wrapped as inline. </form> </pre> - <br> - - <h2>Horizontal forms</h2> - <p>Shown on the right are all the default form controls we support. Here's the bulleted list:</p> + <h3>Horizontal form</h3> + <p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</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> + <li>Add <code>.form-horizontal</code> to the form</li> + <li>Wrap labels and controls in <code>.control-group</code></li> + <li>Add <code>.control-label</code> to the label</li> + <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li> </ul> - - <form class="form-horizontal"> - <fieldset> - <div class="control-group"> - <label class="control-label" for="input01">Text input</label> - <div class="controls"> - <input type="text" class="input-xlarge" id="input01"> - <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="optionsCheckbox">Checkbox</label> - <div class="controls"> - <label class="checkbox"> - <input type="checkbox" id="optionsCheckbox" value="option1"> - Option one is this and that—be sure to include why it's great - </label> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="select01">Select list</label> - <div class="controls"> - <select id="select01"> - <option>something</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="multiSelect">Multicon-select</label> - <div class="controls"> - <select multiple="multiple" id="multiSelect"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="fileInput">File input</label> - <div class="controls"> - <input class="input-file" id="fileInput" type="file"> - </div> + <form class="bs-docs-example form-horizontal"> + <div class="control-group"> + <label class="control-label" for="">Email</label> + <div class="controls"> + <input type="text" placeholder="Email"> </div> - <div class="control-group"> - <label class="control-label" for="textarea">Textarea</label> - <div class="controls"> - <textarea class="input-xlarge" id="textarea" rows="3"></textarea> - </div> + </div> + <div class="control-group"> + <label class="control-label" for="">Password</label> + <div class="controls"> + <input type="password" placeholder="Password"> </div> - <div class="form-actions"> - <button type="submit" class="btn btn-primary">Save changes</button> - <button class="btn">Cancel</button> + </div> + <div class="control-group"> + <div class="controls"> + <label class="checkbox"> + <input type="checkbox"> Remember me + </label> + <button type="submit" class="btn">Sign in</button> </div> - </fieldset> + </div> </form> - <h3>Example markup</h3> - <p>Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.</p> <pre class="prettyprint linenums"> <form class="form-horizontal"> - <fieldset> - <legend>Legend text</legend> - <div class="control-group"> - <label class="control-label" for="input01">Text input</label> - <div class="controls"> - <input type="text" class="input-xlarge" id="input01"> - <p class="help-block">Supporting help text</p> - </div> + <div class="control-group"> + <label class="control-label" for="">Email</label> + <div class="controls"> + <input type="text" placeholder="Email"> </div> - </fieldset> + </div> + <div class="control-group"> + <label class="control-label" for="">Password</label> + <div class="controls"> + <input type="password" placeholder="Password"> + </div> + </div> + <div class="control-group"> + <div class="controls"> + <label class="checkbox"> + <input type="checkbox"> Remember me + </label> + <button type="submit" class="btn">Sign in</button> + </div> + </div> </form> </pre> - <br> - <h2>Form control states</h2> - <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 its 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 error class to the surrounding <code>.control-group</code>.</p> + <hr class="bs-docs-separator"></hr> + + + <h2>Supported form controls</h2> + <p>Examples of standard form controls supported in an example form layout.</p> + + <h3>Inputs</h3> + <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p> + <p>Requires the use of a specified <code>type</code> at all times.</p> + <form class="bs-docs-example form-inline"> + <input type="text" placeholder="Text input"> + </form> <pre class="prettyprint linenums"> -<fieldset - class="control-group error"> - … -</fieldset> +<input type="text" placeholder="Text input"> </pre> - <form class="form-horizontal"> - <fieldset> - <div class="control-group"> - <label class="control-label" for="focusedInput">Focused input</label> - <div class="controls"> - <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…"> - </div> - </div> - <div class="control-group"> - <label class="control-label">Uneditable input</label> - <div class="controls"> - <span class="input-xlarge uneditable-input">Some value here</span> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="disabledInput">Disabled input</label> - <div class="controls"> - <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label> - <div class="controls"> - <label class="checkbox"> - <input type="checkbox" id="optionsCheckbox2" value="option1" disabled> - This is a disabled checkbox - </label> - </div> - </div> - <div class="control-group warning"> - <label class="control-label" for="inputWarning">Input with warning</label> - <div class="controls"> - <input type="text" id="inputWarning"> - <span class="help-inline">Something may have gone wrong</span> - </div> - </div> - <div class="control-group error"> - <label class="control-label" for="inputError">Input with error</label> - <div class="controls"> - <input type="text" id="inputError"> - <span class="help-inline">Please correct the error</span> - </div> - </div> - <div class="control-group success"> - <label class="control-label" for="inputSuccess">Input with success</label> - <div class="controls"> - <input type="text" id="inputSuccess"> - <span class="help-inline">Woohoo!</span> - </div> - </div> - <div class="control-group success"> - <label class="control-label" for="selectError">Select with success</label> - <div class="controls"> - <select id="selectError"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - <span class="help-inline">Woohoo!</span> - </div> - </div> - <div class="form-actions"> - <button type="submit" class="btn btn-primary">Save changes</button> - <button class="btn">Cancel</button> - </div> - </fieldset> + <h3>Textarea</h3> + <p>Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.</p> + <form class="bs-docs-example form-inline"> + <textarea rows="3"></textarea> </form> +<pre class="prettyprint linenums"> +<textarea id="textarea" rows="3"></textarea> +</pre> + + <h3>Checkboxes and radios</h3> + <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p> + <h4>Default (stacked)</h4> + <form class="bs-docs-example"> + <label class="checkbox"> + <input type="checkbox" value=""> + Option one is this and that—be sure to include why it's great + </label> + <br> + <label class="radio"> + <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> + Option one is this and that—be sure to include why it's great + </label> + <label class="radio"> + <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> + Option two can be something else and selecting it will deselect option one + </label> + </form> +<pre class="prettyprint linenums"> +<label class="checkbox"> + <input type="checkbox" value=""> + Option one is this and that—be sure to include why it's great +</label> + +<label class="radio"> + <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> + Option one is this and that—be sure to include why it's great +</label> +<label class="radio"> + <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> + Option two can be something else and selecting it will deselect option one +</label> +</pre> + + <h4>Inline checkboxes</h4> + <p>Add the <code>.inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p> + <form class="bs-docs-example"> + <label class="checkbox inline"> + <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 + </label> + <label class="checkbox inline"> + <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 + </label> + <label class="checkbox inline"> + <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 + </label> + </form> +<pre class="prettyprint linenums"> +<label class="checkbox inline"> + <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 +</label> +<label class="checkbox inline"> + <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 +</label> +<label class="checkbox inline"> + <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 +</label> +</pre> + + <h3>Selects</h3> + <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p> + <form class="bs-docs-example"> + <select> + <option>something</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + <br> + <select> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + </form> +<pre class="prettyprint linenums"> +<select> + <option>something</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> +</select> + +<select> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> +</select> +</pre> + + + <hr class="bs-docs-separator"></hr> - <br> <h2>Extending form controls</h2> - <h3>Prepend & append inputs</h3> - <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> - <hr> - <h3>Checkboxes and radios</h3> - <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> - <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p> - <hr> - <h4>Inline forms and append/prepend</h4> - <p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p> - <hr> - <h4>Form help text</h4> - <p>To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.</p> - - <form class="form-horizontal"> - <fieldset> - <div class="control-group"> - <label class="control-label">Form grid sizes</label> - <div class="controls docs-input-sizes"> - <input class="span1" type="text" placeholder=".span1"> - <input class="span2" type="text" placeholder=".span2"> - <input class="span3" type="text" placeholder=".span3"> - <select class="span1"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - <select class="span2"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - <select class="span3"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p> - </div> - </div> - <div class="control-group"> - <label class="control-label">Alternate sizes</label> - <div class="controls docs-input-sizes"> - <input class="input-mini" type="text" placeholder=".input-mini"> - <input class="input-small" type="text" placeholder=".input-small"> - <input class="input-medium" type="text" placeholder=".input-medium"> - <p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p> - </div> - </div> - <div 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="span2" id="prependedInput" size="16" type="text" placeholder="Username"> - </div> - <p class="help-block">Here's some help text</p> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="appendedInput">Appended text</label> - <div class="controls"> - <div class="input-append"> - <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> - </div> - <span class="help-inline">Here's more help text</span> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="appendedPrependedInput">Append and prepend</label> - <div class="controls"> - <div class="input-prepend input-append"> - <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span> - </div> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="appendedInputButton">Append with button</label> - <div class="controls"> - <div class="input-append"> - <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button> - </div> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="appendedInputButtons">Two-button append</label> - <div class="controls"> - <div class="input-append"> - <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> - </div> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label> - <div class="controls"> - <label class="checkbox inline"> - <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 - </label> - <label class="checkbox inline"> - <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 - </label> - <label class="checkbox inline"> - <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 - </label> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="optionsCheckboxList">Checkboxes</label> - <div class="controls"> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxList1" value="option1"> - Option one is this and that—be sure to include why it's great - </label> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxList2" value="option2"> - Option two can also be checked and included in form results - </label> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxList3" value="option3"> - Option three can—yes, you guessed it—also be checked and included in form results - </label> - <p class="help-block"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> - </div> + <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p> + + <h3>Prepended and appended inputs</h3> + <p>Add text or buttons before or after any text-based input.</p> + + <h4>Default options</h4> + <p>Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p> + <form class="bs-docs-example"> + <div class="input-prepend"> + <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"> + </div> + <br> + <div class="input-append"> + <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> + </div> + </form> +<pre class="prettyprint linenums"> +<div class="input-prepend"> + <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"> +</div> +<div class="input-append"> + <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> +</div> +</pre> + + <h4>Combined</h4> + <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p> + <form class="bs-docs-example form-inline"> + <div class="input-prepend input-append"> + <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span> + </div> + </form> +<pre class="prettyprint linenums"> +<div class="input-prepend input-append"> + <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span> +</div> +</pre> + + <h4>Buttons instead of text</h4> + <p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p> + <form class="bs-docs-example"> + <div class="input-append"> + <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button> + </div> + <br> + <div class="input-append"> + <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> + </div> + </form> +<pre class="prettyprint linenums"> +<div class="input-append"> + <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button> +</div> + +<div class="input-append"> + <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> +</div> +</pre> + + <h3>Control sizing</h3> + <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p> + + <h4>Relative sizing</h4> + <form class="bs-docs-example"> + <div class="controls docs-input-sizes"> + <input class="input-mini" type="text" placeholder=".input-mini"> + <input class="input-small" type="text" placeholder=".input-small"> + <input class="input-medium" type="text" placeholder=".input-medium"> + <input class="input-large" type="text" placeholder=".input-large"> + <input class="input-xlarge" type="text" placeholder=".input-xlarge"> + <input class="input-xxlarge" type="text" placeholder=".input-xxlarge"> + </div> + </form> +<pre class="prettyprint linenums"> +<input class="input-mini" type="text"> +<input class="input-small" type="text"> +<input class="input-medium" type="text"> +<input class="input-large" type="text"> +<input class="input-xlarge" type="text"> +<input class="input-xxlarge" type="text"> +</pre> + + <h4>Grid sizing</h4> + <p>Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.</p> + <form class="bs-docs-example"> + <div class="controls docs-input-sizes"> + <input class="span1" type="text" placeholder=".span1"> + <input class="span2" type="text" placeholder=".span2"> + <input class="span3" type="text" placeholder=".span3"> + <select class="span1"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + <select class="span2"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + <select class="span3"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + </div> + </form> +<pre class="prettyprint linenums"> +<input class="span1" type="text"> +<input class="span2" type="text"> +<input class="span3" type="text"> +</pre> + + <h3>Uneditable inputs</h3> + <p>Present data in a form that's not editable without using actual form markup.</p> + <form class="bs-docs-example"> + <span class="input-xlarge uneditable-input">Some value here</span> + </form> +<pre class="prettyprint linenums"> + <span class="input-xlarge uneditable-input">Some value here</span> +</pre> + + <h3>Form actions</h3> + <p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p> + <form class="bs-docs-example"> + <div class="form-actions"> + <button type="submit" class="btn btn-primary">Save changes</button> + <button class="btn">Cancel</button> + </div> + </form> +<pre class="prettyprint linenums"> +<div class="form-actions"> + <button type="submit" class="btn btn-primary">Save changes</button> + <button class="btn">Cancel</button> +</div> +</pre> + + <h3>Help text</h3> + <p>Inline and block level support for help text that appears around form controls.</p> + <h4>Inline help</h4> + <form class="bs-docs-example form-inline"> + <input type="text"> <span class="help-inline">Inline help text</span> + </form> +<pre class="prettyprint linenums"> +<span class="help-inline">Inline help text</span> +</pre> + + <h4>Block help</h4> + <form class="bs-docs-example form-inline"> + <input type="text"> + <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> + </form> +<pre class="prettyprint linenums"> +<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> +</pre> + + + <hr class="bs-docs-separator"></hr> + + + <h2>Form control states</h2> + <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p> + + <h3>Input focus</h3> + <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> + <form class="bs-docs-example form-inline"> + <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused..."> + </form> +<pre class="prettyprint linenums"> +<input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."> +</pre> + + <h3>Disabled inputs</h3> + <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> + <form class="bs-docs-example form-inline"> + <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> + </form> +<pre class="prettyprint linenums"> +<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> +</pre> + + <h3>Validation states</h3> + <p>Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p> + + <form class="bs-docs-example form-horizontal"> + <div class="control-group warning"> + <label class="control-label" for="inputWarning">Input with warning</label> + <div class="controls"> + <input type="text" id="inputWarning"> + <span class="help-inline">Something may have gone wrong</span> </div> - <div class="control-group"> - <label class="control-label">Radio buttons</label> - <div class="controls"> - <label class="radio"> - <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> - Option one is this and that—be sure to include why it's great - </label> - <label class="radio"> - <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> - Option two can be something else and selecting it will deselect option one - </label> - </div> + </div> + <div class="control-group error"> + <label class="control-label" for="inputError">Input with error</label> + <div class="controls"> + <input type="text" id="inputError"> + <span class="help-inline">Please correct the error</span> </div> - <div class="form-actions"> - <button type="submit" class="btn btn-primary">Save changes</button> - <button class="btn">Cancel</button> + </div> + <div class="control-group success"> + <label class="control-label" for="inputSuccess">Input with success</label> + <div class="controls"> + <input type="text" id="inputSuccess"> + <span class="help-inline">Woohoo!</span> </div> - </fieldset> + </div> </form> +<pre class="prettyprint linenums"> +<div class="control-group warning"> + <label class="control-label" for="inputWarning">Input with warning</label> + <div class="controls"> + <input type="text" id="inputWarning"> + <span class="help-inline">Something may have gone wrong</span> + </div> +</div> +<div class="control-group error"> + <label class="control-label" for="inputError">Input with error</label> + <div class="controls"> + <input type="text" id="inputError"> + <span class="help-inline">Please correct the error</span> + </div> +</div> +<div class="control-group success"> + <label class="control-label" for="inputSuccess">Input with success</label> + <div class="controls"> + <input type="text" id="inputSuccess"> + <span class="help-inline">Woohoo!</span> + </div> +</div> +</pre> + </section> @@ -1263,6 +1202,9 @@ For example, <code>section</code> should be wrapped as inline. <div class="page-header"> <h1>Buttons</h1> </div> + + <h2>Default buttons</h2> + <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code><a></code> and <code><button></code> elements for the best rendering.</p> <table class="table table-bordered table-striped"> <thead> <tr> @@ -1310,13 +1252,14 @@ For example, <code>section</code> should be wrapped as inline. </tbody> </table> - <h3>Buttons for actions</h3> - <p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p> - <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code><a></code> and <code><button></code> elements.</p> - <h3>Cross browser compatibility</h3> + <h4>Cross browser compatibility</h4> <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p> - <h3>Multiple sizes</h3> + + <hr class="bs-docs-separator"> + + + <h2>Button sizes</h2> <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p> <p> <button class="btn btn-large btn-primary">Primary action</button> @@ -1330,29 +1273,51 @@ For example, <code>section</code> should be wrapped as inline. <button class="btn btn-mini btn-primary">Primary action</button> <button class="btn btn-mini">Action</button> </p> - <br> - <h3>Disabled state</h3> - <p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code><button></code> elements.</p> - <p> + + + <hr class="bs-docs-separator"> + + + <h2>Disabled state</h2> + <p>Make buttons look unclickable by fading them back 50%.</p> + + <h3>Anchor element</h3> + <p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p> + <p class="bs-docs-example"> <a href="#" class="btn btn-large btn-primary disabled">Primary link</a> <a href="#" class="btn btn-large disabled">Link</a> </p> - <p style="margin-bottom: 18px;"> - <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button> - <button class="btn btn-large" disabled>Button</button> - </p> +<pre class="prettyprint linenums"> +<a href="#" class="btn btn-large btn-primary disabled">Primary link</a> +<a href="#" class="btn btn-large disabled">Link</a> +</pre> <p> <span class="label label-info">Heads up!</span> We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. </p> - <h3>One class, multiple tags</h3> + <h3>Button element</h3> + <p>Add the <code>disabled</code> attribute to <code><button></code> buttons.</p> + <p class="bs-docs-example"> + <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button> + <button class="btn btn-large" disabled>Button</button> + </p> +<pre class="prettyprint linenums"> +<button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button> +<button class="btn btn-large" disabled>Button</button> +</pre> + + + <hr class="bs-docs-separator"> + + + <h2>One class, multiple tags</h2> <p>Use the <code>.btn</code> class on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p> -<form> -<a class="btn" href="">Link</a> -<button class="btn" type="submit">Button</button> -<input class="btn" type="button" value="Input"> -<input class="btn" type="submit" value="Submit"> +<form class="bs-docs-example"> + <a class="btn" href="">Link</a> + <button class="btn" type="submit">Button</button> + <input class="btn" type="button" value="Input"> + <input class="btn" type="submit" value="Submit"> </form> <pre class="prettyprint linenums"> <a class="btn" href="">Link</a> @@ -1376,6 +1341,9 @@ For example, <code>section</code> should be wrapped as inline. <div class="page-header"> <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1> </div> + + <h2>Icon glyphs</h2> + <p>140 icons in sprite form, available in dark gray (default) and white, provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a>.</p> <div class="row"> <div class="span2"> <ul class="the-icons"> @@ -1407,6 +1375,10 @@ For example, <code>section</code> should be wrapped as inline. <li><i class="icon-download"></i> icon-download</li> <li><i class="icon-upload"></i> icon-upload</li> <li><i class="icon-inbox"></i> icon-inbox</li> + </ul> + </div> + <div class="span2"> + <ul class="the-icons"> <li><i class="icon-play-circle"></i> icon-play-circle</li> <li><i class="icon-repeat"></i> icon-repeat</li> <li><i class="icon-refresh"></i> icon-refresh</li> @@ -1414,10 +1386,6 @@ For example, <code>section</code> should be wrapped as inline. <li><i class="icon-lock"></i> icon-lock</li> <li><i class="icon-flag"></i> icon-flag</li> <li><i class="icon-headphones"></i> icon-headphones</li> - </ul> - </div> - <div class="span2"> - <ul class="the-icons"> <li><i class="icon-volume-off"></i> icon-volume-off</li> <li><i class="icon-volume-down"></i> icon-volume-down</li> <li><i class="icon-volume-up"></i> icon-volume-up</li> @@ -1439,6 +1407,10 @@ For example, <code>section</code> should be wrapped as inline. <li><i class="icon-align-right"></i> icon-align-right</li> <li><i class="icon-align-justify"></i> icon-align-justify</li> <li><i class="icon-list"></i> icon-list</li> + </ul> + </div> + <div class="span2"> + <ul class="the-icons"> <li><i class="icon-indent-left"></i> icon-indent-left</li> <li><i class="icon-indent-right"></i> icon-indent-right</li> <li><i class="icon-facetime-video"></i> icon-facetime-video</li> @@ -1453,10 +1425,6 @@ For example, <code>section</code> should be wrapped as inline. <li><i class="icon-move"></i> icon-move</li> <li><i class="icon-step-backward"></i> icon-step-backward</li> <li><i class="icon-fast-backward"></i> icon-fast-backward</li> - </ul> - </div> - <div class="span2"> - <ul class="the-icons"> <li><i class="icon-backward"></i> icon-backward</li> <li><i class="icon-play"></i> icon-play</li> <li><i class="icon-pause"></i> icon-pause</li> @@ -1471,6 +1439,10 @@ For example, <code>section</code> should be wrapped as inline. <li><i class="icon-minus-sign"></i> icon-minus-sign</li> <li><i class="icon-remove-sign"></i> icon-remove-sign</li> <li><i class="icon-ok-sign"></i> icon-ok-sign</li> + </ul> + </div> + <div class="span2"> + <ul class="the-icons"> <li><i class="icon-question-sign"></i> icon-question-sign</li> <li><i class="icon-info-sign"></i> icon-info-sign</li> <li><i class="icon-screenshot"></i> icon-screenshot</li> @@ -1492,10 +1464,6 @@ For example, <code>section</code> should be wrapped as inline. <li><i class="icon-leaf"></i> icon-leaf</li> <li><i class="icon-fire"></i> icon-fire</li> <li><i class="icon-eye-open"></i> icon-eye-open</li> - </ul> - </div> - <div class="span2"> - <ul class="the-icons"> <li><i class="icon-eye-close"></i> icon-eye-close</li> <li><i class="icon-warning-sign"></i> icon-warning-sign</li> <li><i class="icon-plane"></i> icon-plane</li> @@ -1503,6 +1471,10 @@ For example, <code>section</code> should be wrapped as inline. <li><i class="icon-random"></i> icon-random</li> <li><i class="icon-comment"></i> icon-comment</li> <li><i class="icon-magnet"></i> icon-magnet</li> + </ul> + </div> + <div class="span2"> + <ul class="the-icons"> <li><i class="icon-chevron-up"></i> icon-chevron-up</li> <li><i class="icon-chevron-down"></i> icon-chevron-down</li> <li><i class="icon-retweet"></i> icon-retweet</li> @@ -1535,16 +1507,12 @@ For example, <code>section</code> should be wrapped as inline. </div> </div> - <br> + <hr class="bs-docs-separator"> - <h3>Built as a sprite</h3> - <p>Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p> - <p>All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.</p> - <p><a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.</p> - <h3>How to use</h3> - <p>Bootstrap uses an <code><i></code> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:</p> + <h2>How to use</h2> + <p>All icons require an <code><i></code> tag with a unique class, prefixed with <code>icon-</code>. To use, place the following code just about anywhere:</p> <pre class="prettyprint linenums"> <i class="icon-search"></i> </pre> @@ -1552,66 +1520,55 @@ For example, <code>section</code> should be wrapped as inline. <pre class="prettyprint linenums"> <i class="icon-search icon-white"></i> </pre> - <p>There are 140 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p> <p> <span class="label label-info">Heads up!</span> When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code><i></code> tag for proper spacing. </p> - <h3>Use cases</h3> - <p>Icons are great, but where would one use them? Here are a few ideas:</p> - <ul> - <li>As visuals for your sidebar navigation</li> - <li>For a purely icon-driven navigation</li> - <li>For buttons to help convey the meaning of an action</li> - <li>With links to share context on a user's destination</li> - </ul> - <p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p> + + <hr class="bs-docs-separator"> - <h3>Examples</h3> + <h2>Icon examples</h2> <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> - <div class="btn-toolbar" style="margin-bottom: 9px"> - <div class="btn-group"> - <a class="btn" href="#"><i class="icon-align-left"></i></a> - <a class="btn" href="#"><i class="icon-align-center"></i></a> - <a class="btn" href="#"><i class="icon-align-right"></i></a> - <a class="btn" href="#"><i class="icon-align-justify"></i></a> + <h4>Buttons</h4> + <div class="bs-docs-example"> + <div class="btn-toolbar" style="margin-bottom: 9px"> + <div class="btn-group"> + <a class="btn" href="#"><i class="icon-align-left"></i></a> + <a class="btn" href="#"><i class="icon-align-center"></i></a> + <a class="btn" href="#"><i class="icon-align-right"></i></a> + <a class="btn" href="#"><i class="icon-align-justify"></i></a> + </div> + <div class="btn-group"> + <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a> + <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> + <li><a href="#"><i class="icon-trash"></i> Delete</a></li> + <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> + <li class="divider"></li> + <li><a href="#"><i class="i"></i> Make admin</a></li> + </ul> + </div> </div> - <div class="btn-group"> - <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a> - <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> - <li><a href="#"><i class="icon-trash"></i> Delete</a></li> - <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> - <li class="divider"></li> - <li><a href="#"><i class="i"></i> Make admin</a></li> + </div> + + <h4>Navigation</h4> + <div class="bs-docs-example"> + <div class="well" style="padding: 8px 0; margin-bottom: 0;"> + <ul class="nav nav-list"> + <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> + <li><a href="#"><i class="icon-book"></i> Library</a></li> + <li><a href="#"><i class="icon-pencil"></i> Applications</a></li> + <li><a href="#"><i class="i"></i> Misc</a></li> </ul> </div> </div> - <p> - <a class="btn" href="#"><i class="icon-refresh"></i> Refresh</a> - <a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Checkout</a> - <a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i> Delete</a> - </p> - <p> - <a class="btn btn-large" href="#"><i class="icon-comment"></i> Comment</a> - <a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a> - <a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> More Info</a> - </p> - - <div class="well" style="padding: 8px 0;"> - <ul class="nav nav-list"> - <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> - <li><a href="#"><i class="icon-book"></i> Library</a></li> - <li><a href="#"><i class="icon-pencil"></i> Applications</a></li> - <li><a href="#"><i class="i"></i> Misc</a></li> - </ul> - </div> <!-- /well --> - <form> + <h4>Form fields</h4> + <form class="bs-docs-example form-horizontal"> <div class="control-group"> <label class="control-label" for="inputIcon">Email address</label> <div class="controls"> @@ -1634,7 +1591,7 @@ For example, <code>section</code> should be wrapped as inline. <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> - </div><!-- /container --> + </div> |