Skip to content

B
bootstrap
Commit be74ad7e authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge branch '3.0.0-wip' into bs3-normalize 

Conflicts:
	less/bootstrap.less
parents 28c928f0 8eb15498
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 963 additions and 2971 deletions
Makefile
View file @ be74ad7e
...@@ -16,7 +16,7 @@ build: ...@@ -16,7 +16,7 @@ build:
@jshint js/*.js --config js/.jshintrc @jshint js/*.js --config js/.jshintrc
@jshint js/tests/unit/*.js --config js/.jshintrc @jshint js/tests/unit/*.js --config js/.jshintrc
@echo "Running JSHint on javascript... ${CHECK} Done" @echo "Running JSHint on javascript... ${CHECK} Done"
@recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP} @./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP}
@echo "Compiling LESS with Recess... ${CHECK} Done" @echo "Compiling LESS with Recess... ${CHECK} Done"
@node docs/build @node docs/build
@cp fonts/* docs/assets/fonts/ @cp fonts/* docs/assets/fonts/
...@@ -24,8 +24,8 @@ build: ...@@ -24,8 +24,8 @@ build:
@cp js/tests/vendor/jquery.js docs/assets/js/ @cp js/tests/vendor/jquery.js docs/assets/js/
@echo "Compiling documentation... ${CHECK} Done" @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 @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
@uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.tmp.js @./node_modules/.bin/uglifyjs -nc docs/assets/js/bootstrap.js > docs/assets/js/bootstrap.min.tmp.js
@echo "/**\n* Bootstrap.js v3.0.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 @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
@cat docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js > docs/assets/js/bootstrap.min.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 @rm docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js
@echo "Compiling and minifying javascript... ${CHECK} Done" @echo "Compiling and minifying javascript... ${CHECK} Done"
...@@ -40,8 +40,8 @@ build: ...@@ -40,8 +40,8 @@ build:
# #
test: test:
jshint js/*.js --config js/.jshintrc ./node_modules/.bin/jshint js/*.js --config js/.jshintrc
jshint js/tests/unit/*.js --config js/.jshintrc ./node_modules/.bin/jshint js/tests/unit/*.js --config js/.jshintrc
node js/tests/server.js & node js/tests/server.js &
phantomjs js/tests/phantom.js "http://localhost:3000/js/tests" phantomjs js/tests/phantom.js "http://localhost:3000/js/tests"
kill -9 `cat js/tests/pid.txt` kill -9 `cat js/tests/pid.txt`
...@@ -64,10 +64,10 @@ bootstrap: ...@@ -64,10 +64,10 @@ bootstrap:
mkdir -p bootstrap/css mkdir -p bootstrap/css
mkdir -p bootstrap/js mkdir -p bootstrap/js
cp fonts/* bootstrap/fonts/ cp fonts/* bootstrap/fonts/
recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css ./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.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 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
uglifyjs bootstrap/js/bootstrap.js -nc > bootstrap/js/bootstrap.min.tmp.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 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 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 rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js
......
composer.json
View file @ be74ad7e
...@@ -5,6 +5,5 @@ ...@@ -5,6 +5,5 @@
, "homepage": "http://twitter.github.com/bootstrap/" , "homepage": "http://twitter.github.com/bootstrap/"
, "author": "Twitter Inc." , "author": "Twitter Inc."
, "license": "Apache-2.0" , "license": "Apache-2.0"
, "target-dir": "twitter/bootstrap"
} }
docs/assets/css/bootstrap-responsive.css deleted 100644 → 0
View file @ 28c928f0
This diff is collapsed.
docs/assets/css/bootstrap.css
View file @ be74ad7e
This diff is collapsed.
docs/assets/css/docs.css
View file @ be74ad7e
...@@ -83,7 +83,7 @@ hr.soften { ...@@ -83,7 +83,7 @@ hr.soften {
/* Base class /* Base class
------------------------- */ ------------------------- */
.jumbotron { .bs-docs-jumbotron {
position: relative; position: relative;
padding: 40px 0; padding: 40px 0;
color: #fff; color: #fff;
...@@ -101,13 +101,13 @@ hr.soften { ...@@ -101,13 +101,13 @@ hr.soften {
-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
} }
.jumbotron h1 { .bs-docs-jumbotron h1 {
font-size: 80px; font-size: 80px;
font-weight: bold; font-weight: bold;
letter-spacing: -1px; letter-spacing: -1px;
line-height: 1; line-height: 1;
} }
.jumbotron p { .bs-docs-jumbotron p {
font-size: 24px; font-size: 24px;
font-weight: 300; font-weight: 300;
line-height: 1.25; line-height: 1.25;
...@@ -115,14 +115,14 @@ hr.soften { ...@@ -115,14 +115,14 @@ hr.soften {
} }
/* Link styles (used on .masthead-links as well) */ /* Link styles (used on .masthead-links as well) */
.jumbotron a { .bs-docs-jumbotron a {
color: #fff; color: #fff;
color: rgba(255,255,255,.5); color: rgba(255,255,255,.5);
-webkit-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
} }
.jumbotron a:hover { .bs-docs-jumbotron a:hover {
color: #fff; color: #fff;
text-shadow: 0 0 10px rgba(255,255,255,.25); text-shadow: 0 0 10px rgba(255,255,255,.25);
} }
......
docs/assets/js/application.js
View file @ be74ad7e
...@@ -14,12 +14,14 @@ ...@@ -14,12 +14,14 @@
}) })
// side bar // side bar
$('.bs-docs-sidenav').affix({ setTimeout(function () {
offset: { $('.bs-docs-sidenav').affix({
top: function () { return $window.width() <= 980 ? 290 : 210 } offset: {
, bottom: 270 top: function () { return $window.width() <= 980 ? 290 : 210 }
} , bottom: 270
}) }
})
}, 100)
// make code pretty // make code pretty
window.prettyPrint && prettyPrint() window.prettyPrint && prettyPrint()
...@@ -34,7 +36,7 @@ ...@@ -34,7 +36,7 @@
// add tipsies to grid for scaffolding // add tipsies to grid for scaffolding
if ($('#gridSystem').length) { if ($('#gridSystem').length) {
$('#gridSystem').tooltip({ $('#gridSystem').tooltip({
selector: '.show-grid > div' selector: '.show-grid > div:not(.tooltip)'
, title: function () { return $(this).width() + 'px' } , title: function () { return $(this).width() + 'px' }
}) })
} }
......
docs/assets/js/bootstrap-carousel.js
View file @ be74ad7e
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
var Carousel = function (element, options) { var Carousel = function (element, options) {
this.$element = $(element) this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options this.options = options
this.options.pause == 'hover' && this.$element this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this)) .on('mouseenter', $.proxy(this.pause, this))
...@@ -44,13 +45,17 @@ ...@@ -44,13 +45,17 @@
return this return this
} }
, getActiveIndex: function () {
this.$active = this.$element.find('.item.active')
this.$items = this.$active.parent().children()
return this.$items.index(this.$active)
}
, to: function (pos) { , to: function (pos) {
var $active = this.$element.find('.item.active') var activeIndex = this.getActiveIndex()
, children = $active.parent().children()
, activePos = children.index($active)
, that = this , that = this
if (pos > (children.length - 1) || pos < 0) return if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) { if (this.sliding) {
return this.$element.one('slid', function () { return this.$element.one('slid', function () {
...@@ -58,11 +63,11 @@ ...@@ -58,11 +63,11 @@
}) })
} }
if (activePos == pos) { if (activeIndex == pos) {
return this.pause().cycle() return this.pause().cycle()
} }
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos])) return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
} }
, pause: function (e) { , pause: function (e) {
...@@ -107,6 +112,14 @@ ...@@ -107,6 +112,14 @@
if ($next.hasClass('active')) return if ($next.hasClass('active')) return
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active')
this.$element.one('slid', function () {
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
$nextIndicator && $nextIndicator.addClass('active')
})
}
if ($.support.transition && this.$element.hasClass('slide')) { if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e) this.$element.trigger(e)
if (e.isDefaultPrevented()) return if (e.isDefaultPrevented()) return
...@@ -151,7 +164,7 @@ ...@@ -151,7 +164,7 @@
if (!data) $this.data('carousel', (data = new Carousel(this, options))) if (!data) $this.data('carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option) if (typeof option == 'number') data.to(option)
else if (action) data[action]() else if (action) data[action]()
else if (options.interval) data.cycle() else if (options.interval) data.pause().cycle()
}) })
} }
......
docs/assets/js/bootstrap-collapse.js
View file @ be74ad7e
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
, actives , actives
, hasData , hasData
if (this.transitioning) return if (this.transitioning || this.$element.hasClass('in')) return
dimension = this.dimension() dimension = this.dimension()
scroll = $.camelCase(['scroll', dimension].join('-')) scroll = $.camelCase(['scroll', dimension].join('-'))
......
docs/assets/js/bootstrap-dropdown.js
View file @ be74ad7e
...@@ -115,8 +115,9 @@ ...@@ -115,8 +115,9 @@
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
} }
$parent = $(selector) $parent = selector && $(selector)
$parent.length || ($parent = $this.parent())
if (!$parent || !$parent.length) $parent = $this.parent()
return $parent return $parent
} }
......
docs/assets/js/bootstrap-modal.js
View file @ be74ad7e
...@@ -60,8 +60,7 @@ ...@@ -60,8 +60,7 @@
that.$element.appendTo(document.body) //don't move modals dom position that.$element.appendTo(document.body) //don't move modals dom position
} }
that.$element that.$element.show()
.show()
if (transition) { if (transition) {
that.$element[0].offsetWidth // force reflow that.$element[0].offsetWidth // force reflow
......
docs/assets/js/bootstrap-tooltip.js
View file @ be74ad7e
...@@ -97,7 +97,6 @@ ...@@ -97,7 +97,6 @@
, show: function () { , show: function () {
var $tip var $tip
, inside
, pos , pos
, actualWidth , actualWidth
, actualHeight , actualHeight
...@@ -116,19 +115,17 @@ ...@@ -116,19 +115,17 @@
this.options.placement.call(this, $tip[0], this.$element[0]) : this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement this.options.placement
inside = /in/.test(placement)
$tip $tip
.detach() .detach()
.css({ top: 0, left: 0, display: 'block' }) .css({ top: 0, left: 0, display: 'block' })
.insertAfter(this.$element) .insertAfter(this.$element)
pos = this.getPosition(inside) pos = this.getPosition()
actualWidth = $tip[0].offsetWidth actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight actualHeight = $tip[0].offsetHeight
switch (inside ? placement.split(' ')[1] : placement) { switch (placement) {
case 'bottom': case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break break
...@@ -193,11 +190,12 @@ ...@@ -193,11 +190,12 @@
return this.getTitle() return this.getTitle()
} }
, getPosition: function (inside) { , getPosition: function () {
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { var el = this.$element[0]
width: this.$element[0].offsetWidth return $.extend({}, el.getBoundingClientRect ? el.getBoundingClientRect() : {
, height: this.$element[0].offsetHeight width: el.offsetWidth
}) , height: el.offsetHeight
}, this.$element.offset())
} }
, getTitle: function () { , getTitle: function () {
......
docs/assets/js/bootstrap-typeahead.js
View file @ be74ad7e
...@@ -172,6 +172,7 @@ ...@@ -172,6 +172,7 @@
, listen: function () { , listen: function () {
this.$element this.$element
.on('focus', $.proxy(this.focus, this))
.on('blur', $.proxy(this.blur, this)) .on('blur', $.proxy(this.blur, this))
.on('keypress', $.proxy(this.keypress, this)) .on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this)) .on('keyup', $.proxy(this.keyup, this))
...@@ -183,6 +184,7 @@ ...@@ -183,6 +184,7 @@
this.$menu this.$menu
.on('click', $.proxy(this.click, this)) .on('click', $.proxy(this.click, this))
.on('mouseenter', 'li', $.proxy(this.mouseenter, this)) .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
} }
, eventSupported: function(eventName) { , eventSupported: function(eventName) {
...@@ -256,9 +258,13 @@ ...@@ -256,9 +258,13 @@
e.preventDefault() e.preventDefault()
} }
, focus: function (e) {
this.focused = true
}
, blur: function (e) { , blur: function (e) {
var that = this this.focused = false
setTimeout(function () { that.hide() }, 150) if (!this.mousedover && this.shown) this.hide()
} }
, click: function (e) { , click: function (e) {
...@@ -268,10 +274,16 @@ ...@@ -268,10 +274,16 @@
} }
, mouseenter: function (e) { , mouseenter: function (e) {
this.mousedover = true
this.$menu.find('.active').removeClass('active') this.$menu.find('.active').removeClass('active')
$(e.currentTarget).addClass('active') $(e.currentTarget).addClass('active')
} }
, mouseleave: function (e) {
this.mousedover = false
if (!this.focused && this.shown) this.hide()
}
} }
......
docs/assets/js/bootstrap.js
View file @ be74ad7e
...@@ -289,6 +289,7 @@ ...@@ -289,6 +289,7 @@
var Carousel = function (element, options) { var Carousel = function (element, options) {
this.$element = $(element) this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options this.options = options
this.options.pause == 'hover' && this.$element this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this)) .on('mouseenter', $.proxy(this.pause, this))
...@@ -305,13 +306,17 @@ ...@@ -305,13 +306,17 @@
return this return this
} }
, getActiveIndex: function () {
this.$active = this.$element.find('.item.active')
this.$items = this.$active.parent().children()
return this.$items.index(this.$active)
}
, to: function (pos) { , to: function (pos) {
var $active = this.$element.find('.item.active') var activeIndex = this.getActiveIndex()
, children = $active.parent().children()
, activePos = children.index($active)
, that = this , that = this
if (pos > (children.length - 1) || pos < 0) return if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) { if (this.sliding) {
return this.$element.one('slid', function () { return this.$element.one('slid', function () {
...@@ -319,11 +324,11 @@ ...@@ -319,11 +324,11 @@
}) })
} }
if (activePos == pos) { if (activeIndex == pos) {
return this.pause().cycle() return this.pause().cycle()
} }
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos])) return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
} }
, pause: function (e) { , pause: function (e) {
...@@ -368,6 +373,14 @@ ...@@ -368,6 +373,14 @@
if ($next.hasClass('active')) return if ($next.hasClass('active')) return
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active')
this.$element.one('slid', function () {
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
$nextIndicator && $nextIndicator.addClass('active')
})
}
if ($.support.transition && this.$element.hasClass('slide')) { if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e) this.$element.trigger(e)
if (e.isDefaultPrevented()) return if (e.isDefaultPrevented()) return
...@@ -412,7 +425,7 @@ ...@@ -412,7 +425,7 @@
if (!data) $this.data('carousel', (data = new Carousel(this, options))) if (!data) $this.data('carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option) if (typeof option == 'number') data.to(option)
else if (action) data[action]() else if (action) data[action]()
else if (options.interval) data.cycle() else if (options.interval) data.pause().cycle()
}) })
} }
...@@ -497,7 +510,7 @@ ...@@ -497,7 +510,7 @@
, actives , actives
, hasData , hasData
if (this.transitioning) return if (this.transitioning || this.$element.hasClass('in')) return
dimension = this.dimension() dimension = this.dimension()
scroll = $.camelCase(['scroll', dimension].join('-')) scroll = $.camelCase(['scroll', dimension].join('-'))
...@@ -726,8 +739,9 @@ ...@@ -726,8 +739,9 @@
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
} }
$parent = $(selector) $parent = selector && $(selector)
$parent.length || ($parent = $this.parent())
if (!$parent || !$parent.length) $parent = $this.parent()
return $parent return $parent
} }
...@@ -831,8 +845,7 @@ ...@@ -831,8 +845,7 @@
that.$element.appendTo(document.body) //don't move modals dom position that.$element.appendTo(document.body) //don't move modals dom position
} }
that.$element that.$element.show()
.show()
if (transition) { if (transition) {
that.$element[0].offsetWidth // force reflow that.$element[0].offsetWidth // force reflow
...@@ -1113,7 +1126,6 @@ ...@@ -1113,7 +1126,6 @@
, show: function () { , show: function () {
var $tip var $tip
, inside
, pos , pos
, actualWidth , actualWidth
, actualHeight , actualHeight
...@@ -1132,19 +1144,17 @@ ...@@ -1132,19 +1144,17 @@
this.options.placement.call(this, $tip[0], this.$element[0]) : this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement this.options.placement
inside = /in/.test(placement)
$tip $tip
.detach() .detach()
.css({ top: 0, left: 0, display: 'block' }) .css({ top: 0, left: 0, display: 'block' })
.insertAfter(this.$element) .insertAfter(this.$element)
pos = this.getPosition(inside) pos = this.getPosition()
actualWidth = $tip[0].offsetWidth actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight actualHeight = $tip[0].offsetHeight
switch (inside ? placement.split(' ')[1] : placement) { switch (placement) {
case 'bottom': case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break break
...@@ -1209,11 +1219,12 @@ ...@@ -1209,11 +1219,12 @@
return this.getTitle() return this.getTitle()
} }
, getPosition: function (inside) { , getPosition: function () {
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { var el = this.$element[0]
width: this.$element[0].offsetWidth return $.extend({}, el.getBoundingClientRect ? el.getBoundingClientRect() : {
, height: this.$element[0].offsetHeight width: el.offsetWidth
}) , height: el.offsetHeight
}, this.$element.offset())
} }
, getTitle: function () { , getTitle: function () {
...@@ -1892,6 +1903,7 @@ ...@@ -1892,6 +1903,7 @@
, listen: function () { , listen: function () {
this.$element this.$element
.on('focus', $.proxy(this.focus, this))
.on('blur', $.proxy(this.blur, this)) .on('blur', $.proxy(this.blur, this))
.on('keypress', $.proxy(this.keypress, this)) .on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this)) .on('keyup', $.proxy(this.keyup, this))
...@@ -1903,6 +1915,7 @@ ...@@ -1903,6 +1915,7 @@
this.$menu this.$menu
.on('click', $.proxy(this.click, this)) .on('click', $.proxy(this.click, this))
.on('mouseenter', 'li', $.proxy(this.mouseenter, this)) .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
} }
, eventSupported: function(eventName) { , eventSupported: function(eventName) {
...@@ -1976,9 +1989,13 @@ ...@@ -1976,9 +1989,13 @@
e.preventDefault() e.preventDefault()
} }
, focus: function (e) {
this.focused = true
}
, blur: function (e) { , blur: function (e) {
var that = this this.focused = false
setTimeout(function () { that.hide() }, 150) if (!this.mousedover && this.shown) this.hide()
} }
, click: function (e) { , click: function (e) {
...@@ -1988,10 +2005,16 @@ ...@@ -1988,10 +2005,16 @@
} }
, mouseenter: function (e) { , mouseenter: function (e) {
this.mousedover = true
this.$menu.find('.active').removeClass('active') this.$menu.find('.active').removeClass('active')
$(e.currentTarget).addClass('active') $(e.currentTarget).addClass('active')
} }
, mouseleave: function (e) {
this.mousedover = false
if (!this.focused && this.shown) this.hide()
}
} }
......
docs/assets/js/bootstrap.min.js
View file @ be74ad7e
This diff is collapsed.
docs/components.html
View file @ be74ad7e
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>Components</h1> <h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p> <p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li> <li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
<li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li> <li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
<li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li> <li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
<li><a href="#labels-badges"><i class="glyphicon-chevron-right"></i> Labels and badges</a></li> <li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li> <li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li> <li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li> <li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
...@@ -159,90 +159,6 @@ ...@@ -159,90 +159,6 @@
... ...
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
<h3>Sub menus on dropdowns</h3>
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
<div class="bs-docs-example bs-docs-example-submenus">
<div class="pull-left">
<p class="muted">Default</p>
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<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 class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="pull-left">
<p class="muted">Dropup</p>
<div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<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 class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="pull-left">
<p class="muted">Left submenu</p>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<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 class="dropdown-submenu pull-left">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
...
&lt;li class="dropdown-submenu"&gt;
&lt;a tabindex="-1" href="#"&gt;More options&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</section> </section>
...@@ -327,7 +243,7 @@ ...@@ -327,7 +243,7 @@
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p> <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
<h4>Dropdowns in button groups</h4> <h4>Dropdowns in button groups</h4>
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p> <p>Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
</section> </section>
...@@ -1511,73 +1427,13 @@ ...@@ -1511,73 +1427,13 @@
<!-- Labels and badges <!-- Badges
================================================== --> ================================================== -->
<section id="labels-badges"> <section id="badges">
<div class="page-header"> <div class="page-header">
<h1>Labels and badges</h1> <h1>Badges</h1>
</div> </div>
<h3>Labels</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Markup</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label">Default</span>
</td>
<td>
<code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-success">Success</span>
</td>
<td>
<code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-warning">Warning</span>
</td>
<td>
<code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-danger">Danger</span>
</td>
<td>
<code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-info">Info</span>
</td>
<td>
<code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-inverse">Inverse</span>
</td>
<td>
<code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
<h3>Badges</h3>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1657,7 +1513,7 @@ ...@@ -1657,7 +1513,7 @@
</table> </table>
<h3>Easily collapsible</h3> <h3>Easily collapsible</h3>
<p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p> <p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
</section> </section>
...@@ -1670,17 +1526,17 @@ ...@@ -1670,17 +1526,17 @@
<h1>Typographic components</h1> <h1>Typographic components</h1>
</div> </div>
<h2>Hero unit</h2> <h2>Jumbotron</h2>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p> <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="hero-unit"> <div class="jumbotron">
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p> <p><a class="btn btn-primary btn-large">Learn more</a></p>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="hero-unit"&gt; &lt;div class="jumbotron"&gt;
&lt;h1&gt;Heading&lt;/h1&gt; &lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Tagline&lt;/p&gt; &lt;p&gt;Tagline&lt;/p&gt;
&lt;p&gt; &lt;p&gt;
......
docs/css.html
View file @ be74ad7e
This diff is collapsed.
docs/customize.html
View file @ be74ad7e
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>Customize and download</h1> <h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p> <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
......
docs/examples/carousel.html
View file @ be74ad7e
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
.carousel .container { .carousel .container {
position: relative; position: relative;
z-index: 10; z-index: 9;
} }
.carousel-control { .carousel-control {
......
docs/extend.html
View file @ be74ad7e
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>Extending Bootstrap</h1> <h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p> <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
......
docs/gallery.html
View file @ be74ad7e
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>Gallery</h1> <h1>Gallery</h1>
<p class="lead">Showcase of sites using Bootstrap.</p> <p class="lead">Showcase of sites using Bootstrap.</p>
......
docs/getting-started.html
View file @ be74ad7e
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>Getting started</h1> <h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p> <p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
......
docs/index.html
View file @ be74ad7e
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="jumbotron masthead"> <div class="bs-docs-jumbotron masthead">
<div class="container"> <div class="container">
<h1>Bootstrap</h1> <h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p> <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
...@@ -83,9 +83,7 @@ ...@@ -83,9 +83,7 @@
<li> <li>
<a href="./extend.html" >Extend</a> <a href="./extend.html" >Extend</a>
</li> </li>
<li> <li>Version 3.0.0</li>
Version 3.0.0
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/javascript.html
View file @ be74ad7e
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>JavaScript</h1> <h1>JavaScript</h1>
<p class="lead">Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins. <p class="lead">Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.
...@@ -186,7 +186,7 @@ $('#myModal').on('show', function (e) { ...@@ -186,7 +186,7 @@ $('#myModal').on('show', function (e) {
<h3>Static example</h3> <h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p> <p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;"> <div class="bs-docs-example" style="background-color: #f5f5f5;">
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;"> <div class="modal" style="position: relative; top: auto; left: auto; right: auto; display: block; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Modal header</h3> <h3>Modal header</h3>
...@@ -201,7 +201,7 @@ $('#myModal').on('show', function (e) { ...@@ -201,7 +201,7 @@ $('#myModal').on('show', function (e) {
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="modal hide fade"&gt; &lt;div class="modal fade"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
&lt;h3&gt;Modal header&lt;/h3&gt; &lt;h3&gt;Modal header&lt;/h3&gt;
...@@ -219,7 +219,7 @@ $('#myModal').on('show', function (e) { ...@@ -219,7 +219,7 @@ $('#myModal').on('show', function (e) {
<h3>Live demo</h3> <h3>Live demo</h3>
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p> <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content --> <!-- sample modal content -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="myModalLabel">Modal Heading</h3> <h3 id="myModalLabel">Modal Heading</h3>
...@@ -258,7 +258,7 @@ $('#myModal').on('show', function (e) { ...@@ -258,7 +258,7 @@ $('#myModal').on('show', function (e) {
&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt; &lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
&lt!-- Modal --&gt; &lt!-- Modal --&gt;
&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt;
&lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt; &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
...@@ -1420,26 +1420,31 @@ $('#myCollapsible').on('hidden', function () { ...@@ -1420,26 +1420,31 @@ $('#myCollapsible').on('hidden', function () {
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p> <p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div id="myCarousel" class="carousel slide"> <div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="item active"> <div class="item active">
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""> <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>First slide label</h3> <h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""> <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>Second slide label</h3> <h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""> <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>Third slide label</h3> <h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -1683,6 +1688,7 @@ $('[data-spy="affix"]').each(function () { ...@@ -1683,6 +1688,7 @@ $('[data-spy="affix"]').each(function () {
</pre> </pre>
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
......
docs/templates/pages/components.mustache
View file @ be74ad7e
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>Components</h1> <h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p> <p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li> <li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
<li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li> <li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
<li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li> <li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
<li><a href="#labels-badges"><i class="glyphicon-chevron-right"></i> Labels and badges</a></li> <li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li> <li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li> <li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li> <li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
...@@ -91,90 +91,6 @@ ...@@ -91,90 +91,6 @@
... ...
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
<h3>Sub menus on dropdowns</h3>
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
<div class="bs-docs-example bs-docs-example-submenus">
<div class="pull-left">
<p class="muted">Default</p>
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<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 class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>{{! /.pull-left }}
<div class="pull-left">
<p class="muted">Dropup</p>
<div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<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 class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>{{! /.pull-left }}
<div class="pull-left">
<p class="muted">Left submenu</p>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<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 class="dropdown-submenu pull-left">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>{{! /.pull-left }}
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
...
&lt;li class="dropdown-submenu"&gt;
&lt;a tabindex="-1" href="#"&gt;More options&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</section> </section>
...@@ -259,7 +175,7 @@ ...@@ -259,7 +175,7 @@
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p> <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
<h4>Dropdowns in button groups</h4> <h4>Dropdowns in button groups</h4>
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p> <p>Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
</section> </section>
...@@ -1443,73 +1359,13 @@ ...@@ -1443,73 +1359,13 @@
<!-- Labels and badges <!-- Badges
================================================== --> ================================================== -->
<section id="labels-badges"> <section id="badges">
<div class="page-header"> <div class="page-header">
<h1>Labels and badges</h1> <h1>Badges</h1>
</div> </div>
<h3>Labels</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Markup</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label">Default</span>
</td>
<td>
<code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-success">Success</span>
</td>
<td>
<code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-warning">Warning</span>
</td>
<td>
<code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-danger">Danger</span>
</td>
<td>
<code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-info">Info</span>
</td>
<td>
<code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-inverse">Inverse</span>
</td>
<td>
<code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
<h3>Badges</h3>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1589,7 +1445,7 @@ ...@@ -1589,7 +1445,7 @@
</table> </table>
<h3>Easily collapsible</h3> <h3>Easily collapsible</h3>
<p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p> <p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
</section> </section>
...@@ -1602,17 +1458,17 @@ ...@@ -1602,17 +1458,17 @@
<h1>Typographic components</h1> <h1>Typographic components</h1>
</div> </div>
<h2>Hero unit</h2> <h2>Jumbotron</h2>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p> <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="hero-unit"> <div class="jumbotron">
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p> <p><a class="btn btn-primary btn-large">Learn more</a></p>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="hero-unit"&gt; &lt;div class="jumbotron"&gt;
&lt;h1&gt;Heading&lt;/h1&gt; &lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Tagline&lt;/p&gt; &lt;p&gt;Tagline&lt;/p&gt;
&lt;p&gt; &lt;p&gt;
......
docs/templates/pages/css.mustache
View file @ be74ad7e
This diff is collapsed.
docs/templates/pages/customize.mustache
View file @ be74ad7e
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>Customize and download</h1> <h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p> <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
......
docs/templates/pages/extend.mustache
View file @ be74ad7e
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>Extending Bootstrap</h1> <h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p> <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
......
docs/templates/pages/gallery.mustache
View file @ be74ad7e
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>Gallery</h1> <h1>Gallery</h1>
<p class="lead">Showcase of sites using Bootstrap.</p> <p class="lead">Showcase of sites using Bootstrap.</p>
......
docs/templates/pages/getting-started.mustache
View file @ be74ad7e
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>Getting started</h1> <h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p> <p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
......
docs/templates/pages/index.mustache
View file @ be74ad7e
<div class="jumbotron masthead"> <div class="bs-docs-jumbotron masthead">
<div class="container"> <div class="container">
<h1>Bootstrap</h1> <h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p> <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
...@@ -15,9 +15,7 @@ ...@@ -15,9 +15,7 @@
<li> <li>
<a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a> <a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a>
</li> </li>
<li> <li>Version 3.0.0</li>
Version 3.0.0
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/templates/pages/javascript.mustache
View file @ be74ad7e
<!-- Subhead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead"> <header class="bs-docs-jumbotron subhead">
<div class="container"> <div class="container">
<h1>JavaScript</h1> <h1>JavaScript</h1>
<p class="lead">Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins. <p class="lead">Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.
...@@ -119,7 +119,7 @@ $('#myModal').on('show', function (e) { ...@@ -119,7 +119,7 @@ $('#myModal').on('show', function (e) {
<h3>Static example</h3> <h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p> <p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;"> <div class="bs-docs-example" style="background-color: #f5f5f5;">
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;"> <div class="modal" style="position: relative; top: auto; left: auto; right: auto; display: block; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Modal header</h3> <h3>Modal header</h3>
...@@ -134,7 +134,7 @@ $('#myModal').on('show', function (e) { ...@@ -134,7 +134,7 @@ $('#myModal').on('show', function (e) {
</div> </div>
</div>{{! /example }} </div>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="modal hide fade"&gt; &lt;div class="modal fade"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
&lt;h3&gt;Modal header&lt;/h3&gt; &lt;h3&gt;Modal header&lt;/h3&gt;
...@@ -152,7 +152,7 @@ $('#myModal').on('show', function (e) { ...@@ -152,7 +152,7 @@ $('#myModal').on('show', function (e) {
<h3>Live demo</h3> <h3>Live demo</h3>
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p> <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content --> <!-- sample modal content -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="myModalLabel">Modal Heading</h3> <h3 id="myModalLabel">Modal Heading</h3>
...@@ -191,7 +191,7 @@ $('#myModal').on('show', function (e) { ...@@ -191,7 +191,7 @@ $('#myModal').on('show', function (e) {
&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt; &lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
&lt!-- Modal --&gt; &lt!-- Modal --&gt;
&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt;
&lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt; &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
...@@ -1353,26 +1353,31 @@ $('#myCollapsible').on('hidden', function () { ...@@ -1353,26 +1353,31 @@ $('#myCollapsible').on('hidden', function () {
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p> <p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div id="myCarousel" class="carousel slide"> <div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="item active"> <div class="item active">
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""> <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>First slide label</h3> <h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""> <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>Second slide label</h3> <h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""> <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>Third slide label</h3> <h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -1616,6 +1621,7 @@ $('[data-spy="affix"]').each(function () { ...@@ -1616,6 +1621,7 @@ $('[data-spy="affix"]').each(function () {
</pre> </pre>
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
......
js/bootstrap-carousel.js
View file @ be74ad7e
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
var Carousel = function (element, options) { var Carousel = function (element, options) {
this.$element = $(element) this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options this.options = options
this.options.pause == 'hover' && this.$element this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this)) .on('mouseenter', $.proxy(this.pause, this))
...@@ -44,13 +45,17 @@ ...@@ -44,13 +45,17 @@
return this return this
} }
, getActiveIndex: function () {
this.$active = this.$element.find('.item.active')
this.$items = this.$active.parent().children()
return this.$items.index(this.$active)
}
, to: function (pos) { , to: function (pos) {
var $active = this.$element.find('.item.active') var activeIndex = this.getActiveIndex()
, children = $active.parent().children()
, activePos = children.index($active)
, that = this , that = this
if (pos > (children.length - 1) || pos < 0) return if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) { if (this.sliding) {
return this.$element.one('slid', function () { return this.$element.one('slid', function () {
...@@ -58,11 +63,11 @@ ...@@ -58,11 +63,11 @@
}) })
} }
if (activePos == pos) { if (activeIndex == pos) {
return this.pause().cycle() return this.pause().cycle()
} }
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos])) return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
} }
, pause: function (e) { , pause: function (e) {
...@@ -107,6 +112,14 @@ ...@@ -107,6 +112,14 @@
if ($next.hasClass('active')) return if ($next.hasClass('active')) return
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active')
this.$element.one('slid', function () {
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
$nextIndicator && $nextIndicator.addClass('active')
})
}
if ($.support.transition && this.$element.hasClass('slide')) { if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e) this.$element.trigger(e)
if (e.isDefaultPrevented()) return if (e.isDefaultPrevented()) return
...@@ -151,7 +164,7 @@ ...@@ -151,7 +164,7 @@
if (!data) $this.data('carousel', (data = new Carousel(this, options))) if (!data) $this.data('carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option) if (typeof option == 'number') data.to(option)
else if (action) data[action]() else if (action) data[action]()
else if (options.interval) data.cycle() else if (options.interval) data.pause().cycle()
}) })
} }
......
js/bootstrap-collapse.js
View file @ be74ad7e
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
, actives , actives
, hasData , hasData
if (this.transitioning) return if (this.transitioning || this.$element.hasClass('in')) return
dimension = this.dimension() dimension = this.dimension()
scroll = $.camelCase(['scroll', dimension].join('-')) scroll = $.camelCase(['scroll', dimension].join('-'))
......
js/bootstrap-dropdown.js
View file @ be74ad7e
...@@ -115,8 +115,9 @@ ...@@ -115,8 +115,9 @@
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
} }
$parent = $(selector) $parent = selector && $(selector)
$parent.length || ($parent = $this.parent())
if (!$parent || !$parent.length) $parent = $this.parent()
return $parent return $parent
} }
......
js/bootstrap-modal.js
View file @ be74ad7e
...@@ -60,8 +60,7 @@ ...@@ -60,8 +60,7 @@
that.$element.appendTo(document.body) //don't move modals dom position that.$element.appendTo(document.body) //don't move modals dom position
} }
that.$element that.$element.show()
.show()
if (transition) { if (transition) {
that.$element[0].offsetWidth // force reflow that.$element[0].offsetWidth // force reflow
......
js/bootstrap-tooltip.js
View file @ be74ad7e
...@@ -97,7 +97,6 @@ ...@@ -97,7 +97,6 @@
, show: function () { , show: function () {
var $tip var $tip
, inside
, pos , pos
, actualWidth , actualWidth
, actualHeight , actualHeight
...@@ -116,19 +115,17 @@ ...@@ -116,19 +115,17 @@
this.options.placement.call(this, $tip[0], this.$element[0]) : this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement this.options.placement
inside = /in/.test(placement)
$tip $tip
.detach() .detach()
.css({ top: 0, left: 0, display: 'block' }) .css({ top: 0, left: 0, display: 'block' })
.insertAfter(this.$element) .insertAfter(this.$element)
pos = this.getPosition(inside) pos = this.getPosition()
actualWidth = $tip[0].offsetWidth actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight actualHeight = $tip[0].offsetHeight
switch (inside ? placement.split(' ')[1] : placement) { switch (placement) {
case 'bottom': case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break break
...@@ -193,11 +190,12 @@ ...@@ -193,11 +190,12 @@
return this.getTitle() return this.getTitle()
} }
, getPosition: function (inside) { , getPosition: function () {
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { var el = this.$element[0]
width: this.$element[0].offsetWidth return $.extend({}, el.getBoundingClientRect ? el.getBoundingClientRect() : {
, height: this.$element[0].offsetHeight width: el.offsetWidth
}) , height: el.offsetHeight
}, this.$element.offset())
} }
, getTitle: function () { , getTitle: function () {
......
js/bootstrap-typeahead.js
View file @ be74ad7e
...@@ -172,6 +172,7 @@ ...@@ -172,6 +172,7 @@
, listen: function () { , listen: function () {
this.$element this.$element
.on('focus', $.proxy(this.focus, this))
.on('blur', $.proxy(this.blur, this)) .on('blur', $.proxy(this.blur, this))
.on('keypress', $.proxy(this.keypress, this)) .on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this)) .on('keyup', $.proxy(this.keyup, this))
...@@ -183,6 +184,7 @@ ...@@ -183,6 +184,7 @@
this.$menu this.$menu
.on('click', $.proxy(this.click, this)) .on('click', $.proxy(this.click, this))
.on('mouseenter', 'li', $.proxy(this.mouseenter, this)) .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
} }
, eventSupported: function(eventName) { , eventSupported: function(eventName) {
...@@ -256,9 +258,13 @@ ...@@ -256,9 +258,13 @@
e.preventDefault() e.preventDefault()
} }
, focus: function (e) {
this.focused = true
}
, blur: function (e) { , blur: function (e) {
var that = this this.focused = false
setTimeout(function () { that.hide() }, 150) if (!this.mousedover && this.shown) this.hide()
} }
, click: function (e) { , click: function (e) {
...@@ -268,10 +274,16 @@ ...@@ -268,10 +274,16 @@
} }
, mouseenter: function (e) { , mouseenter: function (e) {
this.mousedover = true
this.$menu.find('.active').removeClass('active') this.$menu.find('.active').removeClass('active')
$(e.currentTarget).addClass('active') $(e.currentTarget).addClass('active')
} }
, mouseleave: function (e) {
this.mousedover = false
if (!this.focused && this.shown) this.hide()
}
} }
......
less/labels-badges.less → less/badges.less
View file @ be74ad7e
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
// Base classes // Base classes
.label,
.badge { .badge {
display: inline-block; display: inline-block;
padding: 2px 4px; padding: 2px 4px;
...@@ -16,29 +15,17 @@ ...@@ -16,29 +15,17 @@
white-space: nowrap; white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @grayLight; background-color: @grayLight;
}
// Set unique padding and border-radii
.label {
border-radius: 3px; border-radius: 3px;
}
.badge {
padding-left: 9px;
padding-right: 9px;
border-radius: 9px;
}
// Empty labels/badges collapse // Empty labels/badges collapse
.label,
.badge {
&:empty { &:empty {
display: none; display: none;
} }
} }
// Hover state, but only for links // Hover state, but only for links
a { a.badge {
&.label:hover, &:hover {
&.badge:hover {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -47,7 +34,6 @@ a { ...@@ -47,7 +34,6 @@ a {
// Colors // Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.label,
.badge { .badge {
// Important (red) // Important (red)
&-danger { background-color: @state-error-text; } &-danger { background-color: @state-error-text; }
...@@ -68,14 +54,12 @@ a { ...@@ -68,14 +54,12 @@ a {
// Quick fix for labels/badges in buttons // Quick fix for labels/badges in buttons
.btn { .btn {
.label,
.badge { .badge {
position: relative; position: relative;
top: -1px; top: -1px;
} }
} }
.btn-mini { .btn-mini {
.label,
.badge { .badge {
top: 0; top: 0;
} }
......
less/bootstrap.less
View file @ be74ad7e
...@@ -52,11 +52,11 @@ ...@@ -52,11 +52,11 @@
// Components: Misc // Components: Misc
@import "thumbnails.less"; @import "thumbnails.less";
@import "media.less"; @import "media.less";
@import "labels-badges.less"; @import "badges.less";
@import "progress-bars.less"; @import "progress-bars.less";
@import "accordion.less"; @import "accordion.less";
@import "carousel.less"; @import "carousel.less";
@import "hero-unit.less"; @import "jumbotron.less";
// Utility classes // Utility classes
@import "utilities.less"; // Has to be last to override when necessary @import "utilities.less"; // Has to be last to override when necessary
......
less/button-groups.less
View file @ be74ad7e
...@@ -126,22 +126,16 @@ ...@@ -126,22 +126,16 @@
background-color: @btn-background-highlight; background-color: @btn-background-highlight;
} }
.btn-primary.dropdown-toggle { .btn-primary.dropdown-toggle {
background-color: @btn-backround-primary-highlight; background-color: @btn-background-primary-highlight;
} }
.btn-warning.dropdown-toggle { .btn-warning.dropdown-toggle {
background-color: @btn-backround-warning-highlight; background-color: @btn-background-warning-highlight;
} }
.btn-danger.dropdown-toggle { .btn-danger.dropdown-toggle {
background-color: @btn-backround-danger-highlight; background-color: @btn-background-danger-highlight;
} }
.btn-success.dropdown-toggle { .btn-success.dropdown-toggle {
background-color: @btn-backround-success-highlight; background-color: @btn-background-success-highlight;
}
.btn-info.dropdown-toggle {
background-color: @btn-backround-info-highlight;
}
.btn-inverse.dropdown-toggle {
background-color: @btn-backround-inverse-highlight;
} }
} }
...@@ -152,8 +146,6 @@ ...@@ -152,8 +146,6 @@
margin-left: 0; margin-left: 0;
} }
// Carets in other button sizes // Carets in other button sizes
.btn-mini .caret,
.btn-small .caret,
.btn-large .caret { .btn-large .caret {
margin-top: 6px; margin-top: 6px;
} }
...@@ -162,6 +154,10 @@ ...@@ -162,6 +154,10 @@
border-right-width: 5px; border-right-width: 5px;
border-top-width: 5px; border-top-width: 5px;
} }
.btn-mini .caret,
.btn-small .caret {
margin-top: 8px;
}
// Upside down carets for .dropup // Upside down carets for .dropup
.dropup .btn-large .caret { .dropup .btn-large .caret {
border-bottom-width: 5px; border-bottom-width: 5px;
......
less/buttons.less
View file @ be74ad7e
This diff is collapsed.
less/carousel.less
View file @ be74ad7e
...@@ -119,6 +119,31 @@ ...@@ -119,6 +119,31 @@
} }
} }
// Carousel indicator pips
// -----------------------------
.carousel-indicators {
position: absolute;
top: 15px;
right: 15px;
z-index: 5;
margin: 0;
list-style: none;
li {
display: block;
float: left;
width: 10px;
height: 10px;
margin-left: 5px;
text-indent: -999px;
background-color: #ccc;
background-color: rgba(255,255,255,.25);
border-radius: 5px;
}
.active {
background-color: #fff;
}
}
// Caption for text below images // Caption for text below images
......
less/close.less
View file @ be74ad7e
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: @line-height-base; line-height: @line-height-base;
color: @black; color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,1); text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20); .opacity(20);
&:hover { &:hover {
color: @black; color: #000;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
.opacity(40); .opacity(40);
......
less/dropdowns.less
View file @ be74ad7e
This diff is collapsed.
less/forms.less
View file @ be74ad7e
This diff is collapsed.
less/grid.less
View file @ be74ad7e
...@@ -13,10 +13,6 @@ ...@@ -13,10 +13,6 @@
#grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width); #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
// Reset utility classes due to specificity // Reset utility classes due to specificity
[class*="span"].hide {
display: none;
}
[class*="span"].pull-right { [class*="span"].pull-right {
float: right; float: right;
} }
less/hero-unit.less → less/jumbotron.less
View file @ be74ad7e
// //
// Hero unit // Jumbotron
// -------------------------------------------------- // --------------------------------------------------
.hero-unit { .jumbotron {
padding: 60px; padding: 60px;
margin-bottom: 30px; margin-bottom: 30px;
font-size: 18px; font-size: 18px;
font-weight: 200; font-weight: 200;
line-height: @line-height-base * 1.5; line-height: @line-height-base * 1.5;
color: @hero-lead-color; color: @jumbotron-lead-color;
background-color: @hero-background; background-color: @jumbotron-background;
border-radius: 6px; border-radius: 6px;
h1 { h1 {
margin-bottom: 0; margin-bottom: 0;
font-size: 60px; font-size: 60px;
line-height: 1; line-height: 1;
color: @hero-heading-color; color: @jumbotron-heading-color;
letter-spacing: -1px; letter-spacing: -1px;
} }
li { li {
......
less/media.less
View file @ be74ad7e
...@@ -36,10 +36,10 @@ ...@@ -36,10 +36,10 @@
// Media image alignment // Media image alignment
// ------------------------- // -------------------------
.media .pull-left { .media > .pull-left {
margin-right: 10px; margin-right: 10px;
} }
.media .pull-right { .media > .pull-right {
margin-left: 10px; margin-left: 10px;
} }
......
less/mixins.less
View file @ be74ad7e
This diff is collapsed.
less/modals.less
View file @ be74ad7e
This diff is collapsed.
less/navbar.less
View file @ be74ad7e
This diff is collapsed.
less/responsive-utilities.less
View file @ be74ad7e
This diff is collapsed.
less/utilities.less
View file @ be74ad7e
This diff is collapsed.
less/variables.less
View file @ be74ad7e
This diff is collapsed.
package.json
View file @ be74ad7e
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment