21 merge requests!7033Fix backdrop undefined bug in modal,!8635ignore Gruntfile.js in jekyll,!8339Fix broken links to navbar component in docs examples,!7329Fix for issue #7328,!7219Fix for mini typo mistake in css.html,!7674Clear float on all when navbar is collapsed - v3,!7344Fixed .spanX selector (*= instead of ^=),!7346Fix compilation error,!7775added some tests for tooltip title setter,!8157Close Me: Docs "Customize and Download" button fix,!7509Proposed fix for allowing Collapse events ('show'/'hide') to be cancelled,!7964commit fixes #7792,!8656Added rel="stylesheet" to CDN-Examples,!8527Inner properties move 1,!8245Interactive color picker - Closed: request against wrong branch,!7865Patch 2,!7651Drop the sizzle dependency to allow smaller builds targeting mobile devices,!6853typeahead: do not store item data in an attribute,!6666Patch 1,!65463.0.0 wip - fixed the issue in which the test pid isn't killed if a test fails,!6503control markup changes added
<h2>Lightweight defaults <small>Same markup, different classes</small></h2>
<p>All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
<pclass="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
<h3>Basic tabs</h3>
<p>Take a regular <code><ul></code> of links and add<code>.nav-tabs</code>:</p>
<h2>Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the<code>.nav</code> base class.</p>
<divclass="bs-docs-example">
<ulclass="nav nav-tabs">
<liclass="active"><ahref="#">Home</a></li>
...
...
@@ -697,17 +696,17 @@
</ul>
</pre>
<h3>Basic pills</h3>
<p>Take that same HTML, but use<code>.nav-pills</code> instead:</p>
<h2>List</h2>
<p>Swap the tabs class for<code>.nav-list</code>.</p>
<divclass="bs-docs-example">
<ulclass="nav nav-pills">
<ulclass="nav nav-list"style="max-width: 300px;">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Messages</a></li>
</ul>
</div>
<preclass="prettyprint linenums">
<ul class="nav nav-pills">
<ul class="nav nav-list">
<li class="active">
<a href="#">Home</a>
</li>
...
...
@@ -716,50 +715,27 @@
</ul>
</pre>
<h3>Disabled state</h3>
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
<h2>Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<p>To align nav links, 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>
<hrclass="bs-docs-separator">
<h2>Stackable</h2>
<p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p>
<p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
<h2>Options</h2>
<h3>Disabled state</h3>
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
<p>To align nav links, 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>
<h1>{{_i}}Nav: tabs, pills, and lists{{/i}}</small></h1>
<h1>{{_i}}Navs{{/i}}</small></h1>
</div>
<h2>{{_i}}Lightweight defaults{{/i}}<small>{{_i}}Same markup, different classes{{/i}}</small></h2>
<p>{{_i}}All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.{{/i}}</p>
<pclass="lead">{{_i}}Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.{{/i}}</p>
<h3>{{_i}}Basic tabs{{/i}}</h3>
<p>{{_i}}Take a regular <code><ul></code> of links and add<code>.nav-tabs</code>:{{/i}}</p>
<h2>{{_i}}Tabs{{/i}}</h2>
<p>{{_i}}Note the <code>.nav-tabs</code> class requires the<code>.nav</code> base class.{{/i}}</p>
<p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.{{/i}}</p>
<h2>{{_i}}Pills{{/i}}</h2>
<p>{{_i}}Take that same HTML, but use <code>.nav-pills</code> instead:{{/i}}</p>
<p>{{_i}}To align nav links, 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>
<hrclass="bs-docs-separator">
<h2>{{_i}}Stackable{{/i}}</h2>
<p>{{_i}}As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.{{/i}}</p>
<p>{{_i}}Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:{{/i}}</p>
<h2>{{_i}}Options{{/i}}</h2>
<h3>{{_i}}Disabled state{{/i}}</h3>
<p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.{{/i}}</p>
<p>{{_i}}To align nav links, 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>
