You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@isis.apache.org by bu...@apache.org on 2013/10/15 01:14:42 UTC
svn commit: r882616 - in /websites/staging/isis/trunk: cgi-bin/ content/
content/screenshot-tutorial.html
Author: buildbot
Date: Mon Oct 14 23:14:42 2013
New Revision: 882616
Log:
Staging update by buildbot for isis
Added:
websites/staging/isis/trunk/content/screenshot-tutorial.html
Modified:
websites/staging/isis/trunk/cgi-bin/ (props changed)
websites/staging/isis/trunk/content/ (props changed)
Propchange: websites/staging/isis/trunk/cgi-bin/
------------------------------------------------------------------------------
--- cms:source-revision (original)
+++ cms:source-revision Mon Oct 14 23:14:42 2013
@@ -1 +1 @@
-1532127
+1532128
Propchange: websites/staging/isis/trunk/content/
------------------------------------------------------------------------------
--- cms:source-revision (original)
+++ cms:source-revision Mon Oct 14 23:14:42 2013
@@ -1 +1 @@
-1532127
+1532128
Added: websites/staging/isis/trunk/content/screenshot-tutorial.html
==============================================================================
--- websites/staging/isis/trunk/content/screenshot-tutorial.html (added)
+++ websites/staging/isis/trunk/content/screenshot-tutorial.html Mon Oct 14 23:14:42 2013
@@ -0,0 +1,502 @@
+{% extends "isis-template.html" %}
+
+{% block content %}
+
+<div class="row">
+ <div class="col-md-3">
+ <div class="bs-sidebar hidden-print affix-top" role="complementary" style="">
+ <ul class="nav bs-sidenav">
+
+ <li class="active">
+ <a href="#js-overview">Overview</a>
+ <ul class="nav">
+ <li class=""><a href="#js-individual-compiled">Individual or compiled</a></li>
+ <li class=""><a href="#js-data-attrs">Data attributes</a></li>
+ <li class=""><a href="#js-programmatic-api">Programmatic API</a></li>
+ <li><a href="#js-noconflict">No conflict</a></li>
+ <li><a href="#js-events">Events</a></li>
+ </ul>
+ </li>
+ <li><a href="#transitions">Transitions</a></li>
+ <li>
+ <a href="#modals">Modal</a>
+ <ul class="nav">
+ <li><a href="#modals-examples">Examples</a></li>
+ <li><a href="#modals-usage">Usage</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#dropdowns">Dropdown</a>
+ <ul class="nav">
+ <li><a href="#dropdowns-examples">Examples</a></li>
+ <li><a href="#dropdowns-usage">Usage</a></li>
+ </ul>
+ </li>
+ <li class="">
+ <a href="#scrollspy">Scrollspy</a>
+ <ul class="nav">
+ <li><a href="#scrollspy-examples">Examples</a></li>
+ <li><a href="#scrollspy-usage">Usage</a></li>
+ </ul>
+ </li>
+ <li class="">
+ <a href="#tabs">Tab</a>
+ <ul class="nav">
+ <li><a href="#tabs-examples">Examples</a></li>
+ <li class=""><a href="#tabs-usage">Usage</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#tooltips">Tooltip</a>
+ <ul class="nav">
+ <li><a href="#tooltips-examples">Examples</a></li>
+ <li><a href="#tooltips-usage">Usage</a></li>
+ </ul>
+ </li>
+ <li class="">
+ <a href="#popovers">Popover</a>
+ <ul class="nav">
+ <li class=""><a href="#popovers-examples">Examples</a></li>
+ <li class=""><a href="#popovers-usage">Usage</a></li>
+ </ul>
+ </li>
+ <li class="">
+ <a href="#alerts">Alert</a>
+ <ul class="nav">
+ <li><a href="#alerts-examples">Examples</a></li>
+ <li class=""><a href="#alerts-usage">Usage</a></li>
+ </ul>
+ </li>
+ <li class="">
+ <a href="#buttons">Button</a>
+ <ul class="nav">
+ <li class=""><a href="#buttons-examples">Examples</a></li>
+ <li><a href="#buttons-usage">Usage</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#collapse">Collapse</a>
+ <ul class="nav">
+ <li><a href="#collapse-examples">Examples</a></li>
+ <li><a href="#collapse-usage">Usage</a></li>
+ </ul>
+ </li>
+ <li class="">
+ <a href="#carousel">Carousel</a>
+ <ul class="nav">
+ <li class=""><a href="#carousel-examples">Examples</a></li>
+ <li class=""><a href="#carousel-usage">Usage</a></li>
+ </ul>
+ </li>
+ <li class="">
+ <a href="#affix">Affix</a>
+ <ul class="nav">
+ <li class=""><a href="#affix-examples">Examples</a></li>
+ <li class=""><a href="#affix-usage">Usage</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-md-9" role="main">
+ <!-- Overview
+ ================================================== -->
+ <div class="bs-docs-section">
+ <div class="page-header">
+ <h1 id="js-overview">Overview</h1>
+ </div>
+
+ <h3 id="js-individual-compiled">Individual or compiled</h3>
+ <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p>
+
+ <div class="bs-callout bs-callout-danger">
+ <h4>Do not attempt to include both.</h4>
+ <p>Both <code>bootstrap.js</code> and <code>bootstrap.min.js</code> contain all plugins in a single file.</p>
+ </div>
+
+ <div class="bs-callout bs-callout-danger">
+ <h4>Plugin dependencies</h4>
+ <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files).</p>
+ </div>
+
+ <h3 id="js-data-attrs">Data attributes</h3>
+ <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>
+
+ <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:
+ </p><div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.data-api'</span><span class="p">)</span>
+ </code></pre></div>
+
+ <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
+ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.alert.data-api'</span><span class="p">)</span>
+ </code></pre></div>
+
+ <h3 id="js-programmatic-api">Programmatic API</h3>
+ <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
+ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s2">".btn.danger"</span><span class="p">).</span><span class="nx">button</span><span class="p">(</span><span class="s2">"toggle"</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"fat"</span><span class="p">)</span>
+ </code></pre></div>
+
+ <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
+ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s2">"#myModal"</span><span class="p">).</span><span class="nx">modal</span><span class="p">()</span> <span class="c1">// initialized with defaults</span>
+ <span class="nx">$</span><span class="p">(</span><span class="s2">"#myModal"</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span> <span class="nx">keyboard</span><span class="o">:</span> <span class="kc">false</span> <span class="p">})</span> <span class="c1">// initialized with no keyboard</span>
+ <span class="nx">$</span><span class="p">(</span><span class="s2">"#myModal"</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// initializes and invokes show immediately</p></span>
+ </code></pre></div>
+
+ <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
+
+ <h3 id="js-noconflict">No conflict</h3>
+ <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
+ <div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">bootstrapButton</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">button</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">()</span> <span class="c1">// return $.fn.button to previously assigned value</span>
+ <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapBtn</span> <span class="o">=</span> <span class="nx">bootstrapButton</span> <span class="c1">// give $().bootstrapBtn the Bootstrap functionality</span>
+ </code></pre></div>
+
+ <h3 id="js-events">Events</h3>
+ <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
+ <p>As of 3.0.0, all Bootstrap events are namespaced.</p>
+ <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
+ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'show.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span> <span class="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="c1">// stops modal from being shown</span>
+ <span class="p">})</span>
+ </code></pre></div>
+
+ <div class="bs-callout bs-callout-warning" id="callout-third-party-libs">
+ <h4>Third-party libraries</h4>
+ <p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the <a href="http://groups.google.com/group/twitter-bootstrap">mailing list</a> if you need help.</p>
+ </div>
+ </div>
+
+
+
+ <!-- Transitions
+ ================================================== -->
+ <div class="bs-docs-section">
+ <div class="page-header">
+ <h1 id="transitions">Transitions <small>transition.js</small></h1>
+ </div>
+ <h3>About transitions</h3>
+ <p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include thisit's already there.</p>
+ <h3>What's inside</h3>
+ <p>Transition.js is a basic helper for <code>transitionEnd</code> events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.</p>
+ </div>
+
+
+
+ <!-- Modal
+ ================================================== -->
+ <div class="bs-docs-section">
+ <div class="page-header">
+ <h1 id="modals">Modals <small>modal.js</small></h1>
+ </div>
+
+ <h2 id="modals-examples">Examples</h2>
+ <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
+
+ <h3>Static example</h3>
+ <p>A rendered modal with header, body, and set of actions in the footer.</p>
+ <div class="bs-example bs-example-modal">
+ <div class="modal">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+ <h4 class="modal-title">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body
</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+ </div><!-- /example -->
+ <div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span><span class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
+ <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></button></span>
+ <span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">></span>Modal title<span class="nt"></h4></span>
+ <span class="nt"></div></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
+ <span class="nt"><p></span>One fine body<span class="ni">&hellip;</span><span class="nt"></p></span>
+ <span class="nt"></div></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span>
+ <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span>
+ <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></button></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span><span class="c"><!-- /.modal-content --></span>
+ <span class="nt"></div></span><span class="c"><!-- /.modal-dialog --></span>
+ <span class="nt"></div></span><span class="c"><!-- /.modal --></span>
+ </code></pre></div>
+
+ <h3>Live demo</h3>
+ <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>
+ <!-- sample modal content -->
+ <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+ <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
+ </div>
+ <div class="modal-body">
+ <h4>Text in a modal</h4>
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+
+ <h4>Popover in a modal</h4>
+ <p>This <a href="#" role="button" class="btn btn-default popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p>
+
+ <h4>Tooltips in a modal</h4>
+ <p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
+
+ <hr>
+
+ <h4>Overflowing text to show scroll behavior</h4>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ <div class="bs-example" style="padding-bottom: 24px;">
+ <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
+ </div><!-- /example -->
+ <div class="highlight"><pre><code class="html"> <span class="c"><!-- Button trigger modal --></span>
+ <span class="nt"><a</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">href=</span><span class="s">"#myModal"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">></span>Launch demo modal<span class="nt"></a></span>
+
+ <span class="c"><!-- Modal --></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"myModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"myModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
+ <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></button></span>
+ <span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">></span>Modal title<span class="nt"></h4></span>
+ <span class="nt"></div></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
+ ...
+ <span class="nt"></div></span>
+ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span>
+ <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span>
+ <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></button></span>
+ <span class="nt"></div></span>
+ <span class="nt"></div></span><span class="c"><!-- /.modal-content --></span>
+ <span class="nt"></div></span><span class="c"><!-- /.modal-dialog --></span>
+ <span class="nt"></div></span><span class="c"><!-- /.modal --></span>
+ </code></pre></div>
+
+
+ <div class="bs-callout bs-callout-warning">
+ <h4>Make modals accessible</h4>
+ <p>
+ Be sure to add <code>role="dialog"</code> to your primary modal div. In the example above, <code>div#myModal</code>.<br>
+ Also, the <code>aria-labelledby</code> attribute references your modal title. In this example, <code>h4#myModalLabel</code>.<br>
+ Finally, <code>aria-hidden="true"</code> tells assistive technologies to skip DOM elements.<br>
+ Additionally, you may give a description of your modal dialog. Use the <code>aria-describedby</code> attribute in the modal's primary <code><div></code> to point to this description (this is not shown in the above example).
+ </p>
+ </div>
+
+ <h2 id="modals-usage">Usage</h2>
+
+ <h3>Via data attributes</h3>
+ <p>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.</p>
+ <div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#myModal"</span><span class="nt">></span>Launch modal<span class="nt"></button></span>
+ </code></pre></div>
+
+ <h3>Via JavaScript</h3>
+ <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
+ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span>
+ </code></pre></div>
+
+ <h3>Options</h3>
+ <p>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>.</p>
+ <div class="table-responsive">
+ <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>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>backdrop</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
+ </tr>
+ <tr>
+ <td>keyboard</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Closes the modal when escape key is pressed</td>
+ </tr>
+ <tr>
+ <td>show</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Shows the modal when initialized.</td>
+ </tr>
+ <tr>
+ <td>remote</td>
+ <td>path</td>
+ <td>false</td>
+ <td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the root of the modal element. If you're using the data api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
+ <div class="highlight"><pre><code class="html"><span class="nt"><a</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">href=</span><span class="s">"remote.html"</span> <span class="na">data-target=</span><span class="s">"#modal"</span><span class="nt">></span>Click me<span class="nt"></a></span>
+ </code></pre></div>
+ </td></tr>
+ </tbody>
+ </table>
+ </div><!-- /.table-responsive -->
+
+ <h3>Methods</h3>
+
+ <h4>.modal(options)</h4>
+ <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
+ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span>
+ <span class="nx">keyboard</span><span class="o">:</span> <span class="kc">false</span>
+ <span class="p">})</span>
+ </code></pre></div>
+
+ <h4>.modal('toggle')</h4>
+ <p>Manually toggles a modal.</p>
+ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span>
+ </code></pre></div>
+
+ <h4>.modal('show')</h4>
+ <p>Manually opens a modal.</p>
+ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
+ </code></pre></div>
+
+ <h4>.modal('hide')</h4>
+ <p>Manually hides a modal.</p>
+ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span>
+ </code></pre></div>
+
+ <h3>Events</h3>
+ <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
+ <div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.modal</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.modal</td>
+ <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>hide.bs.modal</td>
+ <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.modal</td>
+ <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+ </div><!-- /.table-responsive -->
+ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+ <span class="c1">// do something
</span>
+ <span class="p">})</span>
+ </code></pre></div>
+ </div>
+
+
+
+
+
+
+ <!-- Affix
+ ================================================== -->
+ <div class="bs-docs-section">
+ <div class="page-header">
+ <h1 id="affix">Affix <small>affix.js</small></h1>
+ </div>
+
+ <h2 id="affix-examples">Example</h2>
+ <p>The subnavigation on the left is a live demo of the affix plugin.</p>
+
+ <hr class="bs-docs-separator">
+
+ <h2 id="affix-usage">Usage</h2>
+
+ <h3>Via data attributes</h3>
+ <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p>
+
+ <div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">data-spy=</span><span class="s">"affix"</span> <span class="na">data-offset-top=</span><span class="s">"200"</span><span class="nt">></span>...<span class="nt"></div></span>
+ </code></pre></div>
+
+ <div class="bs-callout bs-callout-warning">
+ <h4>Requires independent styling ;)</h4>
+ <p>
+ Affix toggles between three states/classes: <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin).
+ The <code>affix-top</code> class should be in the regular flow of the document. The <code>affix</code> class should be fixed to the page. And <code>affix-bottom</code> should be positioned absolute. Note, <code>affix-bottom</code> is special in that the plugin will place the element with JS relative to the <code>offset: { bottom: number }</code> option you've provided.
+ </p>
+ </div>
+
+ <h3>Via JavaScript</h3>
+ <p>Call the affix plugin via JavaScript:</p>
+ <div class="highlight"><pre><code class="js"> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myAffix'</span><span class="p">).</span><span class="nx">affix</span><span class="p">({</span>
+ <span class="nx">offset</span><span class="o">:</span> <span class="p">{</span>
+ <span class="nx">top</span><span class="o">:</span> <span class="mi">100</span>
+ <span class="p">,</span> <span class="nx">bottom</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+ <span class="k">return</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bottom</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.bs-footer'</span><span class="p">).</span><span class="nx">outerHeight</span><span class="p">(</span><span class="kc">true</span><span class="p">))</span>
+ <span class="p">}</span>
+ <span class="p">}</span>
+ <span class="p">})</span>
+ </code></pre></div>
+
+
+ <h3>Options</h3>
+ <p>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-top="200"</code>.</p>
+
+ <div class="table-responsive">
+ <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>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>offset</td>
+ <td>number | function | object</td>
+ <td>10</td>
+ <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div><!-- /.table-responsive -->
+
+ </div>
+
+ </div>
+</div>
+{% endblock %}