Add subnav support to CSS section

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 92674c4454a1b8617a903a6bb1eaef618ae72a83..f7c4b6c98ea74404ad532d45a3d2fc108c739c35 100644 (file)
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -9,12 +9,64 @@
 
     <li><a class="nav-header" href="#css">CSS</a></li>
     <li><a href="#css-overview">Overview</a></li>
-    <li><a href="#grid">Grid system</a></li>
-    <li><a href="#typography">Typography</a></li>
+    <li>
+      <a href="#grid">Grid system</a>
+      <ul class="nav">
+        <li><a href="#grid-example">Example usage</a></li>
+        <li><a href="#grid-offsetting">Offset columns</a></li>
+        <li><a href="#grid-nesting">Nested columns</a></li>
+        <li><a href="#grid-column-ordering">Column ordering</a></li>
+        <li><a href="#grid-less">LESS mixins and variables</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#type">Typography</a>
+      <ul class="nav">
+        <li><a href="#type-headings">Headings</a></li>
+        <li><a href="#type-body-copy">Body copy</a></li>
+        <li><a href="#type-emphasis">Emphasis</a></li>
+        <li><a href="#type-abbreviations">Abbreviations</a></li>
+        <li><a href="#type-addresses">Addresses</a></li>
+        <li><a href="#type-blockquotes">Blockquotes</a></li>
+        <li><a href="#type-lists">Lists</a></li>
+        <li><a href="#type-"></a></li>
+      </ul>
+    </li>
     <li><a href="#code">Code</a></li>
-    <li><a href="#tables">Tables</a></li>
-    <li><a href="#forms">Forms</a></li>
-    <li><a href="#buttons">Buttons</a></li>
+    <li>
+      <a href="#tables">Tables</a>
+      <ul class="nav">
+        <li><a href="#tables-example">Basic example</a></li>
+        <li><a href="#tables-striped">Zebra striping</a></li>
+        <li><a href="#tables-bordered">Bordered tables</a></li>
+        <li><a href="#tables-hover">Hover rows</a></li>
+        <li><a href="#tables-condensed">Condensed tables</a></li>
+        <li><a href="#tables-row-classes">Contextual row classes</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#forms">Forms</a>
+      <ul class="nav">
+        <li><a href="#forms-example">Basic example</a></li>
+        <li><a href="#forms-inline">Inline variation</a></li>
+        <li><a href="#forms-horizontal">Horizontal variation</a></li>
+        <li><a href="#forms-controls">Supported controls</a></li>
+        <li><a href="#forms-control-states">Control states</a></li>
+        <li><a href="#forms-input-groups">Input groups</a></li>
+        <li><a href="#forms-control-sizes">Control sizing</a></li>
+        <li><a href="#forms-actions">Form actions</a></li>
+        <li><a href="#forms-help-text">Help text</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#buttons">Buttons</a>
+      <ul class="nav">
+        <li><a href="#buttons-defaults">Default buttons</a></li>
+        <li><a href="#buttons-sizes">Sizes</a></li>
+        <li><a href="#buttons-disabled">Disabled</a></li>
+        <li><a href="#buttons-tags">Button tags</a></li>
+      </ul>
+    </li>
     <li><a href="#images">Images</a></li>
 
     <li><a class="nav-header" href="#components">Components</a></li>

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b68972dd28020b3140576ed32226ce5d86ffa6ec..0afdb0ab84e3516213d0467b380112a1c601ee9a 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3258,7 +3258,6 @@ button.close {
 }
 
 .navbar-fixed-top,
