mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-19 06:18:22 +01:00
Merge branch '3.0.0-wip' into bs3-normalize
Conflicts: less/bootstrap.less
This commit is contained in:
Mark Otto
commit
be74ad7e0d
16
Makefile
16
Makefile
@ -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:
|
|||||||
@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:
|
|||||||
#
|
#
|
||||||
|
|
||||||
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:
|
|||||||
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
|
||||||
|
|||||||
@ -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"
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
1092
docs/assets/css/bootstrap-responsive.css
vendored
1092
docs/assets/css/bootstrap-responsive.css
vendored
File diff suppressed because it is too large
Load Diff
809
docs/assets/css/bootstrap.css
vendored
809
docs/assets/css/bootstrap.css
vendored
File diff suppressed because it is too large
Load Diff
@ -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 {
|
|||||||
-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 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 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);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 @@
|
|||||||
// 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' }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
27
docs/assets/js/bootstrap-carousel.js
vendored
27
docs/assets/js/bootstrap-carousel.js
vendored
@ -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 @@
|
|||||||
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 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
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 @@
|
|||||||
|
|
||||||
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 @@
|
|||||||
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()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
2
docs/assets/js/bootstrap-collapse.js
vendored
2
docs/assets/js/bootstrap-collapse.js
vendored
@ -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('-'))
|
||||||
|
|||||||
5
docs/assets/js/bootstrap-dropdown.js
vendored
5
docs/assets/js/bootstrap-dropdown.js
vendored
@ -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
|
||||||
}
|
}
|
||||||
|
|||||||
3
docs/assets/js/bootstrap-modal.js
vendored
3
docs/assets/js/bootstrap-modal.js
vendored
@ -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
|
||||||
|
|||||||
18
docs/assets/js/bootstrap-tooltip.js
vendored
18
docs/assets/js/bootstrap-tooltip.js
vendored
@ -97,7 +97,6 @@
|
|||||||
|
|
||||||
, show: function () {
|
, show: function () {
|
||||||
var $tip
|
var $tip
|
||||||
, inside
|
|
||||||
, pos
|
, pos
|
||||||
, actualWidth
|
, actualWidth
|
||||||
, actualHeight
|
, actualHeight
|
||||||
@ -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 @@
|
|||||||
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 () {
|
||||||
|
|||||||
16
docs/assets/js/bootstrap-typeahead.js
vendored
16
docs/assets/js/bootstrap-typeahead.js
vendored
@ -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 @@
|
|||||||
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 @@
|
|||||||
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 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
, 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()
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
71
docs/assets/js/bootstrap.js
vendored
71
docs/assets/js/bootstrap.js
vendored
@ -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 @@
|
|||||||
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 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
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 @@
|
|||||||
|
|
||||||
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 @@
|
|||||||
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 @@
|
|||||||
, 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 @@
|
|||||||
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 @@
|
|||||||
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 @@
|
|||||||
|
|
||||||
, show: function () {
|
, show: function () {
|
||||||
var $tip
|
var $tip
|
||||||
, inside
|
|
||||||
, pos
|
, pos
|
||||||
, actualWidth
|
, actualWidth
|
||||||
, actualHeight
|
, actualHeight
|
||||||
@ -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 @@
|
|||||||
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 @@
|
|||||||
|
|
||||||
, 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 @@
|
|||||||
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 @@
|
|||||||
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 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
, 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()
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
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
@ -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 @@
|
|||||||
<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 @@
|
|||||||
...
|
...
|
||||||
</ul>
|
</ul>
|
||||||
</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">
|
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
|
||||||
...
|
|
||||||
<li class="dropdown-submenu">
|
|
||||||
<a tabindex="-1" href="#">More options</a>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
...
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -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 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 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><span class="label">Default</span></code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span class="label label-success">Success</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code><span class="label label-success">Success</span></code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span class="label label-warning">Warning</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code><span class="label label-warning">Warning</span></code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span class="label label-danger">Danger</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code><span class="label label-danger">Danger</span></code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span class="label label-info">Info</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code><span class="label label-info">Info</span></code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span class="label label-inverse">Inverse</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code><span class="label label-inverse">Inverse</span></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 @@
|
|||||||
</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 @@
|
|||||||
<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">
|
||||||
<div class="hero-unit">
|
<div class="jumbotron">
|
||||||
<h1>Heading</h1>
|
<h1>Heading</h1>
|
||||||
<p>Tagline</p>
|
<p>Tagline</p>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
381
docs/css.html
381
docs/css.html
@ -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>CSS</h1>
|
<h1>CSS</h1>
|
||||||
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
|
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
|
||||||
@ -303,7 +303,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint"><em>rendered as italicized text</em></pre>
|
<pre class="prettyprint"><em>rendered as italicized text</em></pre>
|
||||||
|
|
||||||
<p><span class="label label-info">Heads up!</span> Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||||
|
|
||||||
<h3>Emphasis classes</h3>
|
<h3>Emphasis classes</h3>
|
||||||
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
|
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
|
||||||
@ -567,8 +567,8 @@
|
|||||||
<dd>...</dd>
|
<dd>...</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</pre>
|
</pre>
|
||||||
|
<h5>Auto-truncating</h5>
|
||||||
<p>
|
<p>
|
||||||
<span class="label label-info">Heads up!</span>
|
|
||||||
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
|
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@ -588,7 +588,7 @@
|
|||||||
For example, <code><section></code> should be wrapped as inline.
|
For example, <code><section></code> should be wrapped as inline.
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
For example, <code><section></code> should be wrapped as inline.
|
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h2>Basic block</h2>
|
<h2>Basic block</h2>
|
||||||
@ -601,7 +601,6 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
&lt;p&gt;Sample text here...&lt;/p&gt;
|
&lt;p&gt;Sample text here...&lt;/p&gt;
|
||||||
</pre>
|
</pre>
|
||||||
</pre>
|
</pre>
|
||||||
<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
|
|
||||||
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
|
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -1060,20 +1059,7 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
|
|
||||||
|
|
||||||
<h2 id="forms-layouts">Optional layouts</h2>
|
<h2 id="forms-layouts">Optional layouts</h2>
|
||||||
<p>Included with Bootstrap are three optional form layouts for common use cases.</p>
|
<p>Included with Bootstrap are optional form layouts for common use cases.</p>
|
||||||
|
|
||||||
<h3>Search form</h3>
|
|
||||||
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code><input></code> for an extra-rounded text input.</p>
|
|
||||||
<form class="bs-docs-example form-search">
|
|
||||||
<input type="text" class="span3 search-query">
|
|
||||||
<button type="submit" class="btn">Search</button>
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<form class="form-search">
|
|
||||||
<input type="text" class="span3 search-query">
|
|
||||||
<button type="submit" class="btn">Search</button>
|
|
||||||
</form>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3>Inline form</h3>
|
<h3>Inline form</h3>
|
||||||
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
|
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
|
||||||
@ -1119,13 +1105,15 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<label class="control-label" for="inputPassword">Password</label>
|
<label class="control-label" for="inputPassword">Password</label>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<input type="password" id="inputPassword" placeholder="Password">
|
<input type="password" id="inputPassword" placeholder="Password">
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<label class="checkbox">
|
|
||||||
<input type="checkbox"> Remember me
|
|
||||||
</label>
|
|
||||||
<button type="submit" class="btn">Sign in</button>
|
<button type="submit" class="btn">Sign in</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1146,9 +1134,11 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
</div>
|
</div>
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<label class="checkbox">
|
<div class="checkbox">
|
||||||
<input type="checkbox"> Remember me
|
<label>
|
||||||
</label>
|
<input type="checkbox"> Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
<button type="submit" class="btn">Sign in</button>
|
<button type="submit" class="btn">Sign in</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1296,85 +1286,82 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<h2 id="forms-extending">Extending form controls</h2>
|
<h2 id="forms-extending">Extending form controls</h2>
|
||||||
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
||||||
|
|
||||||
<h3>Prepended and appended inputs</h3>
|
<h3>Input groups</h3>
|
||||||
<p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p>
|
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p>
|
||||||
|
<p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p>
|
||||||
<h4>Default options</h4>
|
|
||||||
<p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
|
|
||||||
<form class="bs-docs-example">
|
<form class="bs-docs-example">
|
||||||
<div class="input-prepend">
|
<div class="input-group span9">
|
||||||
<span class="add-on">@</span>
|
<span class="input-group-addon">@</span>
|
||||||
<input id="prependedInput" type="text" placeholder="Username">
|
<input type="text" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<div class="input-append">
|
<div class="input-group span6">
|
||||||
<input id="appendedInput" type="text">
|
<input type="text">
|
||||||
<span class="add-on">.00</span>
|
<span class="input-group-addon">.00</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-group span3">
|
||||||
|
<span class="input-group-addon">$</span>
|
||||||
|
<input type="text">
|
||||||
|
<span class="input-group-addon">.00</span>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="input-prepend">
|
<div class="input-group span9">
|
||||||
<span class="add-on">@</span>
|
<span class="input-group-addon">@</span>
|
||||||
<input id="prependedInput" type="text" placeholder="Username">
|
<input type="text" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-append">
|
|
||||||
<input id="appendedInput" type="text">
|
|
||||||
<span class="add-on">.00</span>
|
|
||||||
</div>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h4>Combined</h4>
|
<div class="input-group span6">
|
||||||
<p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
|
<input type="text">
|
||||||
<form class="bs-docs-example form-inline">
|
<span class="input-group-addon">.00</span>
|
||||||
<div class="input-prepend input-append">
|
</div>
|
||||||
<span class="add-on">$</span>
|
|
||||||
<input id="appendedPrependedInput" type="text">
|
<div class="input-group span3">
|
||||||
<span class="add-on">.00</span>
|
<span class="input-group-addon">$</span>
|
||||||
</div>
|
<input type="text">
|
||||||
</form>
|
<span class="input-group-addon">.00</span>
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<div class="input-prepend input-append">
|
|
||||||
<span class="add-on">$</span>
|
|
||||||
<input id="appendedPrependedInput" type="text">
|
|
||||||
<span class="add-on">.00</span>
|
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h4>Buttons instead of text</h4>
|
<h4>Buttons instead of text</h4>
|
||||||
<p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
|
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
||||||
<form class="bs-docs-example">
|
<form class="bs-docs-example">
|
||||||
<div class="input-append">
|
<div class="input-group span7">
|
||||||
<input class="span3" id="appendedInputButton" type="text">
|
<span class="input-group-btn">
|
||||||
<button class="btn" type="button">Go!</button>
|
<button class="btn" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
|
<input type="text">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-group span7">
|
||||||
|
<input type="text">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button class="btn" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="input-append">
|
<div class="input-group span7">
|
||||||
<input class="span3" id="appendedInputButton" type="text">
|
<span class="input-group-btn">
|
||||||
<button class="btn" type="button">Go!</button>
|
<button class="btn" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
|
<input type="text">
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
|
||||||
<form class="bs-docs-example">
|
<div class="input-group span7">
|
||||||
<div class="input-append">
|
<input type="text">
|
||||||
<input class="span3" id="appendedInputButtons" type="text">
|
<span class="input-group-btn">
|
||||||
<button class="btn" type="button">Search</button>
|
<button class="btn" type="button">Go!</button>
|
||||||
<button class="btn" type="button">Options</button>
|
</span>
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<div class="input-append">
|
|
||||||
<input class="span3" id="appendedInputButton" type="text">
|
|
||||||
<button class="btn" type="button">Search</button>
|
|
||||||
<button class="btn" type="button">Options</button>
|
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h4>Button dropdowns</h4>
|
<h4>Button dropdowns</h4>
|
||||||
<p></p>
|
<p></p>
|
||||||
<form class="bs-docs-example">
|
<form class="bs-docs-example">
|
||||||
<div class="input-append">
|
<div class="input-group span7">
|
||||||
<input class="span3" id="appendedDropdownButton" type="text">
|
<div class="input-group-btn btn-group">
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Action</a></li>
|
<li><a href="#">Action</a></li>
|
||||||
@ -1384,13 +1371,26 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<li><a href="#">Separated link</a></li>
|
<li><a href="#">Separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div><!-- /btn-group -->
|
</div><!-- /btn-group -->
|
||||||
</div><!-- /input-append -->
|
<input type="text">
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
<br>
|
||||||
|
<div class="input-group span7">
|
||||||
|
<input type="text">
|
||||||
|
<div class="input-group-btn btn-group">
|
||||||
|
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||||
|
<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><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div><!-- /input-group -->
|
||||||
</form>
|
</form>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="input-append">
|
<div class="input-group span7">
|
||||||
<input id="appendedInputButtons" type="text">
|
<div class="input-group-btn btn-group">
|
||||||
<input class="span3" id="appendedDropdownButton" type="text">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||||
Action
|
Action
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
@ -1399,77 +1399,12 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
...
|
...
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<input type="text">
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
|
||||||
|
|
||||||
<form class="bs-docs-example">
|
<div class="input-group span7">
|
||||||
<div class="input-prepend">
|
<input type="text">
|
||||||
<div class="btn-group">
|
<div class="input-group-btn btn-group">
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
|
||||||
<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><a href="#">Separated link</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
<input class="span2" id="prependedDropdownButton" type="text">
|
|
||||||
</div><!-- /input-prepend -->
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<div class="input-prepend">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
|
||||||
Action
|
|
||||||
<span class="caret"></span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
...
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<input class="span2" id="prependedDropdownButton" type="text">
|
|
||||||
</div>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<form class="bs-docs-example">
|
|
||||||
<div class="input-prepend input-append">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
|
||||||
<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><a href="#">Separated link</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
|
||||||
<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><a href="#">Separated link</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
</div><!-- /input-prepend input-append -->
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<div class="input-prepend input-append">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
|
||||||
Action
|
|
||||||
<span class="caret"></span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
...
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||||
Action
|
Action
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
@ -1483,8 +1418,8 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
|
|
||||||
<h4>Segmented dropdown groups</h4>
|
<h4>Segmented dropdown groups</h4>
|
||||||
<form class="bs-docs-example">
|
<form class="bs-docs-example">
|
||||||
<div class="input-prepend">
|
<div class="input-group span7">
|
||||||
<div class="btn-group">
|
<div class="input-group-btn btn-group">
|
||||||
<button class="btn" tabindex="-1">Action</button>
|
<button class="btn" tabindex="-1">Action</button>
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
@ -1499,58 +1434,35 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
</div>
|
</div>
|
||||||
<input type="text" class="span3">
|
<input type="text" class="span3">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-append">
|
|
||||||
<input type="text" class="span3">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn" tabindex="-1">Action</button>
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
|
||||||
<span class="caret"></span>
|
|
||||||
</button>
|
|
||||||
<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><a href="#">Separated link</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<form>
|
|
||||||
<div class="input-prepend">
|
|
||||||
<div class="btn-group">...</div>
|
|
||||||
<input type="text" class="span3">
|
|
||||||
</div>
|
|
||||||
<div class="input-append">
|
|
||||||
<input type="text" class="span3">
|
|
||||||
<div class="btn-group">...</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h4>Search form</h4>
|
<br>
|
||||||
<form class="bs-docs-example form-search">
|
|
||||||
<div class="input-append">
|
<div class="input-group span7">
|
||||||
<input type="text" class="search-query span3">
|
<input type="text">
|
||||||
<button type="submit" class="btn">Search</button>
|
<div class="input-group-btn btn-group">
|
||||||
</div>
|
<button class="btn" tabindex="-1">Action</button>
|
||||||
<div class="input-prepend">
|
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||||
<button type="submit" class="btn">Search</button>
|
<span class="caret"></span>
|
||||||
<input type="text" class="search-query span3">
|
</button>
|
||||||
|
<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><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<form class="form-search">
|
<div class="input-prepend">
|
||||||
<div class="input-append">
|
<div class="btn-group">...</div>
|
||||||
<input type="text" class="search-query span3">
|
<input type="text" class="span3">
|
||||||
<button type="submit" class="btn">Search</button>
|
</div>
|
||||||
</div>
|
<div class="input-append">
|
||||||
<div class="input-prepend">
|
<input type="text" class="span3">
|
||||||
<button type="submit" class="btn">Search</button>
|
<div class="btn-group">...</div>
|
||||||
<input type="text" class="search-query span3">
|
</div>
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h3 id="forms-extending-sizes">Control sizing</h3>
|
<h3 id="forms-extending-sizes">Control sizing</h3>
|
||||||
@ -1735,6 +1647,43 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
</form>
|
</form>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3>Disabled fieldsets</h3>
|
||||||
|
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<fieldset disabled>
|
||||||
|
<div>
|
||||||
|
<input type="text" class="span4" placeholder="Disabled input">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<select class="span4">
|
||||||
|
<option>Disabled select</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Can't check this
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<form class="form-inline">
|
||||||
|
<fieldset disabled>
|
||||||
|
<input type="text" class="span4" placeholder="Disabled input">
|
||||||
|
<select class="span4">
|
||||||
|
<option>Disabled select</option>
|
||||||
|
</select>
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Can't check this
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h3>Validation states</h3>
|
<h3>Validation states</h3>
|
||||||
@ -1817,7 +1766,7 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><button type="button" class="btn">Default</button></td>
|
<td><button type="button" class="btn btn-default">Default</button></td>
|
||||||
<td><code>btn</code></td>
|
<td><code>btn</code></td>
|
||||||
<td>Standard gray button with gradient</td>
|
<td>Standard gray button with gradient</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -1826,11 +1775,6 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<td><code>btn btn-primary</code></td>
|
<td><code>btn btn-primary</code></td>
|
||||||
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
|
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td><button type="button" class="btn btn-info">Info</button></td>
|
|
||||||
<td><code>btn btn-info</code></td>
|
|
||||||
<td>Used as an alternative to the default styles</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><button type="button" class="btn btn-success">Success</button></td>
|
<td><button type="button" class="btn btn-success">Success</button></td>
|
||||||
<td><code>btn btn-success</code></td>
|
<td><code>btn btn-success</code></td>
|
||||||
@ -1846,11 +1790,6 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<td><code>btn btn-danger</code></td>
|
<td><code>btn btn-danger</code></td>
|
||||||
<td>Indicates a dangerous or potentially negative action</td>
|
<td>Indicates a dangerous or potentially negative action</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td><button type="button" class="btn btn-inverse">Inverse</button></td>
|
|
||||||
<td><code>btn btn-inverse</code></td>
|
|
||||||
<td>Alternate dark gray button, not tied to a semantic action or use</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><button type="button" class="btn btn-link">Link</button></td>
|
<td><button type="button" class="btn btn-link">Link</button></td>
|
||||||
<td><code>btn btn-link</code></td>
|
<td><code>btn btn-link</code></td>
|
||||||
@ -1928,7 +1867,6 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<a href="#" class="btn btn-large disabled">Link</a>
|
<a href="#" class="btn btn-large disabled">Link</a>
|
||||||
</pre>
|
</pre>
|
||||||
<p>
|
<p>
|
||||||
<span class="label label-info">Heads up!</span>
|
|
||||||
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
|
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@ -1971,7 +1909,7 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<h1>Images</h1>
|
<h1>Images</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>Add classes to an <code><img></code> element to easily style images in any project.</p>
|
<p>Add classes to an <code><img></code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
|
||||||
<div class="bs-docs-example bs-docs-example-images">
|
<div class="bs-docs-example bs-docs-example-images">
|
||||||
<img data-src="holder.js/140x140" class="img-rounded">
|
<img data-src="holder.js/140x140" class="img-rounded">
|
||||||
<img data-src="holder.js/140x140" class="img-circle">
|
<img data-src="holder.js/140x140" class="img-circle">
|
||||||
@ -1982,8 +1920,6 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<img src="..." class="img-circle">
|
<img src="..." class="img-circle">
|
||||||
<img src="..." class="img-polaroid">
|
<img src="..." class="img-polaroid">
|
||||||
</pre>
|
</pre>
|
||||||
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE8 due to lack of <code>border-radius</code> support.</p>
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -2181,10 +2117,7 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<i class="glyphicon-search"></i>
|
<i class="glyphicon-search"></i>
|
||||||
</pre>
|
</pre>
|
||||||
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
|
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
|
||||||
<p>
|
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
|
||||||
<span class="label label-info">Heads up!</span>
|
|
||||||
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
|
||||||
<hr class="bs-docs-separator">
|
<hr class="bs-docs-separator">
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -78,7 +78,7 @@
|
|||||||
|
|
||||||
.carousel .container {
|
.carousel .container {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-control {
|
.carousel-control {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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 @@
|
|||||||
<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>
|
||||||
|
|||||||
@ -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—now with 13 custom jQuery plugins.
|
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
|
||||||
@ -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">×</button>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
<h3>Modal header</h3>
|
<h3>Modal header</h3>
|
||||||
@ -201,7 +201,7 @@ $('#myModal').on('show', function (e) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="modal hide fade">
|
<div class="modal fade">
|
||||||
<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>
|
||||||
@ -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">×</button>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
<h3 id="myModalLabel">Modal Heading</h3>
|
<h3 id="myModalLabel">Modal Heading</h3>
|
||||||
@ -258,7 +258,7 @@ $('#myModal').on('show', function (e) {
|
|||||||
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
|
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
|
||||||
|
|
||||||
<!-- Modal -->
|
<!-- Modal -->
|
||||||
<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">×</button>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
<h3 id="myModalLabel">Modal header</h3>
|
<h3 id="myModalLabel">Modal header</h3>
|
||||||
@ -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 () {
|
|||||||
</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>
|
||||||
|
|||||||
164
docs/templates/pages/components.mustache
vendored
164
docs/templates/pages/components.mustache
vendored
@ -1,6 +1,6 @@
|
|||||||
<!-- 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 @@
|
|||||||
<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 @@
|
|||||||
...
|
...
|
||||||
</ul>
|
</ul>
|
||||||
</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">
|
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
|
||||||
...
|
|
||||||
<li class="dropdown-submenu">
|
|
||||||
<a tabindex="-1" href="#">More options</a>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
...
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -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 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 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><span class="label">Default</span></code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span class="label label-success">Success</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code><span class="label label-success">Success</span></code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span class="label label-warning">Warning</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code><span class="label label-warning">Warning</span></code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span class="label label-danger">Danger</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code><span class="label label-danger">Danger</span></code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span class="label label-info">Info</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code><span class="label label-info">Info</span></code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span class="label label-inverse">Inverse</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code><span class="label label-inverse">Inverse</span></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 @@
|
|||||||
</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 @@
|
|||||||
<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">
|
||||||
<div class="hero-unit">
|
<div class="jumbotron">
|
||||||
<h1>Heading</h1>
|
<h1>Heading</h1>
|
||||||
<p>Tagline</p>
|
<p>Tagline</p>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
359
docs/templates/pages/css.mustache
vendored
359
docs/templates/pages/css.mustache
vendored
@ -1,6 +1,6 @@
|
|||||||
<!-- Subhead
|
<!-- Subhead
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<header class="jumbotron subhead" id="overview">
|
<header class="bs-docs-jumbotron subhead">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>CSS</h1>
|
<h1>CSS</h1>
|
||||||
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
|
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
|
||||||
@ -240,7 +240,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint"><em>rendered as italicized text</em></pre>
|
<pre class="prettyprint"><em>rendered as italicized text</em></pre>
|
||||||
|
|
||||||
<p><span class="label label-info">Heads up!</span> Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||||
|
|
||||||
<h3>Emphasis classes</h3>
|
<h3>Emphasis classes</h3>
|
||||||
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
|
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
|
||||||
@ -507,8 +507,8 @@
|
|||||||
<dd>...</dd>
|
<dd>...</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</pre>
|
</pre>
|
||||||
|
<h5>Auto-truncating</h5>
|
||||||
<p>
|
<p>
|
||||||
<span class="label label-info">Heads up!</span>
|
|
||||||
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
|
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@ -528,7 +528,7 @@
|
|||||||
For example, <code><section></code> should be wrapped as inline.
|
For example, <code><section></code> should be wrapped as inline.
|
||||||
</div>
|
</div>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
For example, <code><section></code> should be wrapped as inline.
|
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h2>Basic block</h2>
|
<h2>Basic block</h2>
|
||||||
@ -541,7 +541,6 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
&lt;p&gt;Sample text here...&lt;/p&gt;
|
&lt;p&gt;Sample text here...&lt;/p&gt;
|
||||||
</pre>
|
</pre>
|
||||||
</pre>
|
</pre>
|
||||||
<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
|
|
||||||
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
|
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -1000,20 +999,7 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
|
|
||||||
|
|
||||||
<h2 id="forms-layouts">Optional layouts</h2>
|
<h2 id="forms-layouts">Optional layouts</h2>
|
||||||
<p>Included with Bootstrap are three optional form layouts for common use cases.</p>
|
<p>Included with Bootstrap are optional form layouts for common use cases.</p>
|
||||||
|
|
||||||
<h3>Search form</h3>
|
|
||||||
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code><input></code> for an extra-rounded text input.</p>
|
|
||||||
<form class="bs-docs-example form-search">
|
|
||||||
<input type="text" class="span3 search-query">
|
|
||||||
<button type="submit" class="btn">Search</button>
|
|
||||||
</form>{{! /example }}
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<form class="form-search">
|
|
||||||
<input type="text" class="span3 search-query">
|
|
||||||
<button type="submit" class="btn">Search</button>
|
|
||||||
</form>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3>Inline form</h3>
|
<h3>Inline form</h3>
|
||||||
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
|
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
|
||||||
@ -1059,13 +1045,15 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<label class="control-label" for="inputPassword">Password</label>
|
<label class="control-label" for="inputPassword">Password</label>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<input type="password" id="inputPassword" placeholder="Password">
|
<input type="password" id="inputPassword" placeholder="Password">
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<label class="checkbox">
|
|
||||||
<input type="checkbox"> Remember me
|
|
||||||
</label>
|
|
||||||
<button type="submit" class="btn">Sign in</button>
|
<button type="submit" class="btn">Sign in</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1086,9 +1074,11 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
</div>
|
</div>
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<label class="checkbox">
|
<div class="checkbox">
|
||||||
<input type="checkbox"> Remember me
|
<label>
|
||||||
</label>
|
<input type="checkbox"> Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
<button type="submit" class="btn">Sign in</button>
|
<button type="submit" class="btn">Sign in</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1236,85 +1226,82 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<h2 id="forms-extending">Extending form controls</h2>
|
<h2 id="forms-extending">Extending form controls</h2>
|
||||||
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
||||||
|
|
||||||
<h3>Prepended and appended inputs</h3>
|
<h3>Input groups</h3>
|
||||||
<p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p>
|
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p>
|
||||||
|
<p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p>
|
||||||
<h4>Default options</h4>
|
|
||||||
<p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
|
|
||||||
<form class="bs-docs-example">
|
<form class="bs-docs-example">
|
||||||
<div class="input-prepend">
|
<div class="input-group span9">
|
||||||
<span class="add-on">@</span>
|
<span class="input-group-addon">@</span>
|
||||||
<input id="prependedInput" type="text" placeholder="Username">
|
<input type="text" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<div class="input-append">
|
<div class="input-group span6">
|
||||||
<input id="appendedInput" type="text">
|
<input type="text">
|
||||||
<span class="add-on">.00</span>
|
<span class="input-group-addon">.00</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-group span3">
|
||||||
|
<span class="input-group-addon">$</span>
|
||||||
|
<input type="text">
|
||||||
|
<span class="input-group-addon">.00</span>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="input-prepend">
|
<div class="input-group span9">
|
||||||
<span class="add-on">@</span>
|
<span class="input-group-addon">@</span>
|
||||||
<input id="prependedInput" type="text" placeholder="Username">
|
<input type="text" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-append">
|
|
||||||
<input id="appendedInput" type="text">
|
|
||||||
<span class="add-on">.00</span>
|
|
||||||
</div>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h4>Combined</h4>
|
<div class="input-group span6">
|
||||||
<p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
|
<input type="text">
|
||||||
<form class="bs-docs-example form-inline">
|
<span class="input-group-addon">.00</span>
|
||||||
<div class="input-prepend input-append">
|
</div>
|
||||||
<span class="add-on">$</span>
|
|
||||||
<input id="appendedPrependedInput" type="text">
|
<div class="input-group span3">
|
||||||
<span class="add-on">.00</span>
|
<span class="input-group-addon">$</span>
|
||||||
</div>
|
<input type="text">
|
||||||
</form>
|
<span class="input-group-addon">.00</span>
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<div class="input-prepend input-append">
|
|
||||||
<span class="add-on">$</span>
|
|
||||||
<input id="appendedPrependedInput" type="text">
|
|
||||||
<span class="add-on">.00</span>
|
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h4>Buttons instead of text</h4>
|
<h4>Buttons instead of text</h4>
|
||||||
<p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
|
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
||||||
<form class="bs-docs-example">
|
<form class="bs-docs-example">
|
||||||
<div class="input-append">
|
<div class="input-group span7">
|
||||||
<input class="span3" id="appendedInputButton" type="text">
|
<span class="input-group-btn">
|
||||||
<button class="btn" type="button">Go!</button>
|
<button class="btn" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
|
<input type="text">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-group span7">
|
||||||
|
<input type="text">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button class="btn" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="input-append">
|
<div class="input-group span7">
|
||||||
<input class="span3" id="appendedInputButton" type="text">
|
<span class="input-group-btn">
|
||||||
<button class="btn" type="button">Go!</button>
|
<button class="btn" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
|
<input type="text">
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
|
||||||
<form class="bs-docs-example">
|
<div class="input-group span7">
|
||||||
<div class="input-append">
|
<input type="text">
|
||||||
<input class="span3" id="appendedInputButtons" type="text">
|
<span class="input-group-btn">
|
||||||
<button class="btn" type="button">Search</button>
|
<button class="btn" type="button">Go!</button>
|
||||||
<button class="btn" type="button">Options</button>
|
</span>
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<div class="input-append">
|
|
||||||
<input class="span3" id="appendedInputButton" type="text">
|
|
||||||
<button class="btn" type="button">Search</button>
|
|
||||||
<button class="btn" type="button">Options</button>
|
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h4>Button dropdowns</h4>
|
<h4>Button dropdowns</h4>
|
||||||
<p></p>
|
<p></p>
|
||||||
<form class="bs-docs-example">
|
<form class="bs-docs-example">
|
||||||
<div class="input-append">
|
<div class="input-group span7">
|
||||||
<input class="span3" id="appendedDropdownButton" type="text">
|
<div class="input-group-btn btn-group">
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Action</a></li>
|
<li><a href="#">Action</a></li>
|
||||||
@ -1324,13 +1311,26 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<li><a href="#">Separated link</a></li>
|
<li><a href="#">Separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div><!-- /btn-group -->
|
</div><!-- /btn-group -->
|
||||||
</div><!-- /input-append -->
|
<input type="text">
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
<br>
|
||||||
|
<div class="input-group span7">
|
||||||
|
<input type="text">
|
||||||
|
<div class="input-group-btn btn-group">
|
||||||
|
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||||
|
<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><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div><!-- /input-group -->
|
||||||
</form>
|
</form>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="input-append">
|
<div class="input-group span7">
|
||||||
<input id="appendedInputButtons" type="text">
|
<div class="input-group-btn btn-group">
|
||||||
<input class="span3" id="appendedDropdownButton" type="text">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||||
Action
|
Action
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
@ -1339,77 +1339,12 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
...
|
...
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<input type="text">
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
|
||||||
|
|
||||||
<form class="bs-docs-example">
|
<div class="input-group span7">
|
||||||
<div class="input-prepend">
|
<input type="text">
|
||||||
<div class="btn-group">
|
<div class="input-group-btn btn-group">
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
|
||||||
<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><a href="#">Separated link</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
<input class="span2" id="prependedDropdownButton" type="text">
|
|
||||||
</div><!-- /input-prepend -->
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<div class="input-prepend">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
|
||||||
Action
|
|
||||||
<span class="caret"></span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
...
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<input class="span2" id="prependedDropdownButton" type="text">
|
|
||||||
</div>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<form class="bs-docs-example">
|
|
||||||
<div class="input-prepend input-append">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
|
||||||
<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><a href="#">Separated link</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
|
||||||
<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><a href="#">Separated link</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
</div><!-- /input-prepend input-append -->
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<div class="input-prepend input-append">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
|
||||||
Action
|
|
||||||
<span class="caret"></span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
...
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||||
Action
|
Action
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
@ -1423,8 +1358,8 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
|
|
||||||
<h4>Segmented dropdown groups</h4>
|
<h4>Segmented dropdown groups</h4>
|
||||||
<form class="bs-docs-example">
|
<form class="bs-docs-example">
|
||||||
<div class="input-prepend">
|
<div class="input-group span7">
|
||||||
<div class="btn-group">
|
<div class="input-group-btn btn-group">
|
||||||
<button class="btn" tabindex="-1">Action</button>
|
<button class="btn" tabindex="-1">Action</button>
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
@ -1439,9 +1374,12 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
</div>
|
</div>
|
||||||
<input type="text" class="span3">
|
<input type="text" class="span3">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-append">
|
|
||||||
<input type="text" class="span3">
|
<br>
|
||||||
<div class="btn-group">
|
|
||||||
|
<div class="input-group span7">
|
||||||
|
<input type="text">
|
||||||
|
<div class="input-group-btn btn-group">
|
||||||
<button class="btn" tabindex="-1">Action</button>
|
<button class="btn" tabindex="-1">Action</button>
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
@ -1457,40 +1395,14 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<form>
|
<div class="input-prepend">
|
||||||
<div class="input-prepend">
|
<div class="btn-group">...</div>
|
||||||
<div class="btn-group">...</div>
|
<input type="text" class="span3">
|
||||||
<input type="text" class="span3">
|
</div>
|
||||||
</div>
|
<div class="input-append">
|
||||||
<div class="input-append">
|
<input type="text" class="span3">
|
||||||
<input type="text" class="span3">
|
<div class="btn-group">...</div>
|
||||||
<div class="btn-group">...</div>
|
</div>
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h4>Search form</h4>
|
|
||||||
<form class="bs-docs-example form-search">
|
|
||||||
<div class="input-append">
|
|
||||||
<input type="text" class="search-query span3">
|
|
||||||
<button type="submit" class="btn">Search</button>
|
|
||||||
</div>
|
|
||||||
<div class="input-prepend">
|
|
||||||
<button type="submit" class="btn">Search</button>
|
|
||||||
<input type="text" class="search-query span3">
|
|
||||||
</div>
|
|
||||||
</form>{{! /example }}
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<form class="form-search">
|
|
||||||
<div class="input-append">
|
|
||||||
<input type="text" class="search-query span3">
|
|
||||||
<button type="submit" class="btn">Search</button>
|
|
||||||
</div>
|
|
||||||
<div class="input-prepend">
|
|
||||||
<button type="submit" class="btn">Search</button>
|
|
||||||
<input type="text" class="search-query span3">
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h3 id="forms-extending-sizes">Control sizing</h3>
|
<h3 id="forms-extending-sizes">Control sizing</h3>
|
||||||
@ -1675,6 +1587,43 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
</form>
|
</form>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3>Disabled fieldsets</h3>
|
||||||
|
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<fieldset disabled>
|
||||||
|
<div>
|
||||||
|
<input type="text" class="span4" placeholder="Disabled input">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<select class="span4">
|
||||||
|
<option>Disabled select</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Can't check this
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<form class="form-inline">
|
||||||
|
<fieldset disabled>
|
||||||
|
<input type="text" class="span4" placeholder="Disabled input">
|
||||||
|
<select class="span4">
|
||||||
|
<option>Disabled select</option>
|
||||||
|
</select>
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Can't check this
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h3>Validation states</h3>
|
<h3>Validation states</h3>
|
||||||
@ -1757,7 +1706,7 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><button type="button" class="btn">Default</button></td>
|
<td><button type="button" class="btn btn-default">Default</button></td>
|
||||||
<td><code>btn</code></td>
|
<td><code>btn</code></td>
|
||||||
<td>Standard gray button with gradient</td>
|
<td>Standard gray button with gradient</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -1766,11 +1715,6 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<td><code>btn btn-primary</code></td>
|
<td><code>btn btn-primary</code></td>
|
||||||
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
|
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td><button type="button" class="btn btn-info">Info</button></td>
|
|
||||||
<td><code>btn btn-info</code></td>
|
|
||||||
<td>Used as an alternative to the default styles</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><button type="button" class="btn btn-success">Success</button></td>
|
<td><button type="button" class="btn btn-success">Success</button></td>
|
||||||
<td><code>btn btn-success</code></td>
|
<td><code>btn btn-success</code></td>
|
||||||
@ -1786,11 +1730,6 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<td><code>btn btn-danger</code></td>
|
<td><code>btn btn-danger</code></td>
|
||||||
<td>Indicates a dangerous or potentially negative action</td>
|
<td>Indicates a dangerous or potentially negative action</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td><button type="button" class="btn btn-inverse">Inverse</button></td>
|
|
||||||
<td><code>btn btn-inverse</code></td>
|
|
||||||
<td>Alternate dark gray button, not tied to a semantic action or use</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><button type="button" class="btn btn-link">Link</button></td>
|
<td><button type="button" class="btn btn-link">Link</button></td>
|
||||||
<td><code>btn btn-link</code></td>
|
<td><code>btn btn-link</code></td>
|
||||||
@ -1868,7 +1807,6 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<a href="#" class="btn btn-large disabled">Link</a>
|
<a href="#" class="btn btn-large disabled">Link</a>
|
||||||
</pre>
|
</pre>
|
||||||
<p>
|
<p>
|
||||||
<span class="label label-info">Heads up!</span>
|
|
||||||
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
|
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@ -1911,7 +1849,7 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<h1>Images</h1>
|
<h1>Images</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>Add classes to an <code><img></code> element to easily style images in any project.</p>
|
<p>Add classes to an <code><img></code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
|
||||||
<div class="bs-docs-example bs-docs-example-images">
|
<div class="bs-docs-example bs-docs-example-images">
|
||||||
<img data-src="holder.js/140x140" class="img-rounded">
|
<img data-src="holder.js/140x140" class="img-rounded">
|
||||||
<img data-src="holder.js/140x140" class="img-circle">
|
<img data-src="holder.js/140x140" class="img-circle">
|
||||||
@ -1922,8 +1860,6 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<img src="..." class="img-circle">
|
<img src="..." class="img-circle">
|
||||||
<img src="..." class="img-polaroid">
|
<img src="..." class="img-polaroid">
|
||||||
</pre>
|
</pre>
|
||||||
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE8 due to lack of <code>border-radius</code> support.</p>
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -2121,10 +2057,7 @@ For example, <code><section></code> should be wrapped as inlin
|
|||||||
<i class="glyphicon-search"></i>
|
<i class="glyphicon-search"></i>
|
||||||
</pre>
|
</pre>
|
||||||
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
|
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
|
||||||
<p>
|
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
|
||||||
<span class="label label-info">Heads up!</span>
|
|
||||||
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
|
||||||
<hr class="bs-docs-separator">
|
<hr class="bs-docs-separator">
|
||||||
|
|||||||
2
docs/templates/pages/customize.mustache
vendored
2
docs/templates/pages/customize.mustache
vendored
@ -1,6 +1,6 @@
|
|||||||
<!-- 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>
|
||||||
|
|||||||
2
docs/templates/pages/extend.mustache
vendored
2
docs/templates/pages/extend.mustache
vendored
@ -1,6 +1,6 @@
|
|||||||
<!-- 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>
|
||||||
|
|||||||
2
docs/templates/pages/gallery.mustache
vendored
2
docs/templates/pages/gallery.mustache
vendored
@ -1,6 +1,6 @@
|
|||||||
<!-- 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>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<!-- 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>
|
||||||
|
|||||||
6
docs/templates/pages/index.mustache
vendored
6
docs/templates/pages/index.mustache
vendored
@ -1,4 +1,4 @@
|
|||||||
<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 @@
|
|||||||
<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>
|
||||||
|
|||||||
22
docs/templates/pages/javascript.mustache
vendored
22
docs/templates/pages/javascript.mustache
vendored
@ -1,6 +1,6 @@
|
|||||||
<!-- 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—now with 13 custom jQuery plugins.
|
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
|
||||||
@ -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">×</button>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
<h3>Modal header</h3>
|
<h3>Modal header</h3>
|
||||||
@ -134,7 +134,7 @@ $('#myModal').on('show', function (e) {
|
|||||||
</div>
|
</div>
|
||||||
</div>{{! /example }}
|
</div>{{! /example }}
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<div class="modal hide fade">
|
<div class="modal fade">
|
||||||
<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>
|
||||||
@ -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">×</button>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
<h3 id="myModalLabel">Modal Heading</h3>
|
<h3 id="myModalLabel">Modal Heading</h3>
|
||||||
@ -191,7 +191,7 @@ $('#myModal').on('show', function (e) {
|
|||||||
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
|
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
|
||||||
|
|
||||||
<!-- Modal -->
|
<!-- Modal -->
|
||||||
<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">×</button>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
<h3 id="myModalLabel">Modal header</h3>
|
<h3 id="myModalLabel">Modal header</h3>
|
||||||
@ -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 () {
|
|||||||
</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>
|
||||||
|
|||||||
27
js/bootstrap-carousel.js
vendored
27
js/bootstrap-carousel.js
vendored
@ -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 @@
|
|||||||
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 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
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 @@
|
|||||||
|
|
||||||
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 @@
|
|||||||
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()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
2
js/bootstrap-collapse.js
vendored
2
js/bootstrap-collapse.js
vendored
@ -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('-'))
|
||||||
|
|||||||
5
js/bootstrap-dropdown.js
vendored
5
js/bootstrap-dropdown.js
vendored
@ -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
|
||||||
}
|
}
|
||||||
|
|||||||
3
js/bootstrap-modal.js
vendored
3
js/bootstrap-modal.js
vendored
@ -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
|
||||||
|
|||||||
18
js/bootstrap-tooltip.js
vendored
18
js/bootstrap-tooltip.js
vendored
@ -97,7 +97,6 @@
|
|||||||
|
|
||||||
, show: function () {
|
, show: function () {
|
||||||
var $tip
|
var $tip
|
||||||
, inside
|
|
||||||
, pos
|
, pos
|
||||||
, actualWidth
|
, actualWidth
|
||||||
, actualHeight
|
, actualHeight
|
||||||
@ -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 @@
|
|||||||
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 () {
|
||||||
|
|||||||
16
js/bootstrap-typeahead.js
vendored
16
js/bootstrap-typeahead.js
vendored
@ -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 @@
|
|||||||
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 @@
|
|||||||
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 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
, 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()
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -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 @@
|
|||||||
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 {
|
|||||||
|
|
||||||
// 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 {
|
|||||||
|
|
||||||
// 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;
|
||||||
}
|
}
|
||||||
4
less/bootstrap.less
vendored
4
less/bootstrap.less
vendored
@ -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
|
||||||
|
|||||||
@ -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 @@
|
|||||||
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 @@
|
|||||||
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;
|
||||||
|
|||||||
@ -6,51 +6,39 @@
|
|||||||
// Base styles
|
// Base styles
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
// Core
|
// Core styles
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 6px 12px;
|
padding: 6px 13px;
|
||||||
margin-bottom: 0; // For input.btn
|
margin-bottom: 0; // For input.btn
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
line-height: @line-height-base;
|
line-height: @line-height-base;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
|
border: 1px solid #ccc;
|
||||||
border: 1px solid @btn-border;
|
|
||||||
border-bottom-color: darken(@btn-border, 10%);
|
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
|
||||||
|
|
||||||
// Hover state
|
|
||||||
&:hover {
|
|
||||||
color: @grayDark;
|
|
||||||
text-decoration: none;
|
|
||||||
background-position: 0 -15px;
|
|
||||||
|
|
||||||
// transition is only when going to hover, otherwise the background
|
|
||||||
// behind the gradient (there for IE<=9 fallback) gets mismatched
|
|
||||||
.transition(background-position .1s linear);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Focus state for keyboard and accessibility
|
|
||||||
&:focus {
|
&:focus {
|
||||||
.tab-focus();
|
.tab-focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Active state
|
&:hover {
|
||||||
&.active,
|
text-decoration: none;
|
||||||
&:active {
|
|
||||||
background-image: none;
|
|
||||||
outline: 0;
|
|
||||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disabled state
|
&:active,
|
||||||
&.disabled,
|
&.active {
|
||||||
&[disabled] {
|
outline: 0;
|
||||||
cursor: default;
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
.box-shadow(~"inset 0 3px 5px rgba(0,0,0,.125), 0 1px 0 rgba(255,255,255,.1)");
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled,
|
||||||
|
&[disabled],
|
||||||
|
fieldset[disabled] & {
|
||||||
|
cursor: default;
|
||||||
.opacity(65);
|
.opacity(65);
|
||||||
.box-shadow(none);
|
.box-shadow(none);
|
||||||
}
|
}
|
||||||
@ -125,47 +113,25 @@ input[type="button"] {
|
|||||||
// Alternate buttons
|
// Alternate buttons
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
// Provide *some* extra contrast for those who can get it
|
|
||||||
.btn-primary.active,
|
|
||||||
.btn-warning.active,
|
|
||||||
.btn-danger.active,
|
|
||||||
.btn-success.active,
|
|
||||||
.btn-info.active,
|
|
||||||
.btn-inverse.active {
|
|
||||||
color: rgba(255,255,255,.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set the backgrounds
|
|
||||||
// -------------------------
|
|
||||||
.btn {
|
.btn {
|
||||||
// reset here as of 2.0.3 due to Recess property order
|
.buttonBackground(@btn-background, @btn-background-highlight, @gray, 0 1px 0 rgba(255,255,255,.75));
|
||||||
border-color: #c5c5c5;
|
|
||||||
border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
|
|
||||||
}
|
}
|
||||||
|
// Primary appears as blue
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
.buttonBackground(@btn-backround-primary, @btn-backround-primary-highlight);
|
.buttonBackground(@btn-background-primary, @btn-background-primary-highlight);
|
||||||
}
|
}
|
||||||
// Warning appears are orange
|
// Warning appears are orange
|
||||||
.btn-warning {
|
.btn-warning {
|
||||||
.buttonBackground(@btn-backround-warning, @btn-backround-warning-highlight);
|
.buttonBackground(@btn-background-warning, @btn-background-warning-highlight);
|
||||||
}
|
}
|
||||||
// Danger and error appear as red
|
// Danger and error appear as red
|
||||||
.btn-danger {
|
.btn-danger {
|
||||||
.buttonBackground(@btn-backround-danger, @btn-backround-danger-highlight);
|
.buttonBackground(@btn-background-danger, @btn-background-danger-highlight);
|
||||||
}
|
}
|
||||||
// Success appears as green
|
// Success appears as green
|
||||||
.btn-success {
|
.btn-success {
|
||||||
.buttonBackground(@btn-backround-success, @btn-backround-success-highlight);
|
.buttonBackground(@btn-background-success, @btn-background-success-highlight);
|
||||||
}
|
}
|
||||||
// Info appears as a neutral blue
|
|
||||||
.btn-info {
|
|
||||||
.buttonBackground(@btn-backround-info, @btn-backround-info-highlight);
|
|
||||||
}
|
|
||||||
// Inverse appears as dark gray
|
|
||||||
.btn-inverse {
|
|
||||||
.buttonBackground(@btn-backround-inverse, @btn-backround-inverse-highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Link buttons
|
// Link buttons
|
||||||
@ -174,7 +140,8 @@ input[type="button"] {
|
|||||||
// Make a button look and behave like a link
|
// Make a button look and behave like a link
|
||||||
.btn-link,
|
.btn-link,
|
||||||
.btn-link:active,
|
.btn-link:active,
|
||||||
.btn-link[disabled] {
|
.btn-link[disabled],
|
||||||
|
fieldset[disabled] .btn-link {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
.box-shadow(none);
|
.box-shadow(none);
|
||||||
@ -190,7 +157,12 @@ input[type="button"] {
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
.btn-link[disabled]:hover {
|
.btn-link {
|
||||||
color: @grayDark;
|
&[disabled],
|
||||||
text-decoration: none;
|
fieldset[disabled] & {
|
||||||
|
&:hover {
|
||||||
|
color: @grayDark;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
border-top: 4px solid @black;
|
border-top: 4px solid #000;
|
||||||
border-right: 4px solid transparent;
|
border-right: 4px solid transparent;
|
||||||
border-left: 4px solid transparent;
|
border-left: 4px solid transparent;
|
||||||
content: "";
|
content: "";
|
||||||
@ -64,7 +64,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Links within the dropdown menu
|
// Links within the dropdown menu
|
||||||
li > a {
|
> li > a {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 3px 20px;
|
padding: 3px 20px;
|
||||||
clear: both;
|
clear: both;
|
||||||
@ -78,8 +78,7 @@
|
|||||||
// Hover state
|
// Hover state
|
||||||
// -----------
|
// -----------
|
||||||
.dropdown-menu li > a:hover,
|
.dropdown-menu li > a:hover,
|
||||||
.dropdown-menu li > a:focus,
|
.dropdown-menu li > a:focus {
|
||||||
.dropdown-submenu:hover > a {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: @dropdown-link-color-hover;
|
color: @dropdown-link-color-hover;
|
||||||
#gradient > .vertical(@dropdown-link-background-hover, darken(@dropdown-link-background-hover, 5%));
|
#gradient > .vertical(@dropdown-link-background-hover, darken(@dropdown-link-background-hover, 5%));
|
||||||
@ -87,8 +86,8 @@
|
|||||||
|
|
||||||
// Active state
|
// Active state
|
||||||
// ------------
|
// ------------
|
||||||
.dropdown-menu .active > a,
|
.dropdown-menu > .active > a,
|
||||||
.dropdown-menu .active > a:hover {
|
.dropdown-menu > .active > a:hover {
|
||||||
color: @dropdown-link-color-active;
|
color: @dropdown-link-color-active;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
@ -98,12 +97,12 @@
|
|||||||
// Disabled state
|
// Disabled state
|
||||||
// --------------
|
// --------------
|
||||||
// Gray out text and ensure the hover state remains gray
|
// Gray out text and ensure the hover state remains gray
|
||||||
.dropdown-menu .disabled > a,
|
.dropdown-menu > .disabled > a,
|
||||||
.dropdown-menu .disabled > a:hover {
|
.dropdown-menu > .disabled > a:hover {
|
||||||
color: @grayLight;
|
color: @grayLight;
|
||||||
}
|
}
|
||||||
// Nuke hover effects
|
// Nuke hover effects
|
||||||
.dropdown-menu .disabled > a:hover {
|
.dropdown-menu > .disabled > a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none; // Remove CSS gradient
|
background-image: none; // Remove CSS gradient
|
||||||
@ -135,7 +134,7 @@
|
|||||||
// Reverse the caret
|
// Reverse the caret
|
||||||
.caret {
|
.caret {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
border-bottom: 4px solid @black;
|
border-bottom: 4px solid #000;
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
// Different positioning for bottom up menu
|
// Different positioning for bottom up menu
|
||||||
@ -146,64 +145,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sub menus
|
|
||||||
// ---------------------------
|
|
||||||
.dropdown-submenu {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
// Default dropdowns
|
|
||||||
.dropdown-submenu > .dropdown-menu {
|
|
||||||
top: 0;
|
|
||||||
left: 100%;
|
|
||||||
margin-top: -6px;
|
|
||||||
margin-left: -1px;
|
|
||||||
border-radius: 0 4px 4px 4px;
|
|
||||||
}
|
|
||||||
.dropdown-submenu:hover > .dropdown-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dropups
|
|
||||||
.dropup .dropdown-submenu > .dropdown-menu {
|
|
||||||
top: auto;
|
|
||||||
bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: -2px;
|
|
||||||
border-radius: 4px 4px 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Caret to indicate there is a submenu
|
|
||||||
.dropdown-submenu > a:after {
|
|
||||||
display: block;
|
|
||||||
content: " ";
|
|
||||||
float: right;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 5px 0 5px 5px;
|
|
||||||
border-left-color: darken(@dropdown-background, 20%);
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-right: -10px;
|
|
||||||
}
|
|
||||||
.dropdown-submenu:hover > a:after {
|
|
||||||
border-left-color: @dropdown-link-color-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Left aligned submenus
|
|
||||||
.dropdown-submenu.pull-left {
|
|
||||||
// Undo the float
|
|
||||||
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
|
|
||||||
float: none;
|
|
||||||
|
|
||||||
// Positioning the submenu
|
|
||||||
> .dropdown-menu {
|
|
||||||
left: -100%;
|
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 4px 0 4px 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tweak nav headers
|
// Tweak nav headers
|
||||||
// -----------------
|
// -----------------
|
||||||
// Increase padding from 15px to 20px on sides
|
// Increase padding from 15px to 20px on sides
|
||||||
@ -216,5 +157,4 @@
|
|||||||
// ---------
|
// ---------
|
||||||
.typeahead {
|
.typeahead {
|
||||||
z-index: 1051;
|
z-index: 1051;
|
||||||
margin-top: 2px; // give it some space to breathe
|
|
||||||
}
|
}
|
||||||
|
|||||||
366
less/forms.less
366
less/forms.less
@ -307,7 +307,7 @@ input[class*="span"],
|
|||||||
select[class*="span"],
|
select[class*="span"],
|
||||||
textarea[class*="span"],
|
textarea[class*="span"],
|
||||||
.uneditable-input[class*="span"] {
|
.uneditable-input[class*="span"] {
|
||||||
height: 30px;
|
height: @input-height;
|
||||||
}
|
}
|
||||||
// Control row for multiple inputs per line
|
// Control row for multiple inputs per line
|
||||||
.controls-row {
|
.controls-row {
|
||||||
@ -331,21 +331,24 @@ textarea[class*="span"],
|
|||||||
// --------------
|
// --------------
|
||||||
|
|
||||||
// Disabled and read-only inputs
|
// Disabled and read-only inputs
|
||||||
input[disabled],
|
input,
|
||||||
select[disabled],
|
select,
|
||||||
textarea[disabled],
|
textarea {
|
||||||
input[readonly],
|
&[disabled],
|
||||||
select[readonly],
|
&[readonly],
|
||||||
textarea[readonly] {
|
fieldset[disabled] & {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
background-color: @input-background-disabled;
|
background-color: @input-background-disabled;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// Explicitly reset the colors here
|
// Explicitly reset the colors here
|
||||||
input[type="radio"][disabled],
|
input[type="radio"],
|
||||||
input[type="checkbox"][disabled],
|
input[type="checkbox"] {
|
||||||
input[type="radio"][readonly],
|
&[disabled],
|
||||||
input[type="checkbox"][readonly] {
|
&[readonly],
|
||||||
background-color: transparent;
|
fieldset[disabled] & {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -422,273 +425,112 @@ select:focus:invalid {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
// INPUT GROUPS
|
|
||||||
// ------------
|
|
||||||
|
|
||||||
// Allow us to put symbols and text within the input field for a cleaner look
|
// Input groups
|
||||||
.input-append,
|
// --------------------------------------------------
|
||||||
.input-prepend {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-size: 0; // white space collapse hack
|
|
||||||
white-space: nowrap; // Prevent span and input from separating
|
|
||||||
|
|
||||||
// Reset the white space collapse hack
|
// Base styles
|
||||||
input,
|
// -------------------------
|
||||||
select,
|
.input-group {
|
||||||
.uneditable-input,
|
display: table;
|
||||||
.dropdown-menu {
|
|
||||||
font-size: @font-size-base;
|
// Undo padding and float of grid classes
|
||||||
|
&[class*="span"] {
|
||||||
|
float: none;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
.uneditable-input {
|
.uneditable-input {
|
||||||
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
|
width: 100%;
|
||||||
float: none; // Undo the float from grid sizing
|
|
||||||
margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
|
|
||||||
font-size: @font-size-base;
|
|
||||||
vertical-align: top;
|
|
||||||
border-radius: 0 @input-border-radius @input-border-radius 0;
|
|
||||||
// Make input on top when focused so blue border and shadow always show
|
|
||||||
&:focus {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input[class*="span"],
|
|
||||||
select[class*="span"],
|
|
||||||
.uneditable-input[class*="span"] {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.add-on {
|
|
||||||
display: inline-block;
|
|
||||||
width: auto;
|
|
||||||
height: @line-height-base;
|
|
||||||
min-width: 16px;
|
|
||||||
padding: 6px;
|
|
||||||
font-size: @font-size-base;
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: @line-height-base;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0 1px 0 #fff;
|
|
||||||
background-color: @grayLighter;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
.add-on,
|
|
||||||
.btn,
|
|
||||||
.btn-group > .dropdown-toggle {
|
|
||||||
vertical-align: top;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
.active {
|
|
||||||
background-color: @state-success-background;
|
|
||||||
border-color: @state-success-text;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-prepend {
|
// Display as table-cell
|
||||||
.add-on,
|
// -------------------------
|
||||||
.btn {
|
.input-group-addon,
|
||||||
margin-right: -1px;
|
.input-group-btn,
|
||||||
}
|
.input-group input,
|
||||||
.add-on:first-child,
|
.input-group .uneditable-input {
|
||||||
.btn:first-child {
|
display: table-cell;
|
||||||
// FYI, `.btn:first-child` accounts for a button group that's prepended
|
margin: 0;
|
||||||
border-radius: @input-border-radius 0 0 @input-border-radius;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
// Addon and addon wrapper for buttons
|
||||||
|
.input-group-addon,
|
||||||
|
.input-group-btn {
|
||||||
|
width: 1%;
|
||||||
|
vertical-align: middle; // Match the inputs
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-append {
|
// Text input groups
|
||||||
input,
|
// -------------------------
|
||||||
select,
|
.input-group-addon {
|
||||||
.uneditable-input {
|
.box-sizing(border-box);
|
||||||
border-radius: @input-border-radius 0 0 @input-border-radius;
|
padding: 6px 8px;
|
||||||
+ .btn-group .btn,
|
font-size: @font-size-base;
|
||||||
+ .btn-group .btn:last-child {
|
font-weight: normal;
|
||||||
border-radius: 0 @input-border-radius @input-border-radius 0;
|
line-height: @line-height-base;
|
||||||
}
|
text-align: center;
|
||||||
}
|
text-shadow: 0 1px 0 #fff;
|
||||||
.add-on,
|
background-color: @grayLighter;
|
||||||
.btn,
|
border: 1px solid #ccc;
|
||||||
.btn-group {
|
|
||||||
margin-left: -1px;
|
|
||||||
}
|
|
||||||
.add-on:last-child,
|
|
||||||
.btn:last-child,
|
|
||||||
.btn-group:last-child > .dropdown-toggle {
|
|
||||||
border-radius: 0 @input-border-radius @input-border-radius 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove all border-radius for inputs with both prepend and append
|
// Reset rounded corners
|
||||||
.input-prepend.input-append {
|
.input-group input:first-child,
|
||||||
input,
|
.input-group .uneditable-input:first-child,
|
||||||
select,
|
.input-group-addon:first-child {
|
||||||
.uneditable-input {
|
.border-left-radius(@border-radius-base);
|
||||||
border-radius: 0;
|
}
|
||||||
+ .btn-group .btn {
|
.input-group-addon:first-child {
|
||||||
border-radius: 0 @input-border-radius @input-border-radius 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
}
|
.input-group input:last-child,
|
||||||
.add-on:first-child,
|
.input-group .uneditable-input:last-child,
|
||||||
.btn:first-child {
|
.input-group-addon:last-child {
|
||||||
margin-right: -1px;
|
.border-right-radius(@border-radius-base);
|
||||||
border-radius: @input-border-radius 0 0 @input-border-radius;
|
}
|
||||||
}
|
.input-group-addon:last-child {
|
||||||
.add-on:last-child,
|
border-left: 0;
|
||||||
.btn:last-child {
|
}
|
||||||
margin-left: -1px;
|
|
||||||
border-radius: 0 @input-border-radius @input-border-radius 0;
|
// Button input groups
|
||||||
}
|
// -------------------------
|
||||||
.btn-group:first-child {
|
.input-group-btn,
|
||||||
margin-left: 0;
|
.input-group-btn .btn {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.input-group-btn > .btn {
|
||||||
|
float: left; // Collapse white-space
|
||||||
|
border-radius: 0;
|
||||||
|
+ .btn {
|
||||||
|
border-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.input-group-btn.btn-group {
|
||||||
|
display: table-cell;
|
||||||
|
|
||||||
|
|
||||||
// SEARCH FORM
|
|
||||||
// -----------
|
|
||||||
|
|
||||||
input.search-query {
|
|
||||||
padding-right: 14px;
|
|
||||||
padding-right: 4px \9;
|
|
||||||
padding-left: 14px;
|
|
||||||
padding-left: 4px \9; /* IE8 doesn't have border radius, so don't indent the padding */
|
|
||||||
margin-bottom: 0; // Remove the default margin on all inputs
|
|
||||||
border-radius: @input-border-radius-search;
|
|
||||||
}
|
}
|
||||||
|
// Prepend
|
||||||
/* Allow for input prepend/append in search forms */
|
.input-group-btn {
|
||||||
.form-search .input-append .search-query,
|
&:first-child > .btn,
|
||||||
.form-search .input-prepend .search-query {
|
&.btn-group:first-child > .btn {
|
||||||
border-radius: 0; // Override due to specificity
|
border-right: 0;
|
||||||
}
|
|
||||||
.form-search .input-append .search-query {
|
|
||||||
border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
|
|
||||||
}
|
|
||||||
.form-search .input-append .btn {
|
|
||||||
border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
|
|
||||||
}
|
|
||||||
.form-search .input-prepend .search-query {
|
|
||||||
border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
|
|
||||||
}
|
|
||||||
.form-search .input-prepend .btn {
|
|
||||||
border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// HORIZONTAL & VERTICAL FORMS
|
|
||||||
// ---------------------------
|
|
||||||
|
|
||||||
// Common properties
|
|
||||||
// -----------------
|
|
||||||
|
|
||||||
.form-search,
|
|
||||||
.form-inline,
|
|
||||||
.form-horizontal {
|
|
||||||
input,
|
|
||||||
textarea,
|
|
||||||
select,
|
|
||||||
.help-inline,
|
|
||||||
.uneditable-input,
|
|
||||||
.input-prepend,
|
|
||||||
.input-append {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 0;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
}
|
||||||
// Re-hide hidden elements due to specifity
|
&:first-child > .btn,
|
||||||
.hide {
|
&.btn-group:first-child > .btn {
|
||||||
display: none;
|
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.form-search label,
|
// Append
|
||||||
.form-inline label,
|
.input-group-btn {
|
||||||
.form-search .btn-group,
|
&:last-child > .btn,
|
||||||
.form-inline .btn-group {
|
&.btn-group:last-child > .btn:first-child {
|
||||||
display: inline-block;
|
border-left: 0;
|
||||||
}
|
}
|
||||||
// Remove margin for input-prepend/-append
|
&:last-child > .btn,
|
||||||
.form-search .input-append,
|
&.btn-group:last-child > .btn {
|
||||||
.form-inline .input-append,
|
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||||
.form-search .input-prepend,
|
|
||||||
.form-inline .input-prepend {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
// Inline checkbox/radio labels (remove padding on left)
|
|
||||||
.form-search .radio,
|
|
||||||
.form-search .checkbox,
|
|
||||||
.form-inline .radio,
|
|
||||||
.form-inline .checkbox {
|
|
||||||
display: inline-block;
|
|
||||||
padding-left: 0;
|
|
||||||
label {
|
|
||||||
margin-bottom: 0;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Remove float and margin, set to inline-block
|
|
||||||
.form-search .radio input[type="radio"],
|
|
||||||
.form-search .checkbox input[type="checkbox"],
|
|
||||||
.form-inline .radio input[type="radio"],
|
|
||||||
.form-inline .checkbox input[type="checkbox"] {
|
|
||||||
float: left;
|
|
||||||
margin-right: 3px;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Margin to space out fieldsets
|
|
||||||
.control-group {
|
|
||||||
margin-bottom: @line-height-base / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Legend collapses margin, so next element is responsible for spacing
|
|
||||||
legend + .control-group {
|
|
||||||
margin-top: @line-height-base;
|
|
||||||
-webkit-margin-top-collapse: separate;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Horizontal-specific styles
|
|
||||||
// --------------------------
|
|
||||||
|
|
||||||
.form-horizontal {
|
|
||||||
// Increase spacing between groups
|
|
||||||
.control-group {
|
|
||||||
margin-bottom: @line-height-base;
|
|
||||||
.clearfix();
|
|
||||||
}
|
|
||||||
// Float the labels left
|
|
||||||
.control-label {
|
|
||||||
float: left;
|
|
||||||
width: @component-offset-horizontal - 20;
|
|
||||||
padding-top: 5px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
// Move over all input controls and content
|
|
||||||
.controls {
|
|
||||||
margin-left: @component-offset-horizontal;
|
|
||||||
}
|
|
||||||
// Remove bottom margin on block level help text since that's accounted for on .control-group
|
|
||||||
.help-block {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
// And apply it only to .help-block instances that follow a form control
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea,
|
|
||||||
.uneditable-input,
|
|
||||||
.input-prepend,
|
|
||||||
.input-append {
|
|
||||||
+ .help-block {
|
|
||||||
margin-top: @line-height-base / 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Move over buttons in .form-actions to align with .controls
|
|
||||||
.form-actions {
|
|
||||||
padding-left: @component-offset-horizontal;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,22 +1,22 @@
|
|||||||
//
|
//
|
||||||
// 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 {
|
||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -338,7 +338,7 @@
|
|||||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
|
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
|
||||||
}
|
}
|
||||||
.vertical(@startColor: #555, @endColor: #333) {
|
.vertical(@startColor: #555, @endColor: #333) {
|
||||||
background-color: mix(@startColor, @endColor, 60%);
|
background-color: @endColor;
|
||||||
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
|
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
|
||||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
|
||||||
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
|
||||||
@ -405,24 +405,25 @@
|
|||||||
|
|
||||||
// Button backgrounds
|
// Button backgrounds
|
||||||
// ------------------
|
// ------------------
|
||||||
.buttonBackground(@startColor, @endColor, @text-color: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
.buttonBackground(@background-start, @background-end, @text-color: #fff, @text-shadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
text-shadow: @textShadow;
|
text-shadow: @text-shadow;
|
||||||
#gradient > .vertical(@startColor, @endColor);
|
#gradient > .vertical(@background-start, @background-end);
|
||||||
border-color: @endColor @endColor darken(@endColor, 15%);
|
border-color: darken(@background-end, 7.5%);
|
||||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
|
||||||
.reset-filter();
|
|
||||||
|
|
||||||
// in these cases the gradient won't cover the background, so we override
|
&:hover,
|
||||||
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
|
||||||
color: @text-color;
|
|
||||||
background-color: @endColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
// IE8 can't handle box-shadow to show active, so we darken a bit ourselves
|
|
||||||
&:active,
|
&:active,
|
||||||
&.active {
|
&.active {
|
||||||
background-color: darken(@endColor, 10%) e("\9");
|
color: @text-color;
|
||||||
|
background-color: @background-end;
|
||||||
|
background-position: 0 -15px;
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&.active,
|
||||||
|
&[disabled],
|
||||||
|
&.disabled,
|
||||||
|
fieldset[disabled] & {
|
||||||
|
background-image: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: @zindex-modal-background;
|
z-index: @zindex-modal-background;
|
||||||
background-color: @black;
|
background-color: #000;
|
||||||
// Fade for backdrop
|
// Fade for backdrop
|
||||||
&.fade { opacity: 0; }
|
&.fade { opacity: 0; }
|
||||||
}
|
}
|
||||||
@ -26,6 +26,7 @@
|
|||||||
top: 10%;
|
top: 10%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
z-index: @zindex-modal;
|
z-index: @zindex-modal;
|
||||||
|
display: none;
|
||||||
width: 560px;
|
width: 560px;
|
||||||
margin-left: -280px;
|
margin-left: -280px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|||||||
@ -222,7 +222,6 @@
|
|||||||
}
|
}
|
||||||
.navbar .nav .dropdown-toggle .caret {
|
.navbar .nav .dropdown-toggle .caret {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hover
|
// Hover
|
||||||
|
|||||||
@ -3,6 +3,13 @@
|
|||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// IE10 Metro responsive
|
||||||
|
// Required for Windows 8 Metro split-screen snapping with IE10
|
||||||
|
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
|
||||||
|
@-ms-viewport{
|
||||||
|
width: device-width;
|
||||||
|
}
|
||||||
|
|
||||||
// Hide from screenreaders and browsers
|
// Hide from screenreaders and browsers
|
||||||
// Credit: HTML5 Boilerplate
|
// Credit: HTML5 Boilerplate
|
||||||
.hidden {
|
.hidden {
|
||||||
|
|||||||
@ -21,10 +21,10 @@
|
|||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
.hide {
|
.hide {
|
||||||
display: none;
|
display: none !important;
|
||||||
}
|
}
|
||||||
.show {
|
.show {
|
||||||
display: block;
|
display: block !important;
|
||||||
}
|
}
|
||||||
.invisible {
|
.invisible {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|||||||
@ -9,7 +9,6 @@
|
|||||||
|
|
||||||
// Grays
|
// Grays
|
||||||
// -------------------------
|
// -------------------------
|
||||||
@black: #000;
|
|
||||||
@grayDarker: #222;
|
@grayDarker: #222;
|
||||||
@grayDark: #333;
|
@grayDark: #333;
|
||||||
@gray: #555;
|
@gray: #555;
|
||||||
@ -77,26 +76,19 @@
|
|||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
@btn-background: #fff;
|
@btn-background: #fff;
|
||||||
@btn-background-highlight: darken(#fff, 10%);
|
@btn-background-highlight: #eaeaea;
|
||||||
@btn-border: #bbb;
|
|
||||||
|
|
||||||
@btn-backround-primary: @link-color;
|
@btn-background-primary: @link-color;
|
||||||
@btn-backround-primary-highlight: spin(@btn-backround-primary, 20%);
|
@btn-background-primary-highlight: darken(@link-color, 10%);
|
||||||
|
|
||||||
@btn-backround-info: #5bc0de;
|
@btn-background-success: #62c462;
|
||||||
@btn-backround-info-highlight: #2f96b4;
|
@btn-background-success-highlight: #51a351;
|
||||||
|
|
||||||
@btn-backround-success: #62c462;
|
@btn-background-warning: lighten(#f89406, 15%);
|
||||||
@btn-backround-success-highlight: #51a351;
|
@btn-background-warning-highlight: #f89406;
|
||||||
|
|
||||||
@btn-backround-warning: lighten(#f89406, 15%);
|
@btn-background-danger: #ee5f5b;
|
||||||
@btn-backround-warning-highlight: #f89406;
|
@btn-background-danger-highlight: #bd362f;
|
||||||
|
|
||||||
@btn-backround-danger: #ee5f5b;
|
|
||||||
@btn-backround-danger-highlight: #bd362f;
|
|
||||||
|
|
||||||
@btn-backround-inverse: #444;
|
|
||||||
@btn-backround-inverse-highlight: @grayDarker;
|
|
||||||
|
|
||||||
|
|
||||||
// Forms
|
// Forms
|
||||||
@ -199,12 +191,12 @@
|
|||||||
@pagination-border: #ddd;
|
@pagination-border: #ddd;
|
||||||
|
|
||||||
|
|
||||||
// Hero unit
|
// Jumbotron
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
@hero-background: @grayLighter;
|
@jumbotron-background: @grayLighter;
|
||||||
@hero-heading-color: inherit;
|
@jumbotron-heading-color: inherit;
|
||||||
@hero-lead-color: inherit;
|
@jumbotron-lead-color: inherit;
|
||||||
|
|
||||||
|
|
||||||
// Form states and alerts
|
// Form states and alerts
|
||||||
|
|||||||
@ -17,10 +17,10 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
, "devDependencies": {
|
, "devDependencies": {
|
||||||
"uglify-js": "1.2.6"
|
"uglify-js": "1.3.4"
|
||||||
, "jshint": "0.6.1"
|
, "jshint": "0.9.1"
|
||||||
, "recess": "1.0.3"
|
, "recess": "1.0.3"
|
||||||
, "connect": "2.1.3"
|
, "connect": "2.1.3"
|
||||||
, "hogan.js": "2.0.0"
|
, "hogan.js": "2.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user