examples-wrap tables

docs/base-css.html

@@ -594,11 +594,7 @@ For example, <code>section</code> 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>
-<pre class="prettyprint linenums">
-&lt;table class="table"&gt;
-  …
-&lt;/table&gt;</pre>
-
+  <div class="bs-docs-example">
     <table class="table">
       <thead>
         <tr>
@@ -629,16 +625,17 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         </tr>
       </tbody>
     </table>
-
+  </div>
+<pre class="prettyprint linenums">
+&lt;table class="table"&gt;
+  …
+&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>
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table table-striped"&gt;
-  …
-&lt;/table&gt;</pre>
-
+  <div class="bs-docs-example">
     <table class="table table-striped">
       <thead>
         <tr>
@@ -669,15 +666,17 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         </tr>
       </tbody>
     </table>
+  </div>
+<pre class="prettyprint linenums" style="margin-bottom: 18px;">
+&lt;table class="table table-striped"&gt;
+  …
+&lt;/table&gt;
+</pre>
 
 
   <h3>3. Bordered table</h3>
   <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
-<pre class="prettyprint linenums">
-&lt;table class="table table-bordered"&gt;
-  …
-&lt;/table&gt;</pre>
-
+  <div class="bs-docs-example">
     <table class="table table-bordered">
       <thead>
         <tr>
@@ -712,13 +711,16 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         </tr>
       </tbody>
     </table>
+  </div>
+<pre class="prettyprint linenums">
+&lt;table class="table table-bordered"&gt;
+  …
+&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>
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table table-condensed"&gt;
-  …
-&lt;/table&gt;</pre>
+  <div class="bs-docs-example">
     <table class="table table-condensed">
       <thead>
         <tr>
@@ -748,14 +750,17 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         </tr>
       </tbody>
     </table>
+  </div>
+<pre class="prettyprint linenums" style="margin-bottom: 18px;">
+&lt;table class="table table-condensed"&gt;
+  …
+&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>
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table table-striped table-bordered table-condensed"&gt;
-  ...
-&lt;/table&gt;</pre>
+  <div class="bs-docs-example">
     <table class="table table-striped table-bordered table-condensed">
       <thead>
         <tr>
@@ -791,6 +796,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         </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>
+
 </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">

docs/templates/pages/base-css.mustache

@@ -524,11 +524,7 @@
 
   <h3>1. {{_i}}Default table styles{{/i}}</h3>
   <p>{{_i}}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.{{/i}}</p>
-<pre class="prettyprint linenums">
-&lt;table class="table"&gt;
-  …
-&lt;/table&gt;</pre>
-
+  <div class="bs-docs-example">
     <table class="table">
       <thead>
         <tr>
@@ -559,16 +555,17 @@
         </tr>
       </tbody>
     </table>
-
+  </div>{{! /example }}
+<pre class="prettyprint linenums">
+&lt;table class="table"&gt;
+  …
+&lt;/table&gt;
+</pre>
 
   <h3>2. {{_i}}Striped table{{/i}}</h3>
   <p>{{_i}}Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.{{/i}}</p>
   <p class="muted">{{_i}}<strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.{{/i}}</p>
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table table-striped"&gt;
-  …
-&lt;/table&gt;</pre>
-
+  <div class="bs-docs-example">
     <table class="table table-striped">
       <thead>
         <tr>
@@ -599,15 +596,17 @@
         </tr>
       </tbody>
     </table>
+  </div>{{! /example }}
+<pre class="prettyprint linenums" style="margin-bottom: 18px;">
+&lt;table class="table table-striped"&gt;
+  …
+&lt;/table&gt;
+</pre>
 
 
   <h3>3. {{_i}}Bordered table{{/i}}</h3>
   <p>{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}</p>
-<pre class="prettyprint linenums">
-&lt;table class="table table-bordered"&gt;
-  …
-&lt;/table&gt;</pre>
-
+  <div class="bs-docs-example">
     <table class="table table-bordered">
       <thead>
         <tr>
@@ -642,13 +641,16 @@
         </tr>
       </tbody>
     </table>
+  </div>{{! /example }}
+<pre class="prettyprint linenums">
+&lt;table class="table table-bordered"&gt;
+  …
+&lt;/table&gt;
+</pre>
 
   <h3>4. {{_i}}Condensed table{{/i}}</h3>
   <p>{{_i}}Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).{{/i}}</p>
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table table-condensed"&gt;
-  …
-&lt;/table&gt;</pre>
+  <div class="bs-docs-example">
     <table class="table table-condensed">
       <thead>
         <tr>
@@ -678,14 +680,17 @@
         </tr>
       </tbody>
     </table>
+  </div>{{! /example }}
+<pre class="prettyprint linenums" style="margin-bottom: 18px;">
+&lt;table class="table table-condensed"&gt;
+  …
+&lt;/table&gt;
+</pre>
 
 
   <h3>5. {{_i}}Combine them all!{{/i}}</h3>
   <p>{{_i}}Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.{{/i}}</p>
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table table-striped table-bordered table-condensed"&gt;
-  ...
-&lt;/table&gt;</pre>
+  <div class="bs-docs-example">
     <table class="table table-striped table-bordered table-condensed">
       <thead>
         <tr>
@@ -721,6 +726,13 @@
         </tr>
       </tbody>
     </table>
+  </div>{{! /example }}
+<pre class="prettyprint linenums" style="margin-bottom: 18px;">
+&lt;table class="table table-striped table-bordered table-condensed"&gt;
+  ...
+&lt;/table&gt;
+</pre>
+
 </section>
 
 
@@ -789,7 +801,7 @@
   <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
   <h3>{{_i}}Basic form{{/i}}</h3>
   <p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p>
-  <form class="well">
+  <form class="bs-docs-example">
     <label>{{_i}}Label name{{/i}}</label>
     <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
     <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
@@ -797,7 +809,7 @@
       <input type="checkbox"> {{_i}}Check me out{{/i}}
     </label>
     <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
-  </form>
+  </form>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;form class="well"&gt;
   &lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
@@ -812,10 +824,10 @@
 
   <h3>{{_i}}Search form{{/i}}</h3>
   <p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</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">{{_i}}Search{{/i}}</button>
-  </form>
+  </form>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;form class="well form-search"&gt;
   &lt;input type="text" class="input-medium search-query"&gt;
@@ -825,14 +837,14 @@
 
   <h3>{{_i}}Inline form{{/i}}</h3>
   <p>{{_i}}Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.{{/i}}</p>
-  <form class="well form-inline">
+  <form class="bs-docs-example form-inline">
     <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
     <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
     <label class="checkbox">
       <input type="checkbox"> {{_i}}Remember me{{/i}}
     </label>
     <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
-  </form>
+  </form>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;form class="well form-inline"&gt;
   &lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt;