base-css.html

      <form class="well form-search">
        <input type="text" class="input-small" placeholder="Email">
        <input type="password" class="input-small" placeholder="Password">
        <button type="submit" class="btn">Go</button>
      </form>
    </div>
  </div><!-- /row -->

  <br>

  <h2>Horizontal forms</h2>
  <div class="row">
    <div class="span8">
      <form class="form-horizontal">
        <legend>Controls Bootstrap supports</legend>
        <fieldset class="control-group">
          <label class="control-label" for="input01">Text input</label>
          <div class="controls">
            <input type="text" class="xlarge" name="input01">
            <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
          </div>
        </fieldset>
        <fieldset class="control-group">
          <label class="control-label" for="optionsCheckbox">Checkbox</label>
          <div class="controls">
            <label class="checkbox">
              <input type="checkbox" name="optionsCheckbox" value="option1">
              Option one is this and that&mdash;be sure to include why it’s great
            </label>
          </div>
        </fieldset>
        <fieldset class="control-group">
          <label class="control-label" for="select01">Select list</label>
          <div class="controls">
            <select name="select01">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </fieldset>
        <fieldset class="control-group">
          <label class="control-label" for="multiSelect">Multi-select</label>
          <div class="controls">
            <select multiple="multiple" name="multiSelect">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </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">
          <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="form-actions">
          <button type="submit" class="btn primary">Save changes</button>
          <button type="reset" class="btn">Cancel</button>
        </fieldset>
      </form>
    </div>
    <div class="span4">
      <div class="form-docs">
        <h3>What's included</h3>
        <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>
      </div>
    </div>
  </div>

  <br>

  <div class="row">
    <div class="span8">
      <form class="form-horizontal">
        <legend>Form control states</legend>
        <fieldset class="control-group">
          <label class="control-label" for="focusedInput">Focused input</label>
          <div class="controls">
            <input class="input-xlarge focused" id="focusedInput" name="focusedInput" type="text" value="This is focused...">
          </div>
        </fieldset>
        <fieldset class="control-group">
          <label class="control-label" for="disabledInput">Disabled input</label>
          <div class="controls">
            <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" type="text" placeholder="Disabled input here..." disabled>
          </div>
        </fieldset>
        <fieldset class="control-group">
          <label class="control-label" for="optionsCheckbox">Disabled checkbox</label>
          <div class="controls">
            <label class="checkbox">
              <input type="checkbox" name="optionsCheckbox" value="option1" disabled>
              This is a disabled checkbox
            </label>
          </div>
        </fieldset>
        <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 success">
          <label class="control-label" for="inputError">Input with success</label>
          <div class="controls">
            <input type="text" name="inputError">
            <span class="help-inline">Woohoo!</span>
          </div>
        </fieldset>
        <fieldset class="form-actions">
          <button type="submit" class="btn primary">Save changes</button>
          <button type="reset" class="btn">Cancel</button>
        </fieldset>
      </form>
    </div>
    <div class="span4">
      <div class="form-docs">
        <h3>Redesigned browser states</h3>
        <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>
<pre class="prettyprint linenums">
&lt;fieldset
  class="control-group error"&gt;
  ...
&lt;/fieldset&gt;
</pre>
      </div>
    </div>
  </div>

  <br>

  <div class="row">
    <div class="span8">
      <form class="form-horizontal">
        <legend>Extending form controls</legend>
        <fieldset class="control-group">
          <label class="control-label">Form sizes</label>
          <div class="controls docs-input-sizes">
            <input class="span2" type="text" name="" placeholder=".span2">
            <input class="span3" type="text" name="" placeholder=".span3">
            <input class="span4" type="text" name="" placeholder=".span4">
            <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</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="span2" id="prependedInput" name="prependedInput" size="16" type="text">
            </div>
            <p class="help-block">Here's some help text</p>
          </div>
        </fieldset>
        <fieldset class="control-group">
          <label class="control-label" for="appendedInput">Appended text</label>
          <div class="controls">
            <div class="input-append">
              <input class="span2" id="appendedInput" name="appendedInput" size="16" type="text">
              <span class="add-on">.00</span>
            </div>
            <p class="help-block">Here's more help text</p>
          </div>
        </fieldset>
        <fieldset class="control-group">
          <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
          <div class="controls">
            <label class="checkbox inline">
              <input type="checkbox" name="inlineCheckbox1" value="option1"> 1
            </label>
            <label class="checkbox inline">
              <input type="checkbox" name="inlineCheckbox1" value="option1"> 2
            </label>
            <label class="checkbox inline">
              <input type="checkbox" name="inlineCheckbox1" value="option1"> 3
            </label>
          </div>
        </fieldset>
        <fieldset class="control-group">
          <label class="control-label" for="optionsCheckboxes">Checkboxes</label>
          <div class="controls">
            <label class="checkbox">
              <input type="checkbox" name="optionsCheckboxes" value="option1">
              Option one is this and that&mdash;be sure to include why it’s great
            </label>
            <label class="checkbox">
              <input type="checkbox" name="optionsCheckboxes" value="option2">
              Option two can also be checked and included in form results
            </label>
            <label class="checkbox">
              <input type="checkbox" name="optionsCheckboxes" value="option3">
              Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results
            </label>
            <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
          </div>
        </fieldset>
        <fieldset class="control-group">
          <label class="control-label" for="optionsRadios">Radio buttons</label>
          <div class="controls">
            <label class="radio">
              <input type="radio" checked name="optionsRadios" value="option1">
              Option one is this and that&mdash;be sure to include why it’s great
            </label>
            <label class="radio">
              <input type="radio" name="optionsRadios" value="option2">
              Option two can is something else and selecting it will deselect option one
            </label>
          </div>
        </fieldset>
        <fieldset class="form-actions">
          <button type="submit" class="btn primary">Save changes</button>
          <button type="reset" class="btn">Cancel</button>
        </fieldset>
      </form>
    </div>
    <div class="span4">
      <div class="form-docs">
        <h3>Prepend &amp; append inputs</h3>
        <p>Input groups&mdash;with appended or prepended text&mdash;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>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</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>
      </div>
    </div>
  </div><!-- /row -->
