style-guide 0.0.1

data/app/views/style_guide/partials/_images.erb

@@ -0,0 +1,318 @@
+
+
+        <!-- Images
+        ================================================== -->
+        <section id="images">
+          <div class="page-header">
+            <h1>Images</h1>
+          </div>
+
+          <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
+          <div class="bs-docs-example bs-docs-example-images">
+            <img src="http://placehold.it/140x140" class="img-rounded">
+            <img src="http://placehold.it/140x140" class="img-circle">
+            <img src="http://placehold.it/140x140" class="img-polaroid">
+          </div>
+<pre class="prettyprint linenums">
+&lt;img src="..." class="img-rounded"&gt;
+&lt;img src="..." class="img-circle"&gt;
+&lt;img src="..." class="img-polaroid"&gt;
+</pre>
+          <p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE7-8 due to lack of <code>border-radius</code> support.</p>
+
+
+        </section>
+
+
+
+        <!-- Icons
+        ================================================== -->
+        <section id="icons">
+          <div class="page-header">
+            <h1>Icons <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
+          </div>
+
+          <h2>Icon glyphs</h2>
+          <p>140 icons in sprite form, available in dark gray (default) and white, provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a>.</p>
+          <ul class="the-icons clearfix">
+            <li><i class="icon-glass"></i> icon-glass</li>
+            <li><i class="icon-music"></i> icon-music</li>
+            <li><i class="icon-search"></i> icon-search</li>
+            <li><i class="icon-envelope"></i> icon-envelope</li>
+            <li><i class="icon-heart"></i> icon-heart</li>
+            <li><i class="icon-star"></i> icon-star</li>
+            <li><i class="icon-star-empty"></i> icon-star-empty</li>
+            <li><i class="icon-user"></i> icon-user</li>
+            <li><i class="icon-film"></i> icon-film</li>
+            <li><i class="icon-th-large"></i> icon-th-large</li>
+            <li><i class="icon-th"></i> icon-th</li>
+            <li><i class="icon-th-list"></i> icon-th-list</li>
+            <li><i class="icon-ok"></i> icon-ok</li>
+            <li><i class="icon-remove"></i> icon-remove</li>
+            <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
+            <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
+            <li><i class="icon-off"></i> icon-off</li>
+            <li><i class="icon-signal"></i> icon-signal</li>
+            <li><i class="icon-cog"></i> icon-cog</li>
+            <li><i class="icon-trash"></i> icon-trash</li>
+            <li><i class="icon-home"></i> icon-home</li>
+            <li><i class="icon-file"></i> icon-file</li>
+            <li><i class="icon-time"></i> icon-time</li>
+            <li><i class="icon-road"></i> icon-road</li>
+            <li><i class="icon-download-alt"></i> icon-download-alt</li>
+            <li><i class="icon-download"></i> icon-download</li>
+            <li><i class="icon-upload"></i> icon-upload</li>
+            <li><i class="icon-inbox"></i> icon-inbox</li>
+
+            <li><i class="icon-play-circle"></i> icon-play-circle</li>
+            <li><i class="icon-repeat"></i> icon-repeat</li>
+            <li><i class="icon-refresh"></i> icon-refresh</li>
+            <li><i class="icon-list-alt"></i> icon-list-alt</li>
+            <li><i class="icon-lock"></i> icon-lock</li>
+            <li><i class="icon-flag"></i> icon-flag</li>
+            <li><i class="icon-headphones"></i> icon-headphones</li>
+            <li><i class="icon-volume-off"></i> icon-volume-off</li>
+            <li><i class="icon-volume-down"></i> icon-volume-down</li>
+            <li><i class="icon-volume-up"></i> icon-volume-up</li>
+            <li><i class="icon-qrcode"></i> icon-qrcode</li>
+            <li><i class="icon-barcode"></i> icon-barcode</li>
+            <li><i class="icon-tag"></i> icon-tag</li>
+            <li><i class="icon-tags"></i> icon-tags</li>
+            <li><i class="icon-book"></i> icon-book</li>
+            <li><i class="icon-bookmark"></i> icon-bookmark</li>
+            <li><i class="icon-print"></i> icon-print</li>
+            <li><i class="icon-camera"></i> icon-camera</li>
+            <li><i class="icon-font"></i> icon-font</li>
+            <li><i class="icon-bold"></i> icon-bold</li>
+            <li><i class="icon-italic"></i> icon-italic</li>
+            <li><i class="icon-text-height"></i> icon-text-height</li>
+            <li><i class="icon-text-width"></i> icon-text-width</li>
+            <li><i class="icon-align-left"></i> icon-align-left</li>
+            <li><i class="icon-align-center"></i> icon-align-center</li>
+            <li><i class="icon-align-right"></i> icon-align-right</li>
+            <li><i class="icon-align-justify"></i> icon-align-justify</li>
+            <li><i class="icon-list"></i> icon-list</li>
+
+            <li><i class="icon-indent-left"></i> icon-indent-left</li>
+            <li><i class="icon-indent-right"></i> icon-indent-right</li>
+            <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
+            <li><i class="icon-picture"></i> icon-picture</li>
+            <li><i class="icon-pencil"></i> icon-pencil</li>
+            <li><i class="icon-map-marker"></i> icon-map-marker</li>
+            <li><i class="icon-adjust"></i> icon-adjust</li>
+            <li><i class="icon-tint"></i> icon-tint</li>
+            <li><i class="icon-edit"></i> icon-edit</li>
+            <li><i class="icon-share"></i> icon-share</li>
+            <li><i class="icon-check"></i> icon-check</li>
+            <li><i class="icon-move"></i> icon-move</li>
+            <li><i class="icon-step-backward"></i> icon-step-backward</li>
+            <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
+            <li><i class="icon-backward"></i> icon-backward</li>
+            <li><i class="icon-play"></i> icon-play</li>
+            <li><i class="icon-pause"></i> icon-pause</li>
+            <li><i class="icon-stop"></i> icon-stop</li>
+            <li><i class="icon-forward"></i> icon-forward</li>
+            <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
+            <li><i class="icon-step-forward"></i> icon-step-forward</li>
+            <li><i class="icon-eject"></i> icon-eject</li>
+            <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
+            <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
+            <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
+            <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
+            <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
+            <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
+
+            <li><i class="icon-question-sign"></i> icon-question-sign</li>
+            <li><i class="icon-info-sign"></i> icon-info-sign</li>
+            <li><i class="icon-screenshot"></i> icon-screenshot</li>
+            <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
+            <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
+            <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
+            <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
+            <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
+            <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
+            <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
+            <li><i class="icon-share-alt"></i> icon-share-alt</li>
+            <li><i class="icon-resize-full"></i> icon-resize-full</li>
+            <li><i class="icon-resize-small"></i> icon-resize-small</li>
+            <li><i class="icon-plus"></i> icon-plus</li>
+            <li><i class="icon-minus"></i> icon-minus</li>
+            <li><i class="icon-asterisk"></i> icon-asterisk</li>
+            <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
+            <li><i class="icon-gift"></i> icon-gift</li>
+            <li><i class="icon-leaf"></i> icon-leaf</li>
+            <li><i class="icon-fire"></i> icon-fire</li>
+            <li><i class="icon-eye-open"></i> icon-eye-open</li>
+            <li><i class="icon-eye-close"></i> icon-eye-close</li>
+            <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
+            <li><i class="icon-plane"></i> icon-plane</li>
+            <li><i class="icon-calendar"></i> icon-calendar</li>
+            <li><i class="icon-random"></i> icon-random</li>
+            <li><i class="icon-comment"></i> icon-comment</li>
+            <li><i class="icon-magnet"></i> icon-magnet</li>
+
+            <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
+            <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
+            <li><i class="icon-retweet"></i> icon-retweet</li>
+            <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
+            <li><i class="icon-folder-close"></i> icon-folder-close</li>
+            <li><i class="icon-folder-open"></i> icon-folder-open</li>
+            <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
+            <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
+            <li><i class="icon-hdd"></i> icon-hdd</li>
+            <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
+            <li><i class="icon-bell"></i> icon-bell</li>
+            <li><i class="icon-certificate"></i> icon-certificate</li>
+            <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
+            <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
+            <li><i class="icon-hand-right"></i> icon-hand-right</li>
+            <li><i class="icon-hand-left"></i> icon-hand-left</li>
+            <li><i class="icon-hand-up"></i> icon-hand-up</li>
+            <li><i class="icon-hand-down"></i> icon-hand-down</li>
+            <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
+            <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
+            <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
+            <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
+            <li><i class="icon-globe"></i> icon-globe</li>
+            <li><i class="icon-wrench"></i> icon-wrench</li>
+            <li><i class="icon-tasks"></i> icon-tasks</li>
+            <li><i class="icon-filter"></i> icon-filter</li>
+            <li><i class="icon-briefcase"></i> icon-briefcase</li>
+            <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
+          </ul>
+
+          <h3>Glyphicons attribution</h3>
+          <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
+
+
+          <hr class="bs-docs-separator">
+
+
+          <h2>How to use</h2>
+          <p>All icons require an <code>&lt;i&gt;</code> tag with a unique class, prefixed with <code>icon-</code>. To use, place the following code just about anywhere:</p>
+<pre class="prettyprint linenums">
+&lt;i class="icon-search"&gt;&lt;/i&gt;
+</pre>
+          <p>There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.</p>
+<pre class="prettyprint linenums">
+&lt;i class="icon-search icon-white"&gt;&lt;/i&gt;
+</pre>
+          <p>
+            <span class="label label-info">Heads up!</span>
+            When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.
+          </p>
+
+
+          <hr class="bs-docs-separator">
+
+
+          <h2>Icon examples</h2>
+          <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
+
+          <h4>Buttons</h4>
+
+          <h5>Button group in a button toolbar</h5>
+          <div class="bs-docs-example">
+            <div class="btn-toolbar">
+              <div class="btn-group">
+                <a class="btn" href="#"><i class="icon-align-left"></i></a>
+                <a class="btn" href="#"><i class="icon-align-center"></i></a>
+                <a class="btn" href="#"><i class="icon-align-right"></i></a>
+                <a class="btn" href="#"><i class="icon-align-justify"></i></a>
+              </div>
+            </div>
+          </div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-toolbar"&gt;
+  &lt;div class="btn-group"&gt;
+
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
+    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-justify"&gt;&lt;/i&gt;&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+          <h5>Dropdown in a button group</h5>
+          <div class="bs-docs-example">
+            <div class="btn-group">
+              <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
+              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
+                <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
+                <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
+                <li class="divider"></li>
+                <li><a href="#"><i class="i"></i> Make admin</a></li>
+              </ul>
+            </div>
+          </div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group"&gt;
+  &lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user icon-white"&gt;&lt;/i&gt; User&lt;/a&gt;
+  &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
+  &lt;ul class="dropdown-menu"&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; Ban&lt;/a&gt;&lt;/li&gt;
+    &lt;li class="divider"&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Make admin&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+          <h5>Small button</h5>
+          <div class="bs-docs-example">
+            <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+          </div>
+<pre class="prettyprint linenums">
+&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
+</pre>
+
+
+          <h4>Navigation</h4>
+          <div class="bs-docs-example">
+            <div class="well" style="padding: 8px 0; margin-bottom: 0;">
+              <ul class="nav nav-list">
+                <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
+                <li><a href="#"><i class="icon-book"></i> Library</a></li>
+                <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
+                <li><a href="#"><i class="i"></i> Misc</a></li>
+              </ul>
+            </div>
+          </div>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-list"&gt;
+  &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="icon-home icon-white"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-book"&gt;&lt;/i&gt; Library&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Applications&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Misc&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+          <h4>Form fields</h4>
+          <form class="bs-docs-example form-horizontal">
+            <div class="control-group">
+              <label class="control-label" for="inputIcon">Email address</label>
+              <div class="controls">
+                <div class="input-prepend">
+                  <span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
+                </div>
+              </div>
+            </div>
+          </form>
+<pre class="prettyprint linenums">
+&lt;div class="control-group"&gt;
+  &lt;label class="control-label" for="inputIcon"&gt;Email address&lt;/label&gt;
+  &lt;div class="controls"&gt;
+    &lt;div class="input-prepend"&gt;
+      &lt;span class="add-on"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
+      &lt;input class="span2" id="inputIcon" type="text"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+        </section>
+

