aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--Makefile14
-rw-r--r--bootstrap.css18
-rw-r--r--bootstrap.min.css16
-rw-r--r--docs/assets/js/application.js117
-rw-r--r--docs/base-css.html6
-rw-r--r--docs/components.html90
-rw-r--r--docs/index.html6
-rw-r--r--docs/javascript.html114
-rw-r--r--docs/less.html6
-rw-r--r--docs/scaffolding.html48
-rw-r--r--docs/upgrading.html12
-rw-r--r--js/README.md2
-rw-r--r--js/bootstrap-alert.js4
-rw-r--r--js/bootstrap-collapse.js4
-rw-r--r--js/bootstrap-transition.js2
-rw-r--r--js/bootstrap-twipsy.js54
-rw-r--r--js/tests/unit/bootstrap-twipsy.js4
-rw-r--r--lib/mixins.less4
-rw-r--r--lib/popovers.less16
-rw-r--r--lib/twipsy.less18
20 files changed, 278 insertions, 277 deletions
diff --git a/Makefile b/Makefile
index e5c083ae6..3d24eb1c5 100644
--- a/Makefile
+++ b/Makefile
@@ -1,5 +1,4 @@
VERSION=2.0.0
-DATE=$(shell DATE)
BOOTSTRAP = ./bootstrap.css
BOOTSTRAP_MIN = ./bootstrap.min.css
BOOTSTRAP_LESS = ./lib/bootstrap.less
@@ -9,7 +8,7 @@ WATCHR ?= `which watchr`
build:
@@if test ! -z ${LESS_COMPESSOR}; then \
- sed -e 's/@VERSION/'"v${VERSION}"'/' -e 's/@DATE/'"${DATE}"'/' <${BOOTSTRAP_LESS} >${BOOTSTRAP_LESS}.tmp; \
+ sed -e 's/@VERSION/'"v${VERSION}"'/' -e 's/@DATE/'"`date`"'/' <${BOOTSTRAP_LESS} >${BOOTSTRAP_LESS}.tmp; \
lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP}; \
lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP_MIN} --compress; \
rm -f ${BOOTSTRAP_LESS}.tmp; \
@@ -22,15 +21,16 @@ build:
uglify:
@@if test ! -z ${UGLIFY_JS}; then \
mkdir -p js/min; \
- uglifyjs -o js/min/bootstrap-accordion.js js/bootstrap-accordion.js;\
- uglifyjs -o js/min/bootstrap-alerts.js js/bootstrap-alerts.js;\
- uglifyjs -o js/min/bootstrap-buttons.js js/bootstrap-buttons.js;\
+ uglifyjs -o js/min/bootstrap-alerts.js js/bootstrap-alert.js;\
+ uglifyjs -o js/min/bootstrap-buttons.js js/bootstrap-button.js;\
+ uglifyjs -o js/min/bootstrap-carousel.js js/bootstrap-carousel.js;\
+ uglifyjs -o js/min/bootstrap-collapse.js js/bootstrap-collapse.js;\
uglifyjs -o js/min/bootstrap-dropdown.js js/bootstrap-dropdown.js;\
uglifyjs -o js/min/bootstrap-modal.js js/bootstrap-modal.js;\
uglifyjs -o js/min/bootstrap-popover.js js/bootstrap-popover.js;\
uglifyjs -o js/min/bootstrap-scrollspy.js js/bootstrap-scrollspy.js;\
- uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tabs.js;\
- uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transitions.js;\
+ uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tab.js;\
+ uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transition.js;\
uglifyjs -o js/min/bootstrap-twipsy.js js/bootstrap-twipsy.js;\
else \
echo "You must have the UGLIFYJS minifier installed in order to minify Bootstrap's js."; \
diff --git a/bootstrap.css b/bootstrap.css
index 2ea7a8fbe..5e22415dd 100644
--- a/bootstrap.css
+++ b/bootstrap.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: Wed Dec 21 19:31:39 CST 2011
+ * Date: Mon Dec 26 16:47:02 CST 2011
*/
html, body {
margin: 0;
@@ -2451,19 +2451,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-opacity: 0.8;
opacity: 0.8;
}
-.twipsy.above {
+.twipsy.top {
margin-top: -2px;
}
.twipsy.right {
margin-left: 2px;
}
-.twipsy.below {
+.twipsy.bottom {
margin-top: 2px;
}
.twipsy.left {
margin-left: -2px;
}
-.twipsy.above .twipsy-arrow {
+.twipsy.top .twipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
@@ -2479,7 +2479,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
}
-.twipsy.below .twipsy-arrow {
+.twipsy.bottom .twipsy-arrow {
top: 0;
left: 50%;
margin-left: -5px;
@@ -2519,19 +2519,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
display: none;
padding: 5px;
}
-.popover.above {
+.popover.top {
margin-top: -5px;
}
.popover.right {
margin-left: 5px;
}
-.popover.below {
+.popover.bottom {
margin-top: 5px;
}
.popover.left {
margin-left: -5px;
}
-.popover.above .arrow {
+.popover.top .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
@@ -2547,7 +2547,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
border-bottom: 5px solid transparent;
border-right: 5px solid #000000;
}
-.popover.below .arrow {
+.popover.bottom .arrow {
top: 0;
left: 50%;
margin-left: -5px;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index f6587dd87..aa277ddb8 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -317,23 +317,23 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.modal-footer:after{clear:both;}
.modal-footer .btn{float:right;margin-left:5px;}
.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
-.twipsy.above{margin-top:-2px;}
+.twipsy.top{margin-top:-2px;}
.twipsy.right{margin-left:2px;}
-.twipsy.below{margin-top:2px;}
+.twipsy.bottom{margin-top:2px;}
.twipsy.left{margin-left:-2px;}
-.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.top .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.bottom .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;}
.twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.twipsy-arrow{position:absolute;width:0;height:0;}
-.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.above{margin-top:-5px;}
+.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.top{margin-top:-5px;}
.popover.right{margin-left:5px;}
-.popover.below{margin-top:5px;}
+.popover.bottom{margin-top:5px;}
.popover.left{margin-left:-5px;}
-.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+.popover.top .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
.popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
-.popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
+.popover.bottom .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.popover .arrow{position:absolute;width:0;height:0;}
.popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 724daf9eb..eae84b138 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -1,83 +1,76 @@
$(function(){
+ // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+ // IT'S ALL JUST JUNK FOR OUR DOCS!
+ // ++++++++++++++++++++++++++++++++++++++++++
+
// Hide the Mobile Safari address bar once loaded
// ==============================================
- window.addEventListener("load",function() {
- // Set a timeout...
- setTimeout(function(){
- // Hide the address bar!
- window.scrollTo(0, 1);
- }, 0);
- });
-
-
- // Docs topbar nav
- // ===============
-
- $('.nav .active').click(function(e) {
- e.preventDefault();
- $(this).siblings().toggle();
- });
-
-
- // Show grid dimensions on hover
- // =============================
-
- $('.show-grid > div').hover(function() {
- var width = $(this).width();
- $(this).attr('title', width);
- $(this).twipsy();
- });
-
+ // Set a timeout...
+ setTimeout(function(){
+ // Hide the address bar!
+ window.scrollTo(0, 1);
+ }, 0);
// table sort example
// ==================
- $("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } )
+ // make code pretty
+ window.prettyPrint && prettyPrint()
+ // table sort example
+ if ($.fn.tableSorter) {
+ $("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } )
+ }
// add on logic
- // ============
-
- $('.add-on :checkbox').click(function () {
- if ($(this).attr('checked')) {
- $(this).parents('.add-on').addClass('active')
- } else {
- $(this).parents('.add-on').removeClass('active')
- }
+ $('.add-on :checkbox').on('click', function () {
+ var $this = $(this)
+ , method = $this.attr('checked') ? 'addClass' : 'removeClass'
+ $(this).parents('.add-on')[method]('active')
})
-
// Disable certain links in docs
- // =============================
- // Please do not carry these styles over to your projects, it's merely here to prevent button clicks form taking you away from your spot on page
+ // Please do not carry these styles over to your projects
+ // it's merely here to prevent button clicks form taking you
+ // away from your spot on page!!
- $('ul.tabs a, ul.pills a, .pagination a, .well .btn, .actions .btn, .alert-message .btn, a.close').click(function (e) {
+ $('[href^=#]').click(function (e) {
e.preventDefault()
})
// Copy code blocks in docs
- $(".copy-code").focus(function () {
- var el = this;
- // push select to event loop for chrome :{o
- setTimeout(function () { $(el).select(); }, 1);
- });
-
-
- // POSITION STATIC TWIPSIES
- // ========================
-
- $(window).on('load resize', function () {
- $(".twipsies a").each(function () {
- $(this)
- .twipsy({
- live: false
- , placement: $(this).attr('title')
- , trigger: 'manual'
- , offset: 2
- })
- .twipsy('show')
- })
+ $(".copy-code").on('focus', function () {
+ var el = this
+ setTimeout(function () { $(el).select() }, 0)
})
-});
+
+ if ($.fn.twipsy) {
+
+ // position static twipsies for components page
+ if ($(".twipsies a").length) {
+ $(window).on('load resize', function () {
+ $(".twipsies a").each(function () {
+ $(this)
+ .twipsy({
+ placement: $(this).attr('title')
+ , trigger: 'manual'
+ })
+ .twipsy('show')
+ })
+ })
+ }
+
+ // add tipsies to grid for scaffolding
+ if ($('#grid-system').length) {
+
+ $('#grid-system').twipsy({
+ selector: '.show-grid > div'
+ , title: function () { return $(this).width() + 'px' }
+ })
+
+ }
+ }
+
+})
diff --git a/docs/base-css.html b/docs/base-css.html
index bb54b0c51..dad42381d 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1179,13 +1179,7 @@ Form states
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
- <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
- <script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-transitions.js"></script>
- <script src="../js/bootstrap-dropdown.js"></script>
- <script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>
diff --git a/docs/components.html b/docs/components.html
index 2f359ab57..c6a349ff4 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -22,18 +22,6 @@
<link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
-
- <!-- Le javascript -->
- <!-- Placed at the end of the document so the pages load faster -->
- <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
- <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
- <script src="assets/js/google-code-prettify/prettify.js"></script>
- <script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-transitions.js"></script>
- <script src="../js/bootstrap-dropdown.js"></script>
- <script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
- <script src="assets/js/application.js"></script>
</head>
<body>
@@ -242,7 +230,7 @@
<h1>Navbar</h1>
</div>
<h2>Fixed navbar</h2>
- <div class="navbar navbar-static">
+ <div class="navbar navbar-static" >
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
@@ -321,8 +309,8 @@
<li><a href="#">Messages</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Contact</a></li>
- <li class="dropdown" data-dropdown="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown</a>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
@@ -344,11 +332,11 @@
<p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs&mdash;default (top), right, bottom, left&mdash;with example tab areas.</p>
<div class="tabbable">
- <ul class="tabs" data-tabs="tabs">
- <li class="active"><a href="#1">Section 1</a></li>
- <li><a href="#2">Section 2</a></li>
- <li><a href="#3">Section 3</a></li>
- <li><a href="#4">Section 4</a></li>
+ <ul class="tabs">
+ <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
+ <li><a href="#2" data-toggle="tab">Section 2</a></li>
+ <li><a href="#3" data-toggle="tab">Section 3</a></li>
+ <li><a href="#4" data-toggle="tab">Section 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
@@ -369,21 +357,21 @@
<div class="row">
<div class="span4">
<div class="tabbable tabs-left">
- <ul class="tabs" data-tabs="tabs">
- <li class="active"><a href="#1">Section 1</a></li>
- <li><a href="#2">Section 2</a></li>
- <li><a href="#3">Section 3</a></li>
+ <ul class="tabs">
+ <li class="active"><a href="#5" data-toggle="tab">Section 1</a></li>
+ <li><a href="#6" data-toggle="tab">Section 2</a></li>
+ <li><a href="#7" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content" id="myTabContent2">
- <div class="tab-pane active" id="1">
+ <div class="tab-pane active" id="5">
<h4>Section 1</h4>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
- <div class="tab-pane" id="2">
+ <div class="tab-pane" id="6">
<h4>Section 2</h4>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
- <div class="tab-pane" id="3">
+ <div class="tab-pane" id="7">
<h4>Section 3</h4>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
@@ -392,21 +380,21 @@
</div>
<div class="span4 offset1">
<div class="tabbable tabs-right">
- <ul class="tabs" data-tabs="tabs">
- <li class="active"><a href="#1">Section 1</a></li>
- <li><a href="#2">Section 2</a></li>
- <li><a href="#3">Section 3</a></li>
+ <ul class="tabs">
+ <li class="active"><a href="#8" data-toggle="tab">Section 1</a></li>
+ <li><a href="#9" data-toggle="tab">Section 2</a></li>
+ <li><a href="#10" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content" id="myTabContent3">
- <div class="tab-pane active" id="1">
+ <div class="tab-pane active" id="8">
<h4>Section 1</h4>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
- <div class="tab-pane" id="2">
+ <div class="tab-pane" id="9">
<h4>Section 2</h4>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
- <div class="tab-pane" id="3">
+ <div class="tab-pane" id="10">
<h4>Section 3</h4>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
@@ -417,24 +405,24 @@
<div class="tabbable tabs-bottom">
<div class="tab-content">
- <div class="tab-pane active" id="1">
+ <div class="tab-pane active" id="11">
<p>Oh hai #1!</p>
</div>
- <div class="tab-pane" id="2">
+ <div class="tab-pane" id="12">
<p>Oh hai #2!</p>
</div>
- <div class="tab-pane" id="3">
+ <div class="tab-pane" id="13">
<p>Oh hai #3!</p>
</div>
- <div class="tab-pane" id="4">
+ <div class="tab-pane" id="14">
<p>Oh hai #4!</p>
</div>
</div>
- <ul class="tabs" data-tabs="tabs">
- <li class="active"><a href="#1">Section 1</a></li>
- <li><a href="#2">Section 2</a></li>
- <li><a href="#3">Section 3</a></li>
- <li><a href="#4">Section 4</a></li>
+ <ul class="tabs">
+ <li class="active"><a href="#11" data-toggle="tab">Section 1</a></li>
+ <li><a href="#12" data-toggle="tab">Section 2</a></li>
+ <li><a href="#13" data-toggle="tab">Section 3</a></li>
+ <li><a href="#14" data-toggle="tab">Section 4</a></li>
</ul>
</div>
@@ -768,7 +756,7 @@
<div class="twipsies well">
<div style="position: relative">
<p class="muted" style="margin-bottom: 0">
-Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> 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. <a href="#" title="right">Voluptasdicta</a> 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 <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae.
+Lorem ipsum dolar sit amet illo error <a href="#" title="bottom">ipsum</a> 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. <a href="#" title="right">Voluptasdicta</a> 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 <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="top">rem</a> quae aut veritatis quasi quae.
</p>
</div>
</div>
@@ -811,9 +799,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div><!-- /row -->
</section>
-
-
-
<!-- Footer
================================================== -->
<footer class="footer">
@@ -823,5 +808,16 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div><!-- /container -->
+
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script src="../js/bootstrap-transition.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-tab.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="assets/js/application.js"></script>
</body>
</html>
diff --git a/docs/index.html b/docs/index.html
index 9cad06271..0d340fa1a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -97,10 +97,10 @@
<li class="divider">&middot;</li>
<li class="follow-btn">
- <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
+ <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a>
</li>
<li class="tweet-btn">
- <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+ <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
@@ -217,8 +217,8 @@
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
+ <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="assets/js/application.js"></script>
-
</body>
</html>
diff --git a/docs/javascript.html b/docs/javascript.html
index bf27dd7f1..d5aebbacd 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -23,38 +23,6 @@
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
- <!-- Le javascript -->
- <!-- placed up here so that the inline demos can be next to their markup -->
- <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
- <script src="../js/tests/vendor/jquery.js"></script>
- <script src="assets/js/google-code-prettify/prettify.js"></script>
- <script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-transition.js"></script>
- <script src="../js/bootstrap-alert.js"></script>
- <script src="../js/bootstrap-modal.js"></script>
- <script src="../js/bootstrap-dropdown.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
- <script src="../js/bootstrap-tab.js"></script>
- <script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-popover.js"></script>
- <script src="../js/bootstrap-button.js"></script>
- <script src="../js/bootstrap-collapse.js"></script>
- <script>
- $(function () {
- // twipsy demo
- $('.twipsy-demo.well').twipsy({
- selector: "a[rel=twipsy]"
- })
-
- //popover demo
- $("a[rel=popover]")
- .popover()
- .click(function(e) {
- e.preventDefault()
- })
- })
- </script>
-
</head>
<body id="bootstrap-js">
@@ -576,8 +544,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<tr>
<td>placement</td>
<td>string</td>
- <td>'above'</td>
- <td>how to position the tooltip - above | below | left | right</td>
+ <td>'top'</td>
+ <td>how to position the tooltip - top | bottom | left | right</td>
</tr>
<tr>
<td>selector</td>
@@ -667,7 +635,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<td>placement</td>
<td>string</td>
<td>'right'</td>
- <td>how to position the popover - above | below | left | right</td>
+ <td>how to position the popover - top | bottom | left | right</td>
</tr>
<tr>
<td>selector</td>
@@ -750,6 +718,30 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h4>.alert('close')</h4>
<p>Closes an alert.</p>
<pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
+ <h3>Events</h3>
+ <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>close</td>
+ <td>This event fires immediately when the <code>close</code> instance method is called.</td>
+ </tr>
+ <tr>
+ <td>closed</td>
+ <td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+<pre class="prettyprint linenums">
+$('#my-alert').bind('closed', function () {
+ // do something ...
+})</pre>
<h3>Demo</h3>
<div class="alert-message warning fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
@@ -828,16 +820,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<button id="fat-btn" data-loading-text="loading..." class="btn">
Loading State
</button>
- <script>
- $(function() {
- var btn = $('#fat-btn').click(function () {
- btn.button('loading')
- setTimeout(function () {
- btn.button('reset')
- }, 3000)
- })
- })
- </script>
</td>
</tr>
<tr>
@@ -1029,5 +1011,47 @@ $('#myCollapsible').on('hidden', function () {
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div><!-- /container -->
+
+
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
+ <script src="../js/tests/vendor/jquery.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script src="../js/bootstrap-transition.js"></script>
+ <script src="../js/bootstrap-alert.js"></script>
+ <script src="../js/bootstrap-modal.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="../js/bootstrap-tab.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-popover.js"></script>
+ <script src="../js/bootstrap-button.js"></script>
+ <script src="../js/bootstrap-collapse.js"></script>
+ <script src="assets/js/application.js"></script>
+ <script>
+ $(function () {
+ // twipsy demo
+ $('.twipsy-demo.well').twipsy({
+ selector: "a[rel=twipsy]"
+ })
+
+ //popover demo
+ $("a[rel=popover]")
+ .popover()
+ .click(function(e) {
+ e.preventDefault()
+ })
+
+ $('#fat-btn')
+ .click(function () {
+ var btn = $(this)
+ btn.button('loading')
+ setTimeout(function () {
+ btn.button('reset')
+ }, 3000)
+ })
+ })
+ </script>
</body>
</html>
diff --git a/docs/less.html b/docs/less.html
index e004bc24c..7d3efd296 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -467,13 +467,7 @@
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
- <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
- <script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-transitions.js"></script>
- <script src="../js/bootstrap-dropdown.js"></script>
- <script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 473553412..0a46252dd 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -64,34 +64,34 @@
<h2>Default 940px grid</h2>
<div class="row show-grid">
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
</div>
<div class="row show-grid">
- <div class="span4" title="300px">4</div>
- <div class="span4" title="300px">4</div>
- <div class="span4" title="300px">4</div>
+ <div class="span4">4</div>
+ <div class="span4">4</div>
+ <div class="span4">4</div>
</div>
<div class="row show-grid">
- <div class="span4" title="300px">4</div>
- <div class="span8" title="620px">8</div>
+ <div class="span4">4</div>
+ <div class="span8">8</div>
</div>
<div class="row show-grid">
- <div class="span6" title="460px">6</div>
- <div class="span6" title="460px">6</div>
+ <div class="span6">6</div>
+ <div class="span6">6</div>
</div>
<div class="row show-grid">
- <div class="span12" title="940px">12</div>
+ <div class="span12">12</div>
</div>
<div class="row">
@@ -358,7 +358,6 @@
</section>
-
<!-- Footer
================================================== -->
<footer class="footer">
@@ -372,13 +371,10 @@
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
- <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
- <script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-transitions.js"></script>
- <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-transition.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
<script src="assets/js/application.js"></script>
+
</body>
</html>
diff --git a/docs/upgrading.html b/docs/upgrading.html
index 3e5a14a8a..7be1fd708 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -99,6 +99,7 @@
<li>Added button bar options</li>
</ul>
</li>
+</ul>
<!--
<li>
<ul>
@@ -119,16 +120,5 @@
</footer>
</div><!-- /container -->
- <!-- Le javascript -->
- <!-- Placed at the end of the document so the pages load faster -->
- <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
- <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
- <script src="assets/js/google-code-prettify/prettify.js"></script>
- <script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-transitions.js"></script>
- <script src="../js/bootstrap-dropdown.js"></script>
- <script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
- <script src="assets/js/application.js"></script>
</body>
</html>
diff --git a/js/README.md b/js/README.md
index 0d8d163a2..2f8e1716f 100644
--- a/js/README.md
+++ b/js/README.md
@@ -49,7 +49,7 @@ examples:
backdrop: true
keyboard: false
- placement: 'above'
+ placement: 'top'
---
diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js
index 90961cdd3..1ce8f01bf 100644
--- a/js/bootstrap-alert.js
+++ b/js/bootstrap-alert.js
@@ -39,6 +39,8 @@
, selector = $this.attr('data-target') || $this.attr('href')
, $parent = $(selector)
+ $parent.trigger('close')
+
e && e.preventDefault()
$parent.length || ($parent = $this.hasClass('alert-message') ? $this : $this.parent())
@@ -47,6 +49,8 @@
function removeElement() {
$parent.remove()
+
+ $parent.trigger('closed')
}
$.support.transition && $parent.hasClass('fade') ?
diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js
index 313c0abca..9301c7309 100644
--- a/js/bootstrap-collapse.js
+++ b/js/bootstrap-collapse.js
@@ -17,7 +17,7 @@
* limitations under the License.
* ============================================================ */
-(function( $ ){
+!function( $ ){
"use strict"
@@ -132,4 +132,4 @@
})
})
-})( window.jQuery ) \ No newline at end of file
+}( window.jQuery ) \ No newline at end of file
diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js
index 25f8b111f..29fa1bdeb 100644
--- a/js/bootstrap-transition.js
+++ b/js/bootstrap-transition.js
@@ -19,6 +19,8 @@
$(function () {
+ "use strict"
+
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js
index 018edb97e..a176f0908 100644
--- a/js/bootstrap-twipsy.js
+++ b/js/bootstrap-twipsy.js
@@ -99,6 +99,7 @@
, show: function () {
var $tip
+ , inside
, pos
, actualWidth
, actualHeight
@@ -113,26 +114,27 @@
$tip.addClass('fade')
}
+ placement = typeof this.options.placement == 'function' ?
+ thing.call(this, $tip[0], this.$element[0]) :
+ this.options.placement
+
+ inside = /in/.test(placement)
+
$tip
.remove()
.css({ top: 0, left: 0, display: 'block' })
- .prependTo(document.body)
+ .prependTo(inside ? this.$element : document.body)
- pos = $.extend({}, this.$element.offset(), {
- width: this.$element[0].offsetWidth
- , height: this.$element[0].offsetHeight
- })
+ pos = this.getPosition(inside)
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
- placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ])
-
- switch (placement) {
- case 'below':
+ switch (inside ? placement.split(' ')[1] : placement) {
+ case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break
- case 'above':
+ case 'top':
tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'left':
@@ -162,13 +164,20 @@
$tip.removeClass('in')
- function removeElement () {
- $tip.remove()
+ function removeWithAnimation() {
+ var timeout = setTimeout(function () {
+ $tip.off($.support.transition.end).remove()
+ }, 500)
+
+ $tip.one($.support.transition.end, function () {
+ clearTimeout(timeout)
+ $tip.remove()
+ })
}
$.support.transition && this.$tip.hasClass('fade') ?
- $tip.on($.support.transition.end, removeElement) :
- removeElement()
+ removeWithAnimation() :
+ $tip.remove()
}
, fixTitle: function () {
@@ -182,6 +191,13 @@
return this.getTitle()
}
+ , getPosition: function (inside) {
+ return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
+ width: this.$element[0].offsetWidth
+ , height: this.$element[0].offsetHeight
+ })
+ }
+
, getTitle: function () {
var title
, $e = this.$element
@@ -226,14 +242,6 @@
}
- /* TWIPSY PRIVATE METHODS
- * ====================== */
-
- function maybeCall ( thing, ctx, args ) {
- return typeof thing == 'function' ? thing.apply(ctx, args) : thing
- }
-
-
/* TWIPSY PLUGIN DEFINITION
* ======================== */
@@ -253,7 +261,7 @@
animation: true
, delay: 0
, selector: false
- , placement: 'above'
+ , placement: 'top'
, trigger: 'hover'
, title: ''
, template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>'
diff --git a/js/tests/unit/bootstrap-twipsy.js b/js/tests/unit/bootstrap-twipsy.js
index 7a88ab2f1..6623fc026 100644
--- a/js/tests/unit/bootstrap-twipsy.js
+++ b/js/tests/unit/bootstrap-twipsy.js
@@ -30,10 +30,10 @@ $(function () {
$.support.transition = false
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>')
.appendTo('#qunit-fixture')
- .twipsy({placement: 'below'})
+ .twipsy({placement: 'bottom'})
.twipsy('show')
- ok($(".twipsy").hasClass('fade below in'), 'has correct classes applied')
+ ok($(".twipsy").hasClass('fade bottom in'), 'has correct classes applied')
twipsy.twipsy('hide')
})
diff --git a/lib/mixins.less b/lib/mixins.less
index 251173fce..e8b5cdd2f 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -282,7 +282,7 @@
// Popover arrows
// For tipsies and popovers
#popoverArrow {
- .above(@arrowWidth: 5px) {
+ .top(@arrowWidth: 5px) {
bottom: 0;
left: 50%;
margin-left: -@arrowWidth;
@@ -298,7 +298,7 @@
border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid @black;
}
- .below(@arrowWidth: 5px) {
+ .bottom(@arrowWidth: 5px) {
top: 0;
left: 50%;
margin-left: -@arrowWidth;
diff --git a/lib/popovers.less b/lib/popovers.less
index ff875eaff..5ecde0923 100644
--- a/lib/popovers.less
+++ b/lib/popovers.less
@@ -8,14 +8,14 @@
z-index: 1000;
display: none;
padding: 5px;
- &.above { margin-top: -5px; }
- &.right { margin-left: 5px; }
- &.below { margin-top: 5px; }
- &.left { margin-left: -5px; }
- &.above .arrow { #popoverArrow > .above(); }
- &.right .arrow { #popoverArrow > .right(); }
- &.below .arrow { #popoverArrow > .below(); }
- &.left .arrow { #popoverArrow > .left(); }
+ &.top { margin-top: -5px; }
+ &.right { margin-left: 5px; }
+ &.bottom { margin-top: 5px; }
+ &.left { margin-left: -5px; }
+ &.top .arrow { #popoverArrow > .top(); }
+ &.right .arrow { #popoverArrow > .right(); }
+ &.bottom .arrow { #popoverArrow > .bottom(); }
+ &.left .arrow { #popoverArrow > .left(); }
.arrow {
position: absolute;
width: 0;
diff --git a/lib/twipsy.less b/lib/twipsy.less
index 05f121a5d..abd0599f4 100644
--- a/lib/twipsy.less
+++ b/lib/twipsy.less
@@ -9,15 +9,15 @@
padding: 5px;
font-size: 11px;
.opacity(0);
- &.in { .opacity(80); }
- &.above { margin-top: -2px; }
- &.right { margin-left: 2px; }
- &.below { margin-top: 2px; }
- &.left { margin-left: -2px; }
- &.above .twipsy-arrow { #popoverArrow > .above(); }
- &.left .twipsy-arrow { #popoverArrow > .left(); }
- &.below .twipsy-arrow { #popoverArrow > .below(); }
- &.right .twipsy-arrow { #popoverArrow > .right(); }
+ &.in { .opacity(80); }
+ &.top { margin-top: -2px; }
+ &.right { margin-left: 2px; }
+ &.bottom { margin-top: 2px; }
+ &.left { margin-left: -2px; }
+ &.top .twipsy-arrow { #popoverArrow > .top(); }
+ &.left .twipsy-arrow { #popoverArrow > .left(); }
+ &.bottom .twipsy-arrow { #popoverArrow > .bottom(); }
+ &.right .twipsy-arrow { #popoverArrow > .right(); }
}
.twipsy-inner {
max-width: 200px;
generated by cgit v1.2.3 (git 2.25.1) at 2026-07-26 16:12:05 +0000