Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip

6 files changed, 95 insertions, 95 deletions

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index acebb64d3..3936d8c20 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -3,6 +3,10 @@
   visibility: hidden;
 }
 @media (max-width: 480px) {
+  .page-header h1 small {
+    display: block;
+    line-height: 18px;
+  }
   .form-horizontal .control-group > label {
     float: none;
     width: auto;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 5a6bd971f..41029ded1 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -657,14 +657,13 @@ form.well {
   }
 
   /* Change up some type stuff */
-  h1 small {
-    display: block;
-    line-height: 20px;
-  }
-  /* More space between sections */
   h2 {
     margin-top: 27px;
   }
+  h2 small {
+    display: block;
+    line-height: 18px;
+  }
   h3 {
     margin-top: 18px;
   }
@@ -681,6 +680,7 @@ form.well {
   }
   .jumbotron p {
     margin-right: 0;
+    margin-left: 0;
     font-size: 18px;
     line-height: 24px;
   }
@@ -695,6 +695,10 @@ form.well {
   .quick-links {
     margin: 40px 0 0;
   }
+  .quick-links li {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
   /* hide the bullets on mobile since our horizontal space is limited */
   .quick-links .divider {
     display: none;
@@ -744,10 +748,10 @@ form.well {
   .subnav .nav > li {
     float: none;
   }
-  .subnav .nav a {
+  .subnav .nav > li > a {
     border: 0;
   }
-  .subnav .nav li + li a {
+  .subnav .nav > li + li a {
     border-top: 1px solid #e5e5e5;
   }
 
diff --git a/docs/base-css.html b/docs/base-css.html
index 167cb5e69..740e0e143 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -71,6 +71,7 @@
   <div class="subnav">
     <ul class="nav pills">
       <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>
@@ -343,51 +344,46 @@
       </dl>
     </div>
   </div><!-- /row -->
+</section>
 
 
-  <!-- Code -->
-
-  <h2>Code <small>Inline and block</small></h2>
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 190px;">Element</th>
-        <th>Result</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><code>&lt;code&gt;</code></td>
-        <td>In a line of text like this, your wrapped code will look like this <code>&lt;html&gt;</code> element.</td>
-      </tr>
-      <tr>
-        <td><code>&lt;pre&gt;</code></td>
-        <td>
-<pre>&lt;div&gt;
-  &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>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
-        </td>
-      </tr>
-      <tr>
-        <td><code>&lt;pre class="prettyprint"&gt;</code></td>
-        <td>
-          <p>Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
-<pre class="prettyprint">&lt;div&gt;
-  &lt;h1&gt;Heading&lt;/h1&gt;
-  &lt;p&gt;Something right here…&lt;/p&gt;
-&lt;/div&gt;</pre>
-<pre class="prettyprint linenums">&lt;div&gt;
-  &lt;h1&gt;Heading&lt;/h1&gt;
-  &lt;p&gt;Something right here…&lt;/p&gt;
-&lt;/div&gt;</pre>
-          <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
 
+<!-- Code
+================================================== -->
+<section id="code">
+  <div class="page-header">
+    <h1>Code <small>Inline and block code snippets</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h2>Inline</h2>
+      <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
+<pre class="prettyprint linenums">
+For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
+</pre>
+    </div><!--/span-->
+    <div class="span4">
+      <h2>Basic block</h2>
+      <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.</p>
+<pre class="prettyprint linenums" style="margin-bottom: 9px;">
+&lt;pre&gt;
+  &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
+&lt;/pre&gt;
+</pre>
+      <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>
+    </div><!--/span-->
+    <div class="span4">
+      <h2>Google Prettify</h2>
+      <p>Take the same <code>&lt;pre&gt;</code> element and add two optional classes for enhanced rendering.</p>
+<pre class="prettyprint linenums" style="margin-bottom: 9px;">
+&lt;pre class="prettyprint
+     linenums"&gt;
+  &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
+&lt;/pre&gt;
+</pre>
+      <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
+    </div><!--/span-->
+  </div><!--/row-->
 </section>
 
 
@@ -1070,9 +1066,9 @@
           <div class="control-group">
             <label class="control-label">Form sizes</label>
             <div class="controls docs-input-sizes">
+              <input class="span1" type="text" placeholder=".span1">
               <input class="span2" type="text" placeholder=".span2">
               <input class="span3" type="text" placeholder=".span3">
-              <input class="span4" type="text" placeholder=".span4">
               <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
             </div>
           </div>
diff --git a/docs/components.html b/docs/components.html
index a52558220..499e6b87c 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -948,7 +948,7 @@
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
-        <th style="width: 190px;">Labels</th>
+        <th>Labels</th>
         <th>Markup</th>
       </tr>
     </thead>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index ad27d2be8..23d72efd5 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -6,6 +6,7 @@
   <div class="subnav">
     <ul class="nav pills">
       <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>
@@ -278,51 +279,46 @@
       </dl>
     </div>
   </div><!-- /row -->
+</section>
 
 
-  <!-- Code -->
-
-  <h2>{{_i}}Code <small>Inline and block</small>{{/i}}</h2>
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 190px;">{{_i}}Element{{/i}}</th>
-        <th>{{_i}}Result{{/i}}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><code>&lt;code&gt;</code></td>
-        <td>{{_i}}In a line of text like this, your wrapped code will look like this <code>&lt;html&gt;</code> element.{{/i}}</td>
-      </tr>
-      <tr>
-        <td><code>&lt;pre&gt;</code></td>
-        <td>
-<pre>&lt;div&gt;
-  &lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
-  &lt;p&gt;{{_i}}Something right here…{{/i}}&lt;/p&gt;
-&lt;/div&gt;</pre>
-          <p>{{_i}}<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.{{/i}}</p>
-        </td>
-      </tr>
-      <tr>
-        <td><code>&lt;pre class="prettyprint"&gt;</code></td>
-        <td>
-          <p>{{_i}}Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}</p>
-<pre class="prettyprint">&lt;div&gt;
-  &lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
-  &lt;p&gt;{{_i}}Something right here…{{/i}}&lt;/p&gt;
-&lt;/div&gt;</pre>
-<pre class="prettyprint linenums">&lt;div&gt;
-  &lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
-  &lt;p&gt;{{_i}}Something right here…{{/i}}&lt;/p&gt;
-&lt;/div&gt;</pre>
-          <p>{{_i}}<a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.{{/i}}</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
 
+<!-- Code
+================================================== -->
+<section id="code">
+  <div class="page-header">
+    <h1>{{_i}}Code{{/i}} <small>{{_i}}Inline and block code snippets{{/i}}</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h2>Inline</h2>
+      <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
+<pre class="prettyprint linenums">
+{{_i}}For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.{{/i}}
+</pre>
+    </div><!--/span-->
+    <div class="span4">
+      <h2>Basic block</h2>
+      <p>{{_i}}Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}</p>
+<pre class="prettyprint linenums" style="margin-bottom: 9px;">
+&lt;pre&gt;
+  &amp;lt;p&amp;gt;{{_i}}Sample text here...{{/i}}&amp;lt;/p&amp;gt;
+&lt;/pre&gt;
+</pre>
+      <p>{{_i}}<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.{{/i}}</p>
+    </div><!--/span-->
+    <div class="span4">
+      <h2>Google Prettify</h2>
+      <p>Take the same <code>&lt;pre&gt;</code> element and add two optional classes for enhanced rendering.</p>
+<pre class="prettyprint linenums" style="margin-bottom: 9px;">
+&lt;pre class="prettyprint
+     linenums"&gt;
+  &amp;lt;p&amp;gt;{{_i}}Sample text here...{{/i}}&amp;lt;/p&amp;gt;
+&lt;/pre&gt;
+</pre>
+      <p>{{_i}}<a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.{{/i}}</p>
+    </div><!--/span-->
+  </div><!--/row-->
 </section>
 
 
@@ -1005,9 +1001,9 @@
           <div class="control-group">
             <label class="control-label">{{_i}}Form sizes{{/i}}</label>
             <div class="controls docs-input-sizes">
+              <input class="span1" type="text" placeholder=".span1">
               <input class="span2" type="text" placeholder=".span2">
               <input class="span3" type="text" placeholder=".span3">
-              <input class="span4" type="text" placeholder=".span4">
               <p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
             </div>
           </div>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 98e7c3f3f..d08ea98b5 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -883,7 +883,7 @@
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
-        <th style="width: 190px;">{{_i}}Labels{{/i}}</th>
+        <th>{{_i}}Labels{{/i}}</th>
         <th>{{_i}}Markup{{/i}}</th>
       </tr>
     </thead>