]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
more tweaks to layouts and some docs styles
authorMark Otto <markotto@twitter.com>
Wed, 6 Jun 2012 00:16:17 +0000 (17:16 -0700)
committerMark Otto <markotto@twitter.com>
Wed, 6 Jun 2012 00:16:17 +0000 (17:16 -0700)
13 files changed:
docs/assets/css/docs.css
docs/base-css.html
docs/components.html
docs/download.html
docs/examples.html
docs/index.html
docs/javascript.html
docs/less.html
docs/scaffolding.html
docs/templates/layout.mustache
docs/templates/pages/base-css.mustache
docs/templates/pages/scaffolding.mustache
docs/upgrading.html

index b694f107ab6e0bd13ec84bb01d915fe6144ee8a8..1df8827991d55aad0380ee97751d7d211a89f0f4 100644 (file)
@@ -23,6 +23,10 @@ li {
   line-height: 20px;
 }
 
+.bs-docs-container {
+  max-width: 780px;
+  margin: 0 auto;
+}
 
 /* Tweak navbar brand link to be super sleek
 -------------------------------------------------- */
@@ -64,16 +68,14 @@ hr.soften {
 }
 
 /* Table of contents */
-.bs-docs-content {
+.bs-docs-contents {
   color: #999;
 }
-.bs-docs-contents ol {
-  margin-top: 5px;
-  margin-bottom: 0;
+.bs-docs-contents h3 {
+
 }
 .bs-docs-contents li {
   line-height: 25px;
-  color: #999;
 }
 
 
@@ -130,6 +132,7 @@ hr.soften {
 .subhead {
   padding-bottom: 0;
   margin-bottom: 9px;
+  border-bottom: 1px solid #ddd;
 }
 .subhead h1 {
   font-size: 54px;
@@ -297,10 +300,10 @@ hr.soften {
 .footer {
   padding: 35px 0 36px;
   margin-top: 45px;
+  text-align: center;
   border-top: 1px solid #e5e5e5;
 }
 .footer p {
-  margin-bottom: 5px;
   color: #555;
 }
 
@@ -696,7 +699,7 @@ form.well {
 ------------------------- */
 .bs-docs-grid {
   width: 940px;
-  margin-left: -240px;
+  margin-left: -80px;
 }
 
 
@@ -915,7 +918,7 @@ form.well {
 
   .bs-docs-grid {
     width: 1170px;
-    margin-left: -300px;
+    margin-left: -195px;
   }
 
 }
index 75bfced93754b16540c6c884659d99a52f2d5285..95b4f1f97a66d55137d7bb2b3d6244bdeb7abf8e 100644 (file)
       </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>
       <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">
   <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>
 &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 -->
index 1e324bbfdfc1241595d0432edf9b34c6403512fb..72b86200f8aa936fd00a158978458e9ba063426a 100644 (file)
@@ -74,7 +74,7 @@
       </div>
     </div>
 
-    <div class="container">
+    <div class="bs-docs-container">
 
 <!-- Masthead
 ================================================== -->
@@ -1847,10 +1847,10 @@ class="clearfix"
      <!-- 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 -->
index a387c792177eecd466381072ea763805c9217cab..9979ef26bfe6edccbc94ac8f257508cd018324ad 100644 (file)
@@ -74,7 +74,7 @@
       </div>
     </div>
 
-    <div class="container">
+    <div class="bs-docs-container">
 
 <!-- Masthead
 ================================================== -->
      <!-- 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 -->
index 5e8d74a3b530ab7c043ee8f4c6ca19d6f6fe371c..c70c4b00dc822ffbdf2f0d0d8b801514bc4b4b59 100644 (file)
@@ -74,7 +74,7 @@
       </div>
     </div>
 
-    <div class="container">
+    <div class="bs-docs-container">
 
 <!-- Masthead
 ================================================== -->
      <!-- 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 -->
index 1d55aa23ad0fe18156608fdf151d921045186d12..dbc5b99d0b59cc05dfe1934099820146efd23bce 100644 (file)
@@ -74,7 +74,7 @@
       </div>
     </div>
 
-    <div class="container">
+    <div class="bs-docs-container">
 
 <!-- Masthead
 ================================================== -->
      <!-- 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 -->
index f5276ccdd0d87d2e65801e757cde3b2c427de092..7e604a37b9d0fc9d2b46cbc8c4103abc88d87cff 100644 (file)
@@ -74,7 +74,7 @@
       </div>
     </div>
 
-    <div class="container">
+    <div class="bs-docs-container">
 
 <!-- Masthead
 ================================================== -->
@@ -1508,10 +1508,10 @@ $('.carousel').carousel({
      <!-- 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 -->
index ad860bd4bd5fd70c67337f3b248e2385ae8c9bc3..4a56f65a00e96d78f16cb6c7ff8a18dc495198dd 100644 (file)
@@ -74,7 +74,7 @@
       </div>
     </div>
 
-    <div class="container">
+    <div class="bs-docs-container">
 
 <!-- Masthead
 ================================================== -->
      <!-- 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 -->
index ffc55c3b99641f378ae941b149ac2d17ae867023..5a91d67a67e916a8a12425c21fcc74f906439d8a 100644 (file)
       </div>
     </div>
 
-    <div class="container">
-
-<div class="row">
-  <div class="span3">
-    <div class="bs-docs-contents well">
-      <h3>Contents</h3>
-      <ol>
-        <li><a href="#global">Global styles</a></li>
-        <li><a href="#gridSystem">Grid system</a></li>
-        <li><a href="#fluidGridSystem">Fluid grid system</a></li>
-        <li><a href="#gridCustomization">Customizing</a></li>
-        <li><a href="#layouts">Layouts</a></li>
-        <li><a href="#responsive">Responsive design</a></li>
-      </ol>
-    </div>
-  </div>
-  <div class="span9">
+    <div class="bs-docs-container">
 
 <!-- Masthead
 ================================================== -->
@@ -98,7 +82,6 @@
   <h1>Scaffolding</h1>
   <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
 
-
 <!--   <div class="subnav">
     <ul class="nav nav-pills">
       <li><a href="#global">Global styles</a></li>
  --></header>
 
 
+<section class="bs-docs-contents">
+  <h3>Contents</h3>
+  <ol>
+    <li>
+      <a href="#global">Global styles</a>
+      <ul>
+        <li><a href="#global-1">Requires HTML5 doctype</a></li>
+        <li><a href="#global-2">Typography and links</a></li>
+        <li><a href="#global-3">Reset via Normalize</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#gridSystem">Grid system</a>
+      <ul>
+        <li><a href="#gridSystem-1">Offsetting columns</a></li>
+        <li><a href="#gridSystem-2">Nesting columns</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#fluidGridSystem">Fluid grid system</a>
+      <ul>
+        <li><a href="#fluidGridSystem-1">Nesting fluid columns</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#gridCustomization">Grid Customization</a>
+    </li>
+    <li>
+      <a href="#layouts">Layouts</a>
+      <ul>
+        <li><a href="#layouts-1">Fixed layout</a></li>
+        <li><a href="#layouts-1">Fluid layout</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#responsive">Responsive design</a>
+      <ul>
+        <li><a href="#responsive-1">Responsive utility classes</a></li>
+        <li><a href="#responsive-2">Responsive tests</a></li>
+      </ul>
+    </li>
+  </ol>
+</section>
+
 
 
 <!-- Global Bootstrap settings
 
 </section>
 
-  </div>
-</div>
 
      <!-- 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 -->
index ae2ce4aad0e060a3aff354614a6a1454f926bfe1..3e8448d194ce886d8de3c6138976d587f7ced867 100644 (file)
@@ -86,7 +86,7 @@
       </div>
     </div>
 
-    <div class="container">
+    <div class="bs-docs-container">
 
 {{>body}}
 
      <!-- Footer
       ================================================== -->
       <footer class="footer">
-        <p class="pull-right"><a href="#">{{_i}}Back to top{{/i}}</a></p>
         <p>{{_i}}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>.{{/i}}</p>
         <p>{{_i}}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>.{{/i}}</p>
         <p>{{_i}}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>.{{/i}}</p>
+        <p><a href="#">{{_i}}Back to top{{/i}}</a></p>
       </footer>
 
     </div><!-- /container -->
index 9ef80c1254488b8e831184cb04ea7b8423dcaf15..ce710d7e33425422e51ec467a8403cea0b2b284a 100644 (file)
@@ -3,7 +3,7 @@
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Base CSS{{/i}}</h1>
   <p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
-  <div class="subnav">
+<!--   <div class="subnav">
     <ul class="nav nav-pills">
       <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
       <li><a href="#code">{{_i}}Code{{/i}}</a></li>
       <li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
     </ul>
   </div>
-</header>
+ --></header>
 
 
+<section id="contents">
+  <div class="bs-docs-contents">
+    <h3>{{_i}}Contents{{/i}}</h3>
+    <ol>
+      <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
+      <li><a href="#code">{{_i}}Code{{/i}}</a></li>
+      <li><a href="#tables">{{_i}}Tables{{/i}}</a></li>
+      <li><a href="#forms">{{_i}}Forms{{/i}}</a></li>
+      <li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
+      <li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
+    </ol>
+  </div>
+</section>
+
 <!-- Typography
 ================================================== -->
 <section id="typography">
   <h2>{{_i}}Lists{{/i}}</h2>
 
   <h3>{{_i}}Unordered{{/i}}</h3>
-  <p>{{_i}}A list of items in which the order does not explicitly matter.{{/i}}</p>
+  <p>{{_i}}A list of items in which the order does <em>not</em> explicitly matter.{{/i}}</p>
   <div class="bs-docs-example">
     <ul>
       <li>Lorem ipsum dolor sit amet</li>
 &lt;/ul&gt;
 </pre>
 
-  <h3>{{_i}}Unstyled{{/i}}</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>{{_i}}Ordered{{/i}}</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>{{_i}}A list of items in which the order <em>does</em> explicitly matter.{{/i}}</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>{{_i}}Unstyled{{/i}}</h3>
+  <p>{{_i}}A list of items with no <code>list-style</code> or additional left padding.{{/i}}</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>{{_i}}Description{{/i}}</h3>
-  <p><code>&lt;dl&gt;</code></p>
-  <dl>
-    <dt>{{_i}}Description lists{{/i}}</dt>
-    <dd>{{_i}}A description list is perfect for defining terms.{{/i}}</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>{{_i}}Horizontal description{{/i}}</h3>
-  <p><code>&lt;dl class="dl-horizontal"&gt;</code></p>
-  <dl class="dl-horizontal">
-    <dt>{{_i}}Description lists{{/i}}</dt>
-    <dd>{{_i}}A description list is perfect for defining terms.{{/i}}</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>{{_i}}A list of terms with their associated descriptions.{{/i}}</p>
+  <div class="bs-docs-example">
+    <dl>
+      <dt>{{_i}}Description lists{{/i}}</dt>
+      <dd>{{_i}}A description list is perfect for defining terms.{{/i}}</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>{{_i}}Horizontal description{{/i}}</h4>
+  <p>{{_i}}Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.{{/i}}</p>
+  <div class="bs-docs-example">
+    <dl class="dl-horizontal">
+      <dt>{{_i}}Description lists{{/i}}</dt>
+      <dd>{{_i}}A description list is perfect for defining terms.{{/i}}</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">{{_i}}Heads up!{{/i}}</span>
index d2832e0facafdbc612fb7172c684010d17a31d99..ae17ad4a8ddcbb0e5865000fce5b39bc17aa07be 100644 (file)
@@ -1,26 +1,9 @@
-<div class="row">
-  <div class="span3">
-    <div class="bs-docs-contents well">
-      <h3>{{_i}}Contents{{/i}}</h3>
-      <ol>
-        <li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
-        <li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
-        <li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
-        <li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
-        <li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
-        <li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
-      </ol>
-    </div>
-  </div>
-  <div class="span9">
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Scaffolding{{/i}}</h1>
   <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
 
-
 <!--   <div class="subnav">
     <ul class="nav nav-pills">
       <li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
  --></header>
 
 
+<!-- <section class="bs-docs-contents">
+  <h3>{{_i}}Contents{{/i}}</h3>
+  <ol>
+    <li>
+      <a href="#global">{{_i}}Global styles{{/i}}</a>
+      <ul>
+        <li><a href="#global-1">{{_i}}Requires HTML5 doctype{{/i}}</a></li>
+        <li><a href="#global-2">{{_i}}Typography and links{{/i}}</a></li>
+        <li><a href="#global-3">{{_i}}Reset via Normalize{{/i}}</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#gridSystem">{{_i}}Grid system{{/i}}</a>
+      <ul>
+        <li><a href="#gridSystem-1">{{_i}}Offsetting columns{{/i}}</a></li>
+        <li><a href="#gridSystem-2">{{_i}}Nesting columns{{/i}}</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a>
+      <ul>
+        <li><a href="#fluidGridSystem-1">{{_i}}Nesting fluid columns{{/i}}</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#gridCustomization">{{_i}}Grid Customization{{/i}}</a>
+    </li>
+    <li>
+      <a href="#layouts">{{_i}}Layouts{{/i}}</a>
+      <ul>
+        <li><a href="#layouts-1">{{_i}}Fixed layout{{/i}}</a></li>
+        <li><a href="#layouts-1">{{_i}}Fluid layout{{/i}}</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#responsive">{{_i}}Responsive design{{/i}}</a>
+      <ul>
+        <li><a href="#responsive-1">{{_i}}Responsive utility classes{{/i}}</a></li>
+        <li><a href="#responsive-2">{{_i}}Responsive tests{{/i}}</a></li>
+      </ul>
+    </li>
+  </ol>
+</section>
+ -->
 
 
 <!-- Global Bootstrap settings
   </ul>
 
 </section>
-
-  </div>
-</div>
\ No newline at end of file
index 2a2c3981867ff2b1f42ff7711ccacae2f089b5f7..a2da493ed0896b6db300016500e6633117f9784c 100644 (file)
@@ -74,7 +74,7 @@
       </div>
     </div>
 
-    <div class="container">
+    <div class="bs-docs-container">
 
 <!-- Masthead
 ================================================== -->
      <!-- 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 -->