From 979ca4ea7a2e88fd9bbd8051259cd2803ca5088d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 14 Feb 2013 22:33:26 -0800 Subject: [PATCH] Convert JS page to pygments; nuke prettify assets --- docs/_includes/header.html | 1 - docs/assets/css/pygments-manni.css | 4 +- .../js/google-code-prettify/prettify.css | 30 - .../js/google-code-prettify/prettify.js | 28 - docs/javascript.html | 554 +++++++++++------- 5 files changed, 332 insertions(+), 285 deletions(-) delete mode 100644 docs/assets/js/google-code-prettify/prettify.css delete mode 100644 docs/assets/js/google-code-prettify/prettify.js diff --git a/docs/_includes/header.html b/docs/_includes/header.html index f7c623e3d6..fe23d008e6 100644 --- a/docs/_includes/header.html +++ b/docs/_includes/header.html @@ -17,7 +17,6 @@ - - -
-<div class="modal fade">
-  <div class="modal-dialog">
-    <div class="modal-content">
-
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        <p>One fine body…</p>
-      </div>
-      <div class="modal-footer">
-        <a href="#" class="btn">Close</a>
-        <a href="#" class="btn btn-primary">Save changes</a>
-      </div>
-
-    </div>
-  </div>
-</div>
-
+{% highlight html linenos %} +
+
+
+
+ +

Modal title

+
+
+

One fine body…

+
+
+ Close + Save changes +
+
+
+
+{% endhighlight %}

Live demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

