mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
call attention to notices in js docs more
This commit is contained in:
Mark Otto
parent
7a756168b5
commit
08fea7587c
@ -146,7 +146,7 @@
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="row" style="margin-bottom: 9px;">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#collapse">Collapse</a></h3>
|
||||
@ -173,6 +173,7 @@
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="alert alert-info"><strong>Heads up!</strong> All javascript plugins require the latest version of jQuery.</div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -285,7 +286,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
<p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>Heads up!</strong> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js.
|
||||
</div>
|
||||
<h3>Methods</h3>
|
||||
<h4>.modal(options)</h4>
|
||||
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
|
||||
@ -439,7 +442,9 @@ $('#myModal').on('hidden', function () {
|
||||
<pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.</p>
|
||||
<p><span class="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>Heads up!</strong> You may optionally target a specific dropdown by using <code>data-target="#fat"</code> or <code>href="#fat"</code>.
|
||||
</div>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav pills">
|
||||
@ -533,7 +538,10 @@ $('#myModal').on('hidden', function () {
|
||||
<h3>Markup</h3>
|
||||
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).</p>
|
||||
<pre class="prettyprint linenums"><body data-spy="scroll" >...</body></pre>
|
||||
<p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>Heads up!</strong>
|
||||
Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.
|
||||
</div>
|
||||
<h3>Options</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -748,7 +756,10 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>Heads up!</strong>
|
||||
Options for individual tooltips can alternatively be specified through the use of data attributes.
|
||||
</div>
|
||||
<h3>Markup</h3>
|
||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
|
||||
<h3>Methods</h3>
|
||||
@ -857,7 +868,10 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>Heads up!</strong>
|
||||
Options for individual popovers can alternatively be specified through the use of data attributes.
|
||||
</div>
|
||||
<h3>Markup</h3>
|
||||
<p>
|
||||
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.
|
||||
@ -1030,19 +1044,23 @@ $('#my-alert').bind('closed', function () {
|
||||
<h3>Methods</h3>
|
||||
<h4>$().button('toggle')</h4>
|
||||
<p>Toggles push state. Gives btn the look that it's been activated.</p>
|
||||
<p><span class="label notice">Notice</span> You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
|
||||
<div class="alert alert-info">
|
||||
<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"><button class="btn" data-toggle="button" >…</button></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"><button class="btn" data-loading-text="loading stuff..." >...</button></pre>
|
||||
<p>
|
||||
<span class="label notice">Notice</span> Firefox persists the disabled state across page loads. A workaround for this is to use: <code>autocomplete="off"</code>. More info can be found <a href="https://github.com/twitter/bootstrap/issues/793">here</a>.
|
||||
</p>
|
||||
<h4>$().button('reset')</h4>
|
||||
<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"><button class="btn" data-loading-text="loading stuff..." >...</button></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>.
|
||||
</div>
|
||||
<h4>$().button('reset')</h4>
|
||||
<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"><button class="btn" data-complete-text="finished!" >...</button>
|
||||
<script>
|
||||
$('.btn').button('complete')
|
||||
@ -1146,7 +1164,10 @@ $('#my-alert').bind('closed', function () {
|
||||
</button>
|
||||
|
||||
<div id="demo" class="collapse in"> … </div></pre>
|
||||
<p><span class="label notice">Notice</span> To add accordion like group management to a collapsible control just add the additional data attribute <code>data-parent="#selector"</code>. Refer to the demo below to see this in action.</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>Heads up!</strong>
|
||||
To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.
|
||||
</div>
|
||||
<h3>Methods</h3>
|
||||
<h4>.collapse(options)</h4>
|
||||
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
|
||||
|
||||
53
docs/templates/pages/javascript.mustache
vendored
53
docs/templates/pages/javascript.mustache
vendored
@ -81,7 +81,7 @@
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="row" style="margin-bottom: 9px;">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></h3>
|
||||
@ -108,6 +108,7 @@
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="alert alert-info"><strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}All javascript plugins require the latest version of jQuery.{{/i}}</div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -220,7 +221,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
<p>{{_i}}<span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).{{/i}}</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js.{{/i}}
|
||||
</div>
|
||||
<h3{{_i}}>Methods{{/i}}</h3>
|
||||
<h4>.modal({{_i}}options{{/i}})</h4>
|
||||
<p>{{_i}}Activates your content as a modal. Accepts an optional options <code>object</code>.{{/i}}</p>
|
||||
@ -374,7 +377,9 @@ $('#myModal').on('hidden', function () {
|
||||
<pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>{{_i}}To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.{{/i}}</p>
|
||||
<p>{{_i}}<span class="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.{{/i}}</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>{{_i}}Heads up!{{/i}}</strong>{{_i}} You may optionally target a specific dropdown by using <code>data-target="#fat"</code> or <code>href="#fat"</code>.{{/i}}
|
||||
</div>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav pills">
|
||||
@ -468,7 +473,10 @@ $('#myModal').on('hidden', function () {
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>{{_i}}To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).{{/i}}</p>
|
||||
<pre class="prettyprint linenums"><body data-spy="scroll" >...</body></pre>
|
||||
<p>{{_i}}<span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.{{/i}}</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>{{_i}}Heads up!{{/i}}</strong>
|
||||
{{_i}}Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.{{/i}}
|
||||
</div>
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
@ -683,7 +691,10 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>{{_i}}<span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.{{/i}}</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>{{_i}}Heads up!{{/i}}</strong>
|
||||
{{_i}}Options for individual tooltips can alternatively be specified through the use of data attributes.{{/i}}
|
||||
</div>
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
@ -792,7 +803,10 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>{{_i}}<span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.{{/i}}</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>{{_i}}Heads up!{{/i}}</strong>
|
||||
{{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
|
||||
</div>
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>
|
||||
{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.{{/i}}
|
||||
@ -965,19 +979,23 @@ $('#my-alert').bind('closed', function () {
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
<h4>$().button('toggle')</h4>
|
||||
<p>{{_i}}Toggles push state. Gives btn the look that it's been activated.{{/i}}</p>
|
||||
<p>{{_i}}<span class="label notice">Notice</span> You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.{{/i}}</p>
|
||||
<div class="alert alert-info">
|
||||
<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"><button class="btn" data-toggle="button" >…</button></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"><button class="btn" data-loading-text="loading stuff..." >...</button></pre>
|
||||
<p>
|
||||
{{_i}}<span class="label notice">Notice</span> Firefox persists the disabled state across page loads. A workaround for this is to use: <code>autocomplete="off"</code>. More info can be found <a href="https://github.com/twitter/bootstrap/issues/793">here</a>.{{/i}}
|
||||
</p>
|
||||
<h4>$().button('reset')</h4>
|
||||
<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"><button class="btn" data-loading-text="loading stuff..." >...</button></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}}
|
||||
</div>
|
||||
<h4>$().button('reset')</h4>
|
||||
<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"><button class="btn" data-complete-text="finished!" >...</button>
|
||||
<script>
|
||||
$('.btn').button('complete')
|
||||
@ -1081,7 +1099,10 @@ $('#my-alert').bind('closed', function () {
|
||||
</button>
|
||||
|
||||
<div id="demo" class="collapse in"> … </div></pre>
|
||||
<p>{{_i}}<span class="label notice">Notice</span> To add accordion like group management to a collapsible control just add the additional data attribute <code>data-parent="#selector"</code>. Refer to the demo below to see this in action.{{/i}}</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>{{_i}}Heads up!{{/i}}</strong>
|
||||
{{_i}}To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.{{/i}}
|
||||
</div>
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
<h4>.collapse({{_i}}options{{/i}})</h4>
|
||||
<p>{{_i}}Activates your content as a collapsible element. Accepts an optional options <code>object</code>.{{/i}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user