</section>



<section id="buttons">
  <div class="page-header">
    <h1>Buttons</h1>
  </div>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Button</th>
        <th>Class</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a class="btn" href="#">Default</a></td>
        <td><code>.btn</code></td>
        <td>Standard gray button with gradient</td>
      </tr>
      <tr>
        <td><a class="btn primary" href="#">Primary</a></td>
        <td><code>.primary</code></td>
        <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
      </tr>
      <tr>
        <td><a class="btn info" href="#">Info</a></td>
        <td><code>.info</code></td>
        <td>Used as an alternate to the default styles</td>
      </tr>
      <tr>
        <td><a class="btn success" href="#">Success</a></td>
        <td><code>.success</code></td>
        <td>Indicates a successful or positive action</td>
      </tr>
      <tr>
        <td><a class="btn danger" href="#">Danger</a></td>
        <td><code>.danger</code></td>
        <td>Indicates a dangerous or potentially negative action</td>
      </tr>
    </tbody>
  </table>

  <div class="row">
    <div class="span4">
      <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>
    </div>
    <div class="span4">
      <h3>For anchors and forms</h3>
      <p>Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you’ll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p>
    </div>
    <div class="span4">
      <p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> elements for consistency.</p>
    </div>
  </div>

  <div class="row">
    <div class="span4">
      <h3>Multiple sizes</h3>
      <p>Fancy larger or smaller buttons? Have at it!</p>
      <p>
        <a href="#" class="btn large primary">Primary action</a>
        <a href="#" class="btn large">Action</a>
      </p>
      <p>
        <a href="#" class="btn small primary">Primary action</a>
        <a href="#" class="btn small">Action</a>
      </p>
    </div>
    <div class="span8">
      <h3>Disabled state</h3>
      <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
      <p>
        <a href="#" class="btn large primary disabled">Primary action</a>
        <a href="#" class="btn large disabled">Action</a>
      </p>
      <p>
        <button class="btn large primary disabled" disabled="disabled">Primary action</button>&nbsp;<button class="btn large" disabled>Action</button>
      </p>
    </div>
  </div>

  <br>

</section>



