navs tabs pills to single column

docs/components.html

@@ -521,16 +521,14 @@
   </div>
 
   <h2>Lightweight defaults <small>Same markup, different classes</small></h2>
-  <div class="row">
+
-    <div class="span4">
   <h3>Powerful base class</h3>
   <p>All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
   <h3>When to use</h3>
   <p>Tabs and pills are great for sections of content or navigating between pages of related content.</p>
   <h3>Component alignment</h3>
   <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>
-    </div>
+
-    <div class="span4">
   <h3>Basic tabs</h3>
   <p>Take a regular <code>&lt;ul&gt;</code> of links and add <code>.nav-tabs</code>:</p>
   <ul class="nav nav-tabs">
@@ -547,8 +545,7 @@
   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h3>Basic pills</h3>
   <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
   <ul class="nav nav-pills">
@@ -565,16 +562,13 @@
   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
+
-  </div>
 
   <h2>Stackable <small>Make tabs or pills vertical</small></h2>
-  <div class="row">
+
-    <div class="span4">
   <h3>How to stack 'em</h3>
   <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>
-    </div>
+
-    <div class="span4">
   <h3>Stacked tabs</h3>
   <ul class="nav nav-tabs nav-stacked">
     <li class="active"><a href="#">Home</a></li>
@@ -586,8 +580,7 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h3>Stacked pills</h3>
   <ul class="nav nav-pills nav-stacked">
     <li class="active"><a href="#">Home</a></li>
@@ -599,17 +592,13 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
-  </div>
 
   <h2>Dropdowns <small>For advanced nav components</small></h2>
-  <div class="row">
+
-    <div class="span4">
   <h3>Rich menus made easy</h3>
   <p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p>
   <p>Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p>
-    </div>
+
-    <div class="span4">
   <h3>Tabs with dropdowns</h3>
   <ul class="nav nav-tabs">
     <li class="active"><a href="#">Home</a></li>
@@ -640,8 +629,7 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h3>Pills with dropdowns</h3>
   <ul class="nav nav-pills">
     <li class="active"><a href="#">Home</a></li>
@@ -672,12 +660,9 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
-  </div>
 
   <h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
-  <div class="row">
+
-    <div class="span4">
   <h3>Application-style navigation</h3>
   <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>
@@ -693,8 +678,7 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h3>Example nav list</h3>
   <p>Take a list of links and add <code>class="nav nav-list"</code>:</p>
   <div class="well" style="padding: 8px 0;">
@@ -724,8 +708,7 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h3>Example with icons</h3>
   <p>Same example, but with <code>&lt;i&gt;</code> tags for icons.</p>
   <div class="well" style="padding: 8px 0;">
@@ -753,13 +736,10 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
-  </div>
 
 
   <h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2>
-  <div class="row">
+
-    <div class="span4">
   <h3>What's included</h3>
   <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
   <p>Changing between them is easy and only requires changing very little markup.</p>
@@ -770,8 +750,7 @@
   <h4>Requires jQuery plugin</h4>
   <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.</p>
   <p><a class="btn" href="./javascript.html#tabs">Get the javascript &rarr;</a></p>
-    </div>
+
-    <div class="span8">
   <h3>Tabbable example</h3>
   <p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.</p>
   <div class="tabbable" style="margin-bottom: 18px;">
@@ -812,13 +791,10 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-  </div>
 
 
   <h3>Tabbable in any direction</h3>
-  <div class="row">
+
-    <div class="span4">
   <h4>Tabs on the bottom</h4>
   <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
   <div class="tabbable tabs-below">
@@ -849,8 +825,7 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h4>Tabs on the left</h4>
   <p>Swap the class to put tabs on the left.</p>
   <div class="tabbable tabs-left">
@@ -881,8 +856,7 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h4>Tabs on the right</h4>
   <p>Swap the class to put tabs on the right.</p>
   <div class="tabbable tabs-right">
@@ -913,8 +887,6 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-  </div>
 
 </section>
 

docs/templates/pages/components.mustache

@@ -443,16 +443,14 @@
   </div>
 
   <h2>{{_i}}Lightweight defaults{{/i}} <small>{{_i}}Same markup, different classes{{/i}}</small></h2>
-  <div class="row">
+
-    <div class="span4">
   <h3>{{_i}}Powerful base class{{/i}}</h3>
   <p>{{_i}}All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.{{/i}}</p>
   <h3>{{_i}}When to use{{/i}}</h3>
   <p>{{_i}}Tabs and pills are great for sections of content or navigating between pages of related content.{{/i}}</p>
   <h3>{{_i}}Component alignment{{/i}}</h3>
   <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>
