more tweaks to layouts and some docs styles

1 files changed, 104 insertions, 60 deletions

diff --git a/docs/base-css.html b/docs/base-css.html
index 75bfced93..95b4f1f97 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -74,14 +74,14 @@
       </div>
     </div>
 
-    <div class="container">
+    <div class="bs-docs-container">
 
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>Base CSS</h1>
   <p class="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>
-  <div class="subnav">
+<!--   <div class="subnav">
     <ul class="nav nav-pills">
       <li><a href="#typography">Typography</a></li>
       <li><a href="#code">Code</a></li>
@@ -91,9 +91,23 @@
       <li><a href="#icons">Icons by Glyphicons</a></li>
     </ul>
   </div>
-</header>
+ --></header>
 
 
+<section id="contents">
+  <div class="bs-docs-contents">
+    <h3>Contents</h3>
+    <ol>
+      <li><a href="#typography">Typography</a></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="#icons">Icons by Glyphicons</a></li>
+    </ol>
+  </div>
+</section>
+
 <!-- Typography
 ================================================== -->
 <section id="typography">
@@ -288,7 +302,7 @@
   <h2>Lists</h2>
 
   <h3>Unordered</h3>
-  <p>A list of items in which the order does not explicitly matter.</p>
+  <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
   <div class="bs-docs-example">
     <ul>
       <li>Lorem ipsum dolor sit amet</li>
@@ -314,64 +328,94 @@
 &lt;/ul&gt;
 </pre>
 
-  <h3>Unstyled</h3>
-  <p><code>&lt;ul class="unstyled"&gt;</code></p>
-  <ul class="unstyled">
-    <li>Lorem ipsum dolor sit amet</li>
-    <li>Consectetur adipiscing elit</li>
-    <li>Integer molestie lorem at massa</li>
-    <li>Facilisis in pretium nisl aliquet</li>
-    <li>Nulla volutpat aliquam velit
-      <ul>
-        <li>Phasellus iaculis neque</li>
-        <li>Purus sodales ultricies</li>
-        <li>Vestibulum laoreet porttitor sem</li>
-        <li>Ac tristique libero volutpat at</li>
-      </ul>
-    </li>
-    <li>Faucibus porta lacus fringilla vel</li>
-    <li>Aenean sit amet erat nunc</li>
-    <li>Eget porttitor lorem</li>
-  </ul>
-
   <h3>Ordered</h3>
-  <p><code>&lt;ol&gt;</code></p>
-  <ol>
-    <li>Lorem ipsum dolor sit amet</li>
-    <li>Consectetur adipiscing elit</li>
-    <li>Integer molestie lorem at massa</li>
-    <li>Facilisis in pretium nisl aliquet</li>
-    <li>Nulla volutpat aliquam velit</li>
-    <li>Faucibus porta lacus fringilla vel</li>
-    <li>Aenean sit amet erat nunc</li>
-    <li>Eget porttitor lorem</li>
-  </ol>
+  <p>A list of items in which the order <em>does</em> explicitly matter.</p>
+  <div class="bs-docs-example">
+    <ol>
+      <li>Lorem ipsum dolor sit amet</li>
+      <li>Consectetur adipiscing elit</li>
+      <li>Integer molestie lorem at massa</li>
+      <li>Facilisis in pretium nisl aliquet</li>
+      <li>Nulla volutpat aliquam velit</li>
+      <li>Faucibus porta lacus fringilla vel</li>
+      <li>Aenean sit amet erat nunc</li>
+      <li>Eget porttitor lorem</li>
+    </ol>
+  </div>
+<pre class="prettyprint linenums">
+&lt;ol&gt;
+  &lt;li&gt;...&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+  <h3>Unstyled</h3>
+  <p>A list of items with no <code>list-style</code> or additional left padding.</p>
+  <div class="bs-docs-example">
+    <ul class="unstyled">
+      <li>Lorem ipsum dolor sit amet</li>
+      <li>Consectetur adipiscing elit</li>
+      <li>Integer molestie lorem at massa</li>
+      <li>Facilisis in pretium nisl aliquet</li>
+      <li>Nulla volutpat aliquam velit
+        <ul>
+          <li>Phasellus iaculis neque</li>
+          <li>Purus sodales ultricies</li>
+          <li>Vestibulum laoreet porttitor sem</li>
+          <li>Ac tristique libero volutpat at</li>
+        </ul>
+      </li>
+      <li>Faucibus porta lacus fringilla vel</li>
+      <li>Aenean sit amet erat nunc</li>
+      <li>Eget porttitor lorem</li>
+    </ul>
+  </div>
+<pre class="prettyprint linenums">
+&lt;ul class="unstyled"&gt;
+  &lt;li&gt;...&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
 
   <h3>Description</h3>
-  <p><code>&lt;dl&gt;</code></p>
-  <dl>
-    <dt>Description lists</dt>
-    <dd>A description list is perfect for defining terms.</dd>
-    <dt>Euismod</dt>
-    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
-    <dt>Malesuada porta</dt>
-    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-  </dl>
-
-  <h3>Horizontal description</h3>
-  <p><code>&lt;dl class="dl-horizontal"&gt;</code></p>
-  <dl class="dl-horizontal">
-    <dt>Description lists</dt>
-    <dd>A description list is perfect for defining terms.</dd>
-    <dt>Euismod</dt>
-    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
-    <dt>Malesuada porta</dt>
-    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-    <dt>Felis euismod semper eget lacinia</dt>
-    <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
-  </dl>
+  <p>A list of terms with their associated descriptions.</p>
+  <div class="bs-docs-example">
+    <dl>
+      <dt>Description lists</dt>
+      <dd>A description list is perfect for defining terms.</dd>
+      <dt>Euismod</dt>
+      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+      <dt>Malesuada porta</dt>
+      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+    </dl>
+  </div>
+<pre class="prettyprint linenums">
+&lt;dl&gt;
+  &lt;dt&gt;...&lt;/dt&gt;
+  &lt;dd&gt;...&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+  <h4>Horizontal description</h4>
+  <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
+  <div class="bs-docs-example">
+    <dl class="dl-horizontal">
+      <dt>Description lists</dt>
+      <dd>A description list is perfect for defining terms.</dd>
+      <dt>Euismod</dt>
+      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+      <dt>Malesuada porta</dt>
+      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+      <dt>Felis euismod semper eget lacinia</dt>
+      <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+    </dl>
+  </div>
+<pre class="prettyprint linenums">
+&lt;dl class="dl-horizontal"&gt;
+  &lt;dt&gt;...&lt;/dt&gt;
+  &lt;dd&gt;...&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
   <hr>
   <p>
     <span class="label label-info">Heads up!</span>
@@ -1592,10 +1636,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
      <!-- Footer
       ================================================== -->
       <footer class="footer">
-        <p class="pull-right"><a href="#">Back to top</a></p>
         <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
         <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
         <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+        <p><a href="#">Back to top</a></p>
       </footer>
 
     </div><!-- /container -->