<!-- Icons
================================================== -->
<section id="icons">
  <div class="page-header">
    <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
  </div>
  <div class="row">
    <div class="span2">
      <div class="the-icons">
        <i class="glass"></i>
        <i class="music"></i>
        <i class="search"></i>
        <i class="envelope"></i>
        <i class="heart"></i>
        <i class="star"></i>
        <i class="star-empty"></i>
        <i class="user"></i>
        <i class="film"></i>
        <i class="th-large"></i>
        <i class="th"></i>
        <i class="th-list"></i>
        <i class="ok"></i>
        <i class="remove"></i>
        <i class="zoom-in"></i>
        <i class="zoom-out"></i>
        <i class="off"></i>
        <i class="signal"></i>
        <i class="cog"></i>
        <i class="trash"></i>
      </div>
    </div>
    <div class="span2">
      <div class="the-icons">
        <i class="home"></i>
        <i class="file"></i>
        <i class="time"></i>
        <i class="road"></i>
        <i class="download-alt"></i>
        <i class="download"></i>
        <i class="upload"></i>
        <i class="inbox"></i>
        <i class="play-circle"></i>
        <i class="repeat"></i>
        <i class="refresh"></i>
        <i class="calendar"></i>
        <i class="lock"></i>
        <i class="flag"></i>
        <i class="headphones"></i>
        <i class="volume-off"></i>
        <i class="volume-down"></i>
        <i class="volume-up"></i>
        <i class="qrcode"></i>
        <i class="barcode"></i>
      </div>
    </div>
    <div class="span2">
      <div class="the-icons">
        <i class="tag"></i>
        <i class="tags"></i>
        <i class="book"></i>
        <i class="bookmark"></i>
        <i class="print"></i>
        <i class="camera"></i>
        <i class="font"></i>
        <i class="bold"></i>
        <i class="italic"></i>
        <i class="text-height"></i>
        <i class="text-width"></i>
        <i class="align-left"></i>
        <i class="align-center"></i>
        <i class="align-right"></i>
        <i class="align-justify"></i>
        <i class="list"></i>
        <i class="indent-left"></i>
        <i class="indent-right"></i>
        <i class="facetime-video"></i>
        <i class="picture"></i>
      </div>
    </div>
    <div class="span2">
      <div class="the-icons">
        <i class="pencil"></i>
        <i class="map-marker"></i>
        <i class="adjust"></i>
        <i class="tint"></i>
        <i class="edit"></i>
        <i class="share"></i>
        <i class="check"></i>
        <i class="move"></i>
        <i class="step-backward"></i>
        <i class="fast-backward"></i>
        <i class="backward"></i>
        <i class="play"></i>
        <i class="pause"></i>
        <i class="stop"></i>
        <i class="forward"></i>
        <i class="fast-forward"></i>
        <i class="step-forward"></i>
        <i class="eject"></i>
        <i class="chevron-left"></i>
        <i class="chevron-right"></i>
      </div>
    </div>
    <div class="span2">
      <div class="the-icons">
        <i class="arrow-left"></i>
        <i class="arrow-right"></i>
        <i class="arrow-up"></i>
        <i class="arrow-down"></i>
        <i class="share-alt"></i>
        <i class="resize-full"></i>
        <i class="resize-small"></i>
        <i class="plus"></i>
        <i class="minus"></i>
        <i class="asterisk"></i>
      </div>
    </div>
    <div class="span2">
      <p class="muted">Light red background color is only used to show the dimensions of the icons in the docs.</p>
    </div>
  </div>

  <br>

  <div class="row">
    <div class="span4">
      <h3>Built as a sprite</h3>
      <p>Instead of making every icon an extra request, we've compiled them into a sprite&mdash;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><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. Please consider doing the same in your projects.</p>
    </div>
    <div class="span4">
      <h3>How to use</h3>
      <p>With v2.0.0, the <code>&lt;i&gt;</code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:</p>
<pre class="prettyprint linenums">
&lt;i class="chevron-left"&gt;&lt;/i&gt;
</pre>
      <p>There are over 100 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.</p>
    </div>
    <div class="span4">
      <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 nav</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>&lt;i&gt;</code> tag, you can put an icon.</p>
    </div>
  </div>

  <h3>Examples</h3>
  <div class="row">
    <div class="span4">
      <p>Use them in buttons, or in button groups for a toolbar style presentation.</p>
      <p>
        <a class="btn" href="#"><i class="refresh"></i> Refresh</a>
        <a class="btn" href="#"><i class="cog"></i> Settings</a>
      </p>
      <div class="btn-toolbar">
        <div class="btn-group">
          <a class="btn" href="#"><i class="font"></i></a>
          <a class="btn" href="#"><i class="bold"></i></a>
          <a class="btn" href="#"><i class="italic"></i></a>
        </div>
        <div class="btn-group">
          <a class="btn" href="#"><i class="align-left"></i></a>
          <a class="btn" href="#"><i class="align-center"></i></a>
          <a class="btn" href="#"><i class="align-right"></i></a>
          <a class="btn" href="#"><i class="align-justify"></i></a>
        </div>
      </div>
    </div>
    <div class="span3">
      <p>Or, use them in navigation.</p>
      <div class="well" style="padding: 8px 0;">
        <ul class="nav list">
          <li class="active"><a href="#"><i class="home"></i> Home</a></li>
          <li><a href="#"><i class="book"></i> Library</a></li>
          <li><a href="#"><i class="pencil"></i> Applications</a></li>
        </ul>
      </div> <!-- /well -->
    </div>
  </div>
</section>
      <!-- Footer
      ================================================== -->
      <footer class="footer">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <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 -->


    <!-- 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="assets/js/google-code-prettify/prettify.js"></script>
    <script src="../js/bootstrap-transition.js"></script>
    <script src="../js/bootstrap-alert.js"></script>
    <script src="../js/bootstrap-modal.js"></script>
    <script src="../js/bootstrap-dropdown.js"></script>
    <script src="../js/bootstrap-scrollspy.js"></script>
    <script src="../js/bootstrap-tab.js"></script>
    <script src="../js/bootstrap-tooltip.js"></script>
    <script src="../js/bootstrap-popover.js"></script>
    <script src="../js/bootstrap-button.js"></script>
    <script src="../js/bootstrap-collapse.js"></script>
    <script src="../js/bootstrap-carousel.js"></script>
    <script src="../js/bootstrap-typeahead.js"></script>
    <script src="assets/js/application.js"></script>
  </body>
</html>