-    </div>
+
-    <div class="span4">
   <h3>{{_i}}Basic tabs{{/i}}</h3>
   <p>{{_i}}Take a regular <code>&lt;ul&gt;</code> of links and add <code>.nav-tabs</code>:{{/i}}</p>
   <ul class="nav nav-tabs">
@@ -469,8 +467,7 @@
   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h3>{{_i}}Basic pills{{/i}}</h3>
   <p>{{_i}}Take that same HTML, but use <code>.nav-pills</code> instead:{{/i}}</p>
   <ul class="nav nav-pills">
@@ -487,16 +484,13 @@
   &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
+
-  </div>
 
   <h2>{{_i}}Stackable{{/i}} <small>{{_i}}Make tabs or pills vertical{{/i}}</small></h2>
-  <div class="row">
+
-    <div class="span4">
   <h3>{{_i}}How to stack 'em{{/i}}</h3>
   <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>
-    </div>
+
-    <div class="span4">
   <h3>{{_i}}Stacked tabs{{/i}}</h3>
   <ul class="nav nav-tabs nav-stacked">
     <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
@@ -508,8 +502,7 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h3>{{_i}}Stacked pills{{/i}}</h3>
   <ul class="nav nav-pills nav-stacked">
     <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
@@ -521,17 +514,13 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
-  </div>
 
   <h2>{{_i}}Dropdowns{{/i}} <small>{{_i}}For advanced nav components{{/i}}</small></h2>
-  <div class="row">
+
-    <div class="span4">
   <h3>{{_i}}Rich menus made easy{{/i}}</h3>
   <p>{{_i}}Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.{{/i}}</p>
   <p>{{_i}}Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.{{/i}}</p>
-    </div>
+
-    <div class="span4">
   <h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
   <ul class="nav nav-tabs">
     <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
@@ -562,8 +551,7 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h3>{{_i}}Pills with dropdowns{{/i}}</h3>
   <ul class="nav nav-pills">
     <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
@@ -594,12 +582,9 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    </div>
-  </div>
 
   <h2>{{_i}}Nav lists{{/i}} <small>{{_i}}Build simple stacked navs, great for sidebars{{/i}}</small></h2>
-  <div class="row">
+
-    <div class="span4">
   <h3>{{_i}}Application-style navigation{{/i}}</h3>
   <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>
@@ -615,8 +600,7 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h3>{{_i}}Example nav list{{/i}}</h3>
   <p>{{_i}}Take a list of links and add <code>class="nav nav-list"</code>:{{/i}}</p>
   <div class="well" style="padding: 8px 0;">
@@ -646,8 +630,7 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h3>{{_i}}Example with icons{{/i}}</h3>
   <p>{{_i}}Same example, but with <code>&lt;i&gt;</code> tags for icons.{{/i}}</p>
   <div class="well" style="padding: 8px 0;">
@@ -675,13 +658,10 @@
   ...
 &lt;/ul&gt;
 </pre>
-    </div>
-  </div>
 
 
   <h2>{{_i}}Tabbable nav{{/i}} <small>{{_i}}Bring tabs to life via javascript{{/i}}</small></h2>
-  <div class="row">
+
-    <div class="span4">
   <h3>{{_i}}What's included{{/i}}</h3>
   <p>{{_i}}Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.{{/i}}</p>
   <p>{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}</p>
@@ -692,8 +672,7 @@
   <h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
   <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
   <p><a class="btn" href="./javascript.html#tabs">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
-    </div>
+
-    <div class="span8">
   <h3>{{_i}}Tabbable example{{/i}}</h3>
   <p>{{_i}}To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.{{/i}}</p>
   <div class="tabbable" style="margin-bottom: 18px;">
@@ -734,13 +713,10 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-  </div>
 
 
   <h3>{{_i}}Tabbable in any direction{{/i}}</h3>
-  <div class="row">
+
-    <div class="span4">
   <h4>{{_i}}Tabs on the bottom{{/i}}</h4>
   <p>{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}</p>
   <div class="tabbable tabs-below">
@@ -771,8 +747,7 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h4>{{_i}}Tabs on the left{{/i}}</h4>
   <p>{{_i}}Swap the class to put tabs on the left.{{/i}}</p>
   <div class="tabbable tabs-left">
@@ -803,8 +778,7 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
+
-    <div class="span4">
   <h4>{{_i}}Tabs on the right{{/i}}</h4>
   <p>{{_i}}Swap the class to put tabs on the right.{{/i}}</p>
   <div class="tabbable tabs-right">
@@ -835,8 +809,6 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-  </div>
 
 </section>