mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 13:38:26 +01:00
Merge branch '2.3.0-wip' into 3.0.0-wip
Conflicts: Makefile README.md component.json docs/assets/css/bootstrap-responsive.css docs/assets/css/bootstrap.css docs/assets/js/bootstrap-affix.js docs/assets/js/bootstrap-alert.js docs/assets/js/bootstrap-button.js docs/assets/js/bootstrap-carousel.js docs/assets/js/bootstrap-collapse.js docs/assets/js/bootstrap-dropdown.js docs/assets/js/bootstrap-modal.js docs/assets/js/bootstrap-popover.js docs/assets/js/bootstrap-scrollspy.js docs/assets/js/bootstrap-tab.js docs/assets/js/bootstrap-tooltip.js docs/assets/js/bootstrap-transition.js docs/assets/js/bootstrap-typeahead.js docs/assets/js/bootstrap.js docs/components.html docs/css.html docs/examples/fluid.html docs/extend.html docs/getting-started.html docs/index.html docs/templates/pages/base-css.mustache docs/templates/pages/components.mustache docs/templates/pages/extend.mustache docs/templates/pages/getting-started.mustache docs/templates/pages/index.mustache docs/templates/pages/javascript.mustache js/bootstrap-affix.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-tooltip.js js/bootstrap-transition.js js/bootstrap-typeahead.js less/bootstrap.less less/buttons.less less/forms.less less/navbar.less less/popovers.less less/responsive-767px-max.less less/responsive.less less/tables.less less/tooltip.less less/type.less less/variables.less package.json
This commit is contained in:
Mark Otto
commit
7d8d5c7838
43
Makefile
43
Makefile
@ -25,7 +25,7 @@ build:
|
||||
@echo "Compiling documentation... ${CHECK} Done"
|
||||
@cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > docs/assets/js/bootstrap.js
|
||||
@./node_modules/.bin/uglifyjs -nc docs/assets/js/bootstrap.js > docs/assets/js/bootstrap.min.tmp.js
|
||||
@echo "/**\n* Bootstrap.js v2.2.3 by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
|
||||
@echo "/**\n* Bootstrap.js v2.3.0 by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
|
||||
@cat docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js > docs/assets/js/bootstrap.min.js
|
||||
@rm docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js
|
||||
@echo "Compiling and minifying javascript... ${CHECK} Done"
|
||||
@ -59,19 +59,46 @@ clean:
|
||||
# recess & uglifyjs are required
|
||||
#
|
||||
|
||||
bootstrap:
|
||||
mkdir -p bootstrap/fonts
|
||||
mkdir -p bootstrap/css
|
||||
bootstrap: bootstrap-fonts bootstrap-css bootstrap-js
|
||||
|
||||
|
||||
#
|
||||
# JS COMPILE
|
||||
#
|
||||
bootstrap-js: bootstrap/js/*.js
|
||||
|
||||
bootstrap/js/*.js: js/*.js
|
||||
mkdir -p bootstrap/js
|
||||
cp fonts/* bootstrap/fonts/
|
||||
./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
|
||||
./node_modules/.bin/recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
|
||||
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js
|
||||
./node_modules/.bin/uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js
|
||||
echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
|
||||
cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
|
||||
rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js
|
||||
|
||||
#
|
||||
# CSS COMPLILE
|
||||
#
|
||||
|
||||
bootstrap-css: bootstrap/css/*.css
|
||||
|
||||
bootstrap/css/*.css: less/*.less
|
||||
mkdir -p bootstrap/css
|
||||
./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
|
||||
./node_modules/.bin/recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
|
||||
./node_modules/.bin/recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
|
||||
./node_modules/.bin/recess --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css
|
||||
|
||||
#
|
||||
# FONTS
|
||||
#
|
||||
|
||||
bootstrap-fonts: bootstrap/fonts/*
|
||||
|
||||
bootstrap/fonts/*: fonts/*
|
||||
mkdir -p bootstrap/fonts
|
||||
cp fonts/* bootstrap/fonts/
|
||||
|
||||
|
||||
#
|
||||
# MAKE FOR GH-PAGES 4 FAT & MDO ONLY (O_O )
|
||||
#
|
||||
@ -93,4 +120,4 @@ watch:
|
||||
watchr -e "watch('less/.*\.less') { system 'make' }"
|
||||
|
||||
|
||||
.PHONY: docs watch gh-pages
|
||||
.PHONY: docs watch gh-pages bootstrap-img bootstrap-css bootstrap-js
|
||||
|
||||
20
README.md
20
README.md
@ -1,8 +1,12 @@
|
||||
# [Twitter Bootstrap v3.0.0](http://twitter.github.com/bootstrap) [](http://travis-ci.org/twitter/bootstrap)
|
||||
<a href="http://getbootstrap.com">
|
||||
<img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-docs-readme.png" width="100px">
|
||||
</a>
|
||||
|
||||
# [Bootstrap v3.0.0](http://twitter.github.com/bootstrap) [](http://travis-ci.org/twitter/bootstrap)
|
||||
|
||||
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
|
||||
|
||||
To get started, checkout http://getbootstrap.com!
|
||||
To get started, checkout [http://getbootstrap.com](http://getbootstrap.com)!
|
||||
|
||||
|
||||
|
||||
@ -30,7 +34,7 @@ And constructed with the following guidelines:
|
||||
* New additions without breaking backward compatibility bumps the minor (and resets the patch)
|
||||
* Bug fixes and misc changes bumps the patch
|
||||
|
||||
For more information on SemVer, please visit http://semver.org/.
|
||||
For more information on SemVer, please visit [http://semver.org/](http://semver.org/).
|
||||
|
||||
|
||||
|
||||
@ -85,13 +89,13 @@ Thanks!
|
||||
|
||||
**Mark Otto**
|
||||
|
||||
+ http://twitter.com/mdo
|
||||
+ http://github.com/mdo
|
||||
+ [http://twitter.com/mdo](http://twitter.com/mdo)
|
||||
+ [http://github.com/mdo](http://github.com/mdo)
|
||||
|
||||
**Jacob Thornton**
|
||||
|
||||
+ http://twitter.com/fat
|
||||
+ http://github.com/fat
|
||||
+ [http://twitter.com/fat](http://twitter.com/fat)
|
||||
+ [http://github.com/fat](http://github.com/fat)
|
||||
|
||||
|
||||
|
||||
@ -103,7 +107,7 @@ Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this work except in compliance with the License.
|
||||
You may obtain a copy of the License in the LICENSE file, or at:
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
[http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
||||
49
docs/assets/css/bootstrap.css
vendored
49
docs/assets/css/bootstrap.css
vendored
@ -694,9 +694,9 @@ blockquote {
|
||||
|
||||
blockquote p {
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
font-size: 17.5px;
|
||||
font-weight: 300;
|
||||
line-height: 25px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
blockquote small {
|
||||
@ -1439,24 +1439,30 @@ table {
|
||||
}
|
||||
|
||||
.table-bordered thead:first-child tr:first-child > th:first-child,
|
||||
.table-bordered tbody:first-child tr:first-child > td:first-child {
|
||||
.table-bordered tbody:first-child tr:first-child > td:first-child,
|
||||
.table-bordered tbody:first-child tr:first-child > th:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.table-bordered thead:first-child tr:first-child > th:last-child,
|
||||
.table-bordered tbody:first-child tr:first-child > td:last-child {
|
||||
.table-bordered tbody:first-child tr:first-child > td:last-child,
|
||||
.table-bordered tbody:first-child tr:first-child > th:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.table-bordered thead:last-child tr:last-child > th:first-child,
|
||||
.table-bordered tbody:last-child tr:last-child > td:first-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > td:first-child {
|
||||
.table-bordered tbody:last-child tr:last-child > th:first-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > td:first-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > th:first-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.table-bordered thead:last-child tr:last-child > th:last-child,
|
||||
.table-bordered tbody:last-child tr:last-child > td:last-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > td:last-child {
|
||||
.table-bordered tbody:last-child tr:last-child > th:last-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > td:last-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > th:last-child {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
@ -1487,8 +1493,8 @@ table {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.table-hover tbody tr:hover td,
|
||||
.table-hover tbody tr:hover th {
|
||||
.table-hover tbody tr:hover > td,
|
||||
.table-hover tbody tr:hover > th {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
@ -1499,35 +1505,35 @@ table th[class*="span"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.table tbody tr.success td {
|
||||
.table tbody tr.success > td {
|
||||
background-color: #dff0d8;
|
||||
}
|
||||
|
||||
.table tbody tr.error td {
|
||||
.table tbody tr.error > td {
|
||||
background-color: #f2dede;
|
||||
}
|
||||
|
||||
.table tbody tr.warning td {
|
||||
.table tbody tr.warning > td {
|
||||
background-color: #fcf8e3;
|
||||
}
|
||||
|
||||
.table tbody tr.info td {
|
||||
.table tbody tr.info > td {
|
||||
background-color: #d9edf7;
|
||||
}
|
||||
|
||||
.table-hover tbody tr.success:hover td {
|
||||
.table-hover tbody tr.success:hover > td {
|
||||
background-color: #d0e9c6;
|
||||
}
|
||||
|
||||
.table-hover tbody tr.error:hover td {
|
||||
.table-hover tbody tr.error:hover > td {
|
||||
background-color: #ebcccc;
|
||||
}
|
||||
|
||||
.table-hover tbody tr.warning:hover td {
|
||||
.table-hover tbody tr.warning:hover > td {
|
||||
background-color: #faf2cc;
|
||||
}
|
||||
|
||||
.table-hover tbody tr.info:hover td {
|
||||
.table-hover tbody tr.info:hover > td {
|
||||
background-color: #c4e3f3;
|
||||
}
|
||||
|
||||
@ -3360,8 +3366,8 @@ fieldset[disabled] .navbar .btn-navbar {
|
||||
}
|
||||
|
||||
.navbar .nav li.dropdown > a:hover .caret {
|
||||
border-top-color: #555555;
|
||||
border-bottom-color: #555555;
|
||||
border-top-color: #333333;
|
||||
border-bottom-color: #333333;
|
||||
}
|
||||
|
||||
.navbar .nav li.dropdown.open > .dropdown-toggle,
|
||||
@ -3842,6 +3848,7 @@ fieldset[disabled] .navbar-inverse .btn-navbar {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
visibility: visible;
|
||||
@ -3924,7 +3931,7 @@ fieldset[disabled] .navbar-inverse .btn-navbar {
|
||||
left: 0;
|
||||
z-index: 1010;
|
||||
display: none;
|
||||
width: 236px;
|
||||
max-width: 276px;
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
@ -3966,6 +3973,10 @@ fieldset[disabled] .navbar-inverse .btn-navbar {
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.popover-title:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
||||
@ -528,6 +528,9 @@ h2 + .row {
|
||||
|
||||
/* Example page
|
||||
------------------------- */
|
||||
.bootstrap-examples h4 {
|
||||
margin: 10px 0 5px;
|
||||
}
|
||||
.bootstrap-examples p {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
|
||||
BIN
docs/assets/img/bootstrap-docs-readme.png
Normal file
BIN
docs/assets/img/bootstrap-docs-readme.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 332 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
BIN
docs/assets/img/examples/bootstrap-example-fluid.png
Normal file
BIN
docs/assets/img/examples/bootstrap-example-fluid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
BIN
docs/assets/img/examples/bootstrap-example-justified-nav.png
Normal file
BIN
docs/assets/img/examples/bootstrap-example-justified-nav.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 115 KiB |
BIN
docs/assets/img/examples/bootstrap-example-marketing.png
Normal file
BIN
docs/assets/img/examples/bootstrap-example-marketing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
BIN
docs/assets/img/examples/bootstrap-example-starter.png
Normal file
BIN
docs/assets/img/examples/bootstrap-example-starter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 30 KiB |
@ -43,14 +43,14 @@
|
||||
|
||||
// tooltip demo
|
||||
$('.tooltip-demo').tooltip({
|
||||
selector: "a[rel=tooltip]"
|
||||
selector: "a[data-toggle=tooltip]"
|
||||
})
|
||||
|
||||
$('.tooltip-test').tooltip()
|
||||
$('.popover-test').popover()
|
||||
|
||||
// popover demo
|
||||
$("a[rel=popover]")
|
||||
$("a[data-toggle=popover]")
|
||||
.popover()
|
||||
.click(function(e) {
|
||||
e.preventDefault()
|
||||
|
||||
10
docs/assets/js/bootstrap-carousel.js
vendored
10
docs/assets/js/bootstrap-carousel.js
vendored
@ -108,6 +108,7 @@
|
||||
|
||||
e = $.Event('slide', {
|
||||
relatedTarget: $next[0]
|
||||
, direction: direction
|
||||
})
|
||||
|
||||
if ($next.hasClass('active')) return
|
||||
@ -187,11 +188,18 @@
|
||||
/* CAROUSEL DATA-API
|
||||
* ================= */
|
||||
|
||||
$(document).on('click.carousel.data-api', '[data-slide]', function (e) {
|
||||
$(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
|
||||
var $this = $(this), href
|
||||
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
||||
, options = $.extend({}, $target.data(), $this.data())
|
||||
, slideIndex
|
||||
|
||||
$target.carousel(options)
|
||||
|
||||
if (slideIndex = $this.attr('data-slide-to')) {
|
||||
$target.data('carousel').pause().to(slideIndex).cycle()
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
|
||||
2
docs/assets/js/bootstrap-collapse.js
vendored
2
docs/assets/js/bootstrap-collapse.js
vendored
@ -129,7 +129,7 @@
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('collapse')
|
||||
, options = typeof option == 'object' && option
|
||||
, options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
|
||||
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
||||
if (typeof option == 'string') data[option]()
|
||||
})
|
||||
|
||||
7
docs/assets/js/bootstrap-dropdown.js
vendored
7
docs/assets/js/bootstrap-dropdown.js
vendored
@ -81,7 +81,10 @@
|
||||
|
||||
isActive = $parent.hasClass('open')
|
||||
|
||||
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
|
||||
if (!isActive || (isActive && e.keyCode == 27)) {
|
||||
if (e.which == 27) $parent.find(toggle).focus()
|
||||
return $this.click()
|
||||
}
|
||||
|
||||
$items = $('[role=menu] li:not(.divider):visible a', $parent)
|
||||
|
||||
@ -154,7 +157,7 @@
|
||||
|
||||
$(document)
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
|
||||
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
|
||||
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
|
||||
|
||||
2
docs/assets/js/bootstrap-popover.js
vendored
2
docs/assets/js/bootstrap-popover.js
vendored
@ -99,7 +99,7 @@
|
||||
placement: 'right'
|
||||
, trigger: 'click'
|
||||
, content: ''
|
||||
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"></div></div></div>'
|
||||
, template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
|
||||
})
|
||||
|
||||
|
||||
|
||||
2
docs/assets/js/bootstrap-scrollspy.js
vendored
2
docs/assets/js/bootstrap-scrollspy.js
vendored
@ -59,7 +59,7 @@
|
||||
, $href = /^#\w/.test(href) && $(href)
|
||||
return ( $href
|
||||
&& $href.length
|
||||
&& [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null
|
||||
&& [[ $href.position().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]] ) || null
|
||||
})
|
||||
.sort(function (a, b) { return a[0] - b[0] })
|
||||
.each(function () {
|
||||
|
||||
37
docs/assets/js/bootstrap-tooltip.js
vendored
37
docs/assets/js/bootstrap-tooltip.js
vendored
@ -38,20 +38,28 @@
|
||||
, init: function (type, element, options) {
|
||||
var eventIn
|
||||
, eventOut
|
||||
, triggers
|
||||
, trigger
|
||||
, i
|
||||
|
||||
this.type = type
|
||||
this.$element = $(element)
|
||||
this.options = this.getOptions(options)
|
||||
this.enabled = true
|
||||
|
||||
if (this.options.trigger == 'click') {
|
||||
triggers = this.options.trigger.split(' ')
|
||||
|
||||
for (i = triggers.length; i--;) {
|
||||
trigger = triggers[i]
|
||||
if (trigger == 'click') {
|
||||
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
|
||||
} else if (this.options.trigger != 'manual') {
|
||||
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
|
||||
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
|
||||
} else if (trigger != 'manual') {
|
||||
eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
|
||||
eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
|
||||
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
|
||||
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
|
||||
}
|
||||
}
|
||||
|
||||
this.options.selector ?
|
||||
(this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
|
||||
@ -102,8 +110,11 @@
|
||||
, actualHeight
|
||||
, placement
|
||||
, tp
|
||||
, e = $.Event('show')
|
||||
|
||||
if (this.hasContent() && this.enabled) {
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
$tip = this.tip()
|
||||
this.setContent()
|
||||
|
||||
@ -118,7 +129,8 @@
|
||||
$tip
|
||||
.detach()
|
||||
.css({ top: 0, left: 0, display: 'block' })
|
||||
.insertAfter(this.$element)
|
||||
|
||||
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
|
||||
|
||||
pos = this.getPosition()
|
||||
|
||||
@ -144,6 +156,8 @@
|
||||
.offset(tp)
|
||||
.addClass(placement)
|
||||
.addClass('in')
|
||||
|
||||
this.$element.trigger('shown')
|
||||
}
|
||||
}
|
||||
|
||||
@ -158,6 +172,10 @@
|
||||
, hide: function () {
|
||||
var that = this
|
||||
, $tip = this.tip()
|
||||
, e = $.Event('hide')
|
||||
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
|
||||
$tip.removeClass('in')
|
||||
|
||||
@ -176,6 +194,8 @@
|
||||
removeWithAnimation() :
|
||||
$tip.detach()
|
||||
|
||||
this.$element.trigger('hidden')
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
@ -234,8 +254,8 @@
|
||||
}
|
||||
|
||||
, toggle: function (e) {
|
||||
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
|
||||
self[self.tip().hasClass('in') ? 'hide' : 'show']()
|
||||
var self = e ? $(e.currentTarget)[this.type](this._options).data(this.type) : this
|
||||
self.tip().hasClass('in') ? self.hide() : self.show()
|
||||
}
|
||||
|
||||
, destroy: function () {
|
||||
@ -267,10 +287,11 @@
|
||||
, placement: 'top'
|
||||
, selector: false
|
||||
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
|
||||
, trigger: 'hover'
|
||||
, trigger: 'hover focus'
|
||||
, title: ''
|
||||
, delay: 0
|
||||
, html: false
|
||||
, container: false
|
||||
}
|
||||
|
||||
|
||||
|
||||
1
docs/assets/js/bootstrap-typeahead.js
vendored
1
docs/assets/js/bootstrap-typeahead.js
vendored
@ -271,6 +271,7 @@
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.select()
|
||||
this.$element.focus()
|
||||
}
|
||||
|
||||
, mouseenter: function (e) {
|
||||
|
||||
64
docs/assets/js/bootstrap.js
vendored
64
docs/assets/js/bootstrap.js
vendored
@ -369,6 +369,7 @@
|
||||
|
||||
e = $.Event('slide', {
|
||||
relatedTarget: $next[0]
|
||||
, direction: direction
|
||||
})
|
||||
|
||||
if ($next.hasClass('active')) return
|
||||
@ -448,11 +449,18 @@
|
||||
/* CAROUSEL DATA-API
|
||||
* ================= */
|
||||
|
||||
$(document).on('click.carousel.data-api', '[data-slide]', function (e) {
|
||||
$(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
|
||||
var $this = $(this), href
|
||||
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
||||
, options = $.extend({}, $target.data(), $this.data())
|
||||
, slideIndex
|
||||
|
||||
$target.carousel(options)
|
||||
|
||||
if (slideIndex = $this.attr('data-slide-to')) {
|
||||
$target.data('carousel').pause().to(slideIndex).cycle()
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
@ -587,7 +595,7 @@
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('collapse')
|
||||
, options = typeof option == 'object' && option
|
||||
, options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
|
||||
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
||||
if (typeof option == 'string') data[option]()
|
||||
})
|
||||
@ -705,7 +713,10 @@
|
||||
|
||||
isActive = $parent.hasClass('open')
|
||||
|
||||
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
|
||||
if (!isActive || (isActive && e.keyCode == 27)) {
|
||||
if (e.which == 27) $parent.find(toggle).focus()
|
||||
return $this.click()
|
||||
}
|
||||
|
||||
$items = $('[role=menu] li:not(.divider):visible a', $parent)
|
||||
|
||||
@ -778,7 +789,7 @@
|
||||
|
||||
$(document)
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
|
||||
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
|
||||
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
|
||||
@ -1067,20 +1078,28 @@
|
||||
, init: function (type, element, options) {
|
||||
var eventIn
|
||||
, eventOut
|
||||
, triggers
|
||||
, trigger
|
||||
, i
|
||||
|
||||
this.type = type
|
||||
this.$element = $(element)
|
||||
this.options = this.getOptions(options)
|
||||
this.enabled = true
|
||||
|
||||
if (this.options.trigger == 'click') {
|
||||
triggers = this.options.trigger.split(' ')
|
||||
|
||||
for (i = triggers.length; i--;) {
|
||||
trigger = triggers[i]
|
||||
if (trigger == 'click') {
|
||||
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
|
||||
} else if (this.options.trigger != 'manual') {
|
||||
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
|
||||
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
|
||||
} else if (trigger != 'manual') {
|
||||
eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
|
||||
eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
|
||||
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
|
||||
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
|
||||
}
|
||||
}
|
||||
|
||||
this.options.selector ?
|
||||
(this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
|
||||
@ -1131,8 +1150,11 @@
|
||||
, actualHeight
|
||||
, placement
|
||||
, tp
|
||||
, e = $.Event('show')
|
||||
|
||||
if (this.hasContent() && this.enabled) {
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
$tip = this.tip()
|
||||
this.setContent()
|
||||
|
||||
@ -1147,7 +1169,8 @@
|
||||
$tip
|
||||
.detach()
|
||||
.css({ top: 0, left: 0, display: 'block' })
|
||||
.insertAfter(this.$element)
|
||||
|
||||
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
|
||||
|
||||
pos = this.getPosition()
|
||||
|
||||
@ -1173,6 +1196,8 @@
|
||||
.offset(tp)
|
||||
.addClass(placement)
|
||||
.addClass('in')
|
||||
|
||||
this.$element.trigger('shown')
|
||||
}
|
||||
}
|
||||
|
||||
@ -1187,6 +1212,10 @@
|
||||
, hide: function () {
|
||||
var that = this
|
||||
, $tip = this.tip()
|
||||
, e = $.Event('hide')
|
||||
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
|
||||
$tip.removeClass('in')
|
||||
|
||||
@ -1205,6 +1234,8 @@
|
||||
removeWithAnimation() :
|
||||
$tip.detach()
|
||||
|
||||
this.$element.trigger('hidden')
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
@ -1263,8 +1294,8 @@
|
||||
}
|
||||
|
||||
, toggle: function (e) {
|
||||
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
|
||||
self[self.tip().hasClass('in') ? 'hide' : 'show']()
|
||||
var self = e ? $(e.currentTarget)[this.type](this._options).data(this.type) : this
|
||||
self.tip().hasClass('in') ? self.hide() : self.show()
|
||||
}
|
||||
|
||||
, destroy: function () {
|
||||
@ -1296,10 +1327,11 @@
|
||||
, placement: 'top'
|
||||
, selector: false
|
||||
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
|
||||
, trigger: 'hover'
|
||||
, trigger: 'hover focus'
|
||||
, title: ''
|
||||
, delay: 0
|
||||
, html: false
|
||||
, container: false
|
||||
}
|
||||
|
||||
|
||||
@ -1311,7 +1343,8 @@
|
||||
return this
|
||||
}
|
||||
|
||||
}(window.jQuery);/* ===========================================================
|
||||
}(window.jQuery);
|
||||
/* ===========================================================
|
||||
* bootstrap-popover.js v3.0.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#popovers
|
||||
* ===========================================================
|
||||
@ -1412,7 +1445,7 @@
|
||||
placement: 'right'
|
||||
, trigger: 'click'
|
||||
, content: ''
|
||||
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"></div></div></div>'
|
||||
, template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
|
||||
})
|
||||
|
||||
|
||||
@ -1486,7 +1519,7 @@
|
||||
, $href = /^#\w/.test(href) && $(href)
|
||||
return ( $href
|
||||
&& $href.length
|
||||
&& [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null
|
||||
&& [[ $href.position().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]] ) || null
|
||||
})
|
||||
.sort(function (a, b) { return a[0] - b[0] })
|
||||
.each(function () {
|
||||
@ -2002,6 +2035,7 @@
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.select()
|
||||
this.$element.focus()
|
||||
}
|
||||
|
||||
, mouseenter: function (e) {
|
||||
|
||||
4
docs/assets/js/bootstrap.min.js
vendored
4
docs/assets/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,7 +1,7 @@
|
||||
/*
|
||||
|
||||
Holder - 1.6 - client side image placeholders
|
||||
(c) 2012 Ivan Malopinsky / http://imsky.co
|
||||
Holder - 1.9 - client side image placeholders
|
||||
(c) 2012-2013 Ivan Malopinsky / http://imsky.co
|
||||
|
||||
Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0
|
||||
Commercial use requires attribution.
|
||||
@ -33,6 +33,13 @@ function selector(a){
|
||||
//shallow object property extend
|
||||
function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c}
|
||||
|
||||
//hasOwnProperty polyfill
|
||||
if (!Object.prototype.hasOwnProperty)
|
||||
Object.prototype.hasOwnProperty = function(prop) {
|
||||
var proto = this.__proto__ || this.constructor.prototype;
|
||||
return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
|
||||
}
|
||||
|
||||
function text_size(width, height, template) {
|
||||
var dimension_arr = [height, width].sort();
|
||||
var maxFactor = Math.round(dimension_arr[1] / 16),
|
||||
@ -47,6 +54,7 @@ function draw(ctx, dimensions, template, ratio) {
|
||||
var ts = text_size(dimensions.width, dimensions.height, template);
|
||||
var text_height = ts.height;
|
||||
var width = dimensions.width * ratio, height = dimensions.height * ratio;
|
||||
var font = template.font ? template.font : "sans-serif";
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
ctx.textAlign = "center";
|
||||
@ -54,25 +62,24 @@ function draw(ctx, dimensions, template, ratio) {
|
||||
ctx.fillStyle = template.background;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
ctx.fillStyle = template.foreground;
|
||||
ctx.font = "bold " + text_height + "px sans-serif";
|
||||
ctx.font = "bold " + text_height + "px "+font;
|
||||
var text = template.text ? template.text : (dimensions.width + "x" + dimensions.height);
|
||||
if (ctx.measureText(text).width / width > 1) {
|
||||
text_height = template.size / (ctx.measureText(text).width / width);
|
||||
}
|
||||
ctx.font = "bold " + (text_height * ratio) + "px sans-serif";
|
||||
//Resetting font size if necessary
|
||||
ctx.font = "bold " + (text_height * ratio) + "px "+font;
|
||||
ctx.fillText(text, (width / 2), (height / 2), width);
|
||||
return canvas.toDataURL("image/png");
|
||||
}
|
||||
|
||||
function render(mode, el, holder, src) {
|
||||
|
||||
var dimensions = holder.dimensions,
|
||||
theme = holder.theme,
|
||||
text = holder.text;
|
||||
text = holder.text ? decodeURIComponent(holder.text) : holder.text;
|
||||
var dimensions_caption = dimensions.width + "x" + dimensions.height;
|
||||
theme = (text ? extend(theme, {
|
||||
text: text
|
||||
}) : theme);
|
||||
theme = (text ? extend(theme, { text: text }) : theme);
|
||||
theme = (holder.font ? extend(theme, {font: holder.font}) : theme);
|
||||
|
||||
var ratio = 1;
|
||||
if(window.devicePixelRatio && window.devicePixelRatio > 1){
|
||||
@ -82,11 +89,15 @@ function render(mode, el, holder, src) {
|
||||
if (mode == "image") {
|
||||
el.setAttribute("data-src", src);
|
||||
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
|
||||
|
||||
if(fallback || !holder.auto){
|
||||
el.style.width = dimensions.width + "px";
|
||||
el.style.height = dimensions.height + "px";
|
||||
}
|
||||
|
||||
if (fallback) {
|
||||
el.style.backgroundColor = theme.background;
|
||||
|
||||
}
|
||||
else{
|
||||
el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
|
||||
@ -108,14 +119,7 @@ function fluid(el, holder, src) {
|
||||
text: text
|
||||
}) : theme);
|
||||
|
||||
var fluid = document.createElement("table");
|
||||
fluid.setAttribute("cellspacing",0)
|
||||
fluid.setAttribute("cellpadding",0)
|
||||
fluid.setAttribute("border",0)
|
||||
|
||||
var row = document.createElement("tr")
|
||||
.appendChild(document.createElement("td")
|
||||
.appendChild(document.createTextNode(theme.text)));
|
||||
var fluid = document.createElement("div");
|
||||
|
||||
fluid.style.backgroundColor = theme.background;
|
||||
fluid.style.color = theme.foreground;
|
||||
@ -124,31 +128,38 @@ function fluid(el, holder, src) {
|
||||
fluid.style.height = holder.dimensions.height + (holder.dimensions.height.indexOf("%")>0?"":"px");
|
||||
fluid.id = el.id;
|
||||
|
||||
var frag = document.createDocumentFragment(),
|
||||
tbody = document.createElement("tbody"),
|
||||
tr = document.createElement("tr"),
|
||||
td = document.createElement("td");
|
||||
tr.appendChild(td);
|
||||
tbody.appendChild(tr);
|
||||
frag.appendChild(tbody);
|
||||
el.style.width=0;
|
||||
el.style.height=0;
|
||||
|
||||
if (theme.text) {
|
||||
td.appendChild(document.createTextNode(theme.text))
|
||||
fluid.appendChild(frag);
|
||||
fluid.appendChild(document.createTextNode(theme.text))
|
||||
} else {
|
||||
td.appendChild(document.createTextNode(dimensions_caption))
|
||||
fluid.appendChild(frag);
|
||||
fluid.appendChild(document.createTextNode(dimensions_caption))
|
||||
fluid_images.push(fluid);
|
||||
setTimeout(fluid_update, 0);
|
||||
}
|
||||
|
||||
el.parentNode.replaceChild(fluid, el);
|
||||
el.parentNode.insertBefore(fluid, el.nextSibling)
|
||||
|
||||
if(window.jQuery){
|
||||
jQuery(function($){
|
||||
$(el).on("load", function(){
|
||||
el.style.width = fluid.style.width;
|
||||
el.style.height = fluid.style.height;
|
||||
$(el).show();
|
||||
$(fluid).remove();
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function fluid_update() {
|
||||
for (i in fluid_images) {
|
||||
var el = fluid_images[i];
|
||||
var label = el.getElementsByTagName("td")[0].firstChild;
|
||||
if(!fluid_images.hasOwnProperty(i)) continue;
|
||||
var el = fluid_images[i],
|
||||
label = el.firstChild;
|
||||
|
||||
el.style.lineHeight = el.offsetHeight+"px";
|
||||
label.data = el.offsetWidth + "x" + el.offsetHeight;
|
||||
}
|
||||
}
|
||||
@ -175,6 +186,11 @@ function parse_flags(flags, options) {
|
||||
ret.theme = options.themes[flag];
|
||||
} else if (app.flags.text.match(flag)) {
|
||||
ret.text = app.flags.text.output(flag);
|
||||
} else if(app.flags.font.match(flag)){
|
||||
ret.font = app.flags.font.output(flag);
|
||||
}
|
||||
else if(app.flags.auto.match(flag)){
|
||||
ret.auto = true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -199,7 +215,7 @@ var fluid_images = [];
|
||||
var settings = {
|
||||
domain: "holder.js",
|
||||
images: "img",
|
||||
elements: ".holderjs",
|
||||
bgnodes: ".holderjs",
|
||||
themes: {
|
||||
"gray": {
|
||||
background: "#eee",
|
||||
@ -217,13 +233,13 @@ var settings = {
|
||||
size: 12
|
||||
}
|
||||
},
|
||||
stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;border-collapse:collapse;border:0;vertical-align:middle;margin:0}"
|
||||
stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}"
|
||||
};
|
||||
|
||||
|
||||
app.flags = {
|
||||
dimensions: {
|
||||
regex: /(\d+)x(\d+)/,
|
||||
regex: /^(\d+)x(\d+)$/,
|
||||
output: function (val) {
|
||||
var exec = this.regex.exec(val);
|
||||
return {
|
||||
@ -233,7 +249,7 @@ app.flags = {
|
||||
}
|
||||
},
|
||||
fluid: {
|
||||
regex: /([0-9%]+)x([0-9%]+)/,
|
||||
regex: /^([0-9%]+)x([0-9%]+)$/,
|
||||
output: function (val) {
|
||||
var exec = this.regex.exec(val);
|
||||
return {
|
||||
@ -258,10 +274,20 @@ app.flags = {
|
||||
output: function (val) {
|
||||
return this.regex.exec(val)[1];
|
||||
}
|
||||
},
|
||||
font: {
|
||||
regex: /font\:(.*)/,
|
||||
output: function(val){
|
||||
return this.regex.exec(val)[1];
|
||||
}
|
||||
},
|
||||
auto: {
|
||||
regex: /^auto$/
|
||||
}
|
||||
}
|
||||
|
||||
for (var flag in app.flags) {
|
||||
if(!app.flags.hasOwnProperty(flag)) continue;
|
||||
app.flags[flag].match = function (val) {
|
||||
return val.match(this.regex)
|
||||
}
|
||||
@ -285,29 +311,58 @@ app.add_image = function (src, el) {
|
||||
};
|
||||
|
||||
app.run = function (o) {
|
||||
var options = extend(settings, o),
|
||||
images_nodes = selector(options.images),
|
||||
elements = selector(options.elements),
|
||||
preempted = true,
|
||||
images = [];
|
||||
var options = extend(settings, o), images = [];
|
||||
|
||||
for (i = 0, l = images_nodes.length; i < l; i++) images.push(images_nodes[i]);
|
||||
if(options.images instanceof window.NodeList){
|
||||
imageNodes = options.images;
|
||||
}
|
||||
else if(options.images instanceof window.Node){
|
||||
imageNodes = [options.images];
|
||||
}
|
||||
else{
|
||||
imageNodes = selector(options.images);
|
||||
}
|
||||
|
||||
var holdercss = document.createElement("style");
|
||||
if(options.elements instanceof window.NodeList){
|
||||
bgnodes = options.bgnodes;
|
||||
}
|
||||
else if(options.bgnodes instanceof window.Node){
|
||||
bgnodes = [options.bgnodes];
|
||||
}
|
||||
else{
|
||||
bgnodes = selector(options.bgnodes);
|
||||
}
|
||||
|
||||
preempted = true;
|
||||
|
||||
for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
|
||||
|
||||
var holdercss = document.getElementById("holderjs-style");
|
||||
|
||||
if(!holdercss){
|
||||
holdercss = document.createElement("style");
|
||||
holdercss.setAttribute("id", "holderjs-style");
|
||||
holdercss.type = "text/css";
|
||||
holdercss.styleSheet ? holdercss.styleSheet.cssText = options.stylesheet : holdercss.textContent = options.stylesheet;
|
||||
document.getElementsByTagName("head")[0].appendChild(holdercss);
|
||||
}
|
||||
|
||||
if(holdercss.styleSheet){
|
||||
holdercss.styleSheet += options.stylesheet;
|
||||
}
|
||||
else{
|
||||
holdercss.textContent+= options.stylesheet;
|
||||
}
|
||||
|
||||
var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
|
||||
|
||||
for (var l = elements.length, i = 0; i < l; i++) {
|
||||
var src = window.getComputedStyle(elements[i], null)
|
||||
for (var l = bgnodes.length, i = 0; i < l; i++) {
|
||||
var src = window.getComputedStyle(bgnodes[i], null)
|
||||
.getPropertyValue("background-image");
|
||||
var flags = src.match(cssregex);
|
||||
if (flags) {
|
||||
var holder = parse_flags(flags[1].split("/"), options);
|
||||
if (holder) {
|
||||
render("background", elements[i], holder, src);
|
||||
render("background", bgnodes[i], holder, src);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -339,4 +394,8 @@ contentLoaded(win, function () {
|
||||
preempted || app.run();
|
||||
});
|
||||
|
||||
if ( typeof define === "function" && define.amd ) {
|
||||
define( "Holder", [], function () { return app; } );
|
||||
}
|
||||
|
||||
})(Holder, window);
|
||||
@ -158,6 +158,25 @@
|
||||
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled menu options</h3>
|
||||
<p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<li><a tabindex="-1" href="#">Regular link</a></li>
|
||||
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
|
||||
<li><a tabindex="-1" href="#">Another link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Regular link</a></li>
|
||||
<li><a tabindex="-1" href="#">Disabled link</a></li>
|
||||
<li><a tabindex="-1" href="#">Another link</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
@ -185,9 +204,9 @@
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<button class="btn">1</button>
|
||||
<button class="btn">2</button>
|
||||
<button class="btn">3</button>
|
||||
<button class="btn">Left</button>
|
||||
<button class="btn">Middle</button>
|
||||
<button class="btn">Right</button>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
@ -1977,7 +1996,7 @@
|
||||
<p><button class="close" style="float: none;">×</button></p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums"><button class="close">&times;</button></pre>
|
||||
<p>iOS devices require an href="#" for click events if you would rather use an anchor.</p>
|
||||
<p>iOS devices require an <code>href="#"</code> for click events if you would rather use an anchor.</p>
|
||||
<pre class="prettyprint linenums"><a class="close" href="#">&times;</a></pre>
|
||||
|
||||
<h2>Helper classes</h2>
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
|
||||
|
||||
|
||||
/* CUSTOMIZE THE NAVBAR
|
||||
/* CUSTOMIZE THE CAROUSEL
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Carousel base class */
|
||||
@ -88,6 +88,7 @@
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.4);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.carousel .item {
|
||||
@ -417,7 +418,7 @@
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>© 2012 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
<p>© 2013 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
</footer>
|
||||
|
||||
</div><!-- /.container -->
|
||||
@ -448,5 +449,6 @@
|
||||
})
|
||||
}(window.jQuery)
|
||||
</script>
|
||||
<script src="../assets/js/holder/holder.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
<hr>
|
||||
|
||||
<footer>
|
||||
<p>© Company 2012</p>
|
||||
<p>© Company 2013</p>
|
||||
</footer>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
@ -57,6 +57,8 @@
|
||||
}
|
||||
.navbar .nav {
|
||||
margin: 0;
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.navbar .nav li {
|
||||
display: table-cell;
|
||||
@ -146,7 +148,7 @@
|
||||
<hr>
|
||||
|
||||
<div class="footer">
|
||||
<p>© Company 2012</p>
|
||||
<p>© Company 2013</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
@ -111,7 +111,7 @@
|
||||
<hr>
|
||||
|
||||
<div class="footer">
|
||||
<p>© Company 2012</p>
|
||||
<p>© Company 2013</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
161
docs/examples/sticky-footer-navbar.html
Normal file
161
docs/examples/sticky-footer-navbar.html
Normal file
@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Sticky footer · Twitter Bootstrap</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- CSS -->
|
||||
<link href="../assets/css/bootstrap.css" rel="stylesheet">
|
||||
<style type="text/css">
|
||||
|
||||
/* Sticky footer styles
|
||||
-------------------------------------------------- */
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
/* The html and body elements cannot have any padding or margin. */
|
||||
}
|
||||
|
||||
/* Wrapper for page content to push down footer */
|
||||
#wrap {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
/* Negative indent footer by it's height */
|
||||
margin: 0 auto -60px;
|
||||
}
|
||||
|
||||
/* Set the fixed height of the footer here */
|
||||
#push,
|
||||
#footer {
|
||||
height: 60px;
|
||||
}
|
||||
#footer {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Lastly, apply responsive CSS fixes as necessary */
|
||||
@media (max-width: 767px) {
|
||||
#footer {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Custom page CSS
|
||||
-------------------------------------------------- */
|
||||
/* Not required for template or sticky footer method. */
|
||||
|
||||
#wrap > .container {
|
||||
padding-top: 60px;
|
||||
}
|
||||
.container .credit {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Part 1: Wrap all page content here -->
|
||||
<div id="wrap">
|
||||
|
||||
<!-- Fixed navbar -->
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Begin page content -->
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>Sticky footer with fixed navbar</h1>
|
||||
</div>
|
||||
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
|
||||
<p>Back to <a href="./sticky-footer.html">the sticky footer</a> minus the navbar.</p>
|
||||
</div>
|
||||
|
||||
<div id="push"></div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-alert.js"></script>
|
||||
<script src="../assets/js/bootstrap-modal.js"></script>
|
||||
<script src="../assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="../assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
<script src="../assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="../assets/js/bootstrap-popover.js"></script>
|
||||
<script src="../assets/js/bootstrap-button.js"></script>
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../assets/js/bootstrap-typeahead.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -90,6 +90,7 @@
|
||||
<h1>Sticky footer</h1>
|
||||
</div>
|
||||
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
|
||||
<p>Use <a href="./sticky-footer-navbar.html">the sticky footer</a> with a fixed navbar if need be, too.</p>
|
||||
</div>
|
||||
|
||||
<div id="push"></div>
|
||||
|
||||
@ -195,7 +195,7 @@
|
||||
<div class="page-header">
|
||||
<h1>4. Basic HTML template</h1>
|
||||
</div>
|
||||
<p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.</p>
|
||||
<p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.</p>
|
||||
<p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<!DOCTYPE html>
|
||||
@ -240,14 +240,14 @@
|
||||
<div class="row bootstrap-examples">
|
||||
<div class="span4">
|
||||
<a class="thumbnail" href="examples/starter-template.html">
|
||||
<img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
|
||||
<img src="assets/img/examples/bootstrap-example-starter.png" alt="">
|
||||
</a>
|
||||
<h4>Starter template</h4>
|
||||
<p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<a class="thumbnail" href="examples/hero.html">
|
||||
<img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
|
||||
<img src="assets/img/examples/bootstrap-example-marketing.png" alt="">
|
||||
</a>
|
||||
<h4>Basic marketing site</h4>
|
||||
<p>Featuring a hero unit for a primary message and three supporting elements.</p>
|
||||
@ -259,6 +259,13 @@
|
||||
<h4>Narrow marketing</h4>
|
||||
<p>Slim, lightweight marketing template for small projects or teams.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<a class="thumbnail" href="examples/justified-nav.html">
|
||||
<img src="assets/img/examples/bootstrap-example-justified-nav.png" alt="">
|
||||
</a>
|
||||
<h4>Justified nav</h4>
|
||||
<p>Marketing page with equal-width navigation links in a modified navbar.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<a class="thumbnail" href="examples/signin.html">
|
||||
<img src="assets/img/examples/bootstrap-example-signin.png" alt="">
|
||||
|
||||
@ -402,21 +402,21 @@ $('#myModal').on('hidden', function () {
|
||||
<li class="dropdown">
|
||||
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
|
||||
<li><a tabindex="-1" href="http://google.com">Action</a></li>
|
||||
<li><a tabindex="-1" href="#anotherAction">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -424,11 +424,11 @@ $('#myModal').on('hidden', function () {
|
||||
<li id="fat-menu" class="dropdown">
|
||||
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -444,31 +444,31 @@ $('#myModal').on('hidden', function () {
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
|
||||
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
|
||||
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul> <!-- /tabs -->
|
||||
@ -767,17 +767,17 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
|
||||
<p>Hover over the links below to see tooltips:</p>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Four directions</h3>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -815,7 +815,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string|function</td>
|
||||
<td>string | function</td>
|
||||
<td>'top'</td>
|
||||
<td>how to position the tooltip - top | bottom | left | right</td>
|
||||
</tr>
|
||||
@ -834,8 +834,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td>'hover'</td>
|
||||
<td>how tooltip is triggered - click | hover | focus | manual</td>
|
||||
<td>'hover focus'</td>
|
||||
<td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>delay</td>
|
||||
@ -847,6 +847,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>container</td>
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="alert alert-info">
|
||||
@ -855,8 +863,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</div>
|
||||
|
||||
<h3>Markup</h3>
|
||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
|
||||
<pre class="prettyprint linenums"><a href="#" rel="tooltip" title="first tooltip">hover over me</a></pre>
|
||||
<pre class="prettyprint linenums"><a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a></pre>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<h4>$().tooltip(options)</h4>
|
||||
@ -928,16 +935,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
|
||||
<h3>Live demo</h3>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
|
||||
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
|
||||
</div>
|
||||
|
||||
<h4>Four directions</h4>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -975,7 +982,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string|function</td>
|
||||
<td>string | function</td>
|
||||
<td>'right'</td>
|
||||
<td>how to position the popover - top | bottom | left | right</td>
|
||||
</tr>
|
||||
@ -1421,9 +1428,9 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<div class="bs-docs-example">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<ol class="carousel-indicators">
|
||||
<li class="active"></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="item active">
|
||||
@ -1458,6 +1465,11 @@ $('#myCollapsible').on('hidden', function () {
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner">
|
||||
<div class="active item">…</div>
|
||||
@ -1482,7 +1494,7 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<h2>Usage</h2>
|
||||
|
||||
<h3>Via data attributes</h3>
|
||||
<p>...</p>
|
||||
<p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to it's current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which jump's the slide position to a particular index beginning with <code>0</code>.</p>
|
||||
|
||||
<h3>Via JavaScript</h3>
|
||||
<p>Call carousel manually with:</p>
|
||||
@ -1572,7 +1584,7 @@ $('.carousel').carousel({
|
||||
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
|
||||
</div>
|
||||
<pre class="prettyprint linenums"><input type="text" data-provide="typeahead"></pre>
|
||||
|
||||
<p>You'll want to set <code>autocomplete="off"</code> to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.</p>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
27
docs/templates/pages/components.mustache
vendored
27
docs/templates/pages/components.mustache
vendored
@ -90,6 +90,25 @@
|
||||
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled menu options</h3>
|
||||
<p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<li><a tabindex="-1" href="#">Regular link</a></li>
|
||||
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
|
||||
<li><a tabindex="-1" href="#">Another link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Regular link</a></li>
|
||||
<li><a tabindex="-1" href="#">Disabled link</a></li>
|
||||
<li><a tabindex="-1" href="#">Another link</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
@ -117,9 +136,9 @@
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<button class="btn">1</button>
|
||||
<button class="btn">2</button>
|
||||
<button class="btn">3</button>
|
||||
<button class="btn">Left</button>
|
||||
<button class="btn">Middle</button>
|
||||
<button class="btn">Right</button>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
@ -1909,7 +1928,7 @@
|
||||
<p><button class="close" style="float: none;">×</button></p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums"><button class="close">&times;</button></pre>
|
||||
<p>iOS devices require an href="#" for click events if you would rather use an anchor.</p>
|
||||
<p>iOS devices require an <code>href="#"</code> for click events if you would rather use an anchor.</p>
|
||||
<pre class="prettyprint linenums"><a class="close" href="#">&times;</a></pre>
|
||||
|
||||
<h2>Helper classes</h2>
|
||||
|
||||
13
docs/templates/pages/getting-started.mustache
vendored
13
docs/templates/pages/getting-started.mustache
vendored
@ -127,7 +127,7 @@
|
||||
<div class="page-header">
|
||||
<h1>4. Basic HTML template</h1>
|
||||
</div>
|
||||
<p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.</p>
|
||||
<p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.</p>
|
||||
<p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<!DOCTYPE html>
|
||||
@ -172,14 +172,14 @@
|
||||
<div class="row bootstrap-examples">
|
||||
<div class="span4">
|
||||
<a class="thumbnail" href="examples/starter-template.html">
|
||||
<img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
|
||||
<img src="assets/img/examples/bootstrap-example-starter.png" alt="">
|
||||
</a>
|
||||
<h4>Starter template</h4>
|
||||
<p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<a class="thumbnail" href="examples/hero.html">
|
||||
<img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
|
||||
<img src="assets/img/examples/bootstrap-example-marketing.png" alt="">
|
||||
</a>
|
||||
<h4>Basic marketing site</h4>
|
||||
<p>Featuring a hero unit for a primary message and three supporting elements.</p>
|
||||
@ -191,6 +191,13 @@
|
||||
<h4>Narrow marketing</h4>
|
||||
<p>Slim, lightweight marketing template for small projects or teams.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<a class="thumbnail" href="examples/justified-nav.html">
|
||||
<img src="assets/img/examples/bootstrap-example-justified-nav.png" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Justified nav{{/i}}</h4>
|
||||
<p>{{_i}}Marketing page with equal-width navigation links in a modified navbar.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<a class="thumbnail" href="examples/signin.html">
|
||||
<img src="assets/img/examples/bootstrap-example-signin.png" alt="">
|
||||
|
||||
114
docs/templates/pages/javascript.mustache
vendored
114
docs/templates/pages/javascript.mustache
vendored
@ -335,21 +335,21 @@ $('#myModal').on('hidden', function () {
|
||||
<li class="dropdown">
|
||||
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
|
||||
<li><a tabindex="-1" href="http://google.com">Action</a></li>
|
||||
<li><a tabindex="-1" href="#anotherAction">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -357,11 +357,11 @@ $('#myModal').on('hidden', function () {
|
||||
<li id="fat-menu" class="dropdown">
|
||||
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -377,31 +377,31 @@ $('#myModal').on('hidden', function () {
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
|
||||
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
|
||||
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
|
||||
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a tabindex="-1" href="#">Separated link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul> <!-- /tabs -->
|
||||
@ -700,17 +700,17 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
|
||||
<p>Hover over the links below to see tooltips:</p>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</div>{{! /example }}
|
||||
|
||||
<h3>Four directions</h3>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
||||
<li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
|
||||
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
|
||||
</ul>
|
||||
</div>{{! /example }}
|
||||
|
||||
@ -748,7 +748,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string|function</td>
|
||||
<td>string | function</td>
|
||||
<td>'top'</td>
|
||||
<td>how to position the tooltip - top | bottom | left | right</td>
|
||||
</tr>
|
||||
@ -767,8 +767,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td>'hover'</td>
|
||||
<td>how tooltip is triggered - click | hover | focus | manual</td>
|
||||
<td>'hover focus'</td>
|
||||
<td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>delay</td>
|
||||
@ -780,6 +780,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>container</td>
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="alert alert-info">
|
||||
@ -788,8 +796,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</div>
|
||||
|
||||
<h3>Markup</h3>
|
||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
|
||||
<pre class="prettyprint linenums"><a href="#" rel="tooltip" title="first tooltip">hover over me</a></pre>
|
||||
<pre class="prettyprint linenums"><a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a></pre>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<h4>$().tooltip(options)</h4>
|
||||
@ -861,16 +868,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
|
||||
<h3>Live demo</h3>
|
||||
<div class="bs-docs-example" style="padding-bottom: 24px;">
|
||||
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
|
||||
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
|
||||
</div>
|
||||
|
||||
<h4>Four directions</h4>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
</ul>
|
||||
</div>{{! /example }}
|
||||
|
||||
@ -908,7 +915,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string|function</td>
|
||||
<td>string | function</td>
|
||||
<td>'right'</td>
|
||||
<td>how to position the popover - top | bottom | left | right</td>
|
||||
</tr>
|
||||
@ -1354,9 +1361,9 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<div class="bs-docs-example">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<ol class="carousel-indicators">
|
||||
<li class="active"></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="item active">
|
||||
@ -1391,6 +1398,11 @@ $('#myCollapsible').on('hidden', function () {
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner">
|
||||
<div class="active item">…</div>
|
||||
@ -1415,7 +1427,7 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<h2>Usage</h2>
|
||||
|
||||
<h3>Via data attributes</h3>
|
||||
<p>...</p>
|
||||
<p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to it's current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which jump's the slide position to a particular index beginning with <code>0</code>.</p>
|
||||
|
||||
<h3>Via JavaScript</h3>
|
||||
<p>Call carousel manually with:</p>
|
||||
@ -1505,7 +1517,7 @@ $('.carousel').carousel({
|
||||
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums"><input type="text" data-provide="typeahead"></pre>
|
||||
|
||||
<p>You'll want to set <code>autocomplete="off"</code> to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.</p>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
10
js/bootstrap-carousel.js
vendored
10
js/bootstrap-carousel.js
vendored
@ -108,6 +108,7 @@
|
||||
|
||||
e = $.Event('slide', {
|
||||
relatedTarget: $next[0]
|
||||
, direction: direction
|
||||
})
|
||||
|
||||
if ($next.hasClass('active')) return
|
||||
@ -187,11 +188,18 @@
|
||||
/* CAROUSEL DATA-API
|
||||
* ================= */
|
||||
|
||||
$(document).on('click.carousel.data-api', '[data-slide]', function (e) {
|
||||
$(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
|
||||
var $this = $(this), href
|
||||
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|
||||
, options = $.extend({}, $target.data(), $this.data())
|
||||
, slideIndex
|
||||
|
||||
$target.carousel(options)
|
||||
|
||||
if (slideIndex = $this.attr('data-slide-to')) {
|
||||
$target.data('carousel').pause().to(slideIndex).cycle()
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
|
||||
2
js/bootstrap-collapse.js
vendored
2
js/bootstrap-collapse.js
vendored
@ -129,7 +129,7 @@
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('collapse')
|
||||
, options = typeof option == 'object' && option
|
||||
, options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
|
||||
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
||||
if (typeof option == 'string') data[option]()
|
||||
})
|
||||
|
||||
7
js/bootstrap-dropdown.js
vendored
7
js/bootstrap-dropdown.js
vendored
@ -81,7 +81,10 @@
|
||||
|
||||
isActive = $parent.hasClass('open')
|
||||
|
||||
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
|
||||
if (!isActive || (isActive && e.keyCode == 27)) {
|
||||
if (e.which == 27) $parent.find(toggle).focus()
|
||||
return $this.click()
|
||||
}
|
||||
|
||||
$items = $('[role=menu] li:not(.divider):visible a', $parent)
|
||||
|
||||
@ -154,7 +157,7 @@
|
||||
|
||||
$(document)
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
|
||||
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
|
||||
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
|
||||
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
|
||||
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
|
||||
|
||||
2
js/bootstrap-popover.js
vendored
2
js/bootstrap-popover.js
vendored
@ -99,7 +99,7 @@
|
||||
placement: 'right'
|
||||
, trigger: 'click'
|
||||
, content: ''
|
||||
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"></div></div></div>'
|
||||
, template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
|
||||
})
|
||||
|
||||
|
||||
|
||||
2
js/bootstrap-scrollspy.js
vendored
2
js/bootstrap-scrollspy.js
vendored
@ -59,7 +59,7 @@
|
||||
, $href = /^#\w/.test(href) && $(href)
|
||||
return ( $href
|
||||
&& $href.length
|
||||
&& [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null
|
||||
&& [[ $href.position().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]] ) || null
|
||||
})
|
||||
.sort(function (a, b) { return a[0] - b[0] })
|
||||
.each(function () {
|
||||
|
||||
37
js/bootstrap-tooltip.js
vendored
37
js/bootstrap-tooltip.js
vendored
@ -38,20 +38,28 @@
|
||||
, init: function (type, element, options) {
|
||||
var eventIn
|
||||
, eventOut
|
||||
, triggers
|
||||
, trigger
|
||||
, i
|
||||
|
||||
this.type = type
|
||||
this.$element = $(element)
|
||||
this.options = this.getOptions(options)
|
||||
this.enabled = true
|
||||
|
||||
if (this.options.trigger == 'click') {
|
||||
triggers = this.options.trigger.split(' ')
|
||||
|
||||
for (i = triggers.length; i--;) {
|
||||
trigger = triggers[i]
|
||||
if (trigger == 'click') {
|
||||
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
|
||||
} else if (this.options.trigger != 'manual') {
|
||||
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
|
||||
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
|
||||
} else if (trigger != 'manual') {
|
||||
eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
|
||||
eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
|
||||
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
|
||||
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
|
||||
}
|
||||
}
|
||||
|
||||
this.options.selector ?
|
||||
(this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
|
||||
@ -102,8 +110,11 @@
|
||||
, actualHeight
|
||||
, placement
|
||||
, tp
|
||||
, e = $.Event('show')
|
||||
|
||||
if (this.hasContent() && this.enabled) {
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
$tip = this.tip()
|
||||
this.setContent()
|
||||
|
||||
@ -118,7 +129,8 @@
|
||||
$tip
|
||||
.detach()
|
||||
.css({ top: 0, left: 0, display: 'block' })
|
||||
.insertAfter(this.$element)
|
||||
|
||||
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
|
||||
|
||||
pos = this.getPosition()
|
||||
|
||||
@ -144,6 +156,8 @@
|
||||
.offset(tp)
|
||||
.addClass(placement)
|
||||
.addClass('in')
|
||||
|
||||
this.$element.trigger('shown')
|
||||
}
|
||||
}
|
||||
|
||||
@ -158,6 +172,10 @@
|
||||
, hide: function () {
|
||||
var that = this
|
||||
, $tip = this.tip()
|
||||
, e = $.Event('hide')
|
||||
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
|
||||
$tip.removeClass('in')
|
||||
|
||||
@ -176,6 +194,8 @@
|
||||
removeWithAnimation() :
|
||||
$tip.detach()
|
||||
|
||||
this.$element.trigger('hidden')
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
@ -234,8 +254,8 @@
|
||||
}
|
||||
|
||||
, toggle: function (e) {
|
||||
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
|
||||
self[self.tip().hasClass('in') ? 'hide' : 'show']()
|
||||
var self = e ? $(e.currentTarget)[this.type](this._options).data(this.type) : this
|
||||
self.tip().hasClass('in') ? self.hide() : self.show()
|
||||
}
|
||||
|
||||
, destroy: function () {
|
||||
@ -267,10 +287,11 @@
|
||||
, placement: 'top'
|
||||
, selector: false
|
||||
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
|
||||
, trigger: 'hover'
|
||||
, trigger: 'hover focus'
|
||||
, title: ''
|
||||
, delay: 0
|
||||
, html: false
|
||||
, container: false
|
||||
}
|
||||
|
||||
|
||||
|
||||
1
js/bootstrap-typeahead.js
vendored
1
js/bootstrap-typeahead.js
vendored
@ -271,6 +271,7 @@
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.select()
|
||||
this.$element.focus()
|
||||
}
|
||||
|
||||
, mouseenter: function (e) {
|
||||
|
||||
12
js/tests/unit/bootstrap-carousel.js
vendored
12
js/tests/unit/bootstrap-carousel.js
vendored
@ -31,6 +31,18 @@ $(function () {
|
||||
.carousel('next')
|
||||
})
|
||||
|
||||
test("should fire slide event with direction", function () {
|
||||
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>'
|
||||
$.support.transition = false
|
||||
stop()
|
||||
$(template).on('slide', function (e) {
|
||||
e.preventDefault()
|
||||
ok(e.direction)
|
||||
ok(e.direction === 'right' || e.direction === 'left')
|
||||
start()
|
||||
}).carousel('next')
|
||||
})
|
||||
|
||||
test("should fire slide event with relatedTarget", function () {
|
||||
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>'
|
||||
$.support.transition = false
|
||||
|
||||
95
js/tests/unit/bootstrap-tooltip.js
vendored
95
js/tests/unit/bootstrap-tooltip.js
vendored
@ -66,6 +66,83 @@ $(function () {
|
||||
ok(!$(".tooltip").length, 'tooltip removed')
|
||||
})
|
||||
|
||||
test("should fire show event", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("show", function() {
|
||||
ok(true, "show was called")
|
||||
start()
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should fire shown event", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("shown", function() {
|
||||
ok(true, "shown was called")
|
||||
start()
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should not fire shown event when default prevented", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("show", function(e) {
|
||||
e.preventDefault()
|
||||
ok(true, "show was called")
|
||||
start()
|
||||
})
|
||||
.bind("shown", function() {
|
||||
ok(false, "shown was called")
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should fire hide event", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("shown", function() {
|
||||
$(this).tooltip('hide')
|
||||
})
|
||||
.bind("hide", function() {
|
||||
ok(true, "hide was called")
|
||||
start()
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should fire hidden event", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("shown", function() {
|
||||
$(this).tooltip('hide')
|
||||
})
|
||||
.bind("hidden", function() {
|
||||
ok(true, "hidden was called")
|
||||
start()
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should not fire hidden event when default prevented", function () {
|
||||
stop()
|
||||
var tooltip = $('<div title="tooltip title"></div>')
|
||||
.bind("shown", function() {
|
||||
$(this).tooltip('hide')
|
||||
})
|
||||
.bind("hide", function(e) {
|
||||
e.preventDefault()
|
||||
ok(true, "hide was called")
|
||||
start()
|
||||
})
|
||||
.bind("hidden", function() {
|
||||
ok(false, "hidden was called")
|
||||
})
|
||||
.tooltip('show')
|
||||
})
|
||||
|
||||
test("should not show tooltip if leave event occurs before delay expires", function () {
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
@ -156,4 +233,22 @@ $(function () {
|
||||
div.find('a').trigger('click')
|
||||
ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
|
||||
})
|
||||
|
||||
test("should show tooltip when toggle is called", function () {
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle"></a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.tooltip({trigger: 'manual'})
|
||||
.tooltip('toggle')
|
||||
ok($(".tooltip").is('.fade.in'), 'tooltip should be toggled in')
|
||||
})
|
||||
|
||||
test("should place tooltips inside the body", function () {
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.tooltip({container:'body'})
|
||||
.tooltip('show')
|
||||
ok($("body > .tooltip").length, 'inside the body')
|
||||
ok(!$("#qunit-fixture > .tooltip").length, 'not found in parent')
|
||||
tooltip.tooltip('hide')
|
||||
})
|
||||
})
|
||||
5
js/tests/unit/bootstrap-typeahead.js
vendored
5
js/tests/unit/bootstrap-typeahead.js
vendored
@ -192,17 +192,22 @@ $(function () {
|
||||
}).appendTo('body')
|
||||
, typeahead = $input.data('typeahead')
|
||||
, changed = false
|
||||
, focus = false
|
||||
, blur = false
|
||||
|
||||
$input.val('a')
|
||||
typeahead.lookup()
|
||||
|
||||
$input.change(function() { changed = true });
|
||||
$input.focus(function() { focus = true; blur = false });
|
||||
$input.blur(function() { blur = true; focus = false });
|
||||
|
||||
$(typeahead.$menu.find('li')[2]).mouseover().click()
|
||||
|
||||
equals($input.val(), 'ac', 'input value was correctly set')
|
||||
ok(!typeahead.$menu.is(':visible'), 'the menu was hidden')
|
||||
ok(changed, 'a change event was fired')
|
||||
ok(focus && !blur, 'focus is still set')
|
||||
|
||||
$input.remove()
|
||||
typeahead.$menu.remove()
|
||||
|
||||
@ -125,7 +125,6 @@ input[type="button"] {
|
||||
border-color: darken(@btn-border, 10%);
|
||||
}
|
||||
}
|
||||
// Primary appears as blue
|
||||
.btn-primary {
|
||||
background-color: @btn-background-primary;
|
||||
border-color: @btn-border-primary;
|
||||
|
||||
@ -182,6 +182,12 @@
|
||||
-o-transition-delay: @transition-delay;
|
||||
transition-delay: @transition-delay;
|
||||
}
|
||||
.transition-duration(@transition-duration) {
|
||||
-webkit-transition-duration: @transition-duration;
|
||||
-moz-transition-duration: @transition-duration;
|
||||
-o-transition-duration: @transition-duration;
|
||||
transition-duration: @transition-duration;
|
||||
}
|
||||
|
||||
// Transformations
|
||||
.rotate(@degrees) {
|
||||
|
||||
@ -299,8 +299,8 @@
|
||||
|
||||
// Caret should match text color on hover
|
||||
.navbar .nav li.dropdown > a:hover .caret {
|
||||
border-top-color: @navbar-link-color-active;
|
||||
border-bottom-color: @navbar-link-color-active;
|
||||
border-top-color: @navbar-link-color-hover;
|
||||
border-bottom-color: @navbar-link-color-hover;
|
||||
}
|
||||
|
||||
// Remove background color from open dropdown
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
left: 0;
|
||||
z-index: @zindex-popover;
|
||||
display: none;
|
||||
width: 236px;
|
||||
max-width: 276px;
|
||||
padding: 1px;
|
||||
text-align: left; // Reset given new insertion method
|
||||
background-color: @popover-background;
|
||||
@ -40,6 +40,10 @@
|
||||
background-color: @popover-title-background;
|
||||
border-bottom: 1px solid darken(@popover-title-background, 5%);
|
||||
border-radius: 5px 5px 0 0;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
|
||||
@ -49,7 +49,6 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// FORM FIELDS
|
||||
// -----------
|
||||
// Make span* classes full width
|
||||
|
||||
@ -92,24 +92,32 @@ table {
|
||||
tbody:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
// For first th or td in the first row in the first thead or tbody
|
||||
// For first th/td in the first row in the first thead or tbody
|
||||
thead:first-child tr:first-child > th:first-child,
|
||||
tbody:first-child tr:first-child > td:first-child {
|
||||
tbody:first-child tr:first-child > td:first-child,
|
||||
tbody:first-child tr:first-child > th:first-child {
|
||||
border-top-left-radius: @border-radius-base;
|
||||
}
|
||||
// For last th/td in the first row in the first thead or tbody
|
||||
thead:first-child tr:first-child > th:last-child,
|
||||
tbody:first-child tr:first-child > td:last-child {
|
||||
tbody:first-child tr:first-child > td:last-child,
|
||||
tbody:first-child tr:first-child > th:last-child {
|
||||
border-top-right-radius: @border-radius-base;
|
||||
}
|
||||
// For first th or td in the last row in the last thead or tbody
|
||||
// For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
|
||||
thead:last-child tr:last-child > th:first-child,
|
||||
tbody:last-child tr:last-child > td:first-child,
|
||||
tfoot:last-child tr:last-child > td:first-child {
|
||||
tbody:last-child tr:last-child > th:first-child,
|
||||
tfoot:last-child tr:last-child > td:first-child,
|
||||
tfoot:last-child tr:last-child > th:first-child {
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
}
|
||||
// For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
|
||||
thead:last-child tr:last-child > th:last-child,
|
||||
tbody:last-child tr:last-child > td:last-child,
|
||||
tfoot:last-child tr:last-child > td:last-child {
|
||||
tbody:last-child tr:last-child > th:last-child,
|
||||
tfoot:last-child tr:last-child > td:last-child,
|
||||
tfoot:last-child tr:last-child > th:last-child {
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
@ -159,8 +167,8 @@ table {
|
||||
// Placed here since it has to come after the potential zebra striping
|
||||
.table-hover {
|
||||
tbody {
|
||||
tr:hover td,
|
||||
tr:hover th {
|
||||
tr:hover > td,
|
||||
tr:hover > th {
|
||||
background-color: @table-background-hover;
|
||||
}
|
||||
}
|
||||
@ -184,32 +192,32 @@ table th[class*="span"] {
|
||||
// Exact selectors below required to override .table-striped
|
||||
|
||||
.table tbody tr {
|
||||
&.success td {
|
||||
&.success > td {
|
||||
background-color: @state-success-background;
|
||||
}
|
||||
&.error td {
|
||||
&.error > td {
|
||||
background-color: @state-error-background;
|
||||
}
|
||||
&.warning td {
|
||||
&.warning > td {
|
||||
background-color: @state-warning-background;
|
||||
}
|
||||
&.info td {
|
||||
&.info > td {
|
||||
background-color: @state-info-background;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover states for .table-hover
|
||||
.table-hover tbody tr {
|
||||
&.success:hover td {
|
||||
&.success:hover > td {
|
||||
background-color: darken(@state-success-background, 5%);
|
||||
}
|
||||
&.error:hover td {
|
||||
&.error:hover > td {
|
||||
background-color: darken(@state-error-background, 5%);
|
||||
}
|
||||
&.warning:hover td {
|
||||
&.warning:hover > td {
|
||||
background-color: darken(@state-warning-background, 5%);
|
||||
}
|
||||
&.info:hover td {
|
||||
&.info:hover > td {
|
||||
background-color: darken(@state-info-background, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
visibility: visible;
|
||||
padding: 5px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
.opacity(0);
|
||||
&.in { .opacity(100); }
|
||||
&.top { margin-top: -3px; }
|
||||
|
||||
@ -181,7 +181,9 @@ blockquote {
|
||||
border-left: 5px solid @grayLighter;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
#font > .shorthand(16px,300,@line-height-base * 1.25);
|
||||
font-size: @font-size-base * 1.25;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user