mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-10 22:24:19 +01:00
Merge branch '2.0-wip' of github.com:twitter/bootstrap into 2.0-wip
Conflicts: bootstrap.css
This commit is contained in:
commit
544120264d
14
Makefile
14
Makefile
@ -1,5 +1,4 @@
|
|||||||
VERSION=2.0.0
|
VERSION=2.0.0
|
||||||
DATE=$(shell DATE)
|
|
||||||
BOOTSTRAP = ./bootstrap.css
|
BOOTSTRAP = ./bootstrap.css
|
||||||
BOOTSTRAP_MIN = ./bootstrap.min.css
|
BOOTSTRAP_MIN = ./bootstrap.min.css
|
||||||
BOOTSTRAP_LESS = ./lib/bootstrap.less
|
BOOTSTRAP_LESS = ./lib/bootstrap.less
|
||||||
@ -9,7 +8,7 @@ WATCHR ?= `which watchr`
|
|||||||
|
|
||||||
build:
|
build:
|
||||||
@@if test ! -z ${LESS_COMPESSOR}; then \
|
@@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}; \
|
||||||
lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP_MIN} --compress; \
|
lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP_MIN} --compress; \
|
||||||
rm -f ${BOOTSTRAP_LESS}.tmp; \
|
rm -f ${BOOTSTRAP_LESS}.tmp; \
|
||||||
@ -22,15 +21,16 @@ build:
|
|||||||
uglify:
|
uglify:
|
||||||
@@if test ! -z ${UGLIFY_JS}; then \
|
@@if test ! -z ${UGLIFY_JS}; then \
|
||||||
mkdir -p js/min; \
|
mkdir -p js/min; \
|
||||||
uglifyjs -o js/min/bootstrap-accordion.js js/bootstrap-accordion.js;\
|
uglifyjs -o js/min/bootstrap-alerts.js js/bootstrap-alert.js;\
|
||||||
uglifyjs -o js/min/bootstrap-alerts.js js/bootstrap-alerts.js;\
|
uglifyjs -o js/min/bootstrap-buttons.js js/bootstrap-button.js;\
|
||||||
uglifyjs -o js/min/bootstrap-buttons.js js/bootstrap-buttons.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-dropdown.js js/bootstrap-dropdown.js;\
|
||||||
uglifyjs -o js/min/bootstrap-modal.js js/bootstrap-modal.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-popover.js js/bootstrap-popover.js;\
|
||||||
uglifyjs -o js/min/bootstrap-scrollspy.js js/bootstrap-scrollspy.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-tabs.js js/bootstrap-tab.js;\
|
||||||
uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transitions.js;\
|
uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transition.js;\
|
||||||
uglifyjs -o js/min/bootstrap-twipsy.js js/bootstrap-twipsy.js;\
|
uglifyjs -o js/min/bootstrap-twipsy.js js/bootstrap-twipsy.js;\
|
||||||
else \
|
else \
|
||||||
echo "You must have the UGLIFYJS minifier installed in order to minify Bootstrap's js."; \
|
echo "You must have the UGLIFYJS minifier installed in order to minify Bootstrap's js."; \
|
||||||
|
18
bootstrap.css
vendored
18
bootstrap.css
vendored
@ -6,7 +6,7 @@
|
|||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
*
|
*
|
||||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
* 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 {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -2451,19 +2451,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
|||||||
-moz-opacity: 0.8;
|
-moz-opacity: 0.8;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
.twipsy.above {
|
.twipsy.top {
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
}
|
}
|
||||||
.twipsy.right {
|
.twipsy.right {
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
.twipsy.below {
|
.twipsy.bottom {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
.twipsy.left {
|
.twipsy.left {
|
||||||
margin-left: -2px;
|
margin-left: -2px;
|
||||||
}
|
}
|
||||||
.twipsy.above .twipsy-arrow {
|
.twipsy.top .twipsy-arrow {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -5px;
|
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-bottom: 5px solid transparent;
|
||||||
border-left: 5px solid #000000;
|
border-left: 5px solid #000000;
|
||||||
}
|
}
|
||||||
.twipsy.below .twipsy-arrow {
|
.twipsy.bottom .twipsy-arrow {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
@ -2519,19 +2519,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
|||||||
display: none;
|
display: none;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
.popover.above {
|
.popover.top {
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
}
|
}
|
||||||
.popover.right {
|
.popover.right {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
.popover.below {
|
.popover.bottom {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
.popover.left {
|
.popover.left {
|
||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
}
|
}
|
||||||
.popover.above .arrow {
|
.popover.top .arrow {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -5px;
|
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-bottom: 5px solid transparent;
|
||||||
border-right: 5px solid #000000;
|
border-right: 5px solid #000000;
|
||||||
}
|
}
|
||||||
.popover.below .arrow {
|
.popover.bottom .arrow {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
|
16
bootstrap.min.css
vendored
16
bootstrap.min.css
vendored
@ -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:after{clear:both;}
|
||||||
.modal-footer .btn{float:right;margin-left:5px;}
|
.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{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.right{margin-left:2px;}
|
||||||
.twipsy.below{margin-top:2px;}
|
.twipsy.bottom{margin-top:2px;}
|
||||||
.twipsy.left{margin-left:-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.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.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-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;}
|
.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.right{margin-left:5px;}
|
||||||
.popover.below{margin-top:5px;}
|
.popover.bottom{margin-top:5px;}
|
||||||
.popover.left{margin-left:-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.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.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 .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);}
|
.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);}
|
||||||
|
@ -1,83 +1,76 @@
|
|||||||
$(function(){
|
$(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
|
// Hide the Mobile Safari address bar once loaded
|
||||||
// ==============================================
|
// ==============================================
|
||||||
|
|
||||||
window.addEventListener("load",function() {
|
|
||||||
// Set a timeout...
|
// Set a timeout...
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
// Hide the address bar!
|
// Hide the address bar!
|
||||||
window.scrollTo(0, 1);
|
window.scrollTo(0, 1);
|
||||||
}, 0);
|
}, 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();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// table sort example
|
// 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 logic
|
||||||
// ============
|
$('.add-on :checkbox').on('click', function () {
|
||||||
|
var $this = $(this)
|
||||||
$('.add-on :checkbox').click(function () {
|
, method = $this.attr('checked') ? 'addClass' : 'removeClass'
|
||||||
if ($(this).attr('checked')) {
|
$(this).parents('.add-on')[method]('active')
|
||||||
$(this).parents('.add-on').addClass('active')
|
|
||||||
} else {
|
|
||||||
$(this).parents('.add-on').removeClass('active')
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
// Disable certain links in docs
|
// Disable certain links in docs
|
||||||
// =============================
|
// Please do not carry these styles over to your projects
|
||||||
// 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
|
// 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()
|
e.preventDefault()
|
||||||
})
|
})
|
||||||
|
|
||||||
// Copy code blocks in docs
|
// Copy code blocks in docs
|
||||||
$(".copy-code").focus(function () {
|
$(".copy-code").on('focus', function () {
|
||||||
var el = this;
|
var el = this
|
||||||
// push select to event loop for chrome :{o
|
setTimeout(function () { $(el).select() }, 0)
|
||||||
setTimeout(function () { $(el).select(); }, 1);
|
})
|
||||||
});
|
|
||||||
|
|
||||||
|
if ($.fn.twipsy) {
|
||||||
|
|
||||||
// POSITION STATIC TWIPSIES
|
// position static twipsies for components page
|
||||||
// ========================
|
if ($(".twipsies a").length) {
|
||||||
|
|
||||||
$(window).on('load resize', function () {
|
$(window).on('load resize', function () {
|
||||||
$(".twipsies a").each(function () {
|
$(".twipsies a").each(function () {
|
||||||
$(this)
|
$(this)
|
||||||
.twipsy({
|
.twipsy({
|
||||||
live: false
|
placement: $(this).attr('title')
|
||||||
, placement: $(this).attr('title')
|
|
||||||
, trigger: 'manual'
|
, trigger: 'manual'
|
||||||
, offset: 2
|
|
||||||
})
|
})
|
||||||
.twipsy('show')
|
.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' }
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
@ -1179,13 +1179,7 @@ Form states
|
|||||||
<!-- Le javascript -->
|
<!-- Le javascript -->
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- 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://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 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>
|
<script src="assets/js/application.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -22,18 +22,6 @@
|
|||||||
<link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
|
<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="72x72" href="assets/ico/bootstrap-apple-72x72.png">
|
||||||
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@ -242,7 +230,7 @@
|
|||||||
<h1>Navbar</h1>
|
<h1>Navbar</h1>
|
||||||
</div>
|
</div>
|
||||||
<h2>Fixed navbar</h2>
|
<h2>Fixed navbar</h2>
|
||||||
<div class="navbar navbar-static">
|
<div class="navbar navbar-static" >
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<div class="container" style="width: auto;">
|
<div class="container" style="width: auto;">
|
||||||
<a class="brand" href="#">Project Name</a>
|
<a class="brand" href="#">Project Name</a>
|
||||||
@ -321,8 +309,8 @@
|
|||||||
<li><a href="#">Messages</a></li>
|
<li><a href="#">Messages</a></li>
|
||||||
<li><a href="#">Settings</a></li>
|
<li><a href="#">Settings</a></li>
|
||||||
<li><a href="#">Contact</a></li>
|
<li><a href="#">Contact</a></li>
|
||||||
<li class="dropdown" data-dropdown="dropdown">
|
<li class="dropdown">
|
||||||
<a href="#" class="dropdown-toggle">Dropdown</a>
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Secondary link</a></li>
|
<li><a href="#">Secondary link</a></li>
|
||||||
<li><a href="#">Something else here</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—default (top), right, bottom, left—with example tab areas.</p>
|
<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—default (top), right, bottom, left—with example tab areas.</p>
|
||||||
|
|
||||||
<div class="tabbable">
|
<div class="tabbable">
|
||||||
<ul class="tabs" data-tabs="tabs">
|
<ul class="tabs">
|
||||||
<li class="active"><a href="#1">Section 1</a></li>
|
<li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
|
||||||
<li><a href="#2">Section 2</a></li>
|
<li><a href="#2" data-toggle="tab">Section 2</a></li>
|
||||||
<li><a href="#3">Section 3</a></li>
|
<li><a href="#3" data-toggle="tab">Section 3</a></li>
|
||||||
<li><a href="#4">Section 4</a></li>
|
<li><a href="#4" data-toggle="tab">Section 4</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<div class="tab-pane active" id="1">
|
<div class="tab-pane active" id="1">
|
||||||
@ -369,21 +357,21 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<div class="tabbable tabs-left">
|
<div class="tabbable tabs-left">
|
||||||
<ul class="tabs" data-tabs="tabs">
|
<ul class="tabs">
|
||||||
<li class="active"><a href="#1">Section 1</a></li>
|
<li class="active"><a href="#5" data-toggle="tab">Section 1</a></li>
|
||||||
<li><a href="#2">Section 2</a></li>
|
<li><a href="#6" data-toggle="tab">Section 2</a></li>
|
||||||
<li><a href="#3">Section 3</a></li>
|
<li><a href="#7" data-toggle="tab">Section 3</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tab-content" id="myTabContent2">
|
<div class="tab-content" id="myTabContent2">
|
||||||
<div class="tab-pane active" id="1">
|
<div class="tab-pane active" id="5">
|
||||||
<h4>Section 1</h4>
|
<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>
|
<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>
|
||||||
<div class="tab-pane" id="2">
|
<div class="tab-pane" id="6">
|
||||||
<h4>Section 2</h4>
|
<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>
|
<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>
|
||||||
<div class="tab-pane" id="3">
|
<div class="tab-pane" id="7">
|
||||||
<h4>Section 3</h4>
|
<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>
|
<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>
|
||||||
@ -392,21 +380,21 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="span4 offset1">
|
<div class="span4 offset1">
|
||||||
<div class="tabbable tabs-right">
|
<div class="tabbable tabs-right">
|
||||||
<ul class="tabs" data-tabs="tabs">
|
<ul class="tabs">
|
||||||
<li class="active"><a href="#1">Section 1</a></li>
|
<li class="active"><a href="#8" data-toggle="tab">Section 1</a></li>
|
||||||
<li><a href="#2">Section 2</a></li>
|
<li><a href="#9" data-toggle="tab">Section 2</a></li>
|
||||||
<li><a href="#3">Section 3</a></li>
|
<li><a href="#10" data-toggle="tab">Section 3</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tab-content" id="myTabContent3">
|
<div class="tab-content" id="myTabContent3">
|
||||||
<div class="tab-pane active" id="1">
|
<div class="tab-pane active" id="8">
|
||||||
<h4>Section 1</h4>
|
<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>
|
<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>
|
||||||
<div class="tab-pane" id="2">
|
<div class="tab-pane" id="9">
|
||||||
<h4>Section 2</h4>
|
<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>
|
<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>
|
||||||
<div class="tab-pane" id="3">
|
<div class="tab-pane" id="10">
|
||||||
<h4>Section 3</h4>
|
<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>
|
<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>
|
||||||
@ -417,24 +405,24 @@
|
|||||||
|
|
||||||
<div class="tabbable tabs-bottom">
|
<div class="tabbable tabs-bottom">
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<div class="tab-pane active" id="1">
|
<div class="tab-pane active" id="11">
|
||||||
<p>Oh hai #1!</p>
|
<p>Oh hai #1!</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-pane" id="2">
|
<div class="tab-pane" id="12">
|
||||||
<p>Oh hai #2!</p>
|
<p>Oh hai #2!</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-pane" id="3">
|
<div class="tab-pane" id="13">
|
||||||
<p>Oh hai #3!</p>
|
<p>Oh hai #3!</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-pane" id="4">
|
<div class="tab-pane" id="14">
|
||||||
<p>Oh hai #4!</p>
|
<p>Oh hai #4!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="tabs" data-tabs="tabs">
|
<ul class="tabs">
|
||||||
<li class="active"><a href="#1">Section 1</a></li>
|
<li class="active"><a href="#11" data-toggle="tab">Section 1</a></li>
|
||||||
<li><a href="#2">Section 2</a></li>
|
<li><a href="#12" data-toggle="tab">Section 2</a></li>
|
||||||
<li><a href="#3">Section 3</a></li>
|
<li><a href="#13" data-toggle="tab">Section 3</a></li>
|
||||||
<li><a href="#4">Section 4</a></li>
|
<li><a href="#14" data-toggle="tab">Section 4</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -768,7 +756,7 @@
|
|||||||
<div class="twipsies well">
|
<div class="twipsies well">
|
||||||
<div style="position: relative">
|
<div style="position: relative">
|
||||||
<p class="muted" style="margin-bottom: 0">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -811,9 +799,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
|||||||
</div><!-- /row -->
|
</div><!-- /row -->
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Footer
|
<!-- Footer
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<footer class="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>
|
<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>
|
</footer>
|
||||||
</div><!-- /container -->
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -97,10 +97,10 @@
|
|||||||
|
|
||||||
<li class="divider">·</li>
|
<li class="divider">·</li>
|
||||||
<li class="follow-btn">
|
<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>
|
||||||
<li class="tweet-btn">
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
@ -217,8 +217,8 @@
|
|||||||
|
|
||||||
<!-- Le javascript -->
|
<!-- Le javascript -->
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- 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="http://code.jquery.com/jquery-1.7.min.js"></script>
|
||||||
<script src="assets/js/application.js"></script>
|
<script src="assets/js/application.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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="72x72" href="images/apple-touch-icon-72x72.png">
|
||||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.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>
|
</head>
|
||||||
|
|
||||||
<body id="bootstrap-js">
|
<body id="bootstrap-js">
|
||||||
@ -576,8 +544,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>placement</td>
|
<td>placement</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>'above'</td>
|
<td>'top'</td>
|
||||||
<td>how to position the tooltip - above | below | left | right</td>
|
<td>how to position the tooltip - top | bottom | left | right</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>selector</td>
|
<td>selector</td>
|
||||||
@ -667,7 +635,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<td>placement</td>
|
<td>placement</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>'right'</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>
|
||||||
<tr>
|
<tr>
|
||||||
<td>selector</td>
|
<td>selector</td>
|
||||||
@ -750,6 +718,30 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<h4>.alert('close')</h4>
|
<h4>.alert('close')</h4>
|
||||||
<p>Closes an alert.</p>
|
<p>Closes an alert.</p>
|
||||||
<pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
|
<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>
|
<h3>Demo</h3>
|
||||||
<div class="alert-message warning fade in">
|
<div class="alert-message warning fade in">
|
||||||
<a class="close" data-dismiss="alert" href="#">×</a>
|
<a class="close" data-dismiss="alert" href="#">×</a>
|
||||||
@ -828,16 +820,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||||||
<button id="fat-btn" data-loading-text="loading..." class="btn">
|
<button id="fat-btn" data-loading-text="loading..." class="btn">
|
||||||
Loading State
|
Loading State
|
||||||
</button>
|
</button>
|
||||||
<script>
|
|
||||||
$(function() {
|
|
||||||
var btn = $('#fat-btn').click(function () {
|
|
||||||
btn.button('loading')
|
|
||||||
setTimeout(function () {
|
|
||||||
btn.button('reset')
|
|
||||||
}, 3000)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<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>
|
<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>
|
</footer>
|
||||||
</div><!-- /container -->
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -467,13 +467,7 @@
|
|||||||
<!-- Le javascript -->
|
<!-- Le javascript -->
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- 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://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 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>
|
<script src="assets/js/application.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -64,34 +64,34 @@
|
|||||||
|
|
||||||
<h2>Default 940px grid</h2>
|
<h2>Default 940px grid</h2>
|
||||||
<div class="row show-grid">
|
<div class="row show-grid">
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
<div class="span1" title="60px">1</div>
|
<div class="span1">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row show-grid">
|
<div class="row show-grid">
|
||||||
<div class="span4" title="300px">4</div>
|
<div class="span4">4</div>
|
||||||
<div class="span4" title="300px">4</div>
|
<div class="span4">4</div>
|
||||||
<div class="span4" title="300px">4</div>
|
<div class="span4">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row show-grid">
|
<div class="row show-grid">
|
||||||
<div class="span4" title="300px">4</div>
|
<div class="span4">4</div>
|
||||||
<div class="span8" title="620px">8</div>
|
<div class="span8">8</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row show-grid">
|
<div class="row show-grid">
|
||||||
<div class="span6" title="460px">6</div>
|
<div class="span6">6</div>
|
||||||
<div class="span6" title="460px">6</div>
|
<div class="span6">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row show-grid">
|
<div class="row show-grid">
|
||||||
<div class="span12" title="940px">12</div>
|
<div class="span12">12</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@ -358,7 +358,6 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Footer
|
<!-- Footer
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
@ -372,13 +371,10 @@
|
|||||||
<!-- Le javascript -->
|
<!-- Le javascript -->
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- 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://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 src="assets/js/google-code-prettify/prettify.js"></script>
|
||||||
<script>$(function () { prettyPrint() })</script>
|
<script src="../js/bootstrap-transition.js"></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-twipsy.js"></script>
|
||||||
<script src="../js/bootstrap-scrollspy.js"></script>
|
|
||||||
<script src="assets/js/application.js"></script>
|
<script src="assets/js/application.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -99,6 +99,7 @@
|
|||||||
<li>Added button bar options</li>
|
<li>Added button bar options</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
</ul>
|
||||||
<!--
|
<!--
|
||||||
<li>
|
<li>
|
||||||
<ul>
|
<ul>
|
||||||
@ -119,16 +120,5 @@
|
|||||||
</footer>
|
</footer>
|
||||||
</div><!-- /container -->
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -49,7 +49,7 @@ examples:
|
|||||||
|
|
||||||
backdrop: true
|
backdrop: true
|
||||||
keyboard: false
|
keyboard: false
|
||||||
placement: 'above'
|
placement: 'top'
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
4
js/bootstrap-alert.js
vendored
4
js/bootstrap-alert.js
vendored
@ -39,6 +39,8 @@
|
|||||||
, selector = $this.attr('data-target') || $this.attr('href')
|
, selector = $this.attr('data-target') || $this.attr('href')
|
||||||
, $parent = $(selector)
|
, $parent = $(selector)
|
||||||
|
|
||||||
|
$parent.trigger('close')
|
||||||
|
|
||||||
e && e.preventDefault()
|
e && e.preventDefault()
|
||||||
|
|
||||||
$parent.length || ($parent = $this.hasClass('alert-message') ? $this : $this.parent())
|
$parent.length || ($parent = $this.hasClass('alert-message') ? $this : $this.parent())
|
||||||
@ -47,6 +49,8 @@
|
|||||||
|
|
||||||
function removeElement() {
|
function removeElement() {
|
||||||
$parent.remove()
|
$parent.remove()
|
||||||
|
|
||||||
|
$parent.trigger('closed')
|
||||||
}
|
}
|
||||||
|
|
||||||
$.support.transition && $parent.hasClass('fade') ?
|
$.support.transition && $parent.hasClass('fade') ?
|
||||||
|
4
js/bootstrap-collapse.js
vendored
4
js/bootstrap-collapse.js
vendored
@ -17,7 +17,7 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
* ============================================================ */
|
* ============================================================ */
|
||||||
|
|
||||||
(function( $ ){
|
!function( $ ){
|
||||||
|
|
||||||
"use strict"
|
"use strict"
|
||||||
|
|
||||||
@ -132,4 +132,4 @@
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
})( window.jQuery )
|
}( window.jQuery )
|
2
js/bootstrap-transition.js
vendored
2
js/bootstrap-transition.js
vendored
@ -19,6 +19,8 @@
|
|||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
|
"use strict"
|
||||||
|
|
||||||
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
|
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
|
||||||
* ======================================================= */
|
* ======================================================= */
|
||||||
|
|
||||||
|
52
js/bootstrap-twipsy.js
vendored
52
js/bootstrap-twipsy.js
vendored
@ -99,6 +99,7 @@
|
|||||||
|
|
||||||
, show: function () {
|
, show: function () {
|
||||||
var $tip
|
var $tip
|
||||||
|
, inside
|
||||||
, pos
|
, pos
|
||||||
, actualWidth
|
, actualWidth
|
||||||
, actualHeight
|
, actualHeight
|
||||||
@ -113,26 +114,27 @@
|
|||||||
$tip.addClass('fade')
|
$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
|
$tip
|
||||||
.remove()
|
.remove()
|
||||||
.css({ top: 0, left: 0, display: 'block' })
|
.css({ top: 0, left: 0, display: 'block' })
|
||||||
.prependTo(document.body)
|
.prependTo(inside ? this.$element : document.body)
|
||||||
|
|
||||||
pos = $.extend({}, this.$element.offset(), {
|
pos = this.getPosition(inside)
|
||||||
width: this.$element[0].offsetWidth
|
|
||||||
, height: this.$element[0].offsetHeight
|
|
||||||
})
|
|
||||||
|
|
||||||
actualWidth = $tip[0].offsetWidth
|
actualWidth = $tip[0].offsetWidth
|
||||||
actualHeight = $tip[0].offsetHeight
|
actualHeight = $tip[0].offsetHeight
|
||||||
|
|
||||||
placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ])
|
switch (inside ? placement.split(' ')[1] : placement) {
|
||||||
|
case 'bottom':
|
||||||
switch (placement) {
|
|
||||||
case 'below':
|
|
||||||
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
|
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
|
||||||
break
|
break
|
||||||
case 'above':
|
case 'top':
|
||||||
tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
|
tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
|
||||||
break
|
break
|
||||||
case 'left':
|
case 'left':
|
||||||
@ -162,13 +164,20 @@
|
|||||||
|
|
||||||
$tip.removeClass('in')
|
$tip.removeClass('in')
|
||||||
|
|
||||||
function removeElement () {
|
function removeWithAnimation() {
|
||||||
|
var timeout = setTimeout(function () {
|
||||||
|
$tip.off($.support.transition.end).remove()
|
||||||
|
}, 500)
|
||||||
|
|
||||||
|
$tip.one($.support.transition.end, function () {
|
||||||
|
clearTimeout(timeout)
|
||||||
$tip.remove()
|
$tip.remove()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
$.support.transition && this.$tip.hasClass('fade') ?
|
$.support.transition && this.$tip.hasClass('fade') ?
|
||||||
$tip.on($.support.transition.end, removeElement) :
|
removeWithAnimation() :
|
||||||
removeElement()
|
$tip.remove()
|
||||||
}
|
}
|
||||||
|
|
||||||
, fixTitle: function () {
|
, fixTitle: function () {
|
||||||
@ -182,6 +191,13 @@
|
|||||||
return this.getTitle()
|
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 () {
|
, getTitle: function () {
|
||||||
var title
|
var title
|
||||||
, $e = this.$element
|
, $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
|
/* TWIPSY PLUGIN DEFINITION
|
||||||
* ======================== */
|
* ======================== */
|
||||||
|
|
||||||
@ -253,7 +261,7 @@
|
|||||||
animation: true
|
animation: true
|
||||||
, delay: 0
|
, delay: 0
|
||||||
, selector: false
|
, selector: false
|
||||||
, placement: 'above'
|
, placement: 'top'
|
||||||
, trigger: 'hover'
|
, trigger: 'hover'
|
||||||
, title: ''
|
, title: ''
|
||||||
, template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>'
|
, template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>'
|
||||||
|
4
js/tests/unit/bootstrap-twipsy.js
vendored
4
js/tests/unit/bootstrap-twipsy.js
vendored
@ -30,10 +30,10 @@ $(function () {
|
|||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>')
|
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.twipsy({placement: 'below'})
|
.twipsy({placement: 'bottom'})
|
||||||
.twipsy('show')
|
.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')
|
twipsy.twipsy('hide')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -282,7 +282,7 @@
|
|||||||
// Popover arrows
|
// Popover arrows
|
||||||
// For tipsies and popovers
|
// For tipsies and popovers
|
||||||
#popoverArrow {
|
#popoverArrow {
|
||||||
.above(@arrowWidth: 5px) {
|
.top(@arrowWidth: 5px) {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -@arrowWidth;
|
margin-left: -@arrowWidth;
|
||||||
@ -298,7 +298,7 @@
|
|||||||
border-bottom: @arrowWidth solid transparent;
|
border-bottom: @arrowWidth solid transparent;
|
||||||
border-left: @arrowWidth solid @black;
|
border-left: @arrowWidth solid @black;
|
||||||
}
|
}
|
||||||
.below(@arrowWidth: 5px) {
|
.bottom(@arrowWidth: 5px) {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -@arrowWidth;
|
margin-left: -@arrowWidth;
|
||||||
|
@ -8,13 +8,13 @@
|
|||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
display: none;
|
display: none;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
&.above { margin-top: -5px; }
|
&.top { margin-top: -5px; }
|
||||||
&.right { margin-left: 5px; }
|
&.right { margin-left: 5px; }
|
||||||
&.below { margin-top: 5px; }
|
&.bottom { margin-top: 5px; }
|
||||||
&.left { margin-left: -5px; }
|
&.left { margin-left: -5px; }
|
||||||
&.above .arrow { #popoverArrow > .above(); }
|
&.top .arrow { #popoverArrow > .top(); }
|
||||||
&.right .arrow { #popoverArrow > .right(); }
|
&.right .arrow { #popoverArrow > .right(); }
|
||||||
&.below .arrow { #popoverArrow > .below(); }
|
&.bottom .arrow { #popoverArrow > .bottom(); }
|
||||||
&.left .arrow { #popoverArrow > .left(); }
|
&.left .arrow { #popoverArrow > .left(); }
|
||||||
.arrow {
|
.arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -10,13 +10,13 @@
|
|||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
.opacity(0);
|
.opacity(0);
|
||||||
&.in { .opacity(80); }
|
&.in { .opacity(80); }
|
||||||
&.above { margin-top: -2px; }
|
&.top { margin-top: -2px; }
|
||||||
&.right { margin-left: 2px; }
|
&.right { margin-left: 2px; }
|
||||||
&.below { margin-top: 2px; }
|
&.bottom { margin-top: 2px; }
|
||||||
&.left { margin-left: -2px; }
|
&.left { margin-left: -2px; }
|
||||||
&.above .twipsy-arrow { #popoverArrow > .above(); }
|
&.top .twipsy-arrow { #popoverArrow > .top(); }
|
||||||
&.left .twipsy-arrow { #popoverArrow > .left(); }
|
&.left .twipsy-arrow { #popoverArrow > .left(); }
|
||||||
&.below .twipsy-arrow { #popoverArrow > .below(); }
|
&.bottom .twipsy-arrow { #popoverArrow > .bottom(); }
|
||||||
&.right .twipsy-arrow { #popoverArrow > .right(); }
|
&.right .twipsy-arrow { #popoverArrow > .right(); }
|
||||||
}
|
}
|
||||||
.twipsy-inner {
|
.twipsy-inner {
|
||||||
|
Loading…
Reference in New Issue
Block a user