Skip to content
GitLab
Commit 2e3ba4af authored by Mark Otto's avatar Mark Otto
Browse files

redo the buttons examples

parent ba633949
Hide whitespace changes
Inline Side-by-side
Showing
with 44 additions and 62 deletions
+44 -62
docs/css.html
+ 44
- 62
View file @ 2e3ba4af
...@@ -162,7 +162,7 @@ title: CSS ...@@ -162,7 +162,7 @@ title: CSS
<h2 id="emphasis">Emphasis</h2> <h2 id="emphasis">Emphasis</h2>
<p>Make use of HTML's default emphasis tags with lightweight styles.</p> <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> <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<p><small>This line of text is meant to be treated as fine print.</small></p> <p><small>This line of text is meant to be treated as fine print.</small></p>
...@@ -225,8 +225,8 @@ title: CSS ...@@ -225,8 +225,8 @@ title: CSS
<h2 id="abbreviations">Abbreviations</h2> <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> <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> <h3>Basic abbreviation</h3>
<p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p> <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"> <div class="bs-docs-example">
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
</div> </div>
...@@ -234,7 +234,7 @@ title: CSS ...@@ -234,7 +234,7 @@ title: CSS
<abbr title="attribute">attr</abbr> <abbr title="attribute">attr</abbr>
{% endhighlight %} {% 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> <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p> <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
...@@ -246,10 +246,7 @@ title: CSS ...@@ -246,10 +246,7 @@ title: CSS
<!-- Addresses --> <!-- Addresses -->
<h2 id="addresses">Addresses</h2> <h2 id="addresses">Addresses</h2>
<p>Present contact information for the nearest ancestor or the entire body of work.</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>
<h3><code>&lt;address&gt;</code></h3>
<p>Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<address> <address>
<strong>Twitter, Inc.</strong><br> <strong>Twitter, Inc.</strong><br>
...@@ -656,8 +653,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -656,8 +653,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2>Optional classes</h2> <h2>Optional classes</h2>
<p>Add any of the following classes to the <code>.table</code> base class.</p> <p>Add any of the following classes to the <code>.table</code> base class.</p>
<h3><code>.table-striped</code></h3> <h3>Striped</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> <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"> <div class="bs-docs-example">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
...@@ -696,8 +693,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -696,8 +693,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table> </table>
{% endhighlight %} {% endhighlight %}
<h3><code>.table-bordered</code></h3> <h3>Bordered</h3>
<p>Add borders and rounded corners to the table.</p> <p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
...@@ -740,8 +737,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -740,8 +737,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table> </table>
{% endhighlight %} {% endhighlight %}
<h3><code>.table-hover</code></h3> <h3>Hover rows</h3>
<p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p> <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"> <div class="bs-docs-example">
<table class="table table-hover"> <table class="table table-hover">
<thead> <thead>
...@@ -780,8 +777,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -780,8 +777,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3><code>.table-condensed</code></h3> <h3>Condensed</h3>
<p>Makes tables more compact by cutting cell padding in half.</p> <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<table class="table table-condensed"> <table class="table table-condensed">
<thead> <thead>
...@@ -1753,52 +1750,37 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1753,52 +1750,37 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2>Default buttons</h2> <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> <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"> <div class="bs-docs-example">
<thead> <button type="button" class="btn btn-default">Default</button>
<tr> <button type="button" class="btn btn-primary">Primary</button>
<th>Button</th> <button type="button" class="btn btn-success">Success</button>
<th>class=""</th> <button type="button" class="btn btn-info">Info</button>
<th>Description</th> <button type="button" class="btn btn-warning">Warning</button>
</tr> <button type="button" class="btn btn-danger">Danger</button>
</thead> <button type="button" class="btn btn-link">Link</button>
<tbody> </div>
<tr> {% highlight html linenos %}
<td><button type="button" class="btn btn-default">Default</button></td> <!-- Standard gray button with gradient -->
<td><code>btn</code></td> <button type="button" class="btn btn-default">Default</button>
<td>Standard gray button with gradient</td>
</tr> <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<tr> <button type="button" class="btn btn-primary">Primary</button>
<td><button type="button" class="btn btn-primary">Primary</button></td>
<td><code>btn btn-primary</code></td> <!-- Indicates a successful or positive action -->
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td> <button type="button" class="btn btn-success">Success</button>
</tr>
<tr> <!-- Contextual button for informational alert messages -->
<td><button type="button" class="btn btn-success">Success</button></td> <button type="button" class="btn btn-info">Info</button>
<td><code>btn btn-success</code></td>
<td>Indicates a successful or positive action</td> <!-- Indicates caution should be taken with this action -->
</tr> <button type="button" class="btn btn-warning">Warning</button>
<tr>
<td><button type="button" class="btn btn-info">Info</button></td> <!-- Indicates a dangerous or potentially negative action -->
<td><code>btn btn-info</code></td> <button type="button" class="btn btn-danger">Danger</button>
<td>Contextual button for informational alert messages</td>
</tr> <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<tr> <button type="button" class="btn btn-link">Link</button>
<td><button type="button" class="btn btn-warning">Warning</button></td> {% endhighlight %}
<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>
<h4>Cross browser compatibility</h4> <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> <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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment