Merge pull request #4289 from coliff/patch-4
Update docs/templates/pages/javascript.mustache
This commit is contained in:
commit
aeed751a7f
|
@ -2,7 +2,7 @@
|
|||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
|
||||
<h1>{{_i}}JavaScript for Bootstrap{{/i}}</h1>
|
||||
<p class="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}}
|
||||
</div>
|
||||
</header>
|
||||
|
@ -37,7 +37,7 @@
|
|||
================================================== -->
|
||||
<section id="overview">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Javascript in Bootstrap{{/i}}</h1>
|
||||
<h1>{{_i}}JavaScript in Bootstrap{{/i}}</h1>
|
||||
</div>
|
||||
|
||||
<h3>{{_i}}Individual or compiled{{/i}}</h3>
|
||||
|
@ -142,7 +142,7 @@ $('#myModal').on('show', function (e) {
|
|||
</pre>
|
||||
|
||||
<h3>{{_i}}Live demo{{/i}}</h3>
|
||||
<p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
|
||||
<p>{{_i}}Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
|
||||
<!-- sample modal content -->
|
||||
<div id="myModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
|
@ -205,15 +205,15 @@ $('#myModal').on('show', function (e) {
|
|||
<h2>{{_i}}Usage{{/i}}</h2>
|
||||
|
||||
<h3>{{_i}}Via data attributes{{/i}}</h3>
|
||||
<p>{{_i}}Activate a modal without writing javascript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.{{/i}}</p>
|
||||
<p>{{_i}}Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.{{/i}}</p>
|
||||
<pre class="prettyprint linenums"><button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button></pre>
|
||||
|
||||
<h3>{{_i}}Via javascript{{/i}}</h3>
|
||||
<p>{{_i}}Call a modal with id <code>myModal</code> with a single line of javascript:{{/i}}</p>
|
||||
<h3>{{_i}}Via JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Call a modal with id <code>myModal</code> with a single line of JavaScript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.{{/i}}</p>
|
||||
<p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -428,8 +428,8 @@ $('#myModal').on('hidden', function () {
|
|||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Via javascript{{/i}}</h3>
|
||||
<p>{{_i}}Call the dropdowns via javascript:{{/i}}</p>
|
||||
<h3>{{_i}}Via JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Call the dropdowns via JavaScript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
|
@ -499,8 +499,8 @@ $('#myModal').on('hidden', function () {
|
|||
<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) and <code>data-target=".navbar"</code> to select which nav to use.{{/i}}</p>
|
||||
<pre class="prettyprint linenums"><body data-spy="scroll" data-target=".navbar">...</body></pre>
|
||||
|
||||
<h3>{{_i}}Via javascript{{/i}}</h3>
|
||||
<p>{{_i}}Call the scrollspy via javascript:{{/i}}</p>
|
||||
<h3>{{_i}}Via JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Call the scrollspy via JavaScript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#navbar').scrollspy()</pre>
|
||||
|
||||
<div class="alert alert-info">
|
||||
|
@ -518,7 +518,7 @@ $('[data-spy="scroll"]').each(function () {
|
|||
</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.{{/i}}</p>
|
||||
<p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -600,7 +600,7 @@ $('[data-spy="scroll"]').each(function () {
|
|||
|
||||
|
||||
<h2>{{_i}}Usage{{/i}}</h2>
|
||||
<p>{{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}</p>
|
||||
<p>{{_i}}Enable tabbable tabs via JavaScript (each tab needs to be activated individually):{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myTab a').click(function (e) {
|
||||
e.preventDefault();
|
||||
|
@ -615,7 +615,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
|||
</pre>
|
||||
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.{{/i}}</p>
|
||||
<p>{{_i}}You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav nav-tabs">
|
||||
<li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
|
||||
|
@ -710,11 +710,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
|
||||
|
||||
<h2>{{_i}}Usage{{/i}}</h2>
|
||||
<p>{{_i}}Trigger the tooltip via javascript:{{/i}}</p>
|
||||
<p>{{_i}}Trigger the tooltip via JavaScript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#example').tooltip({{_i}}options{{/i}})</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
|
||||
<p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -848,7 +848,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<p>{{_i}}No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.{{/i}}</p>
|
||||
<p>{{_i}}No markup shown as popovers are generated from JavaScript and content within a <code>data</code> attribute.{{/i}}</p>
|
||||
|
||||
<h3>Live demo</h3>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
|
@ -860,11 +860,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
|
||||
|
||||
<h2>{{_i}}Usage{{/i}}</h2>
|
||||
<p>{{_i}}Enable popovers via javascript:{{/i}}</p>
|
||||
<p>{{_i}}Enable popovers via JavaScript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
|
||||
<p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -989,7 +989,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
|
||||
|
||||
<h2>{{_i}}Usage{{/i}}</h2>
|
||||
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
|
||||
<p>{{_i}}Enable dismissal of an alert via JavaScript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$(".alert").alert()</pre>
|
||||
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
|
@ -1098,7 +1098,7 @@ $('#my-alert').bind('closed', function () {
|
|||
|
||||
|
||||
<h2>{{_i}}Usage{{/i}}</h2>
|
||||
<p>{{_i}}Enable buttons via javascript:{{/i}}</p>
|
||||
<p>{{_i}}Enable buttons via JavaScript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('.nav-tabs').button()</pre>
|
||||
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
|
@ -1208,12 +1208,12 @@ $('#my-alert').bind('closed', function () {
|
|||
<p>{{_i}}Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.{{/i}}</p>
|
||||
<p>{{_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}}</p>
|
||||
|
||||
<h3>{{_i}}Via javascript{{/i}}</h3>
|
||||
<h3>{{_i}}Via JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Enable manually with:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$(".collapse").collapse()</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.{{/i}}</p>
|
||||
<p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -1359,12 +1359,12 @@ $('#myCollapsible').on('hidden', function () {
|
|||
<h3>{{_i}}Via data attributes{{/i}}</h3>
|
||||
<p>{{_i}}...{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Via javascript{{/i}}</h3>
|
||||
<h3>{{_i}}Via JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Call carousel manually with:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.{{/i}}</p>
|
||||
<p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -1457,12 +1457,12 @@ $('.carousel').carousel({
|
|||
<h3>{{_i}}Via data attributes{{/i}}</h3>
|
||||
<p>{{_i}}Add data attributes to register an element with typeahead functionality as shown in the example above.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Via javascript{{/i}}</h3>
|
||||
<h3>{{_i}}Via JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Call the typeahead manually with:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-source=""</code>.{{/i}}</p>
|
||||
<p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-source=""</code>.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -1544,8 +1544,8 @@ $('.carousel').carousel({
|
|||
{{_i}}It's up to you to maintain the dimensions of an element when toggling between relative and fixed positions. To see how this is done, refer to this pages subnavigation.{{/i}}
|
||||
</div>
|
||||
|
||||
<h3>{{_i}}Via javascript{{/i}}</h3>
|
||||
<p>{{_i}}Call the affix plugin via javascript:{{/i}}</p>
|
||||
<h3>{{_i}}Via JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Call the affix plugin via JavaScript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#navbar').affix()</pre>
|
||||
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
|
@ -1558,7 +1558,7 @@ $('[data-spy="affix"]').each(function () {
|
|||
</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-y=""</code>.{{/i}}</p>
|
||||
<p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-y=""</code>.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
Loading…
Reference in New Issue