<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
- <h1>Javascript for Bootstrap</h1>
- <p class="lead">Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
+ <h1>{{_i}}Javascript for{{/i}} Bootstrap</h1>
+ <p class="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
<ul class="nav pills">
- <li><a href="./javascript.html#javascript">Overview</a></li>
- <li><a href="./javascript.html#modals">Modal</a></li>
- <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
- <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
- <li><a href="./javascript.html#tabs">Tab</a></li>
- <li><a href="./javascript.html#tooltips">Tooltip</a></li>
- <li><a href="./javascript.html#popovers">Popover</a></li>
- <li><a href="./javascript.html#alerts">Alert</a></li>
- <li><a href="./javascript.html#buttons">Button</a></li>
- <li><a href="./javascript.html#collapse">Collapse</a></li>
- <li><a href="./javascript.html#carousel">Carousel</a></li>
- <li><a href="./javascript.html#typeahead">Typeahead</a></li>
+ <li><a href="./javascript.html#javascript">{{_i}}Overview{{/i}}</a></li>
+ <li><a href="./javascript.html#modals">{{_i}}Modal{{/i}}</a></li>
+ <li><a href="./javascript.html#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
+ <li><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></li>
+ <li><a href="./javascript.html#tabs">{{_i}}Tab{{/i}}</a></li>
+ <li><a href="./javascript.html#tooltips">{{_i}}Tooltip{{/i}}</a></li>
+ <li><a href="./javascript.html#popovers">{{_i}}Popover{{/i}}</a></li>
+ <li><a href="./javascript.html#alerts">{{_i}}Alert{{/i}}</a></li>
+ <li><a href="./javascript.html#buttons">{{_i}}Button{{/i}}</a></li>
+ <li><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></li>
+ <li><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></li>
+ <li><a href="./javascript.html#typeahead">{{_i}}Typeahead{{/i}}</a></li>
</ul>
</header>
================================================== -->
<section id="javascript">
<div class="page-header">
- <h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1>
+ <h1>{{_i}}jQuery plugins{{/i}} <small>{{_i}}A dozen Bootstrap plugins to get you started{{/i}}</small></h1>
</div>
<div class="row">
<div class="span3">
<label>
- <h3><a href="./javascript.html#modals">Modals</a><input checked="true" value="bootstrap-modal.js" type="checkbox"></h3>
- <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
+ <h3><a href="./javascript.html#modals">{{_i}}Modals{{/i}}</a><input checked="true" value="bootstrap-modal.js" type="checkbox"></h3>
+ <p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
</label>
</div>
<div class="span3">
<label>
- <h3><a href="./javascript.html#dropdowns">Dropdowns</a><input checked="true" value="bootstrap-dropdown.js" type="checkbox"></h3>
- <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
+ <h3><a href="./javascript.html#dropdowns">{{_i}}Dropdowns{{/i}}</a><input checked="true" value="bootstrap-dropdown.js" type="checkbox"></h3>
+ <p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
</label>
</div>
<div class="span3">
<label>
- <h3><a href="./javascript.html#scrollspy">Scrollspy</a><input checked="true" value="bootstrap-scrollspy.js" type="checkbox"></h3>
- <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
+ <h3><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a><input checked="true" value="bootstrap-scrollspy.js" type="checkbox"></h3>
+ <p>{{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}</p>
</label>
</div>
<div class="span3">
<label>
- <h3><a href="./javascript.html#tabs">Togglable tabs</a><input checked="true" value="bootstrap-tab.js" type="checkbox"></h3>
- <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
+ <h3><a href="./javascript.html#tabs">{{_i}}Togglable tabs{{/i}}</a><input checked="true" value="bootstrap-tab.js" type="checkbox"></h3>
+ <p>{{_i}}Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.{{/i}}</p>
</label>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span3">
<label>
- <h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3>
- <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p>
+ <h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3>
+ <p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
</label>
</div>
<div class="span3">
<label>
- <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small><input checked="true" value="bootstrap-popover.js" type="checkbox"></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="#tooltips">Tooltips</a> to be included</p>
+ <h3><a href="./javascript.html#popovers">{{_i}}Popovers{{/i}}</a> <small class="muted">*</small><input checked="true" value="bootstrap-popover.js" type="checkbox"></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="#tooltips">Tooltips</a> to be included{{/i}}</p>
</label>
</div>
<div class="span3">
<label>
- <h3><a href="./javascript.html#alerts">Alert messages</a><input checked="true" value="bootstrap-alert.js" type="checkbox"></h3>
- <p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
+ <h3><a href="./javascript.html#alerts">{{_i}}Alert messages{{/i}}</a><input checked="true" value="bootstrap-alert.js" type="checkbox"></h3>
+ <p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
</label>
</div>
<div class="span3">
<label>
- <h3><a href="./javascript.html#buttons">Buttons</a><input checked="true" value="bootstrap-button.js" type="checkbox"></h3>
- <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
+ <h3><a href="./javascript.html#buttons">{{_i}}Buttons{{/i}}</a><input checked="true" value="bootstrap-button.js" type="checkbox"></h3>
+ <p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
</label>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span3">
<label>
- <h3><a href="./javascript.html#collapse">Collapse</a><input checked="true" value="bootstrap-collapse.js" type="checkbox"></h3>
- <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
+ <h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a><input checked="true" value="bootstrap-collapse.js" type="checkbox"></h3>
+ <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
</label>
</div>
<div class="span3">
<label>
- <h3><a href="./javascript.html#carousel">Carousel</a><input checked="true" value="bootstrap-carousel.js" type="checkbox"></h3>
- <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
+ <h3><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a><input checked="true" value="bootstrap-carousel.js" type="checkbox"></h3>
+ <p>{{_i}}Create a merry-go-round of any content you wish to provide an interactive slideshow of content.{{/i}}</p>
</label>
</div>
<div class="span3">
<label>
<h3><a href="./javascript.html#typeahead">Typeahead</a><input checked="true" value="bootstrap-typeahead.js" type="checkbox"></h3>
- <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
+ <p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
</label>
</div>
<div class="span3">
<label>
- <h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3>
- <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
- <p class="muted"><strong>*</strong> Required for animation in plugins</p>
+ <h3><a href="./javascript.html#transitions">{{_i}}Transitions{{/i}}</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3>
+ <p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
+ <p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p>
</label>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span5">
<div class="btn-group" id="javascriptBuilder">
- <a id="javascriptBuild" class="btn primary large" href="#">Download Source</a>
+ <a id="javascriptBuild" class="btn primary large" href="#">{{_i}}Download Source{{/i}}</a>
<a class="btn primary large dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="dropdown-menu large">
- <li class="active"><a href="#">Compressed</a></li>
- <li><a href="#">Uncompressed</a></li>
+ <li class="active"><a href="#">{{_i}}Compressed{{/i}}</a></li>
+ <li><a href="#">{{_i}}Uncompressed{{/i}}</a></li>
</ul>
</div>
</div>
</div>
<hr>
- <a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a>
- <p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
+ <a id="selectAll" href="#" style="float:right">{{_i}}Select/Unselect All Plugins{{/i}}</a>
+ <p class="muted">{{_i}}<span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.{{/i}}</p>
</section>
================================================== -->
<section id="modals">
<div class="page-header">
- <h1>Modals <small>bootstrap-modal.js</small></h1>
+ <h1>{{_i}}Modals{{/i}} <small>bootstrap-modal.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
- <h3>About modals</h3>
- <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
- <a href="../js/bootstrap-modal.js" target="_blank" class="btn">Download file</a>
+ <h3>{{_i}}About modals{{/i}}</h3>
+ <p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
+ <a href="../js/bootstrap-modal.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
- <h2>Static example</h2>
- <p>Below is a statically rendered modal.</p>
+ <h2>{{_i}}Static example{{/i}}</h2>
+ <p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
<div class="well" style="background-color: #888; border: none;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
- <h3>Modal header</h3>
+ <h3>{{_i}}Modal header{{/i}}</h3>
</div>
<div class="modal-body">
- <p>One fine body…</p>
+ <p>{{_i}}One fine body…{{/i}}</p>
</div>
<div class="modal-footer">
- <a href="#" class="btn primary">Save changes</a>
- <a href="#" class="btn">Close</a>
+ <a href="#" class="btn primary">{{_i}}Save changes{{/i}}</a>
+ <a href="#" class="btn">{{_i}}Close{{/i}}</a>
</div>
</div>
</div> <!-- /well -->
- <h2>Live demo</h2>
- <p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
+ <h2>{{_i}}Live demo{{/i}}</h2>
+ <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 fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" >×</a>
- <h3>Modal Heading</h3>
+ <h3>{{_i}}Modal Heading{{/i}}</h3>
</div>
<div class="modal-body">
- <h4>Text in a modal</h4>
+ <h4>{{_i}}Text in a modal{{/i}}</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
- <h4>Popover in a modal</h4>
- <p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
+ <h4>{{_i}}Popover in a modal{{/i}}</h4>
+ <p>{{_i}}This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
- <h4>Tooltips in a modal</h4>
- <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
+ <h4>{{_i}}Tooltips in a modal{{/i}}</h4>
+ <p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>
</div>
<div class="modal-footer">
- <a href="#" class="btn primary">Save changes</a>
- <a href="#" class="btn" data-dismiss="modal" >Close</a>
+ <a href="#" class="btn primary">{{_i}}Save changes<{{/i}}/a>
+ <a href="#" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
</div>
</div>
- <a data-toggle="modal" href="#myModal" class="btn primary large">Launch demo modal</a>
+ <a data-toggle="modal" href="#myModal" class="btn primary large">{{_i}}Launch demo modal{{/i}}</a>
<hr>
- <h2>Using bootstrap-modal</h2>
- <p>Call the modal via javascript:</p>
+ <h2>{{_i}}Using bootstrap-modal{{/i}}</h2>
+ <p>{{_i}}Call the modal via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('#myModal').modal(options)</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>backdrop</td>
- <td>boolean</td>
- <td>true</td>
- <td>Includes a modal-backdrop element</td>
+ <td>{{_i}}backdrop{{/i}}</td>
+ <td>{{_i}}boolean{{/i}}</td>
+ <td>{{_i}}true{{/i}}</td>
+ <td>{{_i}}Includes a modal-backdrop element{{/i}}</td>
</tr>
<tr>
- <td>keyboard</td>
- <td>boolean</td>
- <td>true</td>
- <td>Closes the modal when escape key is pressed</td>
+ <td>{{_i}}keyboard{{/i}}</td>
+ <td>{{_i}}boolean{{/i}}</td>
+ <td>{{_i}}true{{/i}}</td>
+ <td>{{_i}}Closes the modal when escape key is pressed{{/i}}</td>
</tr>
</tbody>
</table>
- <h3>Markup</h3>
- <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p>
- <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.</p>
+ <h3>{{_i}}Markup{{/i}}</h3>
+ <p>{{_i}}You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p>
+ <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.{{/i}}</p>
<pre class="prettyprint linenums">
-<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
+<a class="btn" data-toggle="modal" href="#myModal" >{{_i}}Launch Modal{{/i}}</a>
</pre>
<pre class="prettyprint linenums">
<h3>Modal header</h3>
</div>
<div class="modal-body">
- <p>One fine body…</p>
+ <p>{{_i}}One fine body…{{/i}}</p>
</div>
<div class="modal-footer">
- <a href="#" class="btn primary">Save changes</a>
- <a href="#" class="btn">Close</a>
+ <a href="#" class="btn primary">{{_i}}Save changes{{/i}}</a>
+ <a href="#" class="btn">{{_i}}Close{{/i}}</a>
</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>
- <h3>Methods</h3>
- <h4>.modal(options)</h4>
- <p>Activates your content as a modal. Accepts an optional options <code>object</code>.
+ <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>
+ <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>
<pre class="prettyprint linenums">
$('#myModal').modal({
keyboard: false
})</pre>
<h4>.modal('toggle')</h4>
- <p>Manually toggles a modal.</p>
+ <p>{{_i}}Manually toggles a modal.{{/i}}</p>
<pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
<h4>.modal('show')</h4>
- <p>Manually opens a modal.</p>
+ <p>{{_i}}Manually opens a modal.{{/i}}</p>
<pre class="prettyprint linenums">$('#myModal').modal('show')</pre>
<h4>.modal('hide')</h4>
- <p>Manually hides a modal.</p>
+ <p>{{_i}}Manually hides a modal.{{/i}}</p>
<pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
- <h3>Events</h3>
- <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </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>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 the modal 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 the modal has been made visible to the user (will wait for css transitions to complete).{{/i}}</td>
</tr>
<tr>
- <td>hide</td>
- <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ <td>{{_i}}hide{{/i}}</td>
+ <td>{{_i}}This event is fired immediately when the <code>hide</code> instance method has been called.{{/i}}</td>
</tr>
<tr>
- <td>hidden</td>
- <td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
+ <td>{{_i}}hidden{{/i}}</td>
+ <td>{{_i}}This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).{{/i}}</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
$('#myModal').on('hidden', function () {
- // do something ...
+ // {{_i}}do something…{{/i}}
})</pre>
</div>
</div>
================================================== -->
<section id="dropdowns">
<div class="page-header">
- <h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
+ <h1>{{_i}}Dropdowns{{/i}} <small>bootstrap-dropdown.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
- <h3>About dropdowns</h3>
- <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
- <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn">Download file</a>
+ <h3>{{_i}}About dropdowns{{/i}}</h3>
+ <p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
+ <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
- <h2>Examples</h2>
- <p>Click on the dropdown nav links in the navbar and pills below to test dropdowns.</p>
+ <h2>{{_i}}Examples{{/i}}</h2>
+ <p>{{_i}}Click on the dropdown nav links in the navbar and pills below to test dropdowns.{{/i}}</p>
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
- <a class="brand" href="#">Project Name</a>
+ <a class="brand" href="#">{{_i}}Project Name{{/i}}</a>
<ul class="nav">
<li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
- <li><a href="#">Separated link</a></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
<li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
<ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
- <li><a href="#">Separated link</a></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
- <li><a href="#">Separated link</a></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul>
</div> <!-- /navbar-example -->
<ul class="nav pills">
- <li class="active"><a href="#">Regular link</a></li>
+ <li class="active"><a href="#">{{_i}}Regular link{{/i}}</a></li>
<li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
- <li><a href="#">Separated link</a></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
<li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
- <li><a href="#">Separated link</a></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
<li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
- <li><a href="#">Separated link</a></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul> <!-- /tabs -->
<hr>
- <h2>Using bootstrap-dropdown.js</h2>
- <p>Call the dropdowns via javascript:</p>
+ <h2>{{_i}}Using{{/i}} bootstrap-dropdown.js</h2>
+ <p>{{_i}}Call the dropdowns via javascript:{{/i}}</p>
<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>
+ <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>
<pre class="prettyprint linenums">
<ul class="nav pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
- Dropdown
+ {{_i}}Dropdown{{/i}}
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
- <li><a href="#">Separated link</a></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
...
</ul></pre>
- <h3>Methods</h3>
+ <h3>{{_i}}Methods{{/i}}</h3>
<h4>$().dropdown()</h4>
- <p>
- A programatic api for activating menus for a given navbar or tabbed navigation.
- </p>
+ <p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
</div>
</div>
</section>
================================================== -->
<section id="scrollspy">
<div class="page-header">
- <h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
+ <h1>{{_i}}ScrollSpy{{/i}} <small>bootstrap-scrollspy.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
- <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</p>
- <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn">Download file</a>
+ <p>{{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position.{{/i}}</p>
+ <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
- <h2>Example navbar with scrollspy</h2>
- <p>Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p>
+ <h2>{{_i}}Example navbar with scrollspy{{/i}}</h2>
+ <p>{{_i}}Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!{{/i}}</p>
<div id="navbarExample" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
- <a class="brand" href="#">Project Name</a>
+ <a class="brand" href="#">{{_i}}Project Name{{/i}}</a>
<ul class="nav">
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li>
<li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
- <li><a href="#one">one</a></li>
- <li><a href="#two">two</a></li>
+ <li><a href="#one">{{_i}}one{{/i}}</a></li>
+ <li><a href="#two">{{_i}}two{{/i}}</a></li>
<li class="divider"></li>
- <li><a href="#three">three</a></li>
+ <li><a href="#three">{{_i}}three{{/i}}</a></li>
</ul>
</li>
</ul>
</p>
</div>
<hr>
- <h2>Using bootstrap-scrollspy.js</h2>
- <p>Call the scrollspy via javascript:</p>
+ <h2>{{_i}}Using bootstrap-scrollspy.js{{/i}}</h2>
+ <p>{{_i}}Call the scrollspy via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('#navbar').scrollspy()</pre>
- <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).
+ <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><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>.
- <h3>Options</h3>
+ <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>
+ <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>offset</td>
- <td>number</td>
- <td>10</td>
- <td>Pixels to offset from top when calculating position of scroll.</td>
+ <td>{{_i}}offset{{/i}}</td>
+ <td>{{_i}}number{{/i}}</td>
+ <td>{{_i}}10{{/i}}</td>
+ <td>{{_i}}Pixels to offset from top when calculating position of scroll.{{/i}}</td>
</tr>
</tbody>
</table>
================================================== -->
<section id="tabs">
<div class="page-header">
- <h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
+ <h1>{{_i}}Togglable tabs{{/i}} <small>bootstrap-tab.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
- <p>This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.</p>
- <a href="../js/bootstrap-tab.js" target="_blank" class="btn">Download file</a>
+ <p>{{_i}}This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.{{/i}}</p>
+ <a href="../js/bootstrap-tab.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
- <h2>Example tabs</h2>
- <p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p>
+ <h2>{{_i}}Example tabs{{/i}}</h2>
+ <p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p>
<ul id="tab" class="nav tabs">
- <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
- <li><a href="#profile" data-toggle="tab">Profile</a></li>
+ <li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
<li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
</div>
</div>
<hr>
- <h2>Using bootstrap-tab.js</h2>
- <p>Enable tabbable tabs via javascript:</p>
+ <h2>{{_i}}Using bootstrap-tab.js{{/i}}</h2>
+ <p>{{_i}}Enable tabbable tabs via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
- <h3>Markup</h3>
- <p>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.</p>
+ <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.{{/i}}</p>
<pre class="prettyprint linenums">
<ul class="tabs">
- <li><a href="#home" data-toggle="tab">Home</a></li>
- <li><a href="#profile" data-toggle="tab">Profile</a></li>
- <li><a href="#messages" data-toggle="tab">Messages</a></li>
- <li><a href="#ettings" data-toggle="tab">Settings</a></li>
+ <li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
+ <li><a href="#messages" data-toggle="tab">{{_i}}Messages{{/i}}</a></li>
+ <li><a href="#ettings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li>
</ul></pre>
- <h3>Methods</h3>
+ <h3>{{_i}}Methods{{/i}}</h3>
<h4>$().tab</h4>
<p>
- Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.
+ {{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}}
</p>
<pre class="prettyprint linenums">
<ul class="tabs">
- <li class="active"><a href="#home">Home</a></li>
- <li><a href="#profile">Profile</a></li>
- <li><a href="#messages">Messages</a></li>
- <li><a href="#settings">Settings</a></li>
+ <li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#profile">{{_i}}Profile{{/i}}</a></li>
+ <li><a href="#messages">{{_i}}Messages{{/i}}</a></li>
+ <li><a href="#settings">{{_i}}Settings{{/i}}</a></li>
</ul>
<div class="tab-content">
})
</script></pre>
</p>
- <h3>Events</h3>
+ <h3>{{_i}}Events{{/i}}</h3>
<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 on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
+ <td>{{_i}}show{{/i}}</td>
+ <td>{{_i}}This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.{{/i}}</td>
</tr>
<tr>
- <td>shown</td>
- <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
+ <td>{{_i}}shown{{/i}}</td>
+ <td>{{_i}}This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.{{/i}}</td>
</tr>
</tbody>
</table>
================================================== -->
<section id="tooltips">
<div class="page-header">
- <h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
+ <h1>{{_i}}Tooltips{{/i}} <small>bootstrap-tooltip.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
- <h3>About Tooltips</h3>
- <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
- <a href="../js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a>
+ <h3>{{_i}}About Tooltips{{/i}}</h3>
+ <p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.{{/i}}</p>
+ <a href="../js/bootstrap-tooltip.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
- <h2>Example use of Tooltips</h2>
- <p>Hover over the links below to see tooltips:</p>
+ <h2>{{_i}}Example use of Tooltips{{/i}}</h2>
+ <p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
<div class="tooltip-demo well">
- <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='tooltip' title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
+ <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='tooltip' title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
</p>
</div>
<hr>
- <h2>Using bootstrap-tooltip.js</h2>
- <p>Trigger the tooltip via javascript:</p>
- <pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
- <h3>Options</h3>
+ <h2>{{_i}}Using{{/i}} bootstrap-tooltip.js</h2>
+ <p>{{_i}}Trigger the tooltip via javascript:{{/i}}</p>
+ <pre class="prettyprint linenums">$('#example').tooltip({{_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>
projects / thirdparty / bootstrap.git / commitdiff