@@ -209,42 +214,43 @@ $('#myModal').on('show', function (e) {
Launch demo modal
-
-<!-- Button to trigger modal -->
-<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
+{% highlight html linenos %}
+

+  
+  Launch demo modal
 
-<!-- Modal -->
-<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">&times;</button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
+  
+  

+    

+      

+        
+        
Modal title

+      

+      

         ...
-      </div>
-      <div class="modal-footer">
-        <a href="#" class="btn">Close</a>
-        <a href="#" class="btn btn-primary">Save changes</a>
-      </div>
+      

+      

+        Close
+        Save changes
+      

+    

+  

+

+{% endhighlight %}
 
-    </div>
-  </div>
-</div>
-

Usage

Via data attributes

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

- 
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
+{% highlight html linenos %} + +{% endhighlight %}

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

- 
$('#myModal').modal(options)
+ {% highlight js linenos %}$('#myModal').modal(options){% endhighlight %}

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

@@ -281,28 +287,35 @@ $('#myModal').on('show', function (e) { path false

If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:

- 
<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>
+{% highlight html linenos %} +Click me +{% endhighlight %}

Methods

+

.modal(options)

Activates your content as a modal. Accepts an optional options object.

-
+{% highlight js linenos %}
 $('#myModal').modal({
   keyboard: false
 })
-
+{% endhighlight %} +

.modal('toggle')

Manually toggles a modal.

- 
$('#myModal').modal('toggle')
+ {% highlight js linenos %}$('#myModal').modal('toggle'){% endhighlight %} +

.modal('show')

Manually opens a modal.

- 
$('#myModal').modal('show')
+ {% highlight js linenos %}$('#myModal').modal('show'){% endhighlight %} +

.modal('hide')

Manually hides a modal.

- 
$('#myModal').modal('hide')
+ {% highlight js linenos %}$('#myModal').modal('hide'){% endhighlight %} +

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

@@ -331,11 +344,11 @@ $('#myModal').modal({
-
+{% highlight js linenos %}
 $('#myModal').on('hidden', function () {
   // do something…
 })
-
+{% endhighlight %} @@ -441,30 +454,31 @@ $('#myModal').on('hidden', function () {

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

-
-<div class="dropdown">
-  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+{% highlight html linenos %}
+

+  Dropdown trigger
+
+ + +{% endhighlight %}

To keep URLs intact, use the data-target attribute instead of href="#".

-
-<div class="dropdown">
-  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
-    Dropdown
-    <b class="caret"></b>
-  </a>
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+{% highlight html linenos %}
+

+  
+    Dropdown 
+  
+
+ + +{% endhighlight %}

Via JavaScript

Call the dropdowns via JavaScript:

- 
$('.dropdown-toggle').dropdown()
+{% highlight js linenos %} +$('.dropdown-toggle').dropdown() +{% endhighlight %}

Options

None

@@ -531,11 +545,17 @@ $('#myModal').on('hidden', function () {

Via data attributes

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.

- 
<body data-spy="scroll" data-target=".navbar">...</body>
+{% highlight html linenos %} + + ... + +{% endhighlight %}

Via JavaScript

Call the scrollspy via JavaScript:

- 
$('#navbar').scrollspy()
+{% highlight js linenos %} +$('#navbar').scrollspy() +{% endhighlight %}
Heads up! @@ -545,11 +565,12 @@ $('#myModal').on('hidden', function () {

Methods

.scrollspy('refresh')

When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:

-
+{% highlight js linenos %}
 $('[data-spy="scroll"]').each(function () {
   var $spy = $(this).scrollspy('refresh')
 });
-
+{% endhighlight %} +

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

@@ -635,28 +656,32 @@ $('[data-spy="scroll"]').each(function () {

Usage

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

-
+{% highlight js linenos %}
 $('#myTab a').click(function (e) {
   e.preventDefault();
   $(this).tab('show');
-})
+}) +{% endhighlight %} +

You can activate individual tabs in several ways:

-
+{% highlight js linenos %}
 $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
 $('#myTab a:first').tab('show'); // Select first tab
 $('#myTab a:last').tab('show'); // Select last tab
 $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
-
+{% endhighlight %}

Markup

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

-
-<ul class="nav nav-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="#settings" data-toggle="tab">Settings</a></li>
-</ul>
+{% highlight html linenos %} + +{% endhighlight %} +

To make tabs fade in, add .fade to each .tab-pane.

Methods

@@ -664,27 +689,27 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

-
-<ul class="nav nav-tabs" id="myTab">
-  <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>
-</ul>
+{% highlight html linenos %}
+
 
-<div class="tab-content">
-  <div class="tab-pane active" id="home">...</div>
-  <div class="tab-pane" id="profile">...</div>
-  <div class="tab-pane" id="messages">...</div>
-  <div class="tab-pane" id="settings">...</div>
-</div>
+

+  
...

+  
...

+  
...

+  
...

+

 
-<script>
+
+{% endhighlight %}
 
           
Events

           
@@ -705,12 +730,12 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
              

             
           

-
+{% highlight js linenos %}
 $('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
 })
-

+{% endhighlight %}
         
 
 
@@ -749,7 +774,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
           
Usage

           
Trigger the tooltip via JavaScript:

-          
$('#example').tooltip(options)

+{% highlight js linenos %}
+$('#example').tooltip(options)
+{% endhighlight %}
 
           
Options

           
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

@@ -825,23 +852,30 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

Markup

- 
<a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>
+{% highlight html linenos %} +Hover over me +{% endhighlight %}

Methods

+

$().tooltip(options)

Attaches a tooltip handler to an element collection.

+

.tooltip('show')

Reveals an element's tooltip.

- 
$('#element').tooltip('show')
+ {% highlight js linenos %}$('#element').tooltip('show'){% endhighlight %} +

.tooltip('hide')

Hides an element's tooltip.

- 
$('#element').tooltip('hide')
+ {% highlight js linenos %}$('#element').tooltip('hide'){% endhighlight %} +

.tooltip('toggle')

Toggles an element's tooltip.

- 
$('#element').tooltip('toggle')
+ {% highlight js linenos %}$('#element').tooltip('toggle'){% endhighlight %} +

.tooltip('destroy')

Hides and destroys an element's tooltip.

- 
$('#element').tooltip('destroy')
+ {% highlight js linenos %}$('#element').tooltip('destroy'){% endhighlight %} @@ -916,7 +950,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

Usage

Enable popovers via JavaScript:

- 
$('#example').popover(options)
+ {% highlight js linenos %}$('#example').popover(options){% endhighlight %}

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

@@ -1003,18 +1037,22 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

Methods

$().popover(options)

Initializes popovers for an element collection.

+

.popover('show')

Reveals an elements popover.

- 
$('#element').popover('show')
+ {% highlight js linenos %}$('#element').popover('show'){% endhighlight %} +

.popover('hide')

Hides an elements popover.

- 
$('#element').popover('hide')
+ {% highlight js linenos %}$('#element').popover('hide'){% endhighlight %} +

.popover('toggle')

Toggles an elements popover.

- 
$('#element').popover('toggle')
+ {% highlight js linenos %}$('#element').popover('toggle'){% endhighlight %} +

.popover('destroy')

Hides and destroys an element's popover.

- 
$('#element').popover('destroy')
+ {% highlight js linenos %}$('#element').popover('destroy'){% endhighlight %} @@ -1053,18 +1091,20 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

Usage

Enable dismissal of an alert via JavaScript:

- 
$(".alert").alert()
+ {% highlight js linenos %}$(".alert").alert(){% endhighlight %}

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

- 
<a class="close" data-dismiss="alert" href="#">&times;</a>
+ {% highlight html linenos %}×{% endhighlight %}

Methods

+

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

+

.alert('close')

Closes an alert.

- 
$(".alert").alert('close')
+ {% highlight js linenos %}$(".alert").alert('close'){% endhighlight %}

Events

@@ -1087,11 +1127,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) { -
+{% highlight js linenos %}
 $('#my-alert').bind('closed', function () {
   // do something…
 })
-
+{% endhighlight %} @@ -1109,18 +1149,24 @@ $('#my-alert').bind('closed', function () {

Stateful

Add data-loading-text="Loading..." to use a loading state on a button.

-
- 
<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
+{% highlight html linenos %} + +{% endhighlight %}

Single toggle

Add data-toggle="button" to activate toggling on a single button.

- +
- 
<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
+{% highlight html linenos %} + +{% endhighlight %}

Checkbox

Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

@@ -1131,13 +1177,13 @@ $('#my-alert').bind('closed', function () { -
-<div class="btn-group" data-toggle="buttons-checkbox">
-  <button type="button" class="btn btn-primary">Left</button>
-  <button type="button" class="btn btn-primary">Middle</button>
-  <button type="button" class="btn btn-primary">Right</button>
-</div>
-
+{% highlight html linenos %} +
+ + + +
+{% endhighlight %}

Radio

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

@@ -1148,13 +1194,13 @@ $('#my-alert').bind('closed', function () { -
-<div class="btn-group" data-toggle="buttons-radio">
-  <button type="button" class="btn btn-primary">Left</button>
-  <button type="button" class="btn btn-primary">Middle</button>
-  <button type="button" class="btn btn-primary">Right</button>
-</div>
-
+{% highlight html linenos %} +
+ + + +
+{% endhighlight %}
@@ -1162,7 +1208,9 @@ $('#my-alert').bind('closed', function () {

Usage

Enable buttons via JavaScript:

- 
$('.nav-tabs').button()
+{% highlight js linenos %} +$('.nav-tabs').button() +{% endhighlight %}

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

@@ -1171,30 +1219,40 @@ $('#my-alert').bind('closed', function () {

None

Methods

+

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

Heads up! You can enable auto toggling of a button by using the data-toggle attribute.
- 
<button type="button" class="btn" data-toggle="button" >…</button>
+{% highlight html linenos %} + +{% endhighlight %} +

$().button('loading')

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 data-loading-text.

- 
<button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
+{% highlight html linenos %} + +{% endhighlight %} +
Heads up! Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".
+

$().button('reset')

Resets button state - swaps text to original text.

+

$().button(string)

Resets button state - swaps text to any data defined text state.

-
<button type="button" class="btn" data-complete-text="finished!" >...</button>
-<script>
+{% highlight html linenos %}
+
+
+{% endhighlight %}
           
 
 
@@ -1253,43 +1311,55 @@ $('#my-alert').bind('closed', function () {
                 
               
             
-
-<div class="accordion" id="accordion2">
-  <div class="accordion-group">
-    <div class="accordion-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+{% highlight html linenos %}
+

-            
You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

-
-<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
-  simple collapsible
-</button>
+      
+    
+    

+      

+        ...
+      

+    

+  
+  

+    

+      
+        Collapsible Group Item #3
+      
+    

+    

+      

+        ...
+      

+    

+  

+
+{% endhighlight %}
 
-<div id="demo" class="collapse in"> … </div>
-

+            
You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

+{% highlight html linenos %}
+
+
+
...

+{% endhighlight %}
 
 
             

@@ -1303,7 +1373,9 @@ $('#my-alert').bind('closed', function () {
 
             
Via JavaScript

             
Enable manually with:

-            
$(".collapse").collapse()

+{% highlight js linenos %}
+$(".collapse").collapse()
+{% endhighlight %}
 
             
Options

             
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

@@ -1334,17 +1406,21 @@ $('#my-alert').bind('closed', function () {
 
 
             
Methods

+
             
.collapse(options)

             
Activates your content as a collapsible element. Accepts an optional options object.
-
+{% highlight js linenos %}
 $('#myCollapsible').collapse({
   toggle: false
 })
-

+{% endhighlight %}
+
             
.collapse('toggle')

             
Toggles a collapsible element to shown or hidden.

+
             
.collapse('show')

             
Shows a collapsible element.

+
             
.collapse('hide')

             
Hides a collapsible element.

 
@@ -1378,10 +1454,11 @@ $('#myCollapsible').collapse({
                
               
             
-
+{% highlight js linenos %}
 $('#myCollapsible').on('hidden', function () {
   // do something…
-})

+})
+{% endhighlight %}
           
 
 
@@ -1433,24 +1510,35 @@ $('#myCollapsible').on('hidden', function () {
                 
               
             
-
-<div id="myCarousel" class="carousel slide">
-  <ol class="carousel-indicators">
-    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-    <li data-target="#myCarousel" data-slide-to="1"></li>
-    <li data-target="#myCarousel" data-slide-to="2"></li>
-  </ol>
-  <!-- Carousel items -->
-  <div class="carousel-inner">
-    <div class="active item">…</div>
-    <div class="item">…</div>
-    <div class="item">…</div>
-  </div>
-  <!-- Carousel nav -->
-  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
-  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
-</div>
-

+{% highlight html linenos %}
+
+{% endhighlight %}
 
             

               Heads up!
@@ -1468,7 +1556,9 @@ $('#myCollapsible').on('hidden', function () {
 
             
Via JavaScript

             
Call carousel manually with:

-            
$('.carousel').carousel()

+{% highlight js linenos %}
+$('.carousel').carousel()
+{% endhighlight %}
 
             
Options

             
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".

@@ -1498,21 +1588,27 @@ $('#myCollapsible').on('hidden', function () {
             
 
             
Methods

+
             
.carousel(options)

             
Initializes the carousel with an optional options object and starts cycling through items.

-
+{% highlight html linenos %}
 $('.carousel').carousel({
   interval: 2000
 })
-

+{% endhighlight %}
+
             
.carousel('cycle')

             
Cycles through the carousel items from left to right.

+
             
.carousel('pause')

             
Stops the carousel from cycling through items.

+
             
.carousel(number)

             
Cycles the carousel to a particular frame (0 based, similar to an array).

+
             
.carousel('prev')

             
Cycles to the previous item.

+
             
.carousel('next')

             
Cycles to the next item.

 
@@ -1553,7 +1649,10 @@ $('.carousel').carousel({
             

               
             

-            
<input type="text" data-provide="typeahead">

+{% highlight html linenos %}
+
+{% endhighlight %}
+
             
You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.

 
             

@@ -1566,7 +1665,9 @@ $('.carousel').carousel({
 
             
Via JavaScript

             
Call the typeahead manually with:

-            
$('.typeahead').typeahead()

+{% highlight js linenos %}
+$('.typeahead').typeahead()
+{% endhighlight %}
 
             
Options

             
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

@@ -1649,7 +1750,9 @@ $('.carousel').carousel({
             
Via data attributes

             
To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

 
-            
<div data-spy="affix" data-offset-top="200">...</div>

+{% highlight html linenos %}
+
...

+{% endhighlight %}
 
             

               Heads up!
@@ -1658,16 +1761,19 @@ $('.carousel').carousel({
 
             
Via JavaScript

             
Call the affix plugin via JavaScript:

-            
$('#navbar').affix()

+{% highlight js linenos %}
+$('#navbar').affix()
+{% endhighlight %}
 
             
Methods

             
.affix('refresh')

             
When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:

-
+{% highlight js linenos %}
 $('[data-spy="affix"]').each(function () {
   $(this).affix('refresh')
 });
-

+{% endhighlight %}
+
           
Options

           
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".