base-css.mustache

<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <h1>{{_i}}Base CSS{{/i}}</h1>
  <p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
  <div class="navbar navbar-subnav">
    <div class="navbar-inner">
      <ul class="nav">
        <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
        <li><a href="#code">{{_i}}Code{{/i}}</a></li>
        <li><a href="#tables">{{_i}}Tables{{/i}}</a></li>
        <li><a href="#forms">{{_i}}Forms{{/i}}</a></li>
        <li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
        <li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
      </ul>
    </div>
  </div>
</header>


<div class="row">
  <div class="span3 bs-docs-sidebar">
    <ul class="nav nav-list bs-docs-sidenav">
      <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
      <li><a href="#code">{{_i}}Code{{/i}}</a></li>
      <li><a href="#tables">{{_i}}Tables{{/i}}</a></li>
      <li><a href="#forms">{{_i}}Forms{{/i}}</a></li>
      <li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
      <li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
    </ul>
  </div>
  <div class="span9">



<!-- Typography
================================================== -->
<section id="typography">
  <div class="page-header">
    <h1>{{_i}}Typography <small>Headings, paragraphs, lists, and other inline type elements</small>{{/i}}</h1>
  </div>

  {{! Headings }}
  <h2>{{_i}}Headings{{/i}}</h2>
  <p>{{_i}}All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.{{/i}}</p>
  <div class="bs-docs-example">
    <h1>h1. {{_i}}Heading 1{{/i}}</h1>
    <h2>h2. {{_i}}Heading 2{{/i}}</h2>
    <h3>h3. {{_i}}Heading 3{{/i}}</h3>
    <h4>h4. {{_i}}Heading 4{{/i}}</h4>
    <h5>h5. {{_i}}Heading 5{{/i}}</h5>
    <h6>h6. {{_i}}Heading 6{{/i}}</h6>
  </div>

  {{! Body copy }}
  <h2>{{_i}}Body copy{{/i}}</h2>
  <p>{{_i}}Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}</p>
  <div class="bs-docs-example">
    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  </div>

  {{! Body copy .lead }}
  <h3>{{_i}}Lead body copy{{/i}}</h3>
  <p>{{_i}}Make a paragraph stand out by adding <code>.lead</code>.{{/i}}</p>
  <div class="bs-docs-example">
    <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
  </div>