mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
redo the buttons examples
This commit is contained in:
Mark Otto
parent
ba633949dc
commit
2e3ba4afe6
106
docs/css.html
106
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user