Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.
Bootstrap provides simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. In other words, it's a front-end toolkit for faster, more beautiful web development. It's created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat) at Twitter.
To get started, checkout http://twitter.github.com/bootstrap!
Quick start
-----------
Clone the repo, `git clone git@github.com:twitter/bootstrap.git`, or [download the latest release](https://github.com/twitter/bootstrap/zipball/master).
To get started -- checkout http://twitter.github.com/bootstrap!
Versioning
...
...
@@ -24,6 +32,7 @@ And constructed with the following guidelines:
For more information on SemVer, please visit http://semver.org/.
Bug tracker
-----------
...
...
@@ -32,10 +41,12 @@ Have a bug? Please create an issue here on GitHub!
https://github.com/twitter/bootstrap/issues
Twitter account
---------------
Keep up to date on announcements and more by following Bootstrap on Twitter, <ahref="http://twitter.com/TwBootstrap">@TwBootstrap</a>.
Keep up to date on announcements and more by following Bootstrap on Twitter, [@TwBootstrap](http://twitter.com/TwBootstrap).
Wraps abbreviations and acronyms to show the expanded version on hover
</td>
<td>
Include optional <code>title</code> for expanded text
<p>Include optional <code>title</code> attribute for expanded text</p>
Use <code>.initialism</code> class for uppercase abbreviations.
</td>
</tr>
<tr>
...
...
@@ -205,8 +206,9 @@
</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>Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.</p>
<p>Add the <code>initialism</code> class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.</p>
<p><abbrtitle="HyperText Markup Language"class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
<p>An abbreviation of the word attribute is <abbrtitle="attribute">attr</abbr>.</p>
</div>
</div>
...
...
@@ -569,7 +571,7 @@ For example, <code>section</code> should be wrapped as inline.
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Language</th>
<th>Username</th>
</tr>
</thead>
<tbody>
...
...
@@ -577,19 +579,19 @@ For example, <code>section</code> should be wrapped as inline.
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>CSS</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Javascript</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
<td>HTML</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
...
...
@@ -614,7 +616,7 @@ For example, <code>section</code> should be wrapped as inline.
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Language</th>
<th>Username</th>
</tr>
</thead>
<tbody>
...
...
@@ -622,19 +624,19 @@ For example, <code>section</code> should be wrapped as inline.
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>CSS</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Javascript</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
<td>HTML</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
...
...
@@ -658,31 +660,31 @@ For example, <code>section</code> should be wrapped as inline.
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Language</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<tdcolspan="2">Mark Otto</td>
<td>CSS</td>
<tdrowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<tdrowspan="2">Javascript</td>
</tr>
</tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Brosef</td>
<td>Stalin</td>
<td>HTML</td>
<tdcolspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
...
...
@@ -706,7 +708,7 @@ For example, <code>section</code> should be wrapped as inline.
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Language</th>
<th>Username</th>
</tr>
</thead>
<tbody>
...
...
@@ -714,19 +716,18 @@ For example, <code>section</code> should be wrapped as inline.
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>CSS</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>Javascript</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
<td>HTML</td>
<tdcolspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
...
...
@@ -747,37 +748,36 @@ For example, <code>section</code> should be wrapped as inline.
@@ -1512,9 +1516,6 @@ For example, <code>section</code> should be wrapped as inline.
</ul>
</div>
</div>
<divclass="alert alert-info">
<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 highlight the icon's size.
</div>
<br>
...
...
@@ -1527,7 +1528,7 @@ For example, <code>section</code> should be wrapped as inline.
</div>
<divclass="span4">
<h3>How to use</h3>
<p>With v2.0.1, we have opted to use an <code><i></code> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:</p>
<p>Bootstrap uses an <code><i></code> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:</p>
<preclass="prettyprint linenums">
<i class="icon-search"></i>
</pre>
...
...
@@ -1536,6 +1537,10 @@ For example, <code>section</code> should be wrapped as inline.
<p>There are 120 classes to choose from for your icons. Just add an <code><i></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.</p>
<p>
<spanclass="label label-info">Heads up!</span>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code><i></code> tag for proper spacing.
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <ahref="./javascript.html#buttons">the Javascript docs</a> for that.</p>
<p><aclass="btn js-btn"href="./javascript.html#buttons">Get the javascript »</a></p>
<hr>
<h4class="muted">Heads up</h4>
<pclass="muted">CSS for button groups is in a separate file, button-groups.less.</p>
<h3>Dropdowns in button groups</h3>
<p><spanclass="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
<p><spanclass="label label-info">Heads up!</span> Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
...
...
@@ -268,10 +279,14 @@
</pre>
</div>
</div>
<divclass="alert alert-info">
<strong>Heads up!</strong> In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.
</div>
<h2>Split button dropdowns</h2>
<divclass="row">
<divclass="span4">
<h3>Split button dropdowns</h3>
<h3>Overview and examples</h3>
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
<p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p>
<p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
<p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
<hr>
<h4>With icons</h4>
<p>Nav lists are also easy to equip with icons. Add the proper <code><i></code> tag with class and you're set.</p>
<h4>Horizontal dividers</h4>
<p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
<p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.</p>
<p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
<divclass="row">
<divclass="span4">
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed-top">
...
</div>
</pre>
<p>In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
</div><!--/span-->
<divclass="span4">
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed-bottom">
...
</div>
</pre>
</div><!--/span-->
</div><!--/row-->
<p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<preclass="prettyprint linenums">
...
...
@@ -830,8 +960,14 @@
Project name
</a>
</pre>
<h3>Search form</h3>
<p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
<h3>Forms in navbar</h3>
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<preclass="prettyprint linenums">
<form class="navbar-form pull-left">
<input type="text" class="span2">
</form>
</pre>
<p>For a more customized search form, add the <code>.navbar-search</code> class to receive specialized styles in the navbar.</p>
<p>To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<h3>Adding dropdowns</h3>
<p>Adding dropdowns to the nav is super simple, but does require the use of <ahref="./javascript.html#dropdowns">our javascript plugin</a>.</p>
<h3>Adding dropdown menus</h3>
<p>Adding dropdowns and dropups to the nav is super simple, but does require the use of <ahref="./javascript.html/#dropdown">our javascript plugin</a>.</p>
<preclass="prettyprint linenums">
<ul class="nav">
<li class="dropdown">
...
...
@@ -908,6 +1044,9 @@
</ul>
</pre>
<p><aclass="btn"href="./javascript.html#dropdowns">Get the javascript →</a></p>
<hr>
<h3>Text in the navbar</h3>
<p>Wrap strings of text in a <code><p></code> tag for proper leading and color.</p>
<h1>Badges <small>Indicators and unread counts</small></h1>
</div>
<divclass="row">
<divclass="span4">
<h3>About</h3>
<p>Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.</p>
<p>A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
</div>
<divclass="span8">
<divclass="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
<pclass="muted">All plugins require the latest version of <ahref="http://jquery.com/"target="_blank">jQuery</a> to be included.</p>
<pclass="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <ahref="http://jquery.com/"target="_blank">jQuery</a> to be included.</p>
<p><ahref="#"class="tooltip-test"title="Tooltip">This link</a> and <ahref="#"class="tooltip-test"title="Tooltip">that link</a> should have tooltips on hover.</p>
<hr>
<h4>Overflowing text to show optional scrollbar</h4>
<p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<h1>Global styles <small>for CSS reset, typography, and links</small></h1>
</div>
<divclass="row">
<divclass="span4">
<h2>Requires HTML5 doctype</h2>
<p>Bootstrap makes use of HTML elements and CSS properties that require the use of the HTML5 doctype. Be sure to include it at the beginning of every Bootstrapped page in your project.</p>
<preclass="prettyprint linenums">
<!DOCTYPE html>
<html lang="en">
...
</html>
</pre>
</div><!-- /.span -->
<divclass="span4">
<h2>Typography and links</h2>
<p>Within the <strong>scaffolding.less</strong> file, we set basic global display, typography, and link styles. Specifically, we:</p>
<ul>
<li>Remove margin on the body</li>
<li>Set <code>background-color: white;</code> on the <code>body</code></li>
<li>Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographyic base</li>
<li>Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code></li>
</ul>
</div><!-- /.span -->
<divclass="span4">
<h2>Reset via Normalize</h2>
<p>As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from <ahref="http://necolas.github.com/normalize.css/"target="_blank">Normalize.css</a>, a project by <ahref="http://twitter.com/necolas"target="_blank">Nicolas Gallagher</a> that also powers the <ahref="http://html5boilerplate.com"target="_blank">HTML5 Boilerplate</a>.</p>
<p>The new reset can still be found in <strong>reset.less</strong>, but with many elements removed for brevity and accuracy.</p>
<p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
<p>It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.</p>
</div>
</div><!-- /.span -->
<divclass="span4">
<preclass="prettyprint linenums">
<div class="row">
...
...
@@ -141,11 +181,11 @@
<div class="span8">...</div>
</div>
</pre>
</div>
</div><!-- /.span -->
<divclass="span4">
<p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
</div>
</div><!-- /row -->
</div><!-- /.span -->
</div><!-- /.row -->
<br>
...
...
@@ -189,7 +229,7 @@
</div>
</div>
</div>
</div><!-- /span6 -->
</div><!-- /.span -->
<divclass="span6">
<preclass="prettyprint linenums">
<div class="row">
...
...
@@ -202,8 +242,8 @@
</div>
</div>
</pre>
</div>
</div>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
...
...
@@ -251,11 +291,11 @@
<divclass="span4">
<h3>Percents, not pixels</h3>
<p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
</div>
</div><!-- /.span -->
<divclass="span4">
<h3>Fluid rows</h3>
<p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
</div>
</div><!-- /.span -->
<divclass="span4">
<h3>Markup</h3>
<preclass="prettyprint linenums">
...
...
@@ -264,8 +304,8 @@
<div class="span8">...</div>
</div>
</pre>
</div>
</div><!-- /row -->
</div><!-- /.span -->
</div><!-- /.row -->
<h2>Fluid nesting</h2>
<divclass="row">
...
...
@@ -284,7 +324,7 @@
</div>
</div>
</div>
</div>
</div><!-- /.span -->
<divclass="span6">
<preclass="prettyprint linenums">
<div class="row-fluid">
...
...
@@ -297,8 +337,8 @@
</div>
</div>
</pre>
</div>
</div>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
...
...
@@ -345,16 +385,16 @@
<divclass="span4">
<h3>Variables in LESS</h3>
<p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.</p>
</div>
</div><!-- /.span -->
<divclass="span4">
<h3>How to customize</h3>
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <ahref="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p>
</div>
</div><!-- /.span -->
<divclass="span4">
<h3>Staying responsive</h3>
<p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
</div>
</div><!-- /row -->
</div><!-- /.span -->
</div><!-- /.row -->
</section>
...
...
@@ -381,7 +421,7 @@
</div>
</body>
</pre>
</div><!-- /col -->
</div><!-- /.span -->
<divclass="span6">
<h2>Fluid layout</h2>
<p><code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
<ul>
<li>Modify the width of column in our grid</li>
<li>Stack elements instead of float wherever necessary</li>
<li>Resize headings and text to be more appropriate for devices</li>
</ul>
<p>Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.</p>
</div><!-- /.span -->
<divclass="span8">
<h2>Supported devices</h2>
<p>Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
...
...
@@ -438,13 +486,13 @@
<tdclass="muted"colspan="2">Fluid columns, no fixed widths</td>
</tr>
<tr>
<td>Portrait tablets</td>
<td>480px to 768px</td>
<td>Smartphones to tablets</td>
<td>767px and below</td>
<tdclass="muted"colspan="2">Fluid columns, no fixed widths</td>
</tr>
<tr>
<td>Landscape tablets</td>
<td>768px to 979px</td>
<td>Portrait tablets</td>
<td>768px and above</td>
<td>42px</td>
<td>20px</td>
</tr>
...
...
@@ -466,23 +514,15 @@
<h3>Requires meta tag</h3>
<p>To ensure devices display responsive pages properly, include the viewport meta tag.</p>
<p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
<ul>
<li>Modify the width of column in our grid</li>
<li>Stack elements instead of float wherever necessary</li>
<li>Resize headings and text to be more appropriate for devices</li>
</ul>
</div>
</div>
</div><!-- /.span -->
</div><!-- /.row -->
<br>
<!-- Media query code -->
<h2>Using the media queries</h2>
<divclass="row">
<divclass="span5">
<divclass="span4">
<p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
<ol>
<li>Use the compiled responsive version, bootstrap-responsive.css</li>
...
...
@@ -490,8 +530,8 @@
<li>Modify and recompile responsive.less as a separate file</li>
</ol>
<p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
</div>
<divclass="span7">
</div><!-- /.span -->
<divclass="span8">
<preclass="prettyprint linenums">
// Landscape phones and down
@media (max-width: 480px) { ... }
...
...
@@ -505,8 +545,93 @@
// Large desktop
@media (min-width: 1200px) { .. }
</pre>
</div>
</div>
</div><!-- /.span -->
</div><!-- /.row -->
<br>
<!-- Responsive utility classes -->
<h2>Responsive utility classes</h2>
<divclass="row">
<divclass="span4">
<h3>What are they</h2>
<p>For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.</p>
<h3>When to use</h2>
<p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
<p>For example, you might show a <code><select></code> element for nav on mobile layouts, but not on tablets or desktops.</p>
</div><!-- /.span -->
<divclass="span8">
<h3>Support classes</h3>
<p>Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in <code>responsive.less</code>.</p>
{{_i}}Wraps abbreviations and acronyms to show the expanded version on hover{{/i}}
</td>
<td>
{{_i}}Include optional <code>title</code> for expanded text{{/i}}
<p>{{_i}}Include optional <code>title</code> attribute for expanded text{{/i}}</p>
{{_i}}Use <code>.initialism</code> class for uppercase abbreviations.{{/i}}
</td>
</tr>
<tr>
...
...
@@ -129,8 +130,9 @@
</div>
<divclass="span4">
<h3>{{_i}}Example abbreviations{{/i}}</h3>
<p>{{_i}}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.{{/i}}</p>
<p>{{_i}}<abbrtitle="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.{{/i}}</p>
<p>{{_i}}Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.{{/i}}</p>
<p>{{_i}}Add the <code>initialism</code> class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.{{/i}}</p>
<p>{{_i}}<abbrtitle="HyperText Markup Language"class="initialism">HTML</abbr> is the best thing since sliced bread.{{/i}}</p>
<p>{{_i}}An abbreviation of the word attribute is <abbrtitle="attribute">attr</abbr>.{{/i}}</p>
{{_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 highlight the icon's size.{{/i}}
</div>
<br>
...
...
@@ -1451,7 +1452,7 @@
</div>
<divclass="span4">
<h3>{{_i}}How to use{{/i}}</h3>
<p>{{_i}}With v2.0.1, we have opted to use an <code><i></code> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
<p>{{_i}}Bootstrap uses an <code><i></code> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
<p>{{_i}}There are 120 classes to choose from for your icons. Just add an <code><i></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>
{{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code><i></code> tag for proper spacing.{{/i}}
<p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <ahref="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
<p><aclass="btn js-btn"href="./javascript.html#buttons">{{_i}}Get the javascript »{{/i}}</a></p>
<hr>
<h4class="muted">{{_i}}Heads up{{/i}}</h4>
<pclass="muted">{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}</p>
<h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
...
...
@@ -192,10 +203,14 @@
</pre>
</div>
</div>
<divclass="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}
</div>
<h2>{{_i}}Split button dropdowns{{/i}}</h2>
<divclass="row">
<divclass="span4">
<h3>{{_i}}Split button dropdowns{{/i}}</h3>
<h3>{{_i}}Overview and examples{{/i}}</h3>
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
<p>{{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.{{/i}}</p>
<p>{{_i}}Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}</p>
<p>{{_i}}Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.{{/i}}</p>
<hr>
<h4>{{_i}}With icons{{/i}}</h4>
<p>{{_i}}Nav lists are also easy to equip with icons. Add the proper <code><i></code> tag with class and you're set.{{/i}}</p>
<h4>{{_i}}Horizontal dividers{{/i}}</h4>
<p>{{_i}}Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:{{/i}}</p>
<preclass="prettyprint linenums">
<ul class="nav nav-list">
...
<li class="divider"></li>
...
</ul>
</pre>
</div>
<divclass="span4">
<h3>{{_i}}Example nav list{{/i}}</h3>
...
...
@@ -460,6 +577,7 @@
<liclass="nav-header">{{_i}}Another list header{{/i}}</li>
<li><ahref="#">{{_i}}Profile{{/i}}</a></li>
<li><ahref="#">{{_i}}Settings{{/i}}</a></li>
<liclass="divider"></li>
<li><ahref="#">{{_i}}Help{{/i}}</a></li>
</ul>
</div><!-- /well -->
...
...
@@ -490,6 +608,7 @@
<liclass="nav-header">{{_i}}Another list header{{/i}}</li>
<p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.{{/i}}</p>
<p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
<divclass="row">
<divclass="span4">
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed-top">
...
</div>
</pre>
<p>{{_i}}In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
</div><!--/span-->
<divclass="span4">
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed-bottom">
...
</div>
</pre>
</div><!--/span-->
</div><!--/row-->
<p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<h3>{{_i}}Brand name{{/i}}</h3>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<preclass="prettyprint linenums">
...
...
@@ -754,8 +884,14 @@
{{_i}}Project name{{/i}}
</a>
</pre>
<h3>{{_i}}Search form{{/i}}</h3>
<p>{{_i}}Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.{{/i}}</p>
<h3>{{_i}}Forms in navbar{{/i}}</h3>
<p>{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.{{/i}}</p>
<preclass="prettyprint linenums">
<form class="navbar-form pull-left">
<input type="text" class="span2">
</form>
</pre>
<p>{{_i}}For a more customized search form, add the <code>.navbar-search</code> class to receive specialized styles in the navbar.{{/i}}</p>
<p>{{_i}}To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
<h3>{{_i}}Adding dropdowns{{/i}}</h3>
<p>{{_i}}Adding dropdowns to the nav is super simple, but does require the use of <ahref="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
<h3>{{_i}}Adding dropdown menus{{/i}}</h3>
<p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <ahref="./javascript.html/#dropdown">our javascript plugin</a>.{{/i}}</p>
<preclass="prettyprint linenums">
<ul class="nav">
<li class="dropdown">
...
...
@@ -832,6 +968,9 @@
</ul>
</pre>
<p><aclass="btn"href="./javascript.html#dropdowns">{{_i}}Get the javascript →{{/i}}</a></p>
<hr>
<h3>{{_i}}Text in the navbar{{/i}}</h3>
<p>{{_i}}Wrap strings of text in a <code><p></code> tag for proper leading and color.{{/i}}</p>
<h1>{{_i}}Badges{{/i}}<small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
</div>
<divclass="row">
<divclass="span4">
<h3>About</h3>
<p>{{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}</p>
<p>{{_i}}A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
</div>
<divclass="span8">
<divclass="page-header">
<h1>{{_i}}Example page header{{/i}}<small>{{_i}}Subtext for header{{/i}}</small></h1>
<pclass="muted">{{_i}}All plugins require the latest version of <ahref="http://jquery.com/"target="_blank">jQuery</a> to be included.{{/i}}</p>
<pclass="muted">{{_i}}All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <ahref="http://jquery.com/"target="_blank">jQuery</a> to be included.{{/i}}</p>
