diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css index fab8c75333..ee57571fb7 100644 --- a/bootstrap-1.3.0.css +++ b/bootstrap-1.3.0.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sat Sep 10 15:24:30 PDT 2011 + * Date: Sat Sep 10 15:29:50 PDT 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -2053,6 +2053,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-opacity: 0.8; opacity: 0.8; } +.twipsy.fade.in { + filter: alpha(opacity=80); + -khtml-opacity: 0.8; + -moz-opacity: 0.8; + opacity: 0.8; +} .twipsy.above .twipsy-arrow { bottom: 0; left: 50%; diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css index c197d1bf15..873268391f 100644 --- a/bootstrap-1.3.0.min.css +++ b/bootstrap-1.3.0.min.css @@ -281,7 +281,8 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;text-align:right;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;} .modal-footer:after{clear:both;} .modal-footer .btn{margin-left:5px;} -.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} +.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;} +.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 536446c234..187fc7984c 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -46,7 +46,7 @@ section > .row { font-weight: bold; } #masthead { - margin-top: 40px; + padding-top: 40px; } #masthead h1, #masthead p { @@ -175,6 +175,7 @@ section > .row { box-shadow: 0 1px 2px rgba(0,0,0,.075); } .diagram { + height: 140px; padding: 4px; } .mini-layout { diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index db59c79f9c..86eefa89d1 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -42,42 +42,15 @@ $(document).ready(function(){ // POSITION STATIC TWIPSIES // ======================== - $('.twipsies.well a').each(function () { - var type = this.title - , $anchor = $(this) - , $twipsy = $('.twipsy.' + type) - - , twipsy = { - width: $twipsy.width() + 10 - , height: $twipsy.height() + 10 - } - - , anchor = { - position: $anchor.position() - , width: $anchor.width() - , height: $anchor.height() - } - - , offset = { - above: { - top: anchor.position.top - twipsy.height - , left: anchor.position.left + (anchor.width/2) - (twipsy.width/2) - } - , below: { - top: anchor.position.top + anchor.height - , left: anchor.position.left + (anchor.width/2) - (twipsy.width/2) - } - , left: { - top: anchor.position.top + (anchor.height/2) - (twipsy.height/2) - , left: anchor.position.left - twipsy.width - 5 - } - , right: { - top: anchor.position.top + (anchor.height/2) - (twipsy.height/2) - , left: anchor.position.left + anchor.width + 5 - } - } - - $twipsy.css(offset[type]) - }); + $(".twipsies a").each(function () { + $(this) + .twipsy({ + live: false + , placement: $(this).attr('title') + , trigger: 'manual' + , offset: 2 + }) + .trigger('twipsy:show') + }) }); diff --git a/docs/index.html b/docs/index.html index 09e7951fef..2c32d50bce 100644 --- a/docs/index.html +++ b/docs/index.html @@ -22,6 +22,7 @@ + @@ -1475,22 +1476,6 @@

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.

-
-
-
below!
-
-
-
-
right!
-
-
-
-
left!
-
-
-
-
above!
-
@@ -1556,15 +1541,15 @@ Lorem ipsum dolar sit amet illo error ipsum verita bootstrap-dropdown.js - This plugin is for adding dropdown to the bootstrap nav. + This plugin is for adding dropdowns to the bootstrap topbar or tabbed navigations. bootstrap-tabs.js - This plugin adds quick, dynamic tab and pill functionality. + This plugin adds quick, dynamic tab and pill functionality for cycling through local content. bootstrap-twipsy.js - Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage! + Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage! bootstrap-popover.js diff --git a/docs/javascript.html b/docs/javascript.html index 8a4636bb3d..47cd34414b 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -85,9 +85,9 @@ $('#modal-content').modal({ closeOnEscape: true })

Events

-

Trigger events to make things happen!

+

Bootstraps modal class makes use of custom events. You can use trigger to make things happen manually or bind to listen for things happening.

modal:toggle

-

Toggle the modal open state.

+

Toggle the modal open state.

$('#modal-content').trigger('modal:toggle')

modal:show

Opens the modal.

@@ -95,8 +95,21 @@ $('#modal-content').modal({

modal:hide

Closes the modal.

$('#modal-content').trigger('modal:hide')
+

modal:shown

+

Fired when the modal has been made visible.

+
+$('#modal-content')
+  .bind('modal:shown', function () {
+    // do something here...
+  })
+

modal:hidden

+

Fired when the modal has become hidden

+
+$('#modal-content')
+  .bind('modal:hidden', function () {
+    $(this).remove() // cleanup jQuery plugin data on hide
+  })

Demo

-