examples-wrap tables

1 files changed, 183 insertions, 171 deletions

diff --git a/docs/base-css.html b/docs/base-css.html
index 3c5c8743b..a1d8418bb 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -545,7 +545,7 @@ For example, <code>section</code> should be wrapped as inline.
 
   <h2>Table options</h2>
   <table class="table table-bordered table-striped">
-  <thead>
+    <thead>
       <tr>
         <th>Name</th>
         <th>Class</th>
@@ -594,203 +594,215 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 
   <h3>1. Default table styles</h3>
   <p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p>
+  <div class="bs-docs-example">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td>Larry</td>
+          <td>the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 <pre class="prettyprint linenums">
 &lt;table class="table"&gt;
   …
-&lt;/table&gt;</pre>
-
-  <table class="table">
-    <thead>
-      <tr>
-        <th>#</th>
-        <th>First Name</th>
-        <th>Last Name</th>
-        <th>Username</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>1</td>
-        <td>Mark</td>
-        <td>Otto</td>
-        <td>@mdo</td>
-      </tr>
-      <tr>
-        <td>2</td>
-        <td>Jacob</td>
-        <td>Thornton</td>
-        <td>@fat</td>
-      </tr>
-      <tr>
-        <td>3</td>
-        <td>Larry</td>
-        <td>the Bird</td>
-        <td>@twitter</td>
-      </tr>
-    </tbody>
-  </table>
-
+&lt;/table&gt;
+</pre>
 
   <h3>2. Striped table</h3>
   <p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.</p>
   <p class="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
+  <div class="bs-docs-example">
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td>Larry</td>
+          <td>the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 <pre class="prettyprint linenums" style="margin-bottom: 18px;">
 &lt;table class="table table-striped"&gt;
   …
-&lt;/table&gt;</pre>
-
-  <table class="table table-striped">
-    <thead>
-      <tr>
-        <th>#</th>
-        <th>First Name</th>
-        <th>Last Name</th>
-        <th>Username</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>1</td>
-        <td>Mark</td>
-        <td>Otto</td>
-        <td>@mdo</td>
-      </tr>
-      <tr>
-        <td>2</td>
-        <td>Jacob</td>
-        <td>Thornton</td>
-        <td>@fat</td>
-      </tr>
-      <tr>
-        <td>3</td>
-        <td>Larry</td>
-        <td>the Bird</td>
-        <td>@twitter</td>
-      </tr>
-    </tbody>
-  </table>
+&lt;/table&gt;
+</pre>
 
 
   <h3>3. Bordered table</h3>
   <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
+  <div class="bs-docs-example">
+    <table class="table table-bordered">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td rowspan="2">1</td>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@TwBootstrap</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td colspan="2">Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 <pre class="prettyprint linenums">
 &lt;table class="table table-bordered"&gt;
   …
-&lt;/table&gt;</pre>
-
-  <table class="table table-bordered">
-    <thead>
-      <tr>
-        <th>#</th>
-        <th>First Name</th>
-        <th>Last Name</th>
-        <th>Username</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td rowspan="2">1</td>
-        <td>Mark</td>
-        <td>Otto</td>
-        <td>@mdo</td>
-      </tr>
-      <tr>
-        <td>Mark</td>
-        <td>Otto</td>
-        <td>@TwBootstrap</td>
-      </tr>
-      <tr>
-        <td>2</td>
-        <td>Jacob</td>
-        <td>Thornton</td>
-        <td>@fat</td>
-      </tr>
-      <tr>
-        <td>3</td>
-        <td colspan="2">Larry the Bird</td>
-        <td>@twitter</td>
-      </tr>
-    </tbody>
-  </table>
+&lt;/table&gt;
+</pre>
 
   <h3>4. Condensed table</h3>
   <p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).</p>
+  <div class="bs-docs-example">
+    <table class="table table-condensed">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td colspan="2">Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 <pre class="prettyprint linenums" style="margin-bottom: 18px;">
 &lt;table class="table table-condensed"&gt;
   …
-&lt;/table&gt;</pre>
-  <table class="table table-condensed">
-    <thead>
-      <tr>
-        <th>#</th>
-        <th>First Name</th>
-        <th>Last Name</th>
-        <th>Username</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>1</td>
-        <td>Mark</td>
-        <td>Otto</td>
-        <td>@mdo</td>
-      </tr>
-      <tr>
-        <td>2</td>
-        <td>Jacob</td>
-        <td>Thornton</td>
-        <td>@fat</td>
-      </tr>
-      <tr>
-        <td>3</td>
-        <td colspan="2">Larry the Bird</td>
-        <td>@twitter</td>
-      </tr>
-    </tbody>
-  </table>
+&lt;/table&gt;
+</pre>
 
 
   <h3>5. Combine them all!</h3>
   <p>Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.</p>
+  <div class="bs-docs-example">
+    <table class="table table-striped table-bordered table-condensed">
+      <thead>
+        <tr>
+          <th></th>
+          <th colspan="2">Full name</th>
+          <th></th>
+        </tr>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+        <tr>
+          <td>1</td>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td colspan="2">Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 <pre class="prettyprint linenums" style="margin-bottom: 18px;">
 &lt;table class="table table-striped table-bordered table-condensed"&gt;
   ...
-&lt;/table&gt;</pre>
-  <table class="table table-striped table-bordered table-condensed">
-    <thead>
-      <tr>
-        <th></th>
-        <th colspan="2">Full name</th>
-        <th></th>
-      </tr>
-      <tr>
-        <th>#</th>
-        <th>First Name</th>
-        <th>Last Name</th>
-        <th>Username</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-      <tr>
-        <td>1</td>
-        <td>Mark</td>
-        <td>Otto</td>
-        <td>@mdo</td>
-      </tr>
-      <tr>
-        <td>2</td>
-        <td>Jacob</td>
-        <td>Thornton</td>
-        <td>@fat</td>
-      </tr>
-      <tr>
-        <td>3</td>
-        <td colspan="2">Larry the Bird</td>
-        <td>@twitter</td>
-      </tr>
-    </tbody>
-  </table>
+&lt;/table&gt;
+</pre>
+
 </section>
 
 
@@ -859,7 +871,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
   <h2>Example forms <small>using just form controls, no extra markup</small></h2>
   <h3>Basic form</h3>
   <p>Smart and lightweight defaults without extra markup.</p>
-  <form class="well">
+  <form class="bs-docs-example">
     <label>Label name</label>
     <input type="text" class="span3" placeholder="Type something…">
     <p class="help-block">Example block-level help text here.</p>
@@ -882,7 +894,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 
   <h3>Search form</h3>
   <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p>
-  <form class="well form-search">
+  <form class="bs-docs-example form-search">
     <input type="text" class="input-medium search-query">
     <button type="submit" class="btn">Search</button>
   </form>
@@ -895,7 +907,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 
   <h3>Inline form</h3>
   <p>Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.</p>
-  <form class="well form-inline">
+  <form class="bs-docs-example form-inline">
     <input type="text" class="input-small" placeholder="Email">
     <input type="password" class="input-small" placeholder="Password">
     <label class="checkbox">