<pclass="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div>
<h2>Headings & body copy</h2>
<!-- Headings & Paragraph Copy -->
<divclass="row">
<divclass="span4">
<h3>Typographic scale</h3>
<p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
<p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
</div>
<divclass="span4">
<h3>Example body text</h3>
<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 ut id elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
For emphasizing a snippet of text with <strong>important</strong>
</td>
<td>
<spanclass="muted">None</span>
</td>
</tr>
<tr>
<td>
<code><em></code>
</td>
<td>
For emphasizing a snippet of text with <em>stress</em>
</td>
<td>
<spanclass="muted">None</span>
</td>
</tr>
<tr>
<td>
<code><abbr></code>
</td>
<td>
Wraps abbreviations and acronyms to show the expanded version on hover
</td>
<td>
Include optional <code>title</code> for expanded text
</td>
</tr>
<tr>
<td>
<code><address></code>
</td>
<td>
For contact information for its nearest ancestor or the entire body of work
</td>
<td>
Preserve formatting by ending all lines with <code><br></code>
</td>
</tr>
</tbody>
</table>
<divclass="row">
<divclass="span4">
<h3>Using emphasis</h3>
<p><ahref="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
<p><strong>Note:</strong> Feel free to use <code><b></code> and <code><i></code> in HTML5, but their usage has changed a bit. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
</div>
<divclass="span4">
<h3>Example addresses</h3>
<p>Here are two examples of how the <code><address></code> tag can be used:</p>
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbrtitle="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<amailto="#">first.last@gmail.com</a>
</address>
</div>
<divclass="span4">
<h3>Example abbreviations</h3>
<p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p>
<p><abbrtitle="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
<p>An abbreviation of the word attribute is <abbrtitle="attribute">attr</abbr>.</p>
<p>To include a blockquote, wrap <code><blockquote></code> around any <abbrtitle="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code><p></code>.</p>
<p>Include an optional <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it for styling purposes.</p>
<p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
<preclass="prettyprint"><div>
<h1>Heading</h1>
<p>Something right here...</p>
</div></pre>
<preclass="prettyprint linenums"><div>
<h1>Heading</h1>
<p>Something right here...</p>
</div></pre>
<p><ahref="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <ahref="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
</td>
</tr>
</tbody>
</table>
<!-- Labels -->
<h2>Inline labels <small>for special attention</small></h2>
<p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
<p><spanclass="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p>
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <ahref="http://jquery.com">jQuery</a> and the <ahref="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
<p>With Bootstrap 2, we completely recoded our forms to allow for simple base styles and improved namespacing on labels and controls. To address the many uses of forms, we've included some base styles to help get you started.</p>
<p>Our default form styles are now vertical, not horizontal. This makes it easier to customize bare-bones forms, as well as forms in tricker situations like sign-up, modals, etc. <strong>They share the same exact markup; just swap the class.</strong></p>
<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>
<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><a></code> and <code><button></code> elements.</p>
</div>
<divclass="span4">
<p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code><button></code> and <code><a></code> elements for consistency.</p>
<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><button></code> elements.</p>
<h1>Icons <small>Graciously provided by <ahref="http://glyphicons.com"target="_blank">Glyphicons</a></small></h1>
</div>
<divclass="row">
<divclass="span2">
<divclass="the-icons">
<iclass="glass"></i>
<iclass="music"></i>
<iclass="search"></i>
<iclass="envelope"></i>
<iclass="heart"></i>
<iclass="star"></i>
<iclass="star-empty"></i>
<iclass="user"></i>
<iclass="film"></i>
<iclass="th-large"></i>
<iclass="th"></i>
<iclass="th-list"></i>
<iclass="ok"></i>
<iclass="remove"></i>
<iclass="zoom-in"></i>
<iclass="zoom-out"></i>
<iclass="off"></i>
<iclass="signal"></i>
<iclass="cog"></i>
<iclass="trash"></i>
</div>
</div>
<divclass="span2">
<divclass="the-icons">
<iclass="home"></i>
<iclass="file"></i>
<iclass="time"></i>
<iclass="road"></i>
<iclass="download-alt"></i>
<iclass="download"></i>
<iclass="upload"></i>
<iclass="inbox"></i>
<iclass="play-circle"></i>
<iclass="repeat"></i>
<iclass="refresh"></i>
<iclass="calendar"></i>
<iclass="lock"></i>
<iclass="flag"></i>
<iclass="headphones"></i>
<iclass="volume-off"></i>
<iclass="volume-down"></i>
<iclass="volume-up"></i>
<iclass="qrcode"></i>
<iclass="barcode"></i>
</div>
</div>
<divclass="span2">
<divclass="the-icons">
<iclass="tag"></i>
<iclass="tags"></i>
<iclass="book"></i>
<iclass="bookmark"></i>
<iclass="print"></i>
<iclass="camera"></i>
<iclass="font"></i>
<iclass="bold"></i>
<iclass="italic"></i>
<iclass="text-height"></i>
<iclass="text-width"></i>
<iclass="align-left"></i>
<iclass="align-center"></i>
<iclass="align-right"></i>
<iclass="align-justify"></i>
<iclass="list"></i>
<iclass="indent-left"></i>
<iclass="indent-right"></i>
<iclass="facetime-video"></i>
<iclass="picture"></i>
</div>
</div>
<divclass="span2">
<divclass="the-icons">
<iclass="pencil"></i>
<iclass="map-marker"></i>
<iclass="adjust"></i>
<iclass="tint"></i>
<iclass="edit"></i>
<iclass="share"></i>
<iclass="check"></i>
<iclass="move"></i>
<iclass="step-backward"></i>
<iclass="fast-backward"></i>
<iclass="backward"></i>
<iclass="play"></i>
<iclass="pause"></i>
<iclass="stop"></i>
<iclass="forward"></i>
<iclass="fast-forward"></i>
<iclass="step-foward"></i>
<iclass="eject"></i>
<iclass="chevron-left"></i>
<iclass="chevron-right"></i>
</div>
</div>
<divclass="span2">
<divclass="the-icons">
<iclass="arrow-left"></i>
<iclass="arrow-right"></i>
<iclass="arrow-up"></i>
<iclass="arrow-down"></i>
<iclass="share"></i>
<iclass="resize-full"></i>
<iclass="resize-small"></i>
<iclass="plus"></i>
<iclass="minus"></i>
<iclass="asterisk"></i>
</div>
</div>
</div>
<br>
<divclass="row">
<divclass="span4">
<h3>Built as a sprite</h3>
<p>Instead of making every icon an extra request, we've compiled them into a sprite—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><ahref="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>
<divclass="span4">
<h3>How to use</h3>
<p>With v2.0.0, the <code><i></code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:</p>
<preclass="prettyprint">
<i class="chevron-left"></i>
</pre>
<p>There are over 100 classes to choose from for your icons. Just add an <code><i></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>
<divclass="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><i></code> tag, you can put an icon.</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>
