From 2e3ba4afe633eb9ea820f1b506e4e3840e2e2ecc Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 1 Mar 2013 00:04:41 -0800
Subject: [PATCH] redo the buttons examples
---
docs/css.html | 106 +++++++++++++++++++++-----------------------------
1 file changed, 44 insertions(+), 62 deletions(-)
diff --git a/docs/css.html b/docs/css.html
index 501c791df8..dd7654ad12 100644
--- 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><small></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><abbr></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><abbr></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><abbr></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><abbr class="initialism"></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><address></code></h3>
- <p>Preserve formatting by ending all lines with <code><br></code>.</p>
+ <p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code><br></code>.</p>
<div class="bs-docs-example">
<address>
<strong>Twitter, Inc.</strong><br>
@@ -656,8 +653,8 @@ For example, <code><section></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><tbody></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><tbody></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><section></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><section></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><tbody></code>.</p>
+ <h3>Hover rows</h3>
+ <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code><tbody></code>.</p>
<div class="bs-docs-example">
<table class="table table-hover">
<thead>
@@ -780,8 +777,8 @@ For example, <code><section></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><section></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><a></code> and <code><button></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>
--
GitLab