data/app/views/style_guide/partials/_tables.erb

@@ -0,0 +1,409 @@
+
+
+
+
+        <!-- Tables
+        ================================================== -->
+        <section id="tables">
+          <div class="page-header">
+            <h1>Tables</h1>
+          </div>
+
+          <h2>Default styles</h2>
+          <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>.</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>
+
+
+          <hr class="bs-docs-separator">
+
+
+          <h2>Optional classes</h2>
+          <p>Add any of the following classes to the <code>.table</code> base class.</p>
+
+          <h3><code>.table-striped</code></h3>
+          <p>Adds zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (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>
+
+          <h3><code>.table-bordered</code></h3>
+          <p>Add borders and rounded corners to the table.</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>
+
+          <h3><code>.table-hover</code></h3>
+          <p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
+          <div class="bs-docs-example">
+            <table class="table table-hover">
+              <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-hover"&gt;
+  …
+&lt;/table&gt;
+</pre>
+
+          <h3><code>.table-condensed</code></h3>
+          <p>Makes tables more compact by cutting cell padding in half.</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>
+
+
+          <hr class="bs-docs-separator">
+
+
+          <h2>Optional row classes</h2>
+          <p>Use contextual classes to color table rows.</p>
+          <table class="table table-bordered table-striped">
+            <colgroup>
+              <col class="span1">
+              <col class="span7">
+            </colgroup>
+            <thead>
+              <tr>
+                <th>Class</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <code>.success</code>
+                </td>
+                <td>Indicates a successful or positive action.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>.error</code>
+                </td>
+                <td>Indicates a dangerous or potentially negative action.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>.warning</code>
+                </td>
+                <td>Indicates a warning that might need attention.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>.info</code>
+                </td>
+                <td>Used as an alternative to the default styles.</td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="bs-docs-example">
+            <table class="table">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>Product</th>
+                  <th>Payment Taken</th>
+                  <th>Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="success">
+                  <td>1</td>
+                  <td>TB - Monthly</td>
+                  <td>01/04/2012</td>
+                  <td>Approved</td>
+                </tr>
+                <tr class="error">
+                  <td>2</td>
+                  <td>TB - Monthly</td>
+                  <td>02/04/2012</td>
+                  <td>Declined</td>
+                </tr>
+                <tr class="warning">
+                  <td>3</td>
+                  <td>TB - Monthly</td>
+                  <td>03/04/2012</td>
+                  <td>Pending</td>
+                </tr>
+                <tr class="info">
+                  <td>4</td>
+                  <td>TB - Monthly</td>
+                  <td>04/04/2012</td>
+                  <td>Call in to confirm</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+<pre class="prettyprint linenums">
+...
+  &lt;tr class="success"&gt;
+    &lt;td&gt;1&lt;/td&gt;
+    &lt;td&gt;TB - Monthly&lt;/td&gt;
+    &lt;td&gt;01/04/2012&lt;/td&gt;
+    &lt;td&gt;Approved&lt;/td&gt;
+  &lt;/tr&gt;
+...
+</pre>
+
+
+          <hr class="bs-docs-separator">
+
+
+          <h2>Supported table markup</h2>
+          <p>List of supported table HTML elements and how they should be used.</p>
+          <table class="table table-bordered table-striped">
+            <colgroup>
+              <col class="span1">
+              <col class="span7">
+            </colgroup>
+            <thead>
+              <tr>
+                <th>Tag</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <code>&lt;table&gt;</code>
+                </td>
+                <td>
+                  Wrapping element for displaying data in a tabular format
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;thead&gt;</code>
+                </td>
+                <td>
+                  Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;tbody&gt;</code>
+                </td>
+                <td>
+                  Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;tr&gt;</code>
+                </td>
+                <td>
+                  Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;td&gt;</code>
+                </td>
+                <td>
+                  Default table cell
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;th&gt;</code>
+                </td>
+                <td>
+                  Special table cell for column (or row, depending on scope and placement) labels<br>
+                  Must be used within a <code>&lt;thead&gt;</code>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>&lt;caption&gt;</code>
+                </td>
+                <td>
+                  Description or summary of what the table holds, especially useful for screen readers
+                </td>
+              </tr>
+            </tbody>
+          </table>
+<pre class="prettyprint linenums">
+&lt;table&gt;
+  &lt;caption&gt;...&lt;/caption&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;...&lt;/th&gt;
+      &lt;th&gt;...&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;...&lt;/td&gt;
+      &lt;td&gt;...&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+        </section>