<h1>Media <small>Displaying images and videos</small></h1>
</div>
<!-- Table structure -->
<divclass="row">
<divclass="span3">
<h2>Media grid</h2>
<p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
</div>
<divclass="span9">
<h3>Example thumbnails</h3>
<p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
<p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
</div>
<divclass="span4">
<h4>Customizable</h4>
<p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
</div>
<divclass="span4">
<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. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p>
</div>
</div>
<p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
<br>
<divclass="row">
<divclass="span3">
<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>
<divclass="span9">
<h3>Basic tabs example</h3>
<p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <ahref="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
<p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
<p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
<ulclass="pills pills-vertical span4">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Messages</a></li>
<li><ahref="#">Settings</a></li>
<li><ahref="#">Contact</a></li>
</ul>
</div>
</div><!-- /row -->
<!-- Breadcrumbs -->
<divclass="row">
<divclass="span3">
<h2>Breadcrumbs</h2>
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
<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>
<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>
<p><aclass="btn js-btn"href="./javascript.html#alerts">Get the javascript »</a></p>
</div>
<divclass="span9">
<divclass="alert-message block-message warning">
<aclass="close"href="#">×</a>
<p><strong>Holy guacamole! 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>
<divclass="alert-actions">
<aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
</div>
</div>
<divclass="alert-message block-message error">
<aclass="close"href="#">×</a>
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p>
<ul>
<li>Duis mollis est non commodo luctus</li>
<li>Nisi erat porttitor ligula</li>
<li>Eget lacinia odio sem nec elit</li>
</ul>
<divclass="alert-actions">
<aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
</div>
</div>
<divclass="alert-message block-message success">
<aclass="close"href="#">×</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>
<divclass="alert-actions">
<aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
</div>
</div>
<divclass="alert-message block-message info">
<aclass="close"href="#">×</a>
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
<divclass="alert-actions">
<aclass="btn small"href="#">Take this action</a><aclass="btn small"href="#">Or do this</a>
<p><strong>Holy guacamole! 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>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a><a class="btn small" href="#">Or do this</a>
<h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
</div>
<divclass="row">
<divclass="span3">
<h2>Modals</h2>
<p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p>
<p><aclass="btn js-btn"href="./javascript.html#modal">Get the javascript »</a></p>
<p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
<p><aclass="btn js-btn"href="./javascript.html#twipsy">Get the javascript »</a></p>
</div>
<divclass="span9">
<divclass="twipsies well">
<divstyle="position: relative">
<pclass="muted"style="margin-bottom: 0">
Lorem ipsum dolar sit amet illo error <ahref="#"title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <ahref="#"title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <ahref="#"title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <ahref="#"title="above">rem</a> quae aut veritatis quasi quae.
</p>
</div>
</div>
</div>
</div><!-- /row -->
<!-- Popovers -->
<divclass="row">
<divclass="span3">
<h2>Popovers</h2>
<p>Use popovers to provide subtextual information to a page without affecting layout.</p>
<p><aclass="btn js-btn"href="./javascript.html#popover">Get the javascript »</a></p>
</div>
<divclass="span9">
<divclass="well popover-well">
<divclass="popover-wrapper">
<divclass="popover left">
<divclass="arrow"></div>
<divclass="inner">
<h3class="title">Popover Title</h3>
<divclass="content">
<p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Designed and built with all the love in the world <ahref="http://twitter.com/twitter"target="_blank">@twitter</a> by <ahref="http://twitter.com/mdo"target="_blank">@mdo</a> and <ahref="http://twitter.com/fat"target="_blank">@fat</a>.</p>
<p>Code licensed under the <ahref="http://www.apache.org/licenses/LICENSE-2.0"target="_blank">Apache License v2.0</a>. Documentation licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
