mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-26 21:39:08 +02:00
Code Issues Releases Wiki Activity

update buttons in docs to include type

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/javascript.html
View File

@@ -1086,37 +1086,37 @@ $('#my-alert').bind('closed', function () {
<h4>Stateful</h4>
<p>Add data-loading-text="Loading..." to use a loading state on a button.</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">
Loading state
</button>
</div>
<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>Single toggle</h4>
<p>Add data-toggle="button" to activate toggling on a single button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<button class="btn btn-primary" data-toggle="button">Single Toggle</button>
<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
</div>
<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>Checkbox</h4>
<p>Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-checkbox">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<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>
@@ -1124,16 +1124,16 @@ $('#my-alert').bind('closed', function () {
<p>Add data-toggle="buttons-radio" for radio style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<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>
@@ -1158,11 +1158,11 @@ $('#my-alert').bind('closed', function () {
<strong>Heads up!</strong>
You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.
</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>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>.
</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>Heads up!</strong>
<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>.
@@ -1171,7 +1171,7 @@ $('#my-alert').bind('closed', function () {
<p>Resets button state - swaps text to original text.</p>
<h4>$().button(string)</h4>
<p>Resets button state - swaps text to any data defined text state.</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>
@@ -1234,7 +1234,7 @@ $('#my-alert').bind('closed', function () {
</div>
</div>
<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;
simple collapsible
&lt;/button&gt;