From 222067b360ecf4c6c082d3d364d464a26ef13ae9 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Tue, 24 Jan 2012 12:11:05 -0800
Subject: [PATCH] javascript pages markedup with {{_i}}
---
docs/javascript.html | 12 +-
docs/templates/pages/javascript.mustache | 454 +++++++++++------------
2 files changed, 233 insertions(+), 233 deletions(-)
diff --git a/docs/javascript.html b/docs/javascript.html
index cc641ed492..a35c299136 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -914,7 +914,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>Closes an alert.</p>
<pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
<h3>Events</h3>
- <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p>
+ <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
@@ -935,7 +935,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</table>
<pre class="prettyprint linenums">
$('#my-alert').bind('closed', function () {
- // do something ...
+ // do something…
})</pre>
</div>
</div>
@@ -1024,7 +1024,7 @@ $('#my-alert').bind('closed', function () {
<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>
- <pre class="prettyprint linenums"><button class="btn" data-toggle="button" >...</button></pre>
+ <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>
@@ -1166,7 +1166,7 @@ $('#myCollapsible').collapse({
</thead>
<tbody>
<tr>
- <td>show</td>
+ <td>show/td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
@@ -1188,7 +1188,7 @@ $('#myCollapsible').collapse({
<pre class="prettyprint linenums">
$('#myCollapsible').on('hidden', function () {
- // do something ...
+ // do something…
})</pre>
</div>
</div>
@@ -1293,7 +1293,7 @@ $('.myCarousel').carousel({
<h4>.carousel('next')</h4>
<p>Cycles to the next item.</p>
<h3>Events</h3>
- <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
+ <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 1170c21ccf..c85b9d2a2e 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -658,52 +658,52 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
</tr>
<tr>
- <td>placement</td>
- <td>string</td>
+ <td>{{_i}}placement{{/i}}</td>
+ <td>{{_i}}string{{/i}}</td>
<td>'top'</td>
- <td>how to position the tooltip - top | bottom | left | right</td>
+ <td>{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right</td>
</tr>
<tr>
- <td>selector</td>
- <td>string</td>
+ <td>{{_i}}selector{{/i}}</td>
+ <td>{{_i}}string{{/i}}</td>
<td>false</td>
- <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
+ <td>{{_i}}If a selector is provided, tooltip objects will be delegated to the specified targets.{{/i}}</td>
</tr>
<tr>
- <td>title</td>
- <td>string | function</td>
+ <td>{{_i}}title{{/i}}</td>
+ <td>{{_i}}string | function{{/i}}</td>
<td>''</td>
- <td>default title value if `title` tag isn't present</td>
+ <td>{{_i}}default title value if `title` tag isn't present{{/i}}</td>
</tr>
<tr>
- <td>trigger</td>
- <td>string</td>
+ <td>{{_i}}trigger{{/i}}</td>
+ <td>{{_i}}string{{/i}}</td>
<td>'hover'</td>
- <td>how tooltip is triggered - hover | focus | manual</td>
+ <td>{{_i}}how tooltip is triggered{{/i}} - hover | focus | manual</td>
</tr>
<tr>
- <td>delay</td>
- <td>number | object</td>
+ <td>{{_i}}delay{{/i}}</td>
+ <td>{{_i}}number | object{{/i}}</td>
<td>0</td>
<td>
- <p>delay showing/hiding the tooltip (ms)</p>
- <p>If a number is supplied, delay is applied to both hide/show</p>
- <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+ <p>{{_i}}delay showing/hiding the tooltip (ms){{/i}}</p>
+ <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
+ <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
</td>
</tr>
</tbody>
</table>
- <p><span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</code></p>
- <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>
- <h4>$().tooltip(options)</h4>
- <p>Attaches a tooltip handler to an element collection.</p>
+ <p>{{_i}}<span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</code>{{/i}}</p>
+ <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>
+ <h4>$().tooltip({{_i}}options{{/i}})</h4>
+ <p>{{_i}}Attaches a tooltip handler to an element collection.{{/i}}</p>
<h4>.tooltip('show')</h4>
- <p>Reveals an elements tooltip.</p>
+ <p>{{_i}}Reveals an elements tooltip.{{/i}}</p>
<pre class="prettyprint linenums">$('#element').tooltip('show')</pre>
<h4>.tooltip('hide')</h4>
- <p>Hides an elements tooltip.</p>
+ <p>{{_i}}Hides an elements tooltip.{{/i}}</p>
<pre class="prettyprint linenums">$('#element').tooltip('hide')</pre>
</div>
</div>
@@ -715,97 +715,97 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
================================================== -->
<section id="popovers">
<div class="page-header">
- <h1>Popovers <small>bootstrap-popover.js</small></h1>
+ <h1>{{_i}}Popovers{{/i}} <small>bootstrap-popover.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
- <h3>About popovers</h3>
- <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
- <p class="muted"><strong>*</strong> Requires <a href="#tooltip">Tooltip</a> to be included</p>
- <a href="../js/bootstrap-popover.js" target="_blank" class="btn">Download file</a>
+ <h3>{{_i}}About popovers{{/i}}</h3>
+ <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
+ <p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltip">Tooltip</a> to be included{{/i}}</p>
+ <a href="../js/bootstrap-popover.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
- <h2>Example hover popover</h2>
- <p>Hover over the button to trigger the popover.</p>
+ <h2>{{_i}}Example hover popover{{/i}}</h2>
+ <p>{{_i}}Hover over the button to trigger the popover.{{/i}}</p>
<div class="well">
- <a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
+ <a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}hover for popover{{/i}}</a>
</div>
<hr>
- <h2>Using bootstrap-popover.js</h2>
- <p>Enable popovers via javascript:</p>
- <pre class="prettyprint linenums">$('#example').popover(options)</pre>
- <h3>Options</h3>
+ <h2>{{_i}}Using bootstrap-popover.js{{/i}}</h2>
+ <p>{{_i}}Enable popovers via javascript:{{/i}}</p>
+ <pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
+ <h3>{{_i}}Options{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 100px;">type</th>
- <th style="width: 50px;">default</th>
- <th>description</th>
+ <th style="width: 100px;">{{_i}}Name{{/i}}</th>
+ <th style="width: 100px;">{{_i}}type{{/i}}</th>
+ <th style="width: 50px;">{{_i}}default{{/i}}</th>
+ <th>{{_i}}description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
- <td>animation</td>
- <td>boolean</td>
+ <td>{{_i}}animation{{/i}}</td>
+ <td>{{_i}}boolean{{/i}}</td>
<td>true</td>
- <td>apply a css fade transition to the tooltip</td>
+ <td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
</tr>
<tr>
- <td>placement</td>
- <td>string</td>
+ <td>{{_i}}placement{{/i}}</td>
+ <td>{{_i}}string{{/i}}</td>
<td>'right'</td>
- <td>how to position the popover - top | bottom | left | right</td>
+ <td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
</tr>
<tr>
- <td>selector</td>
- <td>string</td>
+ <td>{{_i}}selector{{/i}}</td>
+ <td>{{_i}}string{{/i}}</td>
<td>false</td>
- <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
+ <td>{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}</td>
</tr>
<tr>
- <td>trigger</td>
- <td>string</td>
+ <td>{{_i}}trigger{{/i}}</td>
+ <td>{{_i}}string{{/i}}</td>
<td>'hover'</td>
- <td>how tooltip is triggered - hover | focus | manual</td>
+ <td>{{_i}}how tooltip is triggered{{/i}} - hover | focus | manual</td>
</tr>
<tr>
- <td>title</td>
- <td>string | function</td>
+ <td>{{_i}}title{{/i}}</td>
+ <td>{{_i}}string | function{{/i}}</td>
<td>''</td>
- <td>default title value if `title` attribute isn't present</td>
+ <td>{{_i}}default title value if `title` attribute isn't present{{/i}}</td>
</tr>
<tr>
- <td>content</td>
- <td>string | function</td>
+ <td>{{_i}}content{{/i}}</td>
+ <td>{{_i}}string | function{{/i}}</td>
<td>''</td>
- <td>default content value if `data-content` attribute isn't present</td>
+ <td>{{_i}}default content value if `data-content` attribute isn't present{{/i}}</td>
</tr>
<tr>
- <td>delay</td>
- <td>number | object</td>
+ <td>{{_i}}delay{{/i}}</td>
+ <td>{{_i}}number | object{{/i}}</td>
<td>0</td>
<td>
- <p>delay showing/hiding the popover (ms)</p>
- <p>If a number is supplied, delay is applied to both hide/show</p>
- <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+ <p>{{_i}}delay showing/hiding the popover (ms){{/i}}</p>
+ <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
+ <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
</td>
</tr>
</tbody>
</table>
- <p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
- <h3>Markup</h3>
+ <p>{{_i}}<span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code>{{/i}}</p>
+ <h3>{{_i}}Markup{{/i}}</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.
+ {{_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}}
</p>
- <h3>Methods</h3>
- <h4>$().popover(options)</h4>
- <p>Initializes popovers for an element collection.</p>
+ <h3>{{_i}}Methods{{/i}}</h3>
+ <h4>$().popover({{_i}}options{{/i}})</h4>
+ <p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
<h4>.popover('show')</h4>
- <p>Reveals an elements popover.</p>
+ <p>{{_i}}Reveals an elements popover.{{/i}}</p>
<pre class="prettyprint linenums">$('#element').popover('show')</pre>
<h4>.popover('hide')</h4>
- <p>Hides an elements popover.</p>
+ <p>{{_i}}Hides an elements popover.{{/i}}</p>
<pre class="prettyprint linenums">$('#element').popover('hide')</pre>
</div>
</div>
@@ -817,65 +817,65 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
================================================== -->
<section id="alerts">
<div class="page-header">
- <h1>Alert messages <small>bootstrap-alert.js</small></h1>
+ <h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
- <h3>About alerts</h3>
- <p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
- <a href="../js/bootstrap-alerts.js" target="_blank" class="btn">Download</a>
+ <h3>{{_i}}About alerts{{/i}}</h3>
+ <p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
+ <a href="../js/bootstrap-alerts.js" target="_blank" class="btn">{{_i}}Download{{/i}}</a>
</div>
<div class="span9 columns">
- <h2>Example alerts</h2>
- <p>The alerts plugin works on regular alert messages, and block messages.</p>
+ <h2>{{_i}}Example alerts{{/i}}</h2>
+ <p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p>
<div class="alert fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
- <strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.
+ <strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you’re not looking too good.{{/i}}
</div>
<div class="alert alert-block alert-error fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
- <h4 class="alert-heading">Oh snap! You got an error!</h4>
- <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
+ <h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
+ <p>{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}</p>
<p>
- <a class="btn danger small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ <a class="btn danger small" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn small" href="#">{{_i}}Or do this{{/i}}</a>
</p>
</div>
<hr>
- <h2>Using bootstrap-alerts.js</h2>
- <p>Enable dismissal of an alert via javascript:</p>
+ <h2>{{_i}}Using bootstrap-alerts.js{{/i}}</h2>
+ <p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$(".alert-message").alert()</pre>
- <h3>Markup</h3>
- <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
+ <h3>{{_i}}Markup{{/i}}</h3>
+ <p>{{_i}}Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.{{/i}}</p>
<pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre>
- <h3>Methods</h3>
+ <h3>{{_i}}Methods{{/i}}</h3>
<h4>$().alert()</h4>
- <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
+ <p>{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.{{/i}}</p>
<h4>.alert('close')</h4>
- <p>Closes an alert.</p>
+ <p>{{_i}}Closes an alert.{{/i}}</p>
<pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
- <h3>Events</h3>
- <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p>
+ <h3>{{_i}}Events{{/i}}</h3>
+ <p>{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th style="width: 150px;">Event</th>
- <th>Description</th>
+ <th style="width: 150px;">{{_i}}Event{{/i}}</th>
+ <th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
- <td>close</td>
- <td>This event fires immediately when the <code>close</code> instance method is called.</td>
+ <td>{{_i}}close{{/i}}</td>
+ <td>{{_i}}This event fires immediately when the <code>close</code> instance method is called.{{/i}}</td>
</tr>
<tr>
- <td>closed</td>
- <td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
+ <td>{{_i}}closed{{/i}}</td>
+ <td>{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
$('#my-alert').bind('closed', function () {
- // do something ...
+ // {{_i}}do something…{{/i}}
})</pre>
</div>
</div>
@@ -887,61 +887,61 @@ $('#my-alert').bind('closed', function () {
================================================== -->
<section id="buttons">
<div class="page-header">
- <h1>Buttons <small>bootstrap-button.js</small></h1>
+ <h1>{{_i}}Buttons{{/i}} <small>bootstrap-button.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
- <h3>About</h3>
- <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
- <a href="../js/bootstrap-button.js" target="_blank" class="btn">Download file</a>
+ <h3>{{_i}}About{{/i}}</h3>
+ <p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
+ <a href="../js/bootstrap-button.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
- <h2>Example uses</h2>
- <p>Use the buttons plugin for states and toggles.</p>
+ <h2>{{_i}}Example uses{{/i}}</h2>
+ <p>{{_i}}Use the buttons plugin for states and toggles.{{/i}}</p>
<table class="table table-bordered table-striped">
<tbody>
<tr>
- <td>Stateful</td>
+ <td>{{_i}}Stateful{{/i}}</td>
<td>
<button id="fat-btn" data-loading-text="loading..." class="btn primary">
- Loading State
+ {{_i}}Loading State{{/i}}
</button>
</td>
</tr>
<tr>
- <td>Single toggle</td>
+ <td>{{_i}}Single toggle{{/i}}</td>
<td>
- <button class="btn primary" data-toggle="button">Single Toggle</button>
+ <button class="btn primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
</td>
</tr>
<tr>
- <td>Checkbox</td>
+ <td>{{_i}}Checkbox{{/i}}</td>
<td>
<div class="btn-group" data-toggle="buttons-checkbox">
- <button class="btn primary">Left</button>
- <button class="btn primary">Middle</button>
- <button class="btn primary">Right</button>
+ <button class="btn primary">{{_i}}Left{{/i}}</button>
+ <button class="btn primary">{{_i}}Middle{{/i}}</button>
+ <button class="btn primary">{{_i}}Right{{/i}}</button>
</div>
</td>
</tr>
<tr>
- <td>Radio</td>
+ <td>{{_i}}Radio{{/i}}</td>
<td>
<div class="btn-group" data-toggle="buttons-radio">
- <button class="btn primary">Left</button>
- <button class="btn primary">Middle</button>
- <button class="btn primary">Right</button>
+ <button class="btn primary">{{_i}}Left{{/i}}</button>
+ <button class="btn primary">{{_i}}Middle{{/i}}</button>
+ <button class="btn primary">{{_i}}Right{{/i}}</button>
</div>
</td>
</tr>
</tbody>
</table>
<hr>
- <h2>Using bootstrap-button.js</h2>
- <p>Enable buttons via javascript:</p>
+ <h2>{{_i}}Using bootstrap-button.js{{/i}}</h2>
+ <p>{{_i}}Enable buttons via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('.tabs').button()</pre>
- <h3>Markup</h3>
- <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
+ <h3>{{_i}}Markup{{/i}}</h3>
+ <p>{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}</p>
<pre class="prettyprint linenums">
<!-- Add data-toggle="button" to activate toggling on a single button -->
<button class="btn" data-toggle="button">Single Toggle</button>
@@ -960,22 +960,22 @@ $('#my-alert').bind('closed', function () {
<button class="btn">Right</button>
</div>
</pre>
- <h3>Methods</h3>
+ <h3>{{_i}}Methods{{/i}}</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>
- <pre class="prettyprint linenums"><button class="btn" data-toggle="button" >...</button></pre>
+ <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>
+ <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>{{_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>
- <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}}<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>Resets button state - swaps text to original text.</p>
+ <p>{{_i}}Resets button state - swaps text to original text.{{/i}}</p>
<h4>$().button(string)</h4>
- <p>Resets button state - swaps text to any data defined text state.</p>
+ <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')
@@ -990,23 +990,23 @@ $('#my-alert').bind('closed', function () {
================================================== -->
<section id="collapse">
<div class="page-header">
- <h1>Collapse <small>bootstrap-collapse.js</small></h1>
+ <h1>{{_i}}Collapse{{/i}} <small>bootstrap-collapse.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
- <h3>About</h3>
- <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
- <a href="../js/bootstrap-collapse.js" target="_blank" class="btn">Download file</a>
+ <h3>{{_i}}About{{/i}}</h3>
+ <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
+ <a href="../js/bootstrap-collapse.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
- <h2>Example accordion</h2>
- <p>Using the collapse plugin, we built a simple accordion style widget:</p>
+ <h2>{{_i}}Example accordion{{/i}}</h2>
+ <p>{{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}</p>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
- Collapsible Group Item #1
+ {{_i}}Collapsible Group Item #1{{/i}}
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
@@ -1018,7 +1018,7 @@ $('#my-alert').bind('closed', function () {
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
- Collapsible Group Item #2
+ {{_i}}Collapsible Group Item #2{{/i}}
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
@@ -1030,7 +1030,7 @@ $('#my-alert').bind('closed', function () {
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
- Collapsible Group Item #3
+ {{_i}}Collapsible Group Item #3{{/i}}
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
@@ -1043,92 +1043,92 @@ $('#my-alert').bind('closed', function () {
<hr>
- <h2>Using bootstrap-collapse.js</h2>
+ <h2>{{_i}}Using bootstrap-collapse.js{{/i}}</h2>
<p>Enable via javascript:</p>
<pre class="prettyprint linenums">$(".collapse").collapse()</pre>
- <h3>Options</h3>
+ <h3>{{_i}}Options{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 50px;">type</th>
- <th style="width: 50px;">default</th>
- <th>description</th>
+ <th style="width: 100px;">{{_i}}Name{{/i}}</th>
+ <th style="width: 50px;">{{_i}}type{{/i}}</th>
+ <th style="width: 50px;">{{_i}}default{{/i}}</th>
+ <th>{{_i}}description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
- <td>parent</td>
- <td>selector</td>
+ <td>{{_i}}parent{{/i}}</td>
+ <td>{{_i}}selector{{/i}}</td>
<td>false</td>
- <td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td>
+ <td>{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior){{/i}}</td>
</tr>
<tr>
- <td>toggle</td>
- <td>boolean</td>
+ <td>{{_i}}toggle{{/i}}</td>
+ <td>{{_i}}boolean{{/i}}</td>
<td>true</td>
- <td>Toggles the collapsible element on invocation</td>
+ <td>{{_i}}Toggles the collapsible element on invocation{{/i}}</td>
</tr>
</tbody>
</table>
- <h3>Markup</h3>
- <p>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>.</p>
+ <h3>{{_i}}Markup{{/i}}</h3>
+ <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>
<pre class="prettyprint linenums">
<button class="btn danger" data-toggle="collapse" data-target="#demo">
- simple collapsible
+ {{_i}}simple collapsible{{/i}}
</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>
- <h3>Methods</h3>
- <h4>.collapse(options)</h4>
- <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
+ <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>
+ <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}}
<pre class="prettyprint linenums">
$('#myCollapsible').collapse({
toggle: false
})</pre>
<h4>.collapse('toggle')</h4>
- <p>Toggles a collapsible element to shown or hidden.</p>
+ <p>{{_i}}Toggles a collapsible element to shown or hidden.{{/i}}</p>
<h4>.collapse('show')</h4>
- <p>Shows a collapsible element.</p>
+ <p>{{_i}}Shows a collapsible element.{{/i}}</p>
<h4>.collapse('hide')</h4>
- <p>Hides a collapsible element.</p>
- <h3>Events</h3>
+ <p>{{_i}}Hides a collapsible element.{{/i}}</p>
+ <h3>{{_i}}Events{{/i}}</h3>
<p>
- Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
+ {{_i}}Bootstrap's collapse class exposes a few events for hooking into collapse functionality.{{/i}}
</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th style="width: 150px;">Event</th>
- <th>Description</th>
+ <th style="width: 150px;">{{_i}}Event{{/i}}</th>
+ <th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
- <td>show</td>
- <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+ <td>{{_i}}show{{/i}}/td>
+ <td>{{_i}}This event fires immediately when the <code>show</code> instance method is called.{{/i}}</td>
</tr>
<tr>
- <td>shown</td>
- <td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td>
+ <td>{{_i}}shown{{/i}}</td>
+ <td>{{_i}}This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).{{/i}}</td>
</tr>
<tr>
- <td>hide</td>
+ <td>{{_i}}hide{{/i}}</td>
<td>
- This event is fired immediately when the <code>hide</code> method has been called.
+ {{_i}}This event is fired immediately when the <code>hide</code> method has been called.{{/i}}
</td>
</tr>
<tr>
- <td>hidden</td>
- <td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td>
+ <td>{{_i}}hidden{{/i}}</td>
+ <td>{{_i}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
$('#myCollapsible').on('hidden', function () {
- // do something ...
+ // {{_i}}do something…{{/i}}
})</pre>
</div>
</div>
@@ -1140,37 +1140,37 @@ $('#myCollapsible').on('hidden', function () {
================================================== -->
<section id="carousel">
<div class="page-header">
- <h1>Carousel <small>bootstrap-carousel.js</small></h1>
+ <h1>{{_i}}Carousel{{/i}} <small>bootstrap-carousel.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
- <h3>About</h3>
- <p>A generic plugin for cycling through elements. A merry-go-round.</p>
- <a href="../js/bootstrap-carousel.js" target="_blank" class="btn">Download file</a>
+ <h3>{{_i}}About{{/i}}</h3>
+ <p>{{_i}}A generic plugin for cycling through elements. A merry-go-round.{{/i}}</p>
+ <a href="../js/bootstrap-carousel.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
- <h2>Example carousel</h2>
- <p>Watch the slideshow below.</p>
+ <h2>{{_i}}Example carousel{{/i}}</h2>
+ <p>{{_i}}Watch the slideshow below.{{/i}}</p>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1000x500" alt="">
<div class="carousel-caption">
- <h4>First Thumbnail label</h4>
+ <h4>{{_i}}First Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1000x500" alt="">
<div class="carousel-caption">
- <h4>Second Thumbnail label</h4>
+ <h4>{{_i}}Second Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1000x500" alt="">
<div class="carousel-caption">
- <h4>Third Thumbnail label</h4>
+ <h4>{{_i}}Third Thumbnail label{{/i}}</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
@@ -1179,30 +1179,30 @@ $('#myCollapsible').on('hidden', function () {
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<hr>
- <h2>Using bootstrap-carousel.js</h2>
- <p>Call via javascript:</p>
+ <h2>{{_i}}Using bootstrap-carousel.js{{/i}}</h2>
+ <p>{{_i}}Call via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
- <h3>Options</h3>
+ <h3>{{_i}}Options{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 50px;">type</th>
- <th style="width: 50px;">default</th>
- <th>description</th>
+ <th style="width: 100px;">{{_i}}Name{{/i}}</th>
+ <th style="width: 50px;">{{_i}}type{{/i}}</th>
+ <th style="width: 50px;">{{_i}}default{{/i}}</th>
+ <th>{{_i}}description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
- <td>interval</td>
- <td>number</td>
+ <td>{{_i}}interval{{/i}}</td>
+ <td>{{_i}}number{{/i}}</td>
<td>5000</td>
- <td>The amount of type to delay between automatically cycling an item.</td>
+ <td>{{_i}}The amount of type to delay between automatically cycling an item.{{/i}}</td>
</tr>
</tbody>
</table>
- <h3>Markup</h3>
- <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
+ <h3>{{_i}}Markup{{/i}}</h3>
+ <p>{{_i}}Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.{{/i}}</p>
<pre class="prettyprint linenums">
<div class="carousel">
<!-- Carousel items -->
@@ -1214,41 +1214,41 @@ $('#myCollapsible').on('hidden', function () {
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</pre>
- <h3>Methods</h3>
- <h4>.carousel(options)</h4>
- <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
+ <h3>{{_i}}Methods{{/i}}</h3>
+ <h4>.carousel({{_i}}options{{/i}})</h4>
+ <p>{{_i}}Initializes the carousel with an optional options <code>object</code> and starts cycling through items.{{/i}}</p>
<pre class="prettyprint linenums">
$('.myCarousel').carousel({
interval: 2000
})
</pre>
<h4>.carousel('cycle')</h4>
- <p>Cycles through the carousel items from left to right.</p>
+ <p>{{_i}}Cycles through the carousel items from left to right.{{/i}}</p>
<h4>.carousel('pause')</h4>
- <p>Stops the carousel from cycling through items.</p>
+ <p>{{_i}}Stops the carousel from cycling through items.{{/i}}</p>
<h4>.carousel(number)</h4>
- <p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
+ <p>{{_i}}Cycles the carousel to a particular frame (0 based, similar to an array).{{/i}}</p>
<h4>.carousel('prev')</h4>
- <p>Cycles to the previous item.</p>
+ <p>{{_i}}Cycles to the previous item.{{/i}}</p>
<h4>.carousel('next')</h4>
- <p>Cycles to the next item.</p>
- <h3>Events</h3>
- <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
+ <p>{{_i}}Cycles to the next item.{{/i}}</p>
+ <h3>{{_i}}Events{{/i}}</h3>
+ <p>{{_i}}Bootstrap's modal class exposes a few events for hooking into modal functionality.{{/i}}</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th style="width: 150px;">Event</th>
- <th>Description</th>
+ <th style="width: 150px;">{{_i}}Event{{/i}}</th>
+ <th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
- <td>slide</td>
- <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
+ <td>{{_i}}slide{{/i}}</td>
+ <td>{{_i}}This event fires immediately when the <code>slide</code> instance method is invoked.{{/i}}</td>
</tr>
<tr>
- <td>slid</td>
- <td>This event is fired when the carousel has completed it's slide transition.</td>
+ <td>{{_i}}slid{{/i}}</td>
+ <td>{{_i}}This event is fired when the carousel has completed it's slide transition.{{/i}}</td>
</tr>
</tr>
</tbody>
@@ -1263,46 +1263,46 @@ $('.myCarousel').carousel({
================================================== -->
<section id="typeahead">
<div class="page-header">
- <h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
+ <h1>{{_i}}Typeahead{{/i}} <small>bootstrap-typeahead.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
- <h3>About</h3>
- <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
- <a href="../js/bootstrap-typeahead.js" target="_blank" class="btn">Download file</a>
+ <h3>{{_i}}About{{/i}}</h3>
+ <p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
+ <a href="../js/bootstrap-typeahead.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
- <h2>Example</h2>
- <p>Start typing in the field below to show the typeahead results.</p>
+ <h2>{{_i}}Example{{/i}}</h2>
+ <p>{{_i}}Start typing in the field below to show the typeahead results.{{/i}}</p>
<div class="well">
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-data='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
</div>
<hr>
- <h2>Using bootstrap-typeahead.js</h2>
- <p>Call the typeahead via javascript:</p>
+ <h2>{{_i}}Using bootstrap-typeahead.js{{/i}}</h2>
+ <p>{{_i}}Call the typeahead via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
- <h3>Options</h3>
+ <h3>{{_i}}Options{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 50px;">type</th>
- <th style="width: 50px;">default</th>
- <th>description</th>
+ <th style="width: 100px;">{{_i}}Name{{/i}}</th>
+ <th style="width: 50px;">{{_i}}type{{/i}}</th>
+ <th style="width: 50px;">{{_i}}default{{/i}}</th>
+ <th>{{_i}}description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
- <td>items</td>
- <td>number</td>
+ <td>{{_i}}items{{/i}}</td>
+ <td>{{_i}}number{{/i}}</td>
<td>8</td>
- <td>The max number of items to display in the dropdown.</td>
+ <td>{{_i}}The max number of items to display in the dropdown.{{/i}}</td>
</tr>
</tbody>
</table>
- <h3>Markup</h3>
- <p>Add data attributes to register an element with typeahead functionality.</p>
+ <h3>{{_i}}Markup{{/i}}</h3>
+ <p>{{_i}}Add data attributes to register an element with typeahead functionality.{{/i}}</p>
<pre class="prettyprint linenums">
<input type="text" data-provide="typeahead">
</pre>
--
GitLab