]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
address issue #414 and fix up a number of docs loose ends
authorMark Otto <mark.otto@twitter.com>
Thu, 27 Oct 2011 06:24:22 +0000 (23:24 -0700)
committerMark Otto <mark.otto@twitter.com>
Thu, 27 Oct 2011 06:24:22 +0000 (23:24 -0700)
docs/assets/css/docs.css
docs/base-css.html
docs/components.html
docs/less.html
docs/scaffolding.html

index 8ed81e713a8846002b8e34e50c65d5761f87fa85..3a4dcff1c3dedf699d9728d35559623b45f0bef6 100644 (file)
@@ -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 */
index e3b3782c0ae99f3daee7ed279a4a1b946882783e..47dff40e72b50af1239123f4389149b03ec841c6 100644 (file)
   <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>
       </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>
       </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>
       </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>
   &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>
index 0e3f0a223f1f956119231127cbf3ae568d2afb69..59273ac195d9dc0f8266484d6f2407bced6f1da8 100644 (file)
   <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>
index 806c2eedecac50dc045eb91f69a1f67902e2e431..d5a467bfa20692119b5fb33ea883bb755d2fc88d 100644 (file)
         </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;
index 9334e830c100ec1cb10c096bd83a5ba1a2cb4457..2a5ae8bc632cea064452b477808c2deb9ce4576d 100644 (file)
     </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>