2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00

update buttons in docs to include type

This commit is contained in:
Mark Otto
2012-07-06 15:18:56 -07:00
parent dc6eaafb00
commit 6d447079a4
4 changed files with 78 additions and 78 deletions
+19 -19
View File
@@ -1067,13 +1067,13 @@
<form class="bs-docs-example">
<div class="form-actions">
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<button class="btn">{{_i}}Cancel{{/i}}</button>
<button type="button" class="btn">{{_i}}Cancel{{/i}}</button>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="form-actions"&gt;
&lt;button type="submit" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/button&gt;
&lt;button class="btn"&gt;{{_i}}Cancel{{/i}}&lt;/button&gt;
&lt;button type="button" class="btn"&gt;{{_i}}Cancel{{/i}}&lt;/button&gt;
&lt;/div&gt;
</pre>
@@ -1194,37 +1194,37 @@
</thead>
<tbody>
<tr>
<td><button class="btn" href="#">{{_i}}Default{{/i}}</button></td>
<td><button type="button" class="btn">{{_i}}Default{{/i}}</button></td>
<td><code>btn</code></td>
<td>{{_i}}Standard gray button with gradient{{/i}}</td>
</tr>
<tr>
<td><button class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</button></td>
<td><button type="button" class="btn btn-primary">{{_i}}Primary{{/i}}</button></td>
<td><code>btn btn-primary</code></td>
<td>{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}</td>
</tr>
<tr>
<td><button class="btn btn-info" href="#">{{_i}}Info{{/i}}</button></td>
<td><button type="button" class="btn btn-info">{{_i}}Info{{/i}}</button></td>
<td><code>btn btn-info</code></td>
<td>{{_i}}Used as an alternative to the default styles{{/i}}</td>
</tr>
<tr>
<td><button class="btn btn-success" href="#">{{_i}}Success{{/i}}</button></td>
<td><button type="button" class="btn btn-success">{{_i}}Success{{/i}}</button></td>
<td><code>btn btn-success</code></td>
<td>{{_i}}Indicates a successful or positive action{{/i}}</td>
</tr>
<tr>
<td><button class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</button></td>
<td><button type="button" class="btn btn-warning">{{_i}}Warning{{/i}}</button></td>
<td><code>btn btn-warning</code></td>
<td>{{_i}}Indicates caution should be taken with this action{{/i}}</td>
</tr>
<tr>
<td><button class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</button></td>
<td><button type="button" class="btn btn-danger">{{_i}}Danger{{/i}}</button></td>
<td><code>btn btn-danger</code></td>
<td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
</tr>
<tr>
<td><button class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</button></td>
<td><button type="button" class="btn btn-inverse">{{_i}}Inverse{{/i}}</button></td>
<td><code>btn btn-inverse</code></td>
<td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>
</tr>
@@ -1241,16 +1241,16 @@
<h2>{{_i}}Button sizes{{/i}}</h2>
<p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
<p>
<button class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
<button class="btn btn-large">{{_i}}Action{{/i}}</button>
<button type="button" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
<button type="button" class="btn btn-large">{{_i}}Action{{/i}}</button>
</p>
<p>
<button class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
<button class="btn btn-small">{{_i}}Action{{/i}}</button>
<button type="button" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
<button type="button" class="btn btn-small">{{_i}}Action{{/i}}</button>
</p>
<p>
<button class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
<button class="btn btn-mini">{{_i}}Action{{/i}}</button>
<button type="button" class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
<button type="button" class="btn btn-mini">{{_i}}Action{{/i}}</button>
</p>
@@ -1278,12 +1278,12 @@
<h3>Button element</h3>
<p>{{_i}}Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.{{/i}}</p>
<p class="bs-docs-example">
<button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
<button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
<button type="button" class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
</p>
<pre class="prettyprint linenums">
&lt;button class="btn btn-large btn-primary disabled" disabled="disabled"&gt;{{_i}}Primary button{{/i}}&lt;/button&gt;
&lt;button class="btn btn-large" disabled&gt;{{_i}}Button{{/i}}&lt;/button&gt;
&lt;button type="button" class="btn btn-large btn-primary disabled" disabled="disabled"&gt;{{_i}}Primary button{{/i}}&lt;/button&gt;
&lt;button type="button" class="btn btn-large" disabled&gt;{{_i}}Button{{/i}}&lt;/button&gt;
</pre>
+20 -20
View File
@@ -1011,37 +1011,37 @@ $('#my-alert').bind('closed', function () {
<h4>{{_i}}Stateful{{/i}}</h4>
<p>{{_i}}Add data-loading-text="Loading..." to use a loading state on a button.{{/i}}</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
<button type="button" id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
{{_i}}Loading state{{/i}}
</button>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;button class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;
&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;
</pre>
<h4>{{_i}}Single toggle{{/i}}</h4>
<p>{{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<button class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
<button type="button" class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;button class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;
&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;
</pre>
<h4>{{_i}}Checkbox{{/i}}</h4>
<p>{{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-checkbox">
<button class="btn btn-primary">{{_i}}Left{{/i}}</button>
<button class="btn btn-primary">{{_i}}Middle{{/i}}</button>
<button class="btn btn-primary">{{_i}}Right{{/i}}</button>
<button type="button" class="btn btn-primary">{{_i}}Left{{/i}}</button>
<button type="button" class="btn btn-primary">{{_i}}Middle{{/i}}</button>
<button type="button" class="btn btn-primary">{{_i}}Right{{/i}}</button>
</div>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
&lt;button class="btn"&gt;Left&lt;/button&gt;
&lt;button class="btn"&gt;Middle&lt;/button&gt;
&lt;button class="btn"&gt;Right&lt;/button&gt;
&lt;button type="button" class="btn"&gt;Left&lt;/button&gt;
&lt;button type="button" class="btn"&gt;Middle&lt;/button&gt;
&lt;button type="button" class="btn"&gt;Right&lt;/button&gt;
&lt;/div&gt;
</pre>
@@ -1049,16 +1049,16 @@ $('#my-alert').bind('closed', function () {
<p>{{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group.{{/i}}</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-primary">{{_i}}Left{{/i}}</button>
<button class="btn btn-primary">{{_i}}Middle{{/i}}</button>
<button class="btn btn-primary">{{_i}}Right{{/i}}</button>
<button type="button" class="btn btn-primary">{{_i}}Left{{/i}}</button>
<button type="button" class="btn btn-primary">{{_i}}Middle{{/i}}</button>
<button type="button" class="btn btn-primary">{{_i}}Right{{/i}}</button>
</div>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;div class="btn-group" data-toggle="buttons-radio"&gt;
&lt;button class="btn"&gt;Left&lt;/button&gt;
&lt;button class="btn"&gt;Middle&lt;/button&gt;
&lt;button class="btn"&gt;Right&lt;/button&gt;
&lt;button type="button" class="btn"&gt;Left&lt;/button&gt;
&lt;button type="button" class="btn"&gt;Middle&lt;/button&gt;
&lt;button type="button" class="btn"&gt;Right&lt;/button&gt;
&lt;/div&gt;
</pre>
@@ -1083,11 +1083,11 @@ $('#my-alert').bind('closed', function () {
<strong>{{_i}}Heads up!{{/i}}</strong>
{{_i}}You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.{{/i}}
</div>
<pre class="prettyprint linenums">&lt;button class="btn" data-toggle="button" &gt;…&lt;/button&gt;</pre>
<pre class="prettyprint linenums">&lt;button type="button" class="btn" data-toggle="button" &gt;…&lt;/button&gt;</pre>
<h4>$().button('loading')</h4>
<p>{{_i}}Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.{{/i}}
</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-loading-text="loading stuff..." &gt;...&lt;/button&gt;</pre>
<pre class="prettyprint linenums">&lt;button type="button" class="btn" data-loading-text="loading stuff..." &gt;...&lt;/button&gt;</pre>
<div class="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong>
{{_i}}<a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.{{/i}}
@@ -1096,7 +1096,7 @@ $('#my-alert').bind('closed', function () {
<p>{{_i}}Resets button state - swaps text to original text.{{/i}}</p>
<h4>$().button(string)</h4>
<p>{{_i}}Resets button state - swaps text to any data defined text state.{{/i}}</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
<pre class="prettyprint linenums">&lt;button type="button" class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
&lt;script&gt;
$('.btn').button('complete')
&lt;/script&gt;</pre>
@@ -1159,7 +1159,7 @@ $('#my-alert').bind('closed', function () {
</div>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;button class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;
&lt;button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;
{{_i}}simple collapsible{{/i}}
&lt;/button&gt;