-.navbar-fixed-left,
 .navbar-fixed-bottom {
   position: fixed;
   right: 0;
@@ -3275,16 +3274,6 @@ button.close {
   bottom: 0;
 }
 
-.navbar-fixed-left {
-  top: 0;
-  right: auto;
-  bottom: 0;
-}
-
-.navbar-fixed-left .container {
-  max-width: none;
-}
-
 .navbar-brand {
   display: block;
   max-width: 200px;

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index ac05769fabbeeb9acad2e5a8d48214ecb8632d48..0700ddd5962c8cb4dca62308db419e0e78bc4b19 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -190,25 +190,45 @@ section > ul li {
   text-shadow: 0 1px 0 #fff;
   box-shadow: inset -1px 0 0 #e5e5e5;
 }
-.bs-docs-sidenav {
+
+/* Nav: first level */
+.bs-docs-sidebar > .nav {
   margin: 0 0 25px;
 }
-.bs-docs-sidenav > li > a {
+.bs-docs-sidebar .nav > li > a {
+  display: block;
   color: #666;
   padding: 4px 25px;
 }
-.bs-docs-sidenav > li > a:hover {
+.bs-docs-sidebar .nav > li > a:hover,
+.bs-docs-sidebar .nav > li > a:focus {
+  text-decoration: none;
   border-right: 1px solid #d5d5d5;
 }
-.bs-docs-sidenav > .active > a,
-.bs-docs-sidenav > .active:hover > a,
-.bs-docs-sidenav > .active:focus > a {
+.bs-docs-sidebar .nav > .active > a,
+.bs-docs-sidebar .nav > .active:hover > a,
+.bs-docs-sidebar .nav > .active:focus > a {
   font-weight: 500;
   color: #b94a48;
   background-color: transparent;
   border-right: 1px solid #b94a48;
 }
 
+/* Nav: second level (shown on .active) */
+.bs-docs-sidebar .nav .nav {
+  display: none;
+  margin-left: 15px;
+  margin-bottom: 5px;
+}
+.bs-docs-sidebar .nav > .active > ul {
+  display: block;
+}
+.bs-docs-sidebar .nav .nav > li > a {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  font-size: 90%;
+}
+
 .bs-docs-sidenav-heading {
   margin: 0 0 25px;
 }

diff --git a/docs/docs.html b/docs/docs.html
index d958c9ddd60ddd28fb0aed887eab9484efab5cf5..30a9c762343e5d57e130269ceb97674b7d8694c2 100644 (file)
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -442,13 +442,13 @@ title: Bootstrap Documentation
 
         <!-- Typography
         ================================================== -->
-        <div class="bs-docs-section" id="typography">
+        <div class="bs-docs-section" id="type">
           <div class="page-header">
             <h1>Typography</h1>
           </div>
 
           <!-- Headings -->
-          <h2 id="headings">Headings</h2>
+          <h2 id="type-headings">Headings</h2>
           <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
 
           <div class="bs-docs-example bs-docs-example-type">
@@ -491,7 +491,7 @@ title: Bootstrap Documentation
 {% endhighlight %}
 
           <!-- Body copy -->
-          <h2 id="body-copy">Body copy</h2>
+          <h2 id="type-body-copy">Body copy</h2>
           <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
           <div class="bs-docs-example">
             <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.</p>
@@ -518,7 +518,7 @@ title: Bootstrap Documentation
 
 
           <!-- Emphasis -->
-          <h2 id="emphasis">Emphasis</h2>
+          <h2 id="type-emphasis">Emphasis</h2>
           <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
 
           <h3>Small text</h3>
@@ -581,7 +581,7 @@ title: Bootstrap Documentation
 
 
           <!-- Abbreviations -->
-          <h2 id="abbreviations">Abbreviations</h2>
+          <h2 id="type-abbreviations">Abbreviations</h2>
           <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
 
           <h3>Basic abbreviation</h3>
@@ -604,7 +604,7 @@ title: Bootstrap Documentation
 
 
           <!-- Addresses -->
-          <h2 id="addresses">Addresses</h2>
+          <h2 id="type-addresses">Addresses</h2>
           <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
           <div class="bs-docs-example">
             <address>
@@ -634,7 +634,7 @@ title: Bootstrap Documentation
 
 
           <!-- Blockquotes -->
-          <h2 id="blockquotes">Blockquotes</h2>
+          <h2 id="type-blockquotes">Blockquotes</h2>
           <p>For quoting blocks of content from another source within your document.</p>
 
           <h3>Default blockquote</h3>
@@ -684,7 +684,7 @@ title: Bootstrap Documentation
 
 
           <!-- Lists -->
-          <h2 id="lists">Lists</h2>
+          <h2 id="type-lists">Lists</h2>
 
           <h3>Unordered</h3>
           <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
@@ -864,7 +864,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <h1>Tables</h1>
           </div>
 
-          <h2>Default styles</h2>
+          <h2 id="tables-example">Basic example</h2>
           <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
           <div class="bs-docs-example">
             <table class="table">
@@ -908,7 +908,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <h2>Optional classes</h2>
           <p>Add any of the following classes to the <code>.table</code> base class.</p>
 
-          <h3>Striped</h3>
+          <h3 id="tables-striped">Striped</h3>
           <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE8).</p>
           <div class="bs-docs-example">
             <table class="table table-striped">
@@ -948,7 +948,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </table>
 {% endhighlight %}
 
-          <h3>Bordered</h3>
+          <h3 id="tables-bordered">Bordered</h3>
           <p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
           <div class="bs-docs-example">
             <table class="table table-bordered">
@@ -992,7 +992,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </table>
 {% endhighlight %}
 
-          <h3>Hover rows</h3>
+          <h3 id="tables-hover-rows">Hover rows</h3>
           <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
           <div class="bs-docs-example">
             <table class="table table-hover">
@@ -1032,7 +1032,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h3>Condensed</h3>
+          <h3 id="tables-condensed">Condensed</h3>
           <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
           <div class="bs-docs-example">
             <table class="table table-condensed">
@@ -1073,7 +1073,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-          <h2>Optional row classes</h2>
+          <h2 id="tables-row-classes">Optional row classes</h2>
           <p>Use contextual classes to color table rows.</p>
           <table class="table table-bordered table-striped">
             <colgroup>
@@ -1156,100 +1156,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 ...
 {% endhighlight %}
 
-
-
-          <h2>Supported table markup</h2>
-          <p>List of supported table HTML elements and how they should be used.</p>
-          <table class="table table-bordered table-striped">
-            <colgroup>
-              <col class="span1">
-              <col class="span7">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>Tag</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <code>&lt;table&gt;</code>
-                </td>
-                <td>
-                  Wrapping element for displaying data in a tabular format
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;thead&gt;</code>
-                </td>
-                <td>
-                  Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;tbody&gt;</code>
-                </td>
-                <td>
-                  Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;tr&gt;</code>
-                </td>
-                <td>
-                  Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;td&gt;</code>
-                </td>
-                <td>
-                  Default table cell
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;th&gt;</code>
-                </td>
-                <td>
-                  Special table cell for column (or row, depending on scope and placement) labels
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;caption&gt;</code>
-                </td>
-                <td>
-                  Description or summary of what the table holds, especially useful for screen readers
-                </td>
-              </tr>
-            </tbody>
-          </table>
-{% highlight html linenos %}
-<table>
-  <caption>...</caption>
-  <thead>
-    <tr>
-      <th>...</th>
-      <th>...</th>
-      <th>...</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>...</td>
-      <td>...</td>
-      <td>...</td>
-    </tr>
-  </tbody>
-</table>
-{% endhighlight %}
-
         </div>
 
 
@@ -1261,7 +1167,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <h1>Forms</h1>
           </div>
 
-          <h2 id="forms-default">Default styles</h2>
+          <h2 id="forms-example">Basic example</h2>
           <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
           <form class="bs-docs-example">
             <fieldset>
@@ -1295,10 +1201,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h2 id="forms-layouts">Optional layouts</h2>
+          <h2>Optional layouts</h2>
           <p>Included with Bootstrap are optional form layouts for common use cases.</p>
 
-          <h3>Inline form</h3>
+          <h3 id="forms-inline">Inline form</h3>
           <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
           <form class="bs-docs-example form-inline">
             <input type="text" class="span3" placeholder="Email">
@@ -1323,7 +1229,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </form>
 {% endhighlight %}
 
-          <h3>Horizontal form</h3>
+          <h3 id="forms-horizontal">Horizontal form</h3>
           <p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
           <ul>
             <li>Add <code>.form-horizontal</code> to the form</li>
@@ -1509,7 +1415,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-          <h2>Form control states</h2>
+          <h2 id="forms-control-states">Form control states</h2>
           <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
 
           <h3 id="forms-input-focus">Input focus</h3>
@@ -1635,7 +1541,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <h2 id="forms-extending">Extending form controls</h2>
           <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
 
-          <h3>Input groups</h3>
+          <h3 id="forms-input-groups">Input groups</h3>
           <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
           <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
           <form class="bs-docs-example">
@@ -1856,7 +1762,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3 id="forms-extending-sizes">Control sizing</h3>
+          <h3 id="forms-control-sizes">Control sizing</h3>
           <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
 
           <h4>Relative sizing</h4>
@@ -1956,7 +1862,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <span class="uneditable-input">Some value here</span>
 {% endhighlight %}
 
-          <h3>Form actions</h3>
+          <h3 id="forms-actions">Form actions</h3>
           <p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
           <form class="bs-docs-example">
             <div class="form-actions">
@@ -1971,7 +1877,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-          <h3>Help text</h3>
+          <h3 id="forms-help-text">Help text</h3>
           <p>Inline and block level support for help text that appears around form controls.</p>
           <h4>Inline help</h4>
           <form class="bs-docs-example form-inline">
@@ -2041,7 +1947,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
 
 
-          <h2>Button sizes</h2>
+          <h2 id="buttons-sizes">Button sizes</h2>
           <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
           <div class="bs-docs-example">
             <p>
@@ -2093,7 +1999,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h2>Disabled state</h2>
+          <h2 id="buttons-disabled">Disabled state</h2>
           <p>Make buttons look unclickable by fading them back 50%.</p>
 
           <h3>Button element</h3>
@@ -2122,7 +2028,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </p>
 
 
-          <h2>One class, multiple tags</h2>
+          <h2 id="buttons-tags">One class, multiple tags</h2>
           <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
           <form class="bs-docs-example">
             <a class="btn" href="">Link</a>