address issue #414 and fix up a number of docs loose ends

docs/assets/css/docs.css

@@ -15,7 +15,7 @@ body {
   background-repeat: repeat-x;
 }
 
-/* Tweak topbar brand link to be super sleek
+/* Tweak navbar brand link to be super sleek
 -------------------------------------------------- */
 body > .navbar-fixed .brand {
   padding-right: 0;
@@ -29,6 +29,12 @@ body > .navbar-fixed .brand:hover {
   text-decoration: none;
 }
 
+/* Space out sub-sections more
+-------------------------------------------------- */
+.page-header {
+  margin-top: 36px;
+}
+
 /* Jumbotrons
 -------------------------------------------------- */
 .jumbotron {
@@ -92,12 +98,12 @@ body > .navbar-fixed .brand:hover {
   color: #999;
 }
 
-
 /* Specific jumbotrons
 ------------------------- */
 /* supporting docs pages */
 .subhead {
   padding-bottom: 14px;
+  margin-bottom: 45px;
   border-bottom: 3px solid #e5e5e5;
 }
 .subhead h1,
@@ -224,46 +230,6 @@ body > .navbar-fixed .brand:hover {
 }
 
 
-/* Topbar special styles
--------------------------------------------------- */
-.topbar-wrapper {
-  position: relative;
-  height: 40px;
-  margin: 5px 0 15px;
-}
-.topbar-wrapper .topbar {
-  position: absolute;
-  margin: 0 -20px;
-}
-.topbar-wrapper .topbar .topbar-inner {
-  padding-left: 20px;
-  padding-right: 20px;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-
-/* Topbar in js docs
-------------------------- */
-#bootstrap-js .topbar-wrapper {
-  z-index: 1;
-}
-#bootstrap-js .topbar-wrapper .topbar {
-  position: absolute;
-  margin: 0 -20px;
-}
-#bootstrap-js .topbar-wrapper .topbar .topbar-inner {
-  padding-left: 20px;
-  padding-right: 20px;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-#bootstrap-js .topbar-wrapper .container {
-  width: auto;
-}
-
-
 /* Popover docs
 -------------------------------------------------- */
 .popover-well {
@@ -288,15 +254,13 @@ img.large-bird {
 }
 
 
-/* Pretty Print
+/* Misc
 -------------------------------------------------- */
+
 pre.prettyprint {
   overflow: hidden;
 }
 
-
-/* Wells
--------------------------------------------------- */
 .well form {
   margin-bottom: 0;
 }
@@ -311,6 +275,7 @@ h2 + table {
   margin-top: 5px;
 }
 
+
 /* Responsive Docs
 -------------------------------------------------- */
 @media (max-width: 480px) {
@@ -385,6 +350,7 @@ h2 + table {
 
 }
 
+
 @media (min-width: 768px) and (max-width: 940px) {
 
   /* Scale down the jumbotron content */

docs/base-css.html

@@ -197,7 +197,8 @@
   <h2>Lists</h2>
   <div class="row">
     <div class="span3">
-      <h4>Unordered <code>&lt;ul&gt;</code></h4>
+      <h4>Unordered</h4>
+      <p><code>&lt;ul&gt;</code></p>
       <ul>
         <li>Lorem ipsum dolor sit amet</li>
         <li>Consectetur adipiscing elit</li>
@@ -217,7 +218,8 @@
       </ul>
     </div>
     <div class="span3">
-      <h4>Unstyled <code>&lt;ul.unstyled&gt;</code></h4>
+      <h4>Unstyled</h4>
+      <p><code>&lt;ul class="unstyled"&gt;</code></p>
       <ul class="unstyled">
         <li>Lorem ipsum dolor sit amet</li>
         <li>Consectetur adipiscing elit</li>
@@ -237,7 +239,8 @@
       </ul>
     </div>
     <div class="span3">
-      <h4>Ordered <code>&lt;ol&gt;</code></h4>
+      <h4>Ordered</h4>
+      <p><code>&lt;ol&gt;</code></p>
       <ol>
         <li>Lorem ipsum dolor sit amet</li>
         <li>Consectetur adipiscing elit</li>
@@ -250,7 +253,8 @@
       </ol>
     </div>
     <div class="span3">
-      <h4>Description <code>&lt;dl&gt;</code></h4>
+      <h4>Description</h4>
+      <p><code>&lt;dl&gt;</code></p>
       <dl>
         <dt>Description lists</dt>
         <dd>A description list is perfect for defining terms.</dd>
@@ -286,7 +290,7 @@
   &lt;h1&gt;Heading&lt;/h1&gt;
   &lt;p&gt;Something right here...&lt;/p&gt;
 &lt;/div&gt;</pre>
-          <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p>
+          <p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
         </td>
       </tr>
       <tr>

docs/components.html

@@ -548,7 +548,7 @@
   <div class="row">
     <div class="span3">
       <h2>Block messages</h2>
-      <p><code>.alert-message.block-message</code></p>
+      <p><code>&lt;div class="alert-message block-message"&gt;</code></p>
       <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
       <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript &raquo;</a></p>
     </div>

docs/less.html

@@ -185,7 +185,7 @@
         </tr>
           <td>Javascript</td>
           <td>
-            <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
+            <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p>
 <pre class="prettyprint">
 &lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
 &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;

docs/scaffolding.html

@@ -234,7 +234,7 @@
     </div><!-- /col -->
     <div class="span6">
       <h2>Fluid layout</h2>
-      <p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
+      <p><code>&lt;div class="fluid-container"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
       <div class="mini-layout fluid">
         <div class="mini-layout-sidebar"></div>
         <div class="mini-layout-body"></div>