redo the buttons examples

diff --git a/docs/css.html b/docs/css.html
index 501c791df8dd87388208f725f94fdcaef90601a3..dd7654ad1256b0899e6dd88e9c0c9282a213ea80 100644 (file)
--- a/docs/css.html
+++ b/docs/css.html
@@ -162,7 +162,7 @@ title: CSS
           <h2 id="emphasis">Emphasis</h2>
           <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
 
-          <h3><code>&lt;small&gt;</code></h3>
+          <h3>Small text</h3>
           <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>
           <div class="bs-docs-example">
             <p><small>This line of text is meant to be treated as fine print.</small></p>
@@ -225,8 +225,8 @@ title: CSS
           <h2 id="abbreviations">Abbreviations</h2>
           <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
 
-          <h3><code>&lt;abbr&gt;</code></h3>
-          <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p>
+          <h3>Basic abbreviation</h3>
+          <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
           <div class="bs-docs-example">
             <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
           </div>
@@ -234,7 +234,7 @@ title: CSS
 <abbr title="attribute">attr</abbr>
 {% endhighlight %}
 
-          <h3><code>&lt;abbr class="initialism"&gt;</code></h3>
+          <h3>Initialism</h3>
           <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
           <div class="bs-docs-example">
             <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
@@ -246,10 +246,7 @@ title: CSS
 
           <!-- Addresses -->
           <h2 id="addresses">Addresses</h2>
-          <p>Present contact information for the nearest ancestor or the entire body of work.</p>
-
-          <h3><code>&lt;address&gt;</code></h3>
-          <p>Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
+          <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
           <div class="bs-docs-example">
             <address>
               <strong>Twitter, Inc.</strong><br>
@@ -656,8 +653,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <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 IE8).</p>
+          <h3>Striped</h3>
+          <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE8).</p>
           <div class="bs-docs-example">
             <table class="table table-striped">
               <thead>
@@ -696,8 +693,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </table>
 {% endhighlight %}
 
-          <h3><code>.table-bordered</code></h3>
-          <p>Add borders and rounded corners to the table.</p>
+          <h3>Bordered</h3>
+          <p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
           <div class="bs-docs-example">
             <table class="table table-bordered">
               <thead>
@@ -740,8 +737,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </table>
 {% endhighlight %}
 
-          <h3><code>.table-hover</code></h3>
-          <p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
+          <h3>Hover rows</h3>
+          <p>Add <code>.table-hover</code> to 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>
@@ -780,8 +777,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-          <h3><code>.table-condensed</code></h3>
-          <p>Makes tables more compact by cutting cell padding in half.</p>
+          <h3>Condensed</h3>
+          <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
           <div class="bs-docs-example">
             <table class="table table-condensed">
               <thead>
@@ -1753,52 +1750,37 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
           <h2>Default buttons</h2>
           <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
-          <table class="table table-bordered table-striped">
-            <thead>
-              <tr>
-                <th>Button</th>
-                <th>class=""</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td><button type="button" class="btn btn-default">Default</button></td>
-                <td><code>btn</code></td>
-                <td>Standard gray button with gradient</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-primary">Primary</button></td>
-                <td><code>btn btn-primary</code></td>
-                <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-success">Success</button></td>
-                <td><code>btn btn-success</code></td>
-                <td>Indicates a successful or positive action</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-info">Info</button></td>
-                <td><code>btn btn-info</code></td>
-                <td>Contextual button for informational alert messages</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-warning">Warning</button></td>
-                <td><code>btn btn-warning</code></td>
-                <td>Indicates caution should be taken with this action</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-danger">Danger</button></td>
-                <td><code>btn btn-danger</code></td>
-                <td>Indicates a dangerous or potentially negative action</td>
-              </tr>
-              <tr>
-                <td><button type="button" class="btn btn-link">Link</button></td>
-                <td><code>btn btn-link</code></td>
-                <td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="bs-docs-example">
+            <button type="button" class="btn btn-default">Default</button>
+            <button type="button" class="btn btn-primary">Primary</button>
+            <button type="button" class="btn btn-success">Success</button>
+            <button type="button" class="btn btn-info">Info</button>
+            <button type="button" class="btn btn-warning">Warning</button>
+            <button type="button" class="btn btn-danger">Danger</button>
+            <button type="button" class="btn btn-link">Link</button>
+          </div>
+{% highlight html linenos %}
+<!-- Standard gray button with gradient -->
+<button type="button" class="btn btn-default">Default</button>
+
+<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
+<button type="button" class="btn btn-primary">Primary</button>
+
+<!-- Indicates a successful or positive action -->
+<button type="button" class="btn btn-success">Success</button>
+
+<!-- Contextual button for informational alert messages -->
+<button type="button" class="btn btn-info">Info</button>
+
+<!-- Indicates caution should be taken with this action -->
+<button type="button" class="btn btn-warning">Warning</button>
+
+<!-- Indicates a dangerous or potentially negative action -->
+<button type="button" class="btn btn-danger">Danger</button>
+
+<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
+<button type="button" class="btn btn-link">Link</button>
+{% endhighlight %}
 
           <h4>Cross browser compatibility</h4>
           <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>