base-css.mustache

        <fieldset>
          <legend>{{_i}}Extending form controls{{/i}}</legend>
          <div class="control-group">
            <label class="control-label">{{_i}}Form sizes{{/i}}</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">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
            <div class="controls">
              <div class="input-prepend">
                <span class="add-on">@</span>
                <input class="span2" id="prependedInput" size="16" type="text">
              </div>
              <p class="help-block">{{_i}}Here's some help text{{/i}}</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="appendedInput">{{_i}}Appended text{{/i}}</label>
            <div class="controls">
              <div class="input-append">
                <input class="span2" id="appendedInput" size="16" type="text">
                <span class="add-on">.00</span>
              </div>
              <p class="help-block">{{_i}}Here's more help text{{/i}}</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="inlineCheckboxes">{{_i}}Inline checkboxes{{/i}}</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">{{_i}}Checkboxes{{/i}}</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" name="optionsCheckboxList1" value="option1">
                {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
              </label>
              <label class="checkbox">
                <input type="checkbox" name="optionsCheckboxList2" value="option2">
                {{_i}}Option two can also be checked and included in form results{{/i}}
              </label>
              <label class="checkbox">
                <input type="checkbox" name="optionsCheckboxList3" value="option3">
                {{_i}}Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results{{/i}}
              </label>
              <p class="help-text">{{_i}}<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.{{/i}}</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">{{_i}}Radio buttons{{/i}}</label>
            <div class="controls">
              <label class="radio">
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
              </label>
              <label class="radio">
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                {{_i}}Option two can is something else and selecting it will deselect option one{{/i}}
              </label>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
            <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
          </div>
        </fieldset>
      </form>
    </div>
    <div class="span4">
      <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
      <p>{{_i}}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.{{/i}}</p>
      <hr>
      <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
      <p>{{_i}}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>.{{/i}}</p>
      <p>{{_i}}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.{{/i}}</p>
      <hr>
      <h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
      <p>{{_i}}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.{{/i}}</p>
    </div>
  </div><!-- /row -->
</section>



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

  <div class="row">
    <div class="span4">
      <h3>{{_i}}Buttons for actions{{/i}}</h3>
      <p>{{_i}}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.{{/i}}</p>
    </div>
    <div class="span4">
      <h3>{{_i}}For anchors and forms{{/i}}</h3>
      <p>{{_i}}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.{{/i}}</p>
    </div>
    <div class="span4">
      <p>{{_i}}<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.{{/i}}</p>
    </div>
  </div>

  <div class="row">
    <div class="span4">
      <h3>{{_i}}Multiple sizes{{/i}}</h3>
      <p>{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}</p>
      <p>
        <a href="#" class="btn large primary">{{_i}}Primary action{{/i}}</a>
        <a href="#" class="btn large">{{_i}}Action{{/i}}</a>
      </p>
      <p>
        <a href="#" class="btn small primary">{{_i}}Primary action{{/i}}</a>
        <a href="#" class="btn small">{{_i}}Action{{/i}}</a>
      </p>
    </div>
    <div class="span4">
      <h3>{{_i}}Disabled state{{/i}}</h3>
      <p>{{_i}}For disabled buttons, use <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
      <p>
        <a href="#" class="btn large primary disabled">{{_i}}Primary action{{/i}}</a>
        <a href="#" class="btn large disabled">{{_i}}Action{{/i}}</a>
      </p>
      <p>
        <button class="btn large primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button>
        <button class="btn large" disabled>{{_i}}Action{{/i}}</button>
      </p>
    </div>
    <div class="span4">
      <h3>Cross browser compatibility</h3>
      <p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
      <p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
    </div>
  </div>

  <br>

</section>



<!-- Icons
================================================== -->
<section id="icons">
  <div class="page-header">
    <h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1>
  </div>
  <div class="row">
    <div class="span3">
      <div class="the-icons">
        <i class="icon glass"></i>
        <i class="icon music"></i>
        <i class="icon search"></i>
        <i class="icon envelope"></i>
        <i class="icon heart"></i>
        <i class="icon star"></i>
        <i class="icon star-empty"></i>
        <i class="icon user"></i>
        <i class="icon film"></i>
        <i class="icon th-large"></i>
        <i class="icon th"></i>
        <i class="icon th-list"></i>
        <i class="icon ok"></i>
        <i class="icon remove"></i>
        <i class="icon zoom-in"></i>
        <i class="icon zoom-out"></i>
        <i class="icon off"></i>
        <i class="icon signal"></i>
        <i class="icon cog"></i>
        <i class="icon trash"></i>

        <i class="icon home"></i>
        <i class="icon file"></i>
        <i class="icon time"></i>
        <i class="icon road"></i>
        <i class="icon download-alt"></i>
        <i class="icon download"></i>
        <i class="icon upload"></i>
        <i class="icon inbox"></i>
        <i class="icon play-circle"></i>
        <i class="icon repeat"></i>
      </div>
    </div>
    <div class="span3">
      <div class="the-icons">
        <i class="icon refresh"></i>
        <i class="icon list-alt"></i>
        <i class="icon lock"></i>
        <i class="icon flag"></i>
        <i class="icon headphones"></i>
        <i class="icon volume-off"></i>
        <i class="icon volume-down"></i>
        <i class="icon volume-up"></i>
        <i class="icon qrcode"></i>
        <i class="icon barcode"></i>

        <i class="icon tag"></i>
        <i class="icon tags"></i>
        <i class="icon book"></i>
        <i class="icon bookmark"></i>
        <i class="icon print"></i>
        <i class="icon camera"></i>
        <i class="icon font"></i>
        <i class="icon bold"></i>
        <i class="icon italic"></i>
        <i class="icon text-height"></i>
        <i class="icon text-width"></i>
        <i class="icon align-left"></i>
        <i class="icon align-center"></i>
        <i class="icon align-right"></i>
        <i class="icon align-justify"></i>
        <i class="icon list"></i>
        <i class="icon indent-left"></i>
        <i class="icon indent-right"></i>
        <i class="icon facetime-video"></i>
        <i class="icon picture"></i>
      </div>
    </div>
    <div class="span3">
      <div class="the-icons">
        <i class="icon pencil"></i>
        <i class="icon map-marker"></i>
        <i class="icon adjust"></i>
        <i class="icon tint"></i>
        <i class="icon edit"></i>
        <i class="icon share"></i>
        <i class="icon check"></i>
        <i class="icon move"></i>
        <i class="icon step-backward"></i>
        <i class="icon fast-backward"></i>
        <i class="icon backward"></i>
        <i class="icon play"></i>
        <i class="icon pause"></i>
        <i class="icon stop"></i>
        <i class="icon forward"></i>
        <i class="icon fast-forward"></i>
        <i class="icon step-forward"></i>
        <i class="icon eject"></i>
        <i class="icon chevron-left"></i>
        <i class="icon chevron-right"></i>

        <i class="icon plus-sign"></i>
        <i class="icon minus-sign"></i>
        <i class="icon remove-sign"></i>
        <i class="icon ok-sign"></i>
        <i class="icon question-sign"></i>
        <i class="icon info-sign"></i>
        <i class="icon screenshot"></i>
        <i class="icon remove-circle"></i>
        <i class="icon ok-circle"></i>
        <i class="icon ban-circle"></i>
      </div>
    </div>
    <div class="span3">
      <div class="the-icons">
        <i class="icon arrow-left"></i>
        <i class="icon arrow-right"></i>
        <i class="icon arrow-up"></i>
        <i class="icon arrow-down"></i>
        <i class="icon share-alt"></i>
        <i class="icon resize-full"></i>
        <i class="icon resize-small"></i>
        <i class="icon plus"></i>
        <i class="icon minus"></i>
        <i class="icon asterisk"></i>

        <i class="icon exclamation-sign"></i>
        <i class="icon gift"></i>
        <i class="icon leaf"></i>
        <i class="icon fire"></i>
        <i class="icon eye-open"></i>
        <i class="icon eye-close"></i>
        <i class="icon warning-sign"></i>
        <i class="icon plane"></i>
        <i class="icon calendar"></i>
        <i class="icon random"></i>
        <i class="icon comment"></i>
        <i class="icon magnet"></i>
        <i class="icon chevron-up"></i>
        <i class="icon chevron-down"></i>
        <i class="icon retweet"></i>
        <i class="icon shopping-cart"></i>
        <i class="icon folder-close"></i>
        <i class="icon folder-open"></i>
        <i class="icon resize-vertical"></i>
        <i class="icon resize-horizontal"></i>
      </div>
    </div>
  </div>
  <div class="alert alert-info">
    {{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}
  </div>

  <br>

  <div class="row">
    <div class="span4">
      <h3>{{_i}}Built as a sprite{{/i}}</h3>
      <p>{{_i}}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.{{/i}}</p>
      <p>{{_i}}<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.{{/i}}</p>
    </div>
    <div class="span4">
      <h3>{{_i}}How to use{{/i}}</h3>
      <p>{{_i}}With v2.0.0, we have opted to use an <code>&lt;i&gt;</code> tag for all our icons with a base class of <code>.icon</code>. To use, place the following code just about anywhere:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;i class="icon search"&gt;&lt;/i&gt;
</pre>
      <p>{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;i class="icon white search"&gt;&lt;/i&gt;
</pre>
      <p>{{_i}}There are 120 classes to choose from for your icons. Just add an <code>&lt;i&gt;</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.{{/i}}</p>
    </div>
    <div class="span4">
      <h3>{{_i}}Use cases{{/i}}</h3>
      <p>{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}</p>
      <ul>
        <li>{{_i}}As visuals for your sidebar navigation{{/i}}</li>
        <li>{{_i}}For a purely icon-driven navigation{{/i}}</li>
        <li>{{_i}}For buttons to help convey the meaning of an action{{/i}}</li>
        <li>{{_i}}With links to share context on a user's destination{{/i}}</li>
      </ul>
      <p>{{_i}}Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.{{/i}}</p>
    </div>
  </div>

  <h3>{{_i}}Examples{{/i}}</h3>
  <p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p>
  <div class="row">
    <div class="span4">
      <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 primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
          <a class="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> {{_i}}Edit{{/i}}</a></li>
            <li><a href="#"><i class="icon trash"></i> {{_i}}Delete{{/i}}</a></li>
            <li><a href="#"><i class="icon ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="icon"></i> {{_i}}Make admin{{/i}}</a></li>
          </ul>
        </div>
      </div>
      <p>
        <a class="btn" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
        <a class="btn success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
        <a class="btn danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
      </p>
      <p>
        <a class="btn large" href="#"><i class="icon comment"></i> {{_i}}Comment{{/i}}</a>
        <a class="btn small" href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a>
        <a class="btn small info" href="#"><i class="icon white info-sign"></i> {{_i}}More Info{{/i}}</a>
      </p>
    </div>
    <div class="span4">
      <div class="well" style="padding: 8px 0;">
        <ul class="nav list">
          <li class="active"><a href="#"><i class="icon white home"></i> {{_i}}Home{{/i}}</a></li>
          <li><a href="#"><i class="icon book"></i> {{_i}}Library{{/i}}</a></li>
          <li><a href="#"><i class="icon pencil"></i> {{_i}}Applications{{/i}}</a></li>
          <li><a href="#"><i class="icon"></i> {{_i}}Misc{{/i}}</a></li>
        </ul>
      </div> <!-- /well -->
    </div>
    <div class="span4">
      <form>
        <div class="control-group">
          <label class="control-label" for="prependedInput">{{_i}}Email address{{/i}}</label>
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on"><i class="icon envelope"></i></span>
              <input class="span2" id="iconInput" type="text">
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>