index.html

            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div> <!-- topbar-wrapper -->
  <div class="row">
    <div class="span5 columns">
      <h4>What is it</h4>
      <p>Our topbar is a fixed bar that houses a website's logo or name, primary navigation, and search form.</p>
    </div>
    <div class="span5 columns">
      <h4>Customizable</h4>
      <p>All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav&mdash;or any combination of that.</p>
    </div>
    <div class="span6 columns">
      <h4>Dropdowns included</h4>
      <p>As part of the main navigation, we've included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it's done.</p>
    </div>
  </div>

  <br />

<div class="row">
  <div class="span4 columns">
    <h2>Tabs and pills</h2>
    <p>Create simple secondary navigation with a <code>ul</code>. Swap between tabs or pills by adding the appropriate class.</p>
    <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
  </div>
  <div class="span12 columns">
<ul class="tabs">
  <li class="active"><a href="">Home</a></li>
  <li><a href="">Profile</a></li>
  <li><a href="">Messages</a></li>
  <li><a href="">Settings</a></li>
  <li><a href="">Contact</a></li>
</ul>
<pre class="html">
&lt;ul class="tabs"&gt;
  &lt;li class="active"&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Messages&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<ul class="pills">
  <li class="active"><a href="">Home</a></li>
  <li><a href="">Profile</a></li>
  <li><a href="">Messages</a></li>
  <li><a href="">Settings</a></li>
  <li><a href="">Contact</a></li>
</ul>
<pre class="html">
&lt;ul class="pills"&gt;
  &lt;li class="active"&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Messages&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
  </div>
</div>

<div class="row">
  <div class="span4 columns">
    <h2>Pagination</h2>
    <p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
  </div>
  <div class="span12 columns">
    <div class="pagination">
      <ul>
        <li class="prev disabled"><a href="">&larr; Previous</a></li>
        <li class="active"><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
        <li class="next"><a href="">Next &rarr;</a></li>
      </ul>
    </div>
    <div class="pagination">
      <ul>
        <li class="prev"><a href="">&larr; Previous</a></li>
        <li class="active"><a href="">10</a></li>
        <li><a href="">11</a></li>
        <li><a href="">12</a></li>
        <li class="disabled"><a href="">...</a></li>
        <li><a href="">19</a></li>
        <li><a href="">20</a></li>
        <li><a href="">21</a></li>
        <li class="next"><a href="">Next &rarr;</a></li>
      </ul>
    </div>
    <div class="pagination">
      <ul>
        <li class="prev"><a href="">&larr; Previous</a></li>
        <li><a href="">10</a></li>
        <li><a href="">11</a></li>
        <li><a href="">12</a></li>
        <li><a href="">13</a></li>
        <li><a href="">14</a></li>
        <li class="active"><a href="">15</a></li>
        <li><a href="">16</a></li>
        <li><a href="">17</a></li>
        <li><a href="">18</a></li>
        <li><a href="">19</a></li>
        <li><a href="">20</a></li>
        <li class="next"><a href="">Next &rarr;</a></li>
      </ul>
    </div>
<pre class="html">
&lt;div class="pagination"&gt;
  &lt;ul&gt;
    &lt;li class="prev disabled"&gt;&lt;a href=""&gt;&amp;larr; Previous&lt;/a&gt;&lt;/li>
    &lt;li class="active"&gt;&lt;a href=""&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;5&lt;/a&gt;&lt;/li&gt;
    &lt;li class="next"&gt;&lt;a href=""&gt;Next &amp;rarr;&lt;/a&gt;&lt;/li>
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
  </div>
</div>

</section>



<section id="alerts">
  <div class="page-header">
    <h1>Alerts &amp; Errors <small>Styles for success, warning, and error messages or alerts</small></h1>
  </div>
  <div class="row">
    <div class="span4 columns">
      <h2>Basic alerts</h2>
      <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
    </div>
    <div class="span12 columns">
      <div class="alert-message error">
        <a class="close" href="#">&times;</a>
        <p><strong>Oh snap!</strong> Change this and that and try again.</p>
      </div>
      <div class="alert-message warning">
        <a class="close" href="#">&times;</a>
        <p><strong>Holy gaucamole!</strong> Best check yo self, you're not looking too good.</p>
      </div>
      <div class="alert-message success">
        <a class="close" href="#">&times;</a>
        <p><strong>Well done!</strong> You successfully read this alert message.</p>
      </div>
      <div class="alert-message info">
        <a class="close" href="#">&times;</a>
        <p><strong>Heads up!</strong> This is an alert that needs your attention, but it's not a huge priority just yet.</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="span4 columns">
      <h2>Block messages</h2>
      <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
    </div>
    <div class="span12 columns">
      <div class="alert-message block-message error">
        <a class="close" href="#">&times;</a>
        <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
        <p><a class="btn small" href="#">Take This Action</a> <a class="btn small" href="#">Or Do This</a></p>
      </div>
      <div class="alert-message block-message warning">
        <a class="close" href="#">&times;</a>
        <p><strong>Holy gaucamole! This is a warning!</strong> Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
        <p><a class="btn small" href="#">Take This Action</a> <a class="btn small" href="#">Or Do This</a></p>
      </div>
      <div class="alert-message block-message success">
        <a class="close" href="#">&times;</a>
        <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
        <p><a class="btn small" href="#">Take This Action</a> <a class="btn small" href="#">Or Do This</a></p>
      </div>
      <div class="alert-message block-message info">
        <a class="close" href="#">&times;</a>
        <p><strong>Heads up!</strong> This is an alert that needs your attention, but it's not a huge priority just yet.</p>
        <p><a class="btn small" href="#">Take This Action</a> <a class="btn small" href="#">Or Do This</a></p>
      </div>
    </div>
  </div>
</section>


<section id="modals">
  <div class="page-header">
    <h1>Modals <small>Rules and conditions for displaying content in dialog boxes</small></h1>
  </div>
  <div class="row">
    <div class="span4 columns">
      <h2>Example modal</h2>
      <p>Modals&mdash;dialogs or lightboxes&mdash;are great for contextual actions in situations where it's important that the background context be maintained.</p>
    </div>
    <div class="span12 columns">
      <div class="well" style="background-color: rgba(0,0,0,0.5); border: none; padding: 40px;">
        <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
          <div class="modal-header">
            <h3>Add new Tweet</h3>
            <a href="#" class="close">&times;</a>
          </div>
          <div class="modal-body">
            <p>One fine body...</p>
          </div>
          <div class="modal-footer">
            <a href="" class="btn primary">Primary</a>
            <a href="" class="btn secondary">Secondary</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


    </div> <!-- /container -->

    <div id="footer">
      <div class="inner">
        <div class="container">
          <p>
            Designed and built <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>, like bosses.<br />
            Open-sourced under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
          </p>
        </div>
      </div>
    </div>

  </body>
</html>