adding code and .label sections to type section

1 files changed, 120 insertions, 1 deletions

diff --git a/docs/index.html b/docs/index.html
index 42c548ea3..09e7951fe 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -136,10 +136,11 @@
       <h3>What's included</h3>
       <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
       <ul>
+        <li><span class="label">New in 1.3</span> Javascript plugins</li>
         <li>All original .less files</li>
         <li>Fully compiled and minified CSS</li>
         <li>Complete styleguide documentation</li>
-        <li>Example page template (more to come soon)</li>
+        <li>Three example pages with different Bootstrap layouts</li>
       </ul>
     </div>
   </div><!-- /row -->
@@ -574,6 +575,124 @@
       </dl>
     </div>
   </div><!-- /row -->
+
+
+  <!-- Code -->
+  <div class="row">
+    <div class="span4">
+      <h2>Code</h2>
+      <p>
+        <code>&lt;code&gt;</code>
+        <code>&lt;pre&gt;</code>
+      </p>
+      <p>Pimp your code in style with two simple tags. For even more awesomeness through javascript, drop in Google's code prettify library and you're set.</p>
+    </div>
+    <div class="span12">
+      <h3>Presenting code</h3>
+      <p>Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <code>&lt;pre&gt;</code> element. For inline code, use the <code>&lt;code&gt;</code> element.</p>
+      <table>
+        <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>&gt;html&lt;</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>pre</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, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</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>
+              <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>
+    </div>
+  </div><!-- /row -->
+
+  <!-- Labels -->
+  <div class="row">
+    <div class="span4">
+      <h2>Inline labelsM</h2>
+      <p>Call attention to or flag any phrase in your body text.</p>
+      <p>
+        <code>&lt;span class="label"&gt;</code>
+      </p>
+    </div>
+    <div class="span12">
+      <h3>Label anything</h3>
+      <p>Ever needed one of those fancy <span class="label success">New!</span> or <span class="label important">Important</span> flags when writing code? Well, now you have them. Here's what's included by default:</p>
+      <table>
+        <thead>
+          <tr>
+            <th style="width: 50%;">Label</th>
+            <th>Result</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
+            </td>
+            <td>
+              <span class="label">Default</span>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code>&lt;span class="label success"&gt;New&lt;/span&gt;</code>
+            </td>
+            <td>
+              <span class="label success">New</span>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code>&lt;span class="label warning"&gt;Warning&lt;/span&gt;</code>
+            </td>
+            <td>
+              <span class="label warning">Warning</span>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code>&lt;span class="label important"&gt;Important&lt;/span&gt;</code>
+            </td>
+            <td>
+              <span class="label important">Important</span>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code>&lt;span class="label notice"&gt;Notice&lt;/span&gt;</code>
+            </td>
+            <td>
+              <span class="label notice">Notice</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div><!-- /row -->
+
 </section>