From bf9d8fcc070fa826c342282e102fe00e1af76d10 Mon Sep 17 00:00:00 2001 From: Matt Morgan Date: Thu, 26 Apr 2012 14:09:20 -0400 Subject: [PATCH 001/422] Alter typeahead to accept synchronous/asynchronous data source via function/callback --- docs/templates/pages/javascript.mustache | 6 ++-- js/bootstrap-typeahead.js | 16 +++++++---- js/tests/unit/bootstrap-typeahead.js | 36 ++++++++++++++++++++++++ 3 files changed, 50 insertions(+), 8 deletions(-) diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 1ae3ffa5a8..e6f1576890 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1385,9 +1385,9 @@ $('.carousel').carousel({ {{_i}}source{{/i}} - {{_i}}array{{/i}} + {{_i}}array, function{{/i}} [ ] - {{_i}}The data source to query against.{{/i}} + {{_i}}The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.{{/i}} {{_i}}items{{/i}} @@ -1426,4 +1426,4 @@ $('.carousel').carousel({

{{_i}}Initializes an input with a typeahead.{{/i}}

- \ No newline at end of file + diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js index 95a0fcdb78..281bdd6b3e 100644 --- a/js/bootstrap-typeahead.js +++ b/js/bootstrap-typeahead.js @@ -77,9 +77,7 @@ } , lookup: function (event) { - var that = this - , items - , q + var items this.query = this.$element.val() @@ -87,7 +85,15 @@ return this.shown ? this.hide() : this } - items = $.grep(this.source, function (item) { + items = $.isFunction(this.source) ? this.source(this.query, $.proxy(this.process, this)) : this.source + + return items ? this.process(items) : this + } + + , process: function (items) { + var that = this + + items = $.grep(items, function (item) { return that.matcher(item) }) @@ -282,4 +288,4 @@ }) }) -}(window.jQuery); \ No newline at end of file +}(window.jQuery); diff --git a/js/tests/unit/bootstrap-typeahead.js b/js/tests/unit/bootstrap-typeahead.js index 4e2428d6a4..25d4cafd8e 100644 --- a/js/tests/unit/bootstrap-typeahead.js +++ b/js/tests/unit/bootstrap-typeahead.js @@ -52,6 +52,42 @@ $(function () { typeahead.$menu.remove() }) + test("should accept data source via synchronous function", function () { + var $input = $('').typeahead({ + source: function () { + return ['aa', 'ab', 'ac'] + } + }) + , typeahead = $input.data('typeahead') + + $input.val('a') + typeahead.lookup() + + ok(typeahead.$menu.is(":visible"), 'typeahead is visible') + equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') + equals(typeahead.$menu.find('.active').length, 1, 'one item is active') + + typeahead.$menu.remove() + }) + + test("should accept data source via asynchronous function", function () { + var $input = $('').typeahead({ + source: function (query, process) { + process(['aa', 'ab', 'ac']) + } + }) + , typeahead = $input.data('typeahead') + + $input.val('a') + typeahead.lookup() + + ok(typeahead.$menu.is(":visible"), 'typeahead is visible') + equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') + equals(typeahead.$menu.find('.active').length, 1, 'one item is active') + + typeahead.$menu.remove() + }) + test("should not explode when regex chars are entered", function () { var $input = $('').typeahead({ source: ['aa', 'ab', 'ac', 'mdo*', 'fat+'] From 452d8c1df0fe75acfc9431a0b0f349f85a6c1fd1 Mon Sep 17 00:00:00 2001 From: David Hirtle Date: Fri, 4 May 2012 13:50:16 -0700 Subject: [PATCH 002/422] Gradient mixins blow up in IE7/8 if you happen to use rgba() colors as params --- docs/assets/css/bootstrap.css | 40 +++++++++++++++++------------------ less/mixins.less | 6 +++--- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f13cad826d..073d489991 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2585,7 +2585,7 @@ button.close { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); @@ -2726,7 +2726,7 @@ button.close { background-repeat: repeat-x; border-color: #0055cc #0055cc #003580; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0055cc', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2756,7 +2756,7 @@ button.close { background-repeat: repeat-x; border-color: #f89406 #f89406 #ad6704; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2786,7 +2786,7 @@ button.close { background-repeat: repeat-x; border-color: #bd362f #bd362f #802420; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2816,7 +2816,7 @@ button.close { background-repeat: repeat-x; border-color: #51a351 #51a351 #387038; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2846,7 +2846,7 @@ button.close { background-repeat: repeat-x; border-color: #2f96b4 #2f96b4 #1f6377; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2876,7 +2876,7 @@ button.close { background-repeat: repeat-x; border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff222222', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -3571,7 +3571,7 @@ input[type="submit"].btn.btn-mini { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=0); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); @@ -3831,7 +3831,7 @@ input[type="submit"].btn.btn-mini { background-repeat: repeat-x; border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); @@ -3962,7 +3962,7 @@ input[type="submit"].btn.btn-mini { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff5f5f5', GradientType=0); -webkit-box-shadow: inset 0 1px 0 #ffffff; -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; @@ -4626,7 +4626,7 @@ a.badge:hover { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); @@ -4647,19 +4647,19 @@ a.badge:hover { background-image: linear-gradient(top, #149bdf, #0480be); background-image: -ms-linear-gradient(top, #149bdf, #0480be); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -ms-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; } .progress-striped .bar { @@ -4693,7 +4693,7 @@ a.badge:hover { background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(top, #ee5f5b, #c43c35); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } .progress-danger.progress-striped .bar { @@ -4715,7 +4715,7 @@ a.badge:hover { background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(top, #62c462, #57a957); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } .progress-success.progress-striped .bar { @@ -4737,7 +4737,7 @@ a.badge:hover { background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(top, #5bc0de, #339bb9); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } .progress-info.progress-striped .bar { @@ -4759,7 +4759,7 @@ a.badge:hover { background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(top, #fbb450, #f89406); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } .progress-warning.progress-striped .bar { diff --git a/less/mixins.less b/less/mixins.less index b107955f57..7ee6a2ae9a 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -352,7 +352,7 @@ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(left, @startColor, @endColor); // Le standard background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@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) { background-color: mix(@startColor, @endColor, 60%); @@ -363,7 +363,7 @@ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(top, @startColor, @endColor); // The standard background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down } .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { background-color: @endColor; @@ -383,7 +383,7 @@ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback } .radial(@innerColor: #555, @outerColor: #333) { background-color: @outerColor; From a404ac33bb9e78323b84d0840735445579634b9e Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Wed, 16 May 2012 19:09:57 -0700 Subject: [PATCH 003/422] modal accessibility tab control --- docs/assets/js/bootstrap-modal.js | 157 +++++++++++++---------- docs/assets/js/bootstrap.js | 157 +++++++++++++---------- docs/assets/js/bootstrap.min.js | 2 +- docs/javascript.html | 8 +- docs/templates/pages/javascript.mustache | 8 +- js/bootstrap-modal.js | 157 +++++++++++++---------- 6 files changed, 273 insertions(+), 216 deletions(-) diff --git a/docs/assets/js/bootstrap-modal.js b/docs/assets/js/bootstrap-modal.js index c831de6b64..f7ae39652b 100644 --- a/docs/assets/js/bootstrap-modal.js +++ b/docs/assets/js/bootstrap-modal.js @@ -52,8 +52,9 @@ this.isShown = true - escape.call(this) - backdrop.call(this, function () { + this.escape() + + this.backdrop(function () { var transition = $.support.transition && that.$element.hasClass('fade') if (!that.$element.parent().length) { @@ -69,6 +70,8 @@ that.$element.addClass('in') + that.enforceFocus() + transition ? that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : that.$element.trigger('shown') @@ -91,90 +94,102 @@ $('body').removeClass('modal-open') - escape.call(this) + this.escape() + this.relaxFocus() this.$element.removeClass('in') $.support.transition && this.$element.hasClass('fade') ? - hideWithTransition.call(this) : - hideModal.call(this) + this.hideWithTransition() : + this.hideModal() } - } - - - /* MODAL PRIVATE METHODS - * ===================== */ - - function hideWithTransition() { - var that = this - , timeout = setTimeout(function () { - that.$element.off($.support.transition.end) - hideModal.call(that) - }, 500) - - this.$element.one($.support.transition.end, function () { - clearTimeout(timeout) - hideModal.call(that) - }) - } - - function hideModal(that) { - this.$element - .hide() - .trigger('hidden') - - backdrop.call(this) - } - - function backdrop(callback) { - var that = this - , animate = this.$element.hasClass('fade') ? 'fade' : '' - - if (this.isShown && this.options.backdrop) { - var doAnimate = $.support.transition && animate - - this.$backdrop = $('
') - .appendTo(document.body) - - if (this.options.backdrop != 'static') { - this.$backdrop.click($.proxy(this.hide, this)) + , enforceFocus: function () { + var that = this + var console = window.console + console.log('attach'); + $(document).on('focusin.modal', function (e) { + console.log('triggered'); + if (that.$element[0] !== e.target && !that.$element.has(e.target).length) { + that.$element.focus() + } + }) } - if (doAnimate) this.$backdrop[0].offsetWidth // force reflow + , relaxFocus: function () { + $(document).off('focus.modal') + } - this.$backdrop.addClass('in') + , escape: function () { + var that = this + if (this.isShown && this.options.keyboard) { + $(document).on('keyup.dismiss.modal', function ( e ) { + e.which == 27 && that.hide() + }) + } else if (!this.isShown) { + $(document).off('keyup.dismiss.modal') + } + } - doAnimate ? - this.$backdrop.one($.support.transition.end, callback) : - callback() + , hideWithTransition: function () { + var that = this + , timeout = setTimeout(function () { + that.$element.off($.support.transition.end) + that.hideModal() + }, 500) - } else if (!this.isShown && this.$backdrop) { - this.$backdrop.removeClass('in') + this.$element.one($.support.transition.end, function () { + clearTimeout(timeout) + that.hideModal() + }) + } - $.support.transition && this.$element.hasClass('fade')? - this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) : - removeBackdrop.call(this) + , hideModal: function (that) { + this.$element + .hide() + .trigger('hidden') - } else if (callback) { - callback() - } - } + this.backdrop() + } - function removeBackdrop() { - this.$backdrop.remove() - this.$backdrop = null - } + , removeBackdrop: function () { + this.$backdrop.remove() + this.$backdrop = null + } - function escape() { - var that = this - if (this.isShown && this.options.keyboard) { - $(document).on('keyup.dismiss.modal', function ( e ) { - e.which == 27 && that.hide() - }) - } else if (!this.isShown) { - $(document).off('keyup.dismiss.modal') - } + , backdrop: function (callback) { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' + + if (this.isShown && this.options.backdrop) { + var doAnimate = $.support.transition && animate + + this.$backdrop = $('
') + .appendTo(document.body) + + if (this.options.backdrop != 'static') { + this.$backdrop.click($.proxy(this.hide, this)) + } + + if (doAnimate) this.$backdrop[0].offsetWidth // force reflow + + this.$backdrop.addClass('in') + + doAnimate ? + this.$backdrop.one($.support.transition.end, callback) : + callback() + + } else if (!this.isShown && this.$backdrop) { + this.$backdrop.removeClass('in') + + $.support.transition && this.$element.hasClass('fade')? + this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) : + this.removeBackdrop() + + } else if (callback) { + callback() + } + } } diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js index 7244954107..30b618cca8 100644 --- a/docs/assets/js/bootstrap.js +++ b/docs/assets/js/bootstrap.js @@ -719,8 +719,9 @@ this.isShown = true - escape.call(this) - backdrop.call(this, function () { + this.escape() + + this.backdrop(function () { var transition = $.support.transition && that.$element.hasClass('fade') if (!that.$element.parent().length) { @@ -736,6 +737,8 @@ that.$element.addClass('in') + that.enforceFocus() + transition ? that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : that.$element.trigger('shown') @@ -758,90 +761,102 @@ $('body').removeClass('modal-open') - escape.call(this) + this.escape() + this.relaxFocus() this.$element.removeClass('in') $.support.transition && this.$element.hasClass('fade') ? - hideWithTransition.call(this) : - hideModal.call(this) + this.hideWithTransition() : + this.hideModal() } - } - - - /* MODAL PRIVATE METHODS - * ===================== */ - - function hideWithTransition() { - var that = this - , timeout = setTimeout(function () { - that.$element.off($.support.transition.end) - hideModal.call(that) - }, 500) - - this.$element.one($.support.transition.end, function () { - clearTimeout(timeout) - hideModal.call(that) - }) - } - - function hideModal(that) { - this.$element - .hide() - .trigger('hidden') - - backdrop.call(this) - } - - function backdrop(callback) { - var that = this - , animate = this.$element.hasClass('fade') ? 'fade' : '' - - if (this.isShown && this.options.backdrop) { - var doAnimate = $.support.transition && animate - - this.$backdrop = $('
') - .appendTo(document.body) - - if (this.options.backdrop != 'static') { - this.$backdrop.click($.proxy(this.hide, this)) + , enforceFocus: function () { + var that = this + var console = window.console + console.log('attach'); + $(document).on('focusin.modal', function (e) { + console.log('triggered'); + if (that.$element[0] !== e.target && !that.$element.has(e.target).length) { + that.$element.focus() + } + }) } - if (doAnimate) this.$backdrop[0].offsetWidth // force reflow + , relaxFocus: function () { + $(document).off('focus.modal') + } - this.$backdrop.addClass('in') + , escape: function () { + var that = this + if (this.isShown && this.options.keyboard) { + $(document).on('keyup.dismiss.modal', function ( e ) { + e.which == 27 && that.hide() + }) + } else if (!this.isShown) { + $(document).off('keyup.dismiss.modal') + } + } - doAnimate ? - this.$backdrop.one($.support.transition.end, callback) : - callback() + , hideWithTransition: function () { + var that = this + , timeout = setTimeout(function () { + that.$element.off($.support.transition.end) + that.hideModal() + }, 500) - } else if (!this.isShown && this.$backdrop) { - this.$backdrop.removeClass('in') + this.$element.one($.support.transition.end, function () { + clearTimeout(timeout) + that.hideModal() + }) + } - $.support.transition && this.$element.hasClass('fade')? - this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) : - removeBackdrop.call(this) + , hideModal: function (that) { + this.$element + .hide() + .trigger('hidden') - } else if (callback) { - callback() - } - } + this.backdrop() + } - function removeBackdrop() { - this.$backdrop.remove() - this.$backdrop = null - } + , removeBackdrop: function () { + this.$backdrop.remove() + this.$backdrop = null + } - function escape() { - var that = this - if (this.isShown && this.options.keyboard) { - $(document).on('keyup.dismiss.modal', function ( e ) { - e.which == 27 && that.hide() - }) - } else if (!this.isShown) { - $(document).off('keyup.dismiss.modal') - } + , backdrop: function (callback) { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' + + if (this.isShown && this.options.backdrop) { + var doAnimate = $.support.transition && animate + + this.$backdrop = $('
') + .appendTo(document.body) + + if (this.options.backdrop != 'static') { + this.$backdrop.click($.proxy(this.hide, this)) + } + + if (doAnimate) this.$backdrop[0].offsetWidth // force reflow + + this.$backdrop.addClass('in') + + doAnimate ? + this.$backdrop.one($.support.transition.end, callback) : + callback() + + } else if (!this.isShown && this.$backdrop) { + this.$backdrop.removeClass('in') + + $.support.transition && this.$element.hasClass('fade')? + this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) : + this.removeBackdrop() + + } else if (callback) { + callback() + } + } } diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js index 8c06421e10..5f5b3362d8 100644 --- a/docs/assets/js/bootstrap.min.js +++ b/docs/assets/js/bootstrap.min.js @@ -3,4 +3,4 @@ * Copyright 2012 Twitter, Inc. * http://www.apache.org/licenses/LICENSE-2.0.txt */ -!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(a){return a||(this.paused=!0),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide");this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c);e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):typeof c=="string"||(c=f.slide)?e[c]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){a(b).parent().removeClass("open")}"use strict";var b='[data-toggle="dropdown"]',c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),e,f,g;if(c.is(".disabled, :disabled"))return;return f=c.attr("data-target"),f||(f=c.attr("href"),f=f&&f.replace(/.*(?=#[^\s]*$)/,"")),e=a(f),e.length||(e=c.parent()),g=e.hasClass("open"),d(),g||e.toggleClass("open"),!1}},a.fn.dropdown=function(b){return this.each(function(){var d=a(this),e=d.data("dropdown");e||d.data("dropdown",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.dropdown.Constructor=c,a(function(){a("html").on("click.dropdown.data-api",d),a("body").on("click.dropdown",".dropdown form",function(a){a.stopPropagation()}).on("click.dropdown.data-api",b,c.prototype.toggle)})}(window.jQuery),!function(a){function c(){var b=this,c=setTimeout(function(){b.$element.off(a.support.transition.end),d.call(b)},500);this.$element.one(a.support.transition.end,function(){clearTimeout(c),d.call(b)})}function d(a){this.$element.hide().trigger("hidden"),e.call(this)}function e(b){var c=this,d=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var e=a.support.transition&&d;this.$backdrop=a('
').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(f,this)):f.call(this)):b&&b()}function f(){this.$backdrop.remove(),this.$backdrop=null}function g(){var b=this;this.isShown&&this.options.keyboard?a(document).on("keyup.dismiss.modal",function(a){a.which==27&&b.hide()}):this.isShown||a(document).off("keyup.dismiss.modal")}"use strict";var b=function(b,c){this.options=c,this.$element=a(b).delegate('[data-dismiss="modal"]',"click.dismiss.modal",a.proxy(this.hide,this))};b.prototype={constructor:b,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var b=this,c=a.Event("show");this.$element.trigger(c);if(this.isShown||c.isDefaultPrevented())return;a("body").addClass("modal-open"),this.isShown=!0,g.call(this),e.call(this,function(){var c=a.support.transition&&b.$element.hasClass("fade");b.$element.parent().length||b.$element.appendTo(document.body),b.$element.show(),c&&b.$element[0].offsetWidth,b.$element.addClass("in"),c?b.$element.one(a.support.transition.end,function(){b.$element.trigger("shown")}):b.$element.trigger("shown")})},hide:function(b){b&&b.preventDefault();var e=this;b=a.Event("hide"),this.$element.trigger(b);if(!this.isShown||b.isDefaultPrevented())return;this.isShown=!1,a("body").removeClass("modal-open"),g.call(this),this.$element.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?c.call(this):d.call(this)}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.hide)return c.hide();clearTimeout(this.timeout),c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},isHTML:function(a){return typeof a!="string"||a.charAt(0)==="<"&&a.charAt(a.length-1)===">"&&a.length>=3||/^(?:[^<]*<[\w\W]+>[^>]*$)/.exec(a)},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.isHTML(b)?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove()},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
',trigger:"hover",title:"",delay:0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.isHTML(b)?"html":"text"](b),a.find(".popover-content > *")[this.isHTML(c)?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

'})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&c.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu")&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c=this,d,e;return this.query=this.$element.val(),this.query?(d=a.grep(this.source,function(a){return c.matcher(a)}),d=this.sorter(d),d.length?this.render(d.slice(0,this.options.items)).show():this.shown?this.hide():this):this.shown?this.hide():this},matcher:function(a){return~a.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(a){var b=[],c=[],d=[],e;while(e=a.shift())e.toLowerCase().indexOf(this.query.toLowerCase())?~e.indexOf(this.query)?c.push(e):d.push(e):b.push(e);return b.concat(c,d)},highlighter:function(a){var b=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return a.replace(new RegExp("("+b+")","ig"),function(a,b){return""+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keypress,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},keypress:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:if(a.type!="keydown")break;a.preventDefault(),this.prev();break;case 40:if(a.type!="keydown")break;a.preventDefault(),this.next()}a.stopPropagation()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
    ',item:'
    • '},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file +!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(a){return a||(this.paused=!0),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide");this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c);e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):typeof c=="string"||(c=f.slide)?e[c]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){a(b).parent().removeClass("open")}"use strict";var b='[data-toggle="dropdown"]',c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),e,f,g;if(c.is(".disabled, :disabled"))return;return f=c.attr("data-target"),f||(f=c.attr("href"),f=f&&f.replace(/.*(?=#[^\s]*$)/,"")),e=a(f),e.length||(e=c.parent()),g=e.hasClass("open"),d(),g||e.toggleClass("open"),!1}},a.fn.dropdown=function(b){return this.each(function(){var d=a(this),e=d.data("dropdown");e||d.data("dropdown",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.dropdown.Constructor=c,a(function(){a("html").on("click.dropdown.data-api",d),a("body").on("click.dropdown",".dropdown form",function(a){a.stopPropagation()}).on("click.dropdown.data-api",b,c.prototype.toggle)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.options=c,this.$element=a(b).delegate('[data-dismiss="modal"]',"click.dismiss.modal",a.proxy(this.hide,this))};b.prototype={constructor:b,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var b=this,c=a.Event("show");this.$element.trigger(c);if(this.isShown||c.isDefaultPrevented())return;a("body").addClass("modal-open"),this.isShown=!0,this.escape(),this.backdrop(function(){var c=a.support.transition&&b.$element.hasClass("fade");b.$element.parent().length||b.$element.appendTo(document.body),b.$element.show(),c&&b.$element[0].offsetWidth,b.$element.addClass("in"),b.enforceFocus(),c?b.$element.one(a.support.transition.end,function(){b.$element.trigger("shown")}):b.$element.trigger("shown")})},hide:function(b){b&&b.preventDefault();var c=this;b=a.Event("hide"),this.$element.trigger(b);if(!this.isShown||b.isDefaultPrevented())return;this.isShown=!1,a("body").removeClass("modal-open"),this.escape(),this.relaxFocus(),this.$element.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var b=this,c=window.console;c.log("attach"),a(document).on("focusin.modal",function(a){c.log("triggered"),b.$element[0]!==a.target&&!b.$element.has(a.target).length&&b.$element.focus()})},relaxFocus:function(){a(document).off("focus.modal")},escape:function(){var b=this;this.isShown&&this.options.keyboard?a(document).on("keyup.dismiss.modal",function(a){a.which==27&&b.hide()}):this.isShown||a(document).off("keyup.dismiss.modal")},hideWithTransition:function(){var b=this,c=setTimeout(function(){b.$element.off(a.support.transition.end),b.hideModal()},500);this.$element.one(a.support.transition.end,function(){clearTimeout(c),b.hideModal()})},hideModal:function(a){this.$element.hide().trigger("hidden"),this.backdrop()},removeBackdrop:function(){this.$backdrop.remove(),this.$backdrop=null},backdrop:function(b){var c=this,d=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var e=a.support.transition&&d;this.$backdrop=a('
    ').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.hide)return c.hide();clearTimeout(this.timeout),c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},isHTML:function(a){return typeof a!="string"||a.charAt(0)==="<"&&a.charAt(a.length-1)===">"&&a.length>=3||/^(?:[^<]*<[\w\W]+>[^>]*$)/.exec(a)},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.isHTML(b)?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove()},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
    ',trigger:"hover",title:"",delay:0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.isHTML(b)?"html":"text"](b),a.find(".popover-content > *")[this.isHTML(c)?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

    '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&c.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu")&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c=this,d,e;return this.query=this.$element.val(),this.query?(d=a.grep(this.source,function(a){return c.matcher(a)}),d=this.sorter(d),d.length?this.render(d.slice(0,this.options.items)).show():this.shown?this.hide():this):this.shown?this.hide():this},matcher:function(a){return~a.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(a){var b=[],c=[],d=[],e;while(e=a.shift())e.toLowerCase().indexOf(this.query.toLowerCase())?~e.indexOf(this.query)?c.push(e):d.push(e):b.push(e);return b.concat(c,d)},highlighter:function(a){var b=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return a.replace(new RegExp("("+b+")","ig"),function(a,b){return""+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keypress,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},keypress:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:if(a.type!="keydown")break;a.preventDefault(),this.prev();break;case 40:if(a.type!="keydown")break;a.preventDefault(),this.next()}a.stopPropagation()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
      ',item:'
      • '},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file diff --git a/docs/javascript.html b/docs/javascript.html index 7ad42ae81f..3a1f151cde 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -223,8 +223,9 @@

      Live demo

      Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.

      + - {{! row}} From 3ea309568f77dbe72f35b682041537c8d467664f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 22:34:33 -0700 Subject: [PATCH 177/422] fix indenting and remove hidden subnav on Base CSS docs --- docs/base-css.html | 2170 ++++++++++++----------- docs/templates/pages/base-css.mustache | 2189 ++++++++++++------------ 2 files changed, 2173 insertions(+), 2186 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 88f4436424..175825c714 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -68,26 +68,17 @@
      -

      Base CSS

      On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.

      -
      -
      - -
      -
      + +
        @@ -103,114 +94,114 @@ - -
        -
        -

        Typography Headings, paragraphs, lists, and other inline type elements

        -
        + +
        +
        +

        Typography Headings, paragraphs, lists, and other inline type elements

        +
        -

        Headings

        -

        All HTML headings, <h1> through <h6> are available.

        -
        -

        h1. Heading 1

        -

        h2. Heading 2

        -

        h3. Heading 3

        -

        h4. Heading 4

        -
        h5. Heading 5
        -
        h6. Heading 6
        -
        +

        Headings

        +

        All HTML headings, <h1> through <h6> are available.

        +
        +

        h1. Heading 1

        +

        h2. Heading 2

        +

        h3. Heading 3

        +

        h4. Heading 4

        +
        h5. Heading 5
        +
        h6. Heading 6
        +
        -

        Body copy

        -

        Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).

        -
        -

        Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

        -

        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

        -

        Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

        -
        +

        Body copy

        +

        Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).

        +
        +

        Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

        +

        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

        +

        Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

        +
        -

        Lead body copy

        -

        Make a paragraph stand out by adding .lead.

        -
        -

        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

        -
        +

        Lead body copy

        +

        Make a paragraph stand out by adding .lead.

        +
        +

        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

        +
        -

        Built with Less

        -

        The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

        +

        Built with Less

        +

        The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

        -
        +
        -

        Emphasis

        -

        Make use of HTML's default emphasis tags, <strong> and <em>.

        +

        Emphasis

        +

        Make use of HTML's default emphasis tags, <strong> and <em>.

        -

        <strong>

        -

        For emphasizing a snippet of text with important

        -
        -

        The following snippet of text is rendered as bold text.

        -
        +

        <strong>

        +

        For emphasizing a snippet of text with important

        +
        +

        The following snippet of text is rendered as bold text.

        + 
         <strong>rendered as bold text</strong>
        -

        <em>

        -

        For emphasizing a snippet of text with stress

        -
        -

        The following snippet of text is rendered as italicized text.

        -
        -
        -<em>rendered as italicized text</em>
-
        +

        <em>

        +

        For emphasizing a snippet of text with stress

        +
        +

        The following snippet of text is rendered as italicized text.

        +
        + 
        +    <em>rendered as italicized text</em>
+
        -

        Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

        +

        Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

        -
        +
        -

        Abbreviations

        -

        Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

        +

        Abbreviations

        +

        Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

        -

        <abbr>

        -

        For expanded text on long hover of an abbreviation, include the title attribute.

        -
        -

        An abbreviation of the word attribute is attr.

        -
        +

        <abbr>

        +

        For expanded text on long hover of an abbreviation, include the title attribute.

        +
        +

        An abbreviation of the word attribute is attr.

        + 
         <abbr title="attribute">attr</abbr>
        -

        <abbr class="initialism">

        -

        Add .initialism to an abbreviation for a slightly smaller font-size.

        -
        -

        HTML is the best thing since sliced bread.

        -
        +

        <abbr class="initialism">

        +

        Add .initialism to an abbreviation for a slightly smaller font-size.

        +
        +

        HTML is the best thing since sliced bread.

        + 
         <abbr title="attribute" class="initialism">attr</abbr>
        -
        +
        -

        Addresses

        -

        Present contact information for the nearest ancestor or the entire body of work.

        +

        Addresses

        +

        Present contact information for the nearest ancestor or the entire body of work.

        -

        <address>

        -

        Preserve formatting by ending all lines with <br>.

        -
        -
        - Twitter, Inc.
        - 795 Folsom Ave, Suite 600
        - San Francisco, CA 94107
        - P: (123) 456-7890 -
        -
        - Full Name
        - first.last@gmail.com -
        -
        +

        <address>

        +

        Preserve formatting by ending all lines with <br>.

        +
        +
        + Twitter, Inc.
        + 795 Folsom Ave, Suite 600
        + San Francisco, CA 94107
        + P: (123) 456-7890 +
        +
        + Full Name
        + first.last@gmail.com +
        + 
         <address>
   <strong>Twitter, Inc.</strong><br>
@@ -226,36 +217,36 @@
        -
        +
        -

        Blockquotes

        -

        For quoting blocks of content from another source within your document.

        +

        Blockquotes

        +

        For quoting blocks of content from another source within your document.

        -

        Default blockqoute

        -

        Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

        -
        -
        -

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        -
        -
        +

        Default blockqoute

        +

        Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

        +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        +
        + 
         <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
        -

        Blockquote options

        -

        Style and content changes for simple variations on a standard blockquote.

        +

        Blockquote options

        +

        Style and content changes for simple variations on a standard blockquote.

        -

        Naming a source

        -

        Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

        -
        -
        -

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        - Someone famous in Source Title -
        -
        +

        Naming a source

        +

        Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

        +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        + Someone famous in Source Title +
        + 
         <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -263,14 +254,14 @@
 </blockquote>
        -

        Alternate displays

        -

        Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.

        -
        -
        -

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        - Someone famous in Source Title -
        -
        +

        Alternate displays

        +

        Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.

        +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        + Someone famous in Source Title +
        + 
         <blockquote class="pull-right">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -279,99 +270,99 @@
        -
        +
        - -

        Lists

        + +

        Lists

        -

        Unordered

        -

        A list of items in which the order does not explicitly matter.

        -
        -
          -
        • Lorem ipsum dolor sit amet
          • -
        • Consectetur adipiscing elit
          • -
        • Integer molestie lorem at massa
          • -
        • Facilisis in pretium nisl aliquet
          • -
        • Nulla volutpat aliquam velit +

          Unordered

          +

          A list of items in which the order does not explicitly matter.

          +
            -
          • Phasellus iaculis neque
            • -
          • Purus sodales ultricies
            • -
          • Vestibulum laoreet porttitor sem
            • -
          • Ac tristique libero volutpat at
            • +
          • Lorem ipsum dolor sit amet
            • +
          • Consectetur adipiscing elit
            • +
          • Integer molestie lorem at massa
            • +
          • Facilisis in pretium nisl aliquet
            • +
          • Nulla volutpat aliquam velit +
              +
            • Phasellus iaculis neque
              • +
            • Purus sodales ultricies
              • +
            • Vestibulum laoreet porttitor sem
              • +
            • Ac tristique libero volutpat at
              • +
            +
            • +
          • Faucibus porta lacus fringilla vel
            • +
          • Aenean sit amet erat nunc
            • +
          • Eget porttitor lorem
          -
          • -
        • Faucibus porta lacus fringilla vel
          • -
        • Aenean sit amet erat nunc
          • -
        • Eget porttitor lorem
          • -
        -
        + 
       <ul>
   <li>...</li>
 </ul>
      -

      Ordered

      -

      A list of items in which the order does explicitly matter.

      -
      -
        -
      1. Lorem ipsum dolor sit amet
        2. -
      2. Consectetur adipiscing elit
        3. -
      3. Integer molestie lorem at massa
        4. -
      4. Facilisis in pretium nisl aliquet
        5. -
      5. Nulla volutpat aliquam velit
        6. -
      6. Faucibus porta lacus fringilla vel
        7. -
      7. Aenean sit amet erat nunc
        8. -
      8. Eget porttitor lorem
        9. -
      -
      +

      Ordered

      +

      A list of items in which the order does explicitly matter.

      +
      +
        +
      1. Lorem ipsum dolor sit amet
        2. +
      2. Consectetur adipiscing elit
        3. +
      3. Integer molestie lorem at massa
        4. +
      4. Facilisis in pretium nisl aliquet
        5. +
      5. Nulla volutpat aliquam velit
        6. +
      6. Faucibus porta lacus fringilla vel
        7. +
      7. Aenean sit amet erat nunc
        8. +
      8. Eget porttitor lorem
        9. +
      + 
       <ol>
   <li>...</li>
 </ol>
      -

      Unstyled

      -

      A list of items with no list-style or additional left padding.

      -
      -
        -
      • Lorem ipsum dolor sit amet
        • -
      • Consectetur adipiscing elit
        • -
      • Integer molestie lorem at massa
        • -
      • Facilisis in pretium nisl aliquet
        • -
      • Nulla volutpat aliquam velit -
          -
        • Phasellus iaculis neque
          • -
        • Purus sodales ultricies
          • -
        • Vestibulum laoreet porttitor sem
          • -
        • Ac tristique libero volutpat at
          • -
        -
        • -
      • Faucibus porta lacus fringilla vel
        • -
      • Aenean sit amet erat nunc
        • -
      • Eget porttitor lorem
        • -
      -
      +

      Unstyled

      +

      A list of items with no list-style or additional left padding.

      +
      +
        +
      • Lorem ipsum dolor sit amet
        • +
      • Consectetur adipiscing elit
        • +
      • Integer molestie lorem at massa
        • +
      • Facilisis in pretium nisl aliquet
        • +
      • Nulla volutpat aliquam velit +
          +
        • Phasellus iaculis neque
          • +
        • Purus sodales ultricies
          • +
        • Vestibulum laoreet porttitor sem
          • +
        • Ac tristique libero volutpat at
          • +
        +
        • +
      • Faucibus porta lacus fringilla vel
        • +
      • Aenean sit amet erat nunc
        • +
      • Eget porttitor lorem
        • +
      + 
       <ul class="unstyled">
   <li>...</li>
 </ul>
      -

      Description

      -

      A list of terms with their associated descriptions.

      -
      -
      -
      Description lists
      -
      A description list is perfect for defining terms.
      -
      Euismod
      -
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      -
      Donec id elit non mi porta gravida at eget metus.
      -
      Malesuada porta
      -
      Etiam porta sem malesuada magna mollis euismod.
      -
      -
      +

      Description

      +

      A list of terms with their associated descriptions.

      +
      +
      +
      Description lists
      +
      A description list is perfect for defining terms.
      +
      Euismod
      +
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      +
      Donec id elit non mi porta gravida at eget metus.
      +
      Malesuada porta
      +
      Etiam porta sem malesuada magna mollis euismod.
      +
      + 
       <dl>
   <dt>...</dt>
@@ -379,21 +370,21 @@
 </dl>
      -

      Horizontal description

      -

      Make terms and descriptions in <dl> line up side-by-side.

      -
      -
      -
      Description lists
      -
      A description list is perfect for defining terms.
      -
      Euismod
      -
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      -
      Donec id elit non mi porta gravida at eget metus.
      -
      Malesuada porta
      -
      Etiam porta sem malesuada magna mollis euismod.
      -
      Felis euismod semper eget lacinia
      -
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      -
      -
      +

      Horizontal description

      +

      Make terms and descriptions in <dl> line up side-by-side.

      +
      +
      +
      Description lists
      +
      A description list is perfect for defining terms.
      +
      Euismod
      +
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      +
      Donec id elit non mi porta gravida at eget metus.
      +
      Malesuada porta
      +
      Etiam porta sem malesuada magna mollis euismod.
      +
      Felis euismod semper eget lacinia
      +
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      +
      + 
       <dl class="dl-horizontal">
   <dt>...</dt>
@@ -401,28 +392,28 @@
 </dl>

      - Heads up! - Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout. -

      - + Heads up! + Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout. +

      + - -
      -
      -

      Code Inline and block code snippets

      -
      + +
      +
      +

      Code Inline and block code snippets

      +
      -

      Inline

      -

      Wrap inline snippets of code with <code>.

      +

      Inline

      +

      Wrap inline snippets of code with <code>.

       For example, <code>section</code> should be wrapped as inline.
      -

      Basic block

      -

      Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

      +

      Basic block

      +

      Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

       <p>Sample text here...</p>
      @@ -431,53 +422,53 @@ For example, <code>section</code> should be wrapped as inline. &lt;p&gt;Sample text here...&lt;/p&gt; </pre> -

      Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

      -

      You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

      -
      +

      Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

      +

      You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

      +
      - -
      -
      -

      Tables For, you guessed it, tabular data

      -
      + +
      +
      +

      Tables For, you guessed it, tabular data

      +
      -

      Default styles

      -

      For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      -
      +

      Default styles

      +

      For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      + 
       <table class="table">
   …
@@ -485,168 +476,168 @@ For example, <code>section</code> should be wrapped as inline.
      -
      +
      -

      Optional classes

      -

      Add any of the follow classes to the .table base class.

      +

      Optional classes

      +

      Add any of the follow classes to the .table base class.

      -

      .table-striped

      -

      Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      -
      +

      .table-striped

      +

      Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      + 
       <table class="table table-striped">
   …
 </table>
      -

      .table-bordered

      -

      Add borders and rounded corners to the table.

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #First NameLast NameUsername
      1MarkOtto@mdo
      MarkOtto@TwBootstrap
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      +

      .table-bordered

      +

      Add borders and rounded corners to the table.

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #First NameLast NameUsername
      1MarkOtto@mdo
      MarkOtto@TwBootstrap
      2JacobThornton@fat
      3Larry the Bird@twitter
      + 
       <table class="table table-bordered">
   …
 </table>
      -

      .table-hover

      -

      Enable a hover state on table rows within a <tbody>.

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      +

      .table-hover

      +

      Enable a hover state on table rows within a <tbody>.

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      + 
       <table class="table table-hover">
   …
 </table>
      -

      .table-condensed

      -

      Makes tables more compact by cutting cell padding in half.

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      +

      .table-condensed

      +

      Makes tables more compact by cutting cell padding in half.

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      + 
       <table class="table table-condensed">
   …
@@ -654,82 +645,82 @@ For example, <code>section</code> should be wrapped as inline.
      -
      +
      -

      Supported table markup

      -

      List of supported table HTML elements and how they should be used.

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      TagDescription
      - <table> - - Wrapping element for displaying data in a tabular format -
      - <thead> - - Container element for table header rows (<tr>) to label table columns -
      - <tbody> - - Container element for table rows (<tr>) in the body of the table -
      - <tr> - - Container element for a set of table cells (<td> or <th>) that appears on a single row -
      - <td> - - Default table cell -
      - <th> - - Special table cell for column (or row, depending on scope and placement) labels
      - Must be used within a <thead> -
      - <caption> - - Description or summary of what the table holds, especially useful for screen readers -
      +

      Supported table markup

      +

      List of supported table HTML elements and how they should be used.

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      TagDescription
      + <table> + + Wrapping element for displaying data in a tabular format +
      + <thead> + + Container element for table header rows (<tr>) to label table columns +
      + <tbody> + + Container element for table rows (<tr>) in the body of the table +
      + <tr> + + Container element for a set of table cells (<td> or <th>) that appears on a single row +
      + <td> + + Default table cell +
      + <th> + + Special table cell for column (or row, depending on scope and placement) labels
      + Must be used within a <thead> +
      + <caption> + + Description or summary of what the table holds, especially useful for screen readers + 
       <table>
   <thead>
@@ -747,28 +738,28 @@ For example, <code>section</code> should be wrapped as inline.
 </table>
      -
      +
      - -
      -
      -

      Forms

      -
      + +
      +
      +

      Forms

      +
      -

      Default styles

      -

      Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

      -
      - - -

      Example block-level help text here.

      - - -
      +

      Default styles

      +

      Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

      +
      + + +

      Example block-level help text here.

      + + + 
       <form class="well">
   <label>Label name</label>
@@ -782,18 +773,18 @@ For example, <code>section</code> should be wrapped as inline.
      -
      +
      -

      Optional layouts

      -

      Included with Bootstrap are three optional form layouts for common use cases.

      +

      Optional layouts

      +

      Included with Bootstrap are three optional form layouts for common use cases.

      -

      Search form

      -

      Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

      -
      - - -
      +

      Search form

      +

      Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

      +
      + + + 
       <form class="form-search">
   <input type="text" class="input-medium search-query">
@@ -801,16 +792,16 @@ For example, <code>section</code> should be wrapped as inline.
 </form>
      -

      Inline form

      -

      Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

      -
      - - - - -
      +

      Inline form

      +

      Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

      +
      + + + + + 
       <form class="form-inline">
   <input type="text" class="input-small" placeholder="Email">
@@ -822,36 +813,36 @@ For example, <code>section</code> should be wrapped as inline.
 </form>
      -

      Horizontal form

      -

      Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

      -
        -
      • Add .form-horizontal to the form
        • -
      • Wrap labels and controls in .control-group
        • -
      • Add .control-label to the label
        • -
      • Wrap any associated controls in .controls for proper alignment
        • -
      -
      -
      - -
      - -
      -
      -
      - -
      - -
      -
      -
      -
      - - -
      -
      -
      +

      Horizontal form

      +

      Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

      +
        +
      • Add .form-horizontal to the form
        • +
      • Wrap labels and controls in .control-group
        • +
      • Add .control-label to the label
        • +
      • Wrap any associated controls in .controls for proper alignment
        • +
      +
      +
      + +
      + +
      +
      +
      + +
      + +
      +
      +
      +
      + + +
      +
      + 
       <form class="form-horizontal">
   <div class="control-group">
@@ -878,49 +869,49 @@ For example, <code>section</code> should be wrapped as inline.
      -
      +
      -

      Supported form controls

      -

      Examples of standard form controls supported in an example form layout.

      +

      Supported form controls

      +

      Examples of standard form controls supported in an example form layout.

      -

      Inputs

      -

      Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

      -

      Requires the use of a specified type at all times.

      -
      - -
      +

      Inputs

      +

      Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

      +

      Requires the use of a specified type at all times.

      +
      + + 
       <input type="text" placeholder="Text input">
      -

      Textarea

      -

      Form control which supports multiple lines of text. Change row attribute as necessary.

      -
      - -
      +

      Textarea

      +

      Form control which supports multiple lines of text. Change row attribute as necessary.

      +
      + + 
       <textarea id="textarea" rows="3"></textarea>
      -

      Checkboxes and radios

      -

      Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

      -

      Default (stacked)

      -
      - -
      - - -
      +

      Checkboxes and radios

      +

      Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

      +

      Default (stacked)

      +
      + +
      + + + 
       <label class="checkbox">
   <input type="checkbox" value="">
@@ -937,19 +928,19 @@ For example, <code>section</code> should be wrapped as inline.
 </label>
      -

      Inline checkboxes

      -

      Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

      -
      - - - -
      +

      Inline checkboxes

      +

      Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

      +
      + + + + 
       <label class="checkbox inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -962,25 +953,25 @@ For example, <code>section</code> should be wrapped as inline.
 </label>
      -

      Selects

      -

      Use the default option or specify a multiple="multiple" to show multiple options at once.

      -
      - -
      - -
      +

      Selects

      +

      Use the default option or specify a multiple="multiple" to show multiple options at once.

      +
      + +
      + + 
       <select>
   <option>something</option>
@@ -1000,28 +991,28 @@ For example, <code>section</code> should be wrapped as inline.
      -
      +
      -

      Extending form controls

      -

      Adding on top of existing browser controls, Bootstrap includes other useful form components.

      +

      Extending form controls

      +

      Adding on top of existing browser controls, Bootstrap includes other useful form components.

      -

      Prepended and appended inputs

      -

      Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

      +

      Prepended and appended inputs

      +

      Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

      -

      Default options

      -

      Wrap a .add-on and an input with one of two classes to prepend or append text to an input.

      -
      -
      - @ - -
      -
      -
      - - .00 -
      -
      +

      Default options

      +

      Wrap a .add-on and an input with one of two classes to prepend or append text to an input.

      +
      +
      + @ + +
      +
      +
      + + .00 +
      + 
       <div class="input-prepend">
   <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
@@ -1031,35 +1022,35 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
      -

      Combined

      -

      Use both classes and two instances of .add-on to prepend and append an input.

      -
      -
      - $ - - .00 -
      -
      +

      Combined

      +

      Use both classes and two instances of .add-on to prepend and append an input.

      +
      +
      + $ + + .00 +
      + 
       <div class="input-prepend input-append">
   <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
 </div>
      -

      Buttons instead of text

      -

      Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

      -
      -
      - - -
      -
      -
      - - - -
      -
      +

      Buttons instead of text

      +

      Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

      +
      +
      + + +
      +
      +
      + + + +
      + 
       <div class="input-append">
   <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
@@ -1070,20 +1061,20 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
      -

      Control sizing

      -

      Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

      +

      Control sizing

      +

      Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

      -

      Relative sizing

      -
      -
      - - - - - - -
      -
      +

      Relative sizing

      +
      +
      + + + + + + +
      + 
       <input class="input-mini" type="text">
 <input class="input-small" type="text">
@@ -1092,68 +1083,68 @@ For example, <code>section</code> should be wrapped as inline.
 <input class="input-xlarge" type="text">
 <input class="input-xxlarge" type="text">
      -

      - Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. -

      +

      + Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

      -

      Grid sizing

      -

      Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

      -
      -
      - - - - - - -
      -
      +

      Grid sizing

      +

      Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

      +
      +
      + + + + + + +
      + 
       <input class="span1" type="text">
 <input class="span2" type="text">
 <input class="span3" type="text">
      -

      For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

      -
      -
      - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      +

      For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

      +
      +
      + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      + 
       <div class="controls controls-row">
   <input class="span4" type="text" placeholder=".span4">
@@ -1161,23 +1152,23 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
      -

      Uneditable inputs

      -

      Present data in a form that's not editable without using actual form markup.

      -
      - Some value here -
      +

      Uneditable inputs

      +

      Present data in a form that's not editable without using actual form markup.

      +
      + Some value here + 
         <span class="input-xlarge uneditable-input">Some value here</span>
      -

      Form actions

      -

      End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

      -
      -
      - - -
      -
      +

      Form actions

      +

      End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

      +
      +
      + + +
      + 
       <div class="form-actions">
   <button type="submit" class="btn btn-primary">Save changes</button>
@@ -1185,76 +1176,76 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
      -

      Help text

      -

      Inline and block level support for help text that appears around form controls.

      -

      Inline help

      -
      - Inline help text -
      +

      Help text

      +

      Inline and block level support for help text that appears around form controls.

      +

      Inline help

      +
      + Inline help text + 
       <span class="help-inline">Inline help text</span>
      -

      Block help

      -
      - - A longer block of help text that breaks onto a new line and may extend beyond one line. -
      +

      Block help

      +
      + + A longer block of help text that breaks onto a new line and may extend beyond one line. + 
       <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
      -
      +
      -

      Form control states

      -

      Provide feedback to users or visitors with basic feedback states on form controls and labels.

      +

      Form control states

      +

      Provide feedback to users or visitors with basic feedback states on form controls and labels.

      -

      Input focus

      -

      We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

      -
      - -
      +

      Input focus

      +

      We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

      +
      + + 
       <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
      -

      Disabled inputs

      -

      Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

      -
      - -
      +

      Disabled inputs

      +

      Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

      +
      + + 
       <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
      -

      Validation states

      -

      Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.

      +

      Validation states

      +

      Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.

      -
      -
      - -
      - - Something may have gone wrong -
      -
      -
      - -
      - - Please correct the error -
      -
      -
      - -
      - - Woohoo! -
      -
      -
      +
      +
      + +
      + + Something may have gone wrong +
      +
      +
      + +
      + + Please correct the error +
      +
      +
      + +
      + + Woohoo! +
      +
      + 
       <div class="control-group warning">
   <label class="control-label" for="inputWarning">Input with warning</label>
@@ -1279,133 +1270,133 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
      -
      +
      - -
      -
      -

      Buttons

      -
      + +
      +
      +

      Buttons

      +
      -

      Default buttons

      -

      Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      Buttonclass=""Description
      btnStandard gray button with gradient
      btn btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons
      btn btn-infoUsed as an alternative to the default styles
      btn btn-successIndicates a successful or positive action
      btn btn-warningIndicates caution should be taken with this action
      btn btn-dangerIndicates a dangerous or potentially negative action
      btn btn-inverseAlternate dark gray button, not tied to a semantic action or use
      +

      Default buttons

      +

      Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Buttonclass=""Description
      btnStandard gray button with gradient
      btn btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons
      btn btn-infoUsed as an alternative to the default styles
      btn btn-successIndicates a successful or positive action
      btn btn-warningIndicates caution should be taken with this action
      btn btn-dangerIndicates a dangerous or potentially negative action
      btn btn-inverseAlternate dark gray button, not tied to a semantic action or use
      -

      Cross browser compatibility

      -

      IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

      +

      Cross browser compatibility

      +

      IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

      -
      +
      -

      Button sizes

      -

      Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

      -

      - - -

      -

      - - -

      -

      - - -

      +

      Button sizes

      +

      Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

      +

      + + +

      +

      + + +

      +

      + + +

      -
      +
      -

      Disabled state

      -

      Make buttons look unclickable by fading them back 50%.

      +

      Disabled state

      +

      Make buttons look unclickable by fading them back 50%.

      -

      Anchor element

      -

      Add the .disabled class to <a> buttons.

      -

      - Primary link - Link -

      +

      Anchor element

      +

      Add the .disabled class to <a> buttons.

      +

      + Primary link + Link + 

       <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
 <a href="#" class="btn btn-large disabled">Link</a>
      -

      - Heads up! - We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. -

      +

      + Heads up! + We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. +

      -

      Button element

      -

      Add the disabled attribute to <button> buttons.

      -

      - - -

      +

      Button element

      +

      Add the disabled attribute to <button> buttons.

      +

      + + + 

       <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
 <button type="button" class="btn btn-large" disabled>Button</button>
      -
      +
      -

      One class, multiple tags

      -

      Use the .btn class on an <a>, <button>, or <input> element.

      -
      - Link - - - -
      +

      One class, multiple tags

      +

      Use the .btn class on an <a>, <button>, or <input> element.

      +
      + Link + + + + 
       <a class="btn" href="">Link</a>
 <button class="btn" type="submit">
@@ -1416,247 +1407,250 @@ For example, <code>section</code> should be wrapped as inline.
 <input class="btn" type="submit"
          value="Submit">
      -

      As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

      +

      As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

      -
      +
      - -
      -
      -

      Icons Graciously provided by Glyphicons

      -
      + +
      +
      +

      Icons Graciously provided by Glyphicons

      +
      -

      Icon glyphs

      -

      140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

      -
        -
      • icon-glass
        • -
      • icon-music
        • -
      • icon-search
        • -
      • icon-envelope
        • -
      • icon-heart
        • -
      • icon-star
        • -
      • icon-star-empty
        • -
      • icon-user
        • -
      • icon-film
        • -
      • icon-th-large
        • -
      • icon-th
        • -
      • icon-th-list
        • -
      • icon-ok
        • -
      • icon-remove
        • -
      • icon-zoom-in
        • -
      • icon-zoom-out
        • -
      • icon-off
        • -
      • icon-signal
        • -
      • icon-cog
        • -
      • icon-trash
        • -
      • icon-home
        • -
      • icon-file
        • -
      • icon-time
        • -
      • icon-road
        • -
      • icon-download-alt
        • -
      • icon-download
        • -
      • icon-upload
        • -
      • icon-inbox
        • +

        Icon glyphs

        +

        140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

        +
          +
        • icon-glass
          • +
        • icon-music
          • +
        • icon-search
          • +
        • icon-envelope
          • +
        • icon-heart
          • +
        • icon-star
          • +
        • icon-star-empty
          • +
        • icon-user
          • +
        • icon-film
          • +
        • icon-th-large
          • +
        • icon-th
          • +
        • icon-th-list
          • +
        • icon-ok
          • +
        • icon-remove
          • +
        • icon-zoom-in
          • +
        • icon-zoom-out
          • +
        • icon-off
          • +
        • icon-signal
          • +
        • icon-cog
          • +
        • icon-trash
          • +
        • icon-home
          • +
        • icon-file
          • +
        • icon-time
          • +
        • icon-road
          • +
        • icon-download-alt
          • +
        • icon-download
          • +
        • icon-upload
          • +
        • icon-inbox
          • -
        • icon-play-circle
          • -
        • icon-repeat
          • -
        • icon-refresh
          • -
        • icon-list-alt
          • -
        • icon-lock
          • -
        • icon-flag
          • -
        • icon-headphones
          • -
        • icon-volume-off
          • -
        • icon-volume-down
          • -
        • icon-volume-up
          • -
        • icon-qrcode
          • -
        • icon-barcode
          • -
        • icon-tag
          • -
        • icon-tags
          • -
        • icon-book
          • -
        • icon-bookmark
          • -
        • icon-print
          • -
        • icon-camera
          • -
        • icon-font
          • -
        • icon-bold
          • -
        • icon-italic
          • -
        • icon-text-height
          • -
        • icon-text-width
          • -
        • icon-align-left
          • -
        • icon-align-center
          • -
        • icon-align-right
          • -
        • icon-align-justify
          • -
        • icon-list
          • +
        • icon-play-circle
          • +
        • icon-repeat
          • +
        • icon-refresh
          • +
        • icon-list-alt
          • +
        • icon-lock
          • +
        • icon-flag
          • +
        • icon-headphones
          • +
        • icon-volume-off
          • +
        • icon-volume-down
          • +
        • icon-volume-up
          • +
        • icon-qrcode
          • +
        • icon-barcode
          • +
        • icon-tag
          • +
        • icon-tags
          • +
        • icon-book
          • +
        • icon-bookmark
          • +
        • icon-print
          • +
        • icon-camera
          • +
        • icon-font
          • +
        • icon-bold
          • +
        • icon-italic
          • +
        • icon-text-height
          • +
        • icon-text-width
          • +
        • icon-align-left
          • +
        • icon-align-center
          • +
        • icon-align-right
          • +
        • icon-align-justify
          • +
        • icon-list
          • -
        • icon-indent-left
          • -
        • icon-indent-right
          • -
        • icon-facetime-video
          • -
        • icon-picture
          • -
        • icon-pencil
          • -
        • icon-map-marker
          • -
        • icon-adjust
          • -
        • icon-tint
          • -
        • icon-edit
          • -
        • icon-share
          • -
        • icon-check
          • -
        • icon-move
          • -
        • icon-step-backward
          • -
        • icon-fast-backward
          • -
        • icon-backward
          • -
        • icon-play
          • -
        • icon-pause
          • -
        • icon-stop
          • -
        • icon-forward
          • -
        • icon-fast-forward
          • -
        • icon-step-forward
          • -
        • icon-eject
          • -
        • icon-chevron-left
          • -
        • icon-chevron-right
          • -
        • icon-plus-sign
          • -
        • icon-minus-sign
          • -
        • icon-remove-sign
          • -
        • icon-ok-sign
          • +
        • icon-indent-left
          • +
        • icon-indent-right
          • +
        • icon-facetime-video
          • +
        • icon-picture
          • +
        • icon-pencil
          • +
        • icon-map-marker
          • +
        • icon-adjust
          • +
        • icon-tint
          • +
        • icon-edit
          • +
        • icon-share
          • +
        • icon-check
          • +
        • icon-move
          • +
        • icon-step-backward
          • +
        • icon-fast-backward
          • +
        • icon-backward
          • +
        • icon-play
          • +
        • icon-pause
          • +
        • icon-stop
          • +
        • icon-forward
          • +
        • icon-fast-forward
          • +
        • icon-step-forward
          • +
        • icon-eject
          • +
        • icon-chevron-left
          • +
        • icon-chevron-right
          • +
        • icon-plus-sign
          • +
        • icon-minus-sign
          • +
        • icon-remove-sign
          • +
        • icon-ok-sign
          • -
        • icon-question-sign
          • -
        • icon-info-sign
          • -
        • icon-screenshot
          • -
        • icon-remove-circle
          • -
        • icon-ok-circle
          • -
        • icon-ban-circle
          • -
        • icon-arrow-left
          • -
        • icon-arrow-right
          • -
        • icon-arrow-up
          • -
        • icon-arrow-down
          • -
        • icon-share-alt
          • -
        • icon-resize-full
          • -
        • icon-resize-small
          • -
        • icon-plus
          • -
        • icon-minus
          • -
        • icon-asterisk
          • -
        • icon-exclamation-sign
          • -
        • icon-gift
          • -
        • icon-leaf
          • -
        • icon-fire
          • -
        • icon-eye-open
          • -
        • icon-eye-close
          • -
        • icon-warning-sign
          • -
        • icon-plane
          • -
        • icon-calendar
          • -
        • icon-random
          • -
        • icon-comment
          • -
        • icon-magnet
          • +
        • icon-question-sign
          • +
        • icon-info-sign
          • +
        • icon-screenshot
          • +
        • icon-remove-circle
          • +
        • icon-ok-circle
          • +
        • icon-ban-circle
          • +
        • icon-arrow-left
          • +
        • icon-arrow-right
          • +
        • icon-arrow-up
          • +
        • icon-arrow-down
          • +
        • icon-share-alt
          • +
        • icon-resize-full
          • +
        • icon-resize-small
          • +
        • icon-plus
          • +
        • icon-minus
          • +
        • icon-asterisk
          • +
        • icon-exclamation-sign
          • +
        • icon-gift
          • +
        • icon-leaf
          • +
        • icon-fire
          • +
        • icon-eye-open
          • +
        • icon-eye-close
          • +
        • icon-warning-sign
          • +
        • icon-plane
          • +
        • icon-calendar
          • +
        • icon-random
          • +
        • icon-comment
          • +
        • icon-magnet
          • -
        • icon-chevron-up
          • -
        • icon-chevron-down
          • -
        • icon-retweet
          • -
        • icon-shopping-cart
          • -
        • icon-folder-close
          • -
        • icon-folder-open
          • -
        • icon-resize-vertical
          • -
        • icon-resize-horizontal
          • -
        • icon-hdd
          • -
        • icon-bullhorn
          • -
        • icon-bell
          • -
        • icon-certificate
          • -
        • icon-thumbs-up
          • -
        • icon-thumbs-down
          • -
        • icon-hand-right
          • -
        • icon-hand-left
          • -
        • icon-hand-up
          • -
        • icon-hand-down
          • -
        • icon-circle-arrow-right
          • -
        • icon-circle-arrow-left
          • -
        • icon-circle-arrow-up
          • -
        • icon-circle-arrow-down
          • -
        • icon-globe
          • -
        • icon-wrench
          • -
        • icon-tasks
          • -
        • icon-filter
          • -
        • icon-briefcase
          • -
        • icon-fullscreen
          • -
        +
      • icon-chevron-up
        • +
      • icon-chevron-down
        • +
      • icon-retweet
        • +
      • icon-shopping-cart
        • +
      • icon-folder-close
        • +
      • icon-folder-open
        • +
      • icon-resize-vertical
        • +
      • icon-resize-horizontal
        • +
      • icon-hdd
        • +
      • icon-bullhorn
        • +
      • icon-bell
        • +
      • icon-certificate
        • +
      • icon-thumbs-up
        • +
      • icon-thumbs-down
        • +
      • icon-hand-right
        • +
      • icon-hand-left
        • +
      • icon-hand-up
        • +
      • icon-hand-down
        • +
      • icon-circle-arrow-right
        • +
      • icon-circle-arrow-left
        • +
      • icon-circle-arrow-up
        • +
      • icon-circle-arrow-down
        • +
      • icon-globe
        • +
      • icon-wrench
        • +
      • icon-tasks
        • +
      • icon-filter
        • +
      • icon-briefcase
        • +
      • icon-fullscreen
        • +
      -

      Glyphicons attribution

      -

      Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

      +

      Glyphicons attribution

      +

      Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

      -
      +
      -

      How to use

      -

      All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

      +

      How to use

      +

      All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

       <i class="icon-search"></i>
      -

      There are also styles available for inverted (white) icons, made ready with one extra class:

      +

      There are also styles available for inverted (white) icons, made ready with one extra class:

       <i class="icon-search icon-white"></i>
      -

      - Heads up! - When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing. -

      +

      + Heads up! + When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing. +

      -
      +
      -

      Icon examples

      -

      Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

      +

      Icon examples

      +

      Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

      -

      Buttons

      -
      -
      -
      - - - - -
      -
      - User - - -
      -
      -
      - -

      Navigation

      -
      -
      - -
      -
      - -

      Form fields

      -
      -
      - -
      -
      - +

      Buttons

      +
      +
      +
      + + + + +
      +
      + User + + +
      -
      - -
      +

      Navigation

      +
      +
      + +
      +
      +

      Form fields

      +
      +
      + +
      +
      + +
      +
      +
      +
      + +
      + + + +
      -
      + diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index a5d334fa3e..cc09f83016 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1,23 +1,14 @@ -

      {{_i}}Base CSS{{/i}}

      {{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}

      -
      -
      - -
      -
      + +
        @@ -33,121 +24,121 @@ - -
        -
        -

        {{_i}}Typography Headings, paragraphs, lists, and other inline type elements{{/i}}

        -
        + +
        +
        +

        {{_i}}Typography Headings, paragraphs, lists, and other inline type elements{{/i}}

        +
        - {{! Headings }} -

        {{_i}}Headings{{/i}}

        -

        {{_i}}All HTML headings, <h1> through <h6> are available.{{/i}}

        -
        -

        h1. {{_i}}Heading 1{{/i}}

        -

        h2. {{_i}}Heading 2{{/i}}

        -

        h3. {{_i}}Heading 3{{/i}}

        -

        h4. {{_i}}Heading 4{{/i}}

        -
        h5. {{_i}}Heading 5{{/i}}
        -
        h6. {{_i}}Heading 6{{/i}}
        -
        + {{! Headings }} +

        {{_i}}Headings{{/i}}

        +

        {{_i}}All HTML headings, <h1> through <h6> are available.{{/i}}

        +
        +

        h1. {{_i}}Heading 1{{/i}}

        +

        h2. {{_i}}Heading 2{{/i}}

        +

        h3. {{_i}}Heading 3{{/i}}

        +

        h4. {{_i}}Heading 4{{/i}}

        +
        h5. {{_i}}Heading 5{{/i}}
        +
        h6. {{_i}}Heading 6{{/i}}
        +
        - {{! Body copy }} -

        {{_i}}Body copy{{/i}}

        -

        {{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}

        -
        -

        Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

        -

        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

        -

        Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

        -
        + {{! Body copy }} +

        {{_i}}Body copy{{/i}}

        +

        {{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}

        +
        +

        Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

        +

        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

        +

        Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

        +
        - {{! Body copy .lead }} -

        {{_i}}Lead body copy{{/i}}

        -

        {{_i}}Make a paragraph stand out by adding .lead.{{/i}}

        -
        -

        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

        -
        + {{! Body copy .lead }} +

        {{_i}}Lead body copy{{/i}}

        +

        {{_i}}Make a paragraph stand out by adding .lead.{{/i}}

        +
        +

        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

        +
        - {{! Using LESS }} -

        {{_i}}Built with Less{{/i}}

        -

        {{_i}}The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}

        + {{! Using LESS }} +

        {{_i}}Built with Less{{/i}}

        +

        {{_i}}The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}

        -
        +
        - {{! Emphasis }} -

        {{_i}}Emphasis{{/i}}

        -

        {{_i}}Make use of HTML's default emphasis tags, <strong> and <em>.{{/i}}

        + {{! Emphasis }} +

        {{_i}}Emphasis{{/i}}

        +

        {{_i}}Make use of HTML's default emphasis tags, <strong> and <em>.{{/i}}

        -

        <strong>

        -

        {{_i}}For emphasizing a snippet of text with important{{/i}}

        -
        -

        The following snippet of text is rendered as bold text.

        -
        +

        <strong>

        +

        {{_i}}For emphasizing a snippet of text with important{{/i}}

        +
        +

        The following snippet of text is rendered as bold text.

        + 
         <strong>rendered as bold text</strong>
        -

        <em>

        -

        {{_i}}For emphasizing a snippet of text with stress{{/i}}

        -
        -

        The following snippet of text is rendered as italicized text.

        -
        -
        -<em>rendered as italicized text</em>
-
        +

        <em>

        +

        {{_i}}For emphasizing a snippet of text with stress{{/i}}

        +
        +

        The following snippet of text is rendered as italicized text.

        +
        + 
        +    <em>rendered as italicized text</em>
+
        -

        {{_i}}Heads up!{{/i}} {{_i}}Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.{{/i}}

        +

        {{_i}}Heads up!{{/i}} {{_i}}Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.{{/i}}

        -
        +
        - {{! Abbreviations }} -

        {{_i}}Abbreviations{{/i}}

        -

        {{_i}}Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}

        + {{! Abbreviations }} +

        {{_i}}Abbreviations{{/i}}

        +

        {{_i}}Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}

        -

        <abbr>

        -

        {{_i}}For expanded text on long hover of an abbreviation, include the title attribute.{{/i}}

        -
        -

        {{_i}}An abbreviation of the word attribute is attr.{{/i}}

        -
        +

        <abbr>

        +

        {{_i}}For expanded text on long hover of an abbreviation, include the title attribute.{{/i}}

        +
        +

        {{_i}}An abbreviation of the word attribute is attr.{{/i}}

        + 
         <abbr title="attribute">attr</abbr>
        -

        <abbr class="initialism">

        -

        {{_i}}Add .initialism to an abbreviation for a slightly smaller font-size.{{/i}}

        -
        -

        {{_i}}HTML is the best thing since sliced bread.{{/i}}

        -
        +

        <abbr class="initialism">

        +

        {{_i}}Add .initialism to an abbreviation for a slightly smaller font-size.{{/i}}

        +
        +

        {{_i}}HTML is the best thing since sliced bread.{{/i}}

        + 
         <abbr title="attribute" class="initialism">attr</abbr>
        -
        +
        - {{! Addresses }} -

        {{_i}}Addresses{{/i}}

        -

        {{_i}}Present contact information for the nearest ancestor or the entire body of work.{{/i}}

        + {{! Addresses }} +

        {{_i}}Addresses{{/i}}

        +

        {{_i}}Present contact information for the nearest ancestor or the entire body of work.{{/i}}

        -

        <address>

        -

        {{_i}}Preserve formatting by ending all lines with <br>.{{/i}}

        -
        -
        - Twitter, Inc.
        - 795 Folsom Ave, Suite 600
        - San Francisco, CA 94107
        - P: (123) 456-7890 -
        -
        - {{_i}}Full Name{{/i}}
        - {{_i}}first.last@gmail.com{{/i}} -
        -
        +

        <address>

        +

        {{_i}}Preserve formatting by ending all lines with <br>.{{/i}}

        +
        +
        + Twitter, Inc.
        + 795 Folsom Ave, Suite 600
        + San Francisco, CA 94107
        + P: (123) 456-7890 +
        +
        + {{_i}}Full Name{{/i}}
        + {{_i}}first.last@gmail.com{{/i}} +
        + 
         <address>
   <strong>Twitter, Inc.</strong><br>
@@ -163,37 +154,37 @@
        -
        +
        - {{! Blockquotes }} -

        {{_i}}Blockquotes{{/i}}

        -

        {{_i}}For quoting blocks of content from another source within your document.{{/i}}

        + {{! Blockquotes }} +

        {{_i}}Blockquotes{{/i}}

        +

        {{_i}}For quoting blocks of content from another source within your document.{{/i}}

        -

        {{_i}}Default blockqoute{{/i}}

        -

        {{_i}}Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}

        -
        -
        -

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        -
        -
        +

        {{_i}}Default blockqoute{{/i}}

        +

        {{_i}}Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}

        +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        +
        + 
         <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
        -

        {{_i}}Blockquote options{{/i}}

        -

        {{_i}}Style and content changes for simple variations on a standard blockquote.{{/i}}

        +

        {{_i}}Blockquote options{{/i}}

        +

        {{_i}}Style and content changes for simple variations on a standard blockquote.{{/i}}

        -

        {{_i}}Naming a source{{/i}}

        -

        {{_i}}Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.{{/i}}

        -
        -
        -

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        - {{_i}}Someone famous in Source Title{{/i}} -
        -
        +

        {{_i}}Naming a source{{/i}}

        +

        {{_i}}Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.{{/i}}

        +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        + {{_i}}Someone famous in Source Title{{/i}} +
        + 
         <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -201,14 +192,14 @@
 </blockquote>
        -

        {{_i}}Alternate displays{{/i}}

        -

        {{_i}}Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.{{/i}}

        -
        -
        -

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        - {{_i}}Someone famous in Source Title{{/i}} -
        -
        +

        {{_i}}Alternate displays{{/i}}

        +

        {{_i}}Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.{{/i}}

        +
        +
        +

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

        + {{_i}}Someone famous in Source Title{{/i}} +
        + 
         <blockquote class="pull-right">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -217,99 +208,99 @@
        -
        +
        - -

        {{_i}}Lists{{/i}}

        + +

        {{_i}}Lists{{/i}}

        -

        {{_i}}Unordered{{/i}}

        -

        {{_i}}A list of items in which the order does not explicitly matter.{{/i}}

        -
        -
          -
        • Lorem ipsum dolor sit amet
          • -
        • Consectetur adipiscing elit
          • -
        • Integer molestie lorem at massa
          • -
        • Facilisis in pretium nisl aliquet
          • -
        • Nulla volutpat aliquam velit +

          {{_i}}Unordered{{/i}}

          +

          {{_i}}A list of items in which the order does not explicitly matter.{{/i}}

          +
            -
          • Phasellus iaculis neque
            • -
          • Purus sodales ultricies
            • -
          • Vestibulum laoreet porttitor sem
            • -
          • Ac tristique libero volutpat at
            • +
          • Lorem ipsum dolor sit amet
            • +
          • Consectetur adipiscing elit
            • +
          • Integer molestie lorem at massa
            • +
          • Facilisis in pretium nisl aliquet
            • +
          • Nulla volutpat aliquam velit +
              +
            • Phasellus iaculis neque
              • +
            • Purus sodales ultricies
              • +
            • Vestibulum laoreet porttitor sem
              • +
            • Ac tristique libero volutpat at
              • +
            +
            • +
          • Faucibus porta lacus fringilla vel
            • +
          • Aenean sit amet erat nunc
            • +
          • Eget porttitor lorem
          -
          • -
        • Faucibus porta lacus fringilla vel
          • -
        • Aenean sit amet erat nunc
          • -
        • Eget porttitor lorem
          • -
        -
        + 
       <ul>
   <li>...</li>
 </ul>
      -

      {{_i}}Ordered{{/i}}

      -

      {{_i}}A list of items in which the order does explicitly matter.{{/i}}

      -
      -
        -
      1. Lorem ipsum dolor sit amet
        2. -
      2. Consectetur adipiscing elit
        3. -
      3. Integer molestie lorem at massa
        4. -
      4. Facilisis in pretium nisl aliquet
        5. -
      5. Nulla volutpat aliquam velit
        6. -
      6. Faucibus porta lacus fringilla vel
        7. -
      7. Aenean sit amet erat nunc
        8. -
      8. Eget porttitor lorem
        9. -
      -
      +

      {{_i}}Ordered{{/i}}

      +

      {{_i}}A list of items in which the order does explicitly matter.{{/i}}

      +
      +
        +
      1. Lorem ipsum dolor sit amet
        2. +
      2. Consectetur adipiscing elit
        3. +
      3. Integer molestie lorem at massa
        4. +
      4. Facilisis in pretium nisl aliquet
        5. +
      5. Nulla volutpat aliquam velit
        6. +
      6. Faucibus porta lacus fringilla vel
        7. +
      7. Aenean sit amet erat nunc
        8. +
      8. Eget porttitor lorem
        9. +
      + 
       <ol>
   <li>...</li>
 </ol>
      -

      {{_i}}Unstyled{{/i}}

      -

      {{_i}}A list of items with no list-style or additional left padding.{{/i}}

      -
      -
        -
      • Lorem ipsum dolor sit amet
        • -
      • Consectetur adipiscing elit
        • -
      • Integer molestie lorem at massa
        • -
      • Facilisis in pretium nisl aliquet
        • -
      • Nulla volutpat aliquam velit -
          -
        • Phasellus iaculis neque
          • -
        • Purus sodales ultricies
          • -
        • Vestibulum laoreet porttitor sem
          • -
        • Ac tristique libero volutpat at
          • -
        -
        • -
      • Faucibus porta lacus fringilla vel
        • -
      • Aenean sit amet erat nunc
        • -
      • Eget porttitor lorem
        • -
      -
      +

      {{_i}}Unstyled{{/i}}

      +

      {{_i}}A list of items with no list-style or additional left padding.{{/i}}

      +
      +
        +
      • Lorem ipsum dolor sit amet
        • +
      • Consectetur adipiscing elit
        • +
      • Integer molestie lorem at massa
        • +
      • Facilisis in pretium nisl aliquet
        • +
      • Nulla volutpat aliquam velit +
          +
        • Phasellus iaculis neque
          • +
        • Purus sodales ultricies
          • +
        • Vestibulum laoreet porttitor sem
          • +
        • Ac tristique libero volutpat at
          • +
        +
        • +
      • Faucibus porta lacus fringilla vel
        • +
      • Aenean sit amet erat nunc
        • +
      • Eget porttitor lorem
        • +
      + 
       <ul class="unstyled">
   <li>...</li>
 </ul>
      -

      {{_i}}Description{{/i}}

      -

      {{_i}}A list of terms with their associated descriptions.{{/i}}

      -
      -
      -
      {{_i}}Description lists{{/i}}
      -
      {{_i}}A description list is perfect for defining terms.{{/i}}
      -
      Euismod
      -
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      -
      Donec id elit non mi porta gravida at eget metus.
      -
      Malesuada porta
      -
      Etiam porta sem malesuada magna mollis euismod.
      -
      -
      +

      {{_i}}Description{{/i}}

      +

      {{_i}}A list of terms with their associated descriptions.{{/i}}

      +
      +
      +
      {{_i}}Description lists{{/i}}
      +
      {{_i}}A description list is perfect for defining terms.{{/i}}
      +
      Euismod
      +
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      +
      Donec id elit non mi porta gravida at eget metus.
      +
      Malesuada porta
      +
      Etiam porta sem malesuada magna mollis euismod.
      +
      + 
       <dl>
   <dt>...</dt>
@@ -317,21 +308,21 @@
 </dl>
      -

      {{_i}}Horizontal description{{/i}}

      -

      {{_i}}Make terms and descriptions in <dl> line up side-by-side.{{/i}}

      -
      -
      -
      {{_i}}Description lists{{/i}}
      -
      {{_i}}A description list is perfect for defining terms.{{/i}}
      -
      Euismod
      -
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      -
      Donec id elit non mi porta gravida at eget metus.
      -
      Malesuada porta
      -
      Etiam porta sem malesuada magna mollis euismod.
      -
      Felis euismod semper eget lacinia
      -
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      -
      -
      +

      {{_i}}Horizontal description{{/i}}

      +

      {{_i}}Make terms and descriptions in <dl> line up side-by-side.{{/i}}

      +
      +
      +
      {{_i}}Description lists{{/i}}
      +
      {{_i}}A description list is perfect for defining terms.{{/i}}
      +
      Euismod
      +
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      +
      Donec id elit non mi porta gravida at eget metus.
      +
      Malesuada porta
      +
      Etiam porta sem malesuada magna mollis euismod.
      +
      Felis euismod semper eget lacinia
      +
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      +
      + 
       <dl class="dl-horizontal">
   <dt>...</dt>
@@ -339,28 +330,28 @@
 </dl>

      - {{_i}}Heads up!{{/i}} - {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.{{/i}} -

      - + {{_i}}Heads up!{{/i}} + {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.{{/i}} +

      + - -
      -
      -

      {{_i}}Code{{/i}} {{_i}}Inline and block code snippets{{/i}}

      -
      + +
      +
      +

      {{_i}}Code{{/i}} {{_i}}Inline and block code snippets{{/i}}

      +
      -

      Inline

      -

      Wrap inline snippets of code with <code>.

      +

      Inline

      +

      Wrap inline snippets of code with <code>.

       {{_i}}For example, <code>section</code> should be wrapped as inline.{{/i}}
      -

      Basic block

      -

      {{_i}}Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}

      +

      Basic block

      +

      {{_i}}Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}

       <p>{{_i}}Sample text here...{{/i}}</p>
      @@ -369,53 +360,53 @@ &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt; </pre> -

      {{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

      -

      {{_i}}You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}

      -
      +

      {{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

      +

      {{_i}}You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}

      +
      - -
      -
      -

      {{_i}}Tables For, you guessed it, tabular data{{/i}}

      -
      + +
      +
      +

      {{_i}}Tables For, you guessed it, tabular data{{/i}}

      +
      -

      {{_i}}Default styles{{/i}}

      -

      {{_i}}For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      -
      {{! /example }} +

      {{_i}}Default styles{{/i}}

      +

      {{_i}}For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.{{/i}}

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      +
      {{! /example }} 
       <table class="table">
   …
@@ -423,168 +414,168 @@
      -
      +
      -

      {{_i}}Optional classes{{/i}}

      -

      {{_i}}Add any of the follow classes to the .table base class.{{/i}}

      +

      {{_i}}Optional classes{{/i}}

      +

      {{_i}}Add any of the follow classes to the .table base class.{{/i}}

      -

      {{_i}}.table-striped{{/i}}

      -

      {{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      -
      {{! /example }} +

      {{_i}}.table-striped{{/i}}

      +

      {{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      +
      {{! /example }} 
       <table class="table table-striped">
   …
 </table>
      -

      {{_i}}.table-bordered{{/i}}

      -

      {{_i}}Add borders and rounded corners to the table.{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      MarkOtto@TwBootstrap
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      {{! /example }} +

      {{_i}}.table-bordered{{/i}}

      +

      {{_i}}Add borders and rounded corners to the table.{{/i}}

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      MarkOtto@TwBootstrap
      2JacobThornton@fat
      3Larry the Bird@twitter
      +
      {{! /example }} 
       <table class="table table-bordered">
   …
 </table>
      -

      {{_i}}.table-hover{{/i}}

      -

      {{_i}}Enable a hover state on table rows within a <tbody>.{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      {{! /example }} +

      {{_i}}.table-hover{{/i}}

      +

      {{_i}}Enable a hover state on table rows within a <tbody>.{{/i}}

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +
      {{! /example }} 
       <table class="table table-hover">
   …
 </table>
      -

      {{_i}}.table-condensed{{/i}}

      -

      {{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      {{! /example }} +

      {{_i}}.table-condensed{{/i}}

      +

      {{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +
      {{! /example }} 
       <table class="table table-condensed">
   …
@@ -592,82 +583,82 @@
      -
      +
      -

      {{_i}}Supported table markup{{/i}}

      -

      {{_i}}List of supported table HTML elements and how they should be used.{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Tag{{/i}}{{_i}}Description{{/i}}
      - <table> - - {{_i}}Wrapping element for displaying data in a tabular format{{/i}} -
      - <thead> - - {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}} -
      - <tbody> - - {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}} -
      - <tr> - - {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}} -
      - <td> - - {{_i}}Default table cell{{/i}} -
      - <th> - - {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
      - {{_i}}Must be used within a <thead>{{/i}} -
      - <caption> - - {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} -
      +

      {{_i}}Supported table markup{{/i}}

      +

      {{_i}}List of supported table HTML elements and how they should be used.{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Tag{{/i}}{{_i}}Description{{/i}}
      + <table> + + {{_i}}Wrapping element for displaying data in a tabular format{{/i}} +
      + <thead> + + {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}} +
      + <tbody> + + {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}} +
      + <tr> + + {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}} +
      + <td> + + {{_i}}Default table cell{{/i}} +
      + <th> + + {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
      + {{_i}}Must be used within a <thead>{{/i}} +
      + <caption> + + {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} + 
       <table>
   <thead>
@@ -685,28 +676,28 @@
 </table>
      -
      +
      - -
      -
      -

      {{_i}}Forms{{/i}}

      -
      + +
      +
      +

      {{_i}}Forms{{/i}}

      +
      -

      {{_i}}Default styles{{/i}}

      -

      {{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

      -
      - - -

      {{_i}}Example block-level help text here.{{/i}}

      - - -
      {{! /example }} +

      {{_i}}Default styles{{/i}}

      +

      {{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

      +
      + + +

      {{_i}}Example block-level help text here.{{/i}}

      + + +
      {{! /example }} 
       <form class="well">
   <label>{{_i}}Label name{{/i}}</label>
@@ -720,18 +711,18 @@
      -
      +
      -

      {{_i}}Optional layouts{{/i}}

      -

      {{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}

      +

      {{_i}}Optional layouts{{/i}}

      +

      {{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}

      -

      {{_i}}Search form{{/i}}

      -

      {{_i}}Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.{{/i}}

      -
      - - -
      {{! /example }} +

      {{_i}}Search form{{/i}}

      +

      {{_i}}Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.{{/i}}

      +
      + + +
      {{! /example }} 
       <form class="form-search">
   <input type="text" class="input-medium search-query">
@@ -739,16 +730,16 @@
 </form>
      -

      {{_i}}Inline form{{/i}}

      -

      {{_i}}Add .form-inline for left-aligned labels and inline-block controls for a compact layout.{{/i}}

      -
      - - - - -
      {{! /example }} +

      {{_i}}Inline form{{/i}}

      +

      {{_i}}Add .form-inline for left-aligned labels and inline-block controls for a compact layout.{{/i}}

      +
      + + + + +
      {{! /example }} 
       <form class="form-inline">
   <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
@@ -760,36 +751,36 @@
 </form>
      -

      {{_i}}Horizontal form{{/i}}

      -

      {{_i}}Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:{{/i}}

      -
        -
      • {{_i}}Add .form-horizontal to the form{{/i}}
        • -
      • {{_i}}Wrap labels and controls in .control-group{{/i}}
        • -
      • {{_i}}Add .control-label to the label{{/i}}
        • -
      • {{_i}}Wrap any associated controls in .controls for proper alignment{{/i}}
        • -
      -
      -
      - -
      - -
      -
      -
      - -
      - -
      -
      -
      -
      - - -
      -
      -
      +

      {{_i}}Horizontal form{{/i}}

      +

      {{_i}}Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:{{/i}}

      +
        +
      • {{_i}}Add .form-horizontal to the form{{/i}}
        • +
      • {{_i}}Wrap labels and controls in .control-group{{/i}}
        • +
      • {{_i}}Add .control-label to the label{{/i}}
        • +
      • {{_i}}Wrap any associated controls in .controls for proper alignment{{/i}}
        • +
      +
      +
      + +
      + +
      +
      +
      + +
      + +
      +
      +
      +
      + + +
      +
      + 
       <form class="form-horizontal">
   <div class="control-group">
@@ -816,49 +807,49 @@
      -
      +
      -

      {{_i}}Supported form controls{{/i}}

      -

      {{_i}}Examples of standard form controls supported in an example form layout.{{/i}}

      +

      {{_i}}Supported form controls{{/i}}

      +

      {{_i}}Examples of standard form controls supported in an example form layout.{{/i}}

      -

      {{_i}}Inputs{{/i}}

      -

      {{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}

      -

      {{_i}}Requires the use of a specified type at all times.{{/i}}

      -
      - -
      +

      {{_i}}Inputs{{/i}}

      +

      {{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}

      +

      {{_i}}Requires the use of a specified type at all times.{{/i}}

      +
      + + 
       <input type="text" placeholder="Text input">
      -

      {{_i}}Textarea{{/i}}

      -

      {{_i}}Form control which supports multiple lines of text. Change row attribute as necessary.{{/i}}

      -
      - -
      +

      {{_i}}Textarea{{/i}}

      +

      {{_i}}Form control which supports multiple lines of text. Change row attribute as necessary.{{/i}}

      +
      + + 
       <textarea id="textarea" rows="3"></textarea>
      -

      {{_i}}Checkboxes and radios{{/i}}

      -

      {{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}

      -

      {{_i}}Default (stacked){{/i}}

      -
      - -
      - - -
      +

      {{_i}}Checkboxes and radios{{/i}}

      +

      {{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}

      +

      {{_i}}Default (stacked){{/i}}

      +
      + +
      + + + 
       <label class="checkbox">
   <input type="checkbox" value="">
@@ -875,19 +866,19 @@
 </label>
      -

      {{_i}}Inline checkboxes{{/i}}

      -

      {{_i}}Add the .inline class to a series of checkboxes or radios for controls appear on the same line.{{/i}}

      -
      - - - -
      +

      {{_i}}Inline checkboxes{{/i}}

      +

      {{_i}}Add the .inline class to a series of checkboxes or radios for controls appear on the same line.{{/i}}

      +
      + + + + 
       <label class="checkbox inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -900,25 +891,25 @@
 </label>
      -

      {{_i}}Selects{{/i}}

      -

      {{_i}}Use the default option or specify a multiple="multiple" to show multiple options at once.{{/i}}

      -
      - -
      - -
      +

      {{_i}}Selects{{/i}}

      +

      {{_i}}Use the default option or specify a multiple="multiple" to show multiple options at once.{{/i}}

      +
      + +
      + + 
       <select>
   <option>something</option>
@@ -938,28 +929,28 @@
      -
      +
      -

      {{_i}}Extending form controls{{/i}}

      -

      {{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}

      +

      {{_i}}Extending form controls{{/i}}

      +

      {{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}

      -

      {{_i}}Prepended and appended inputs{{/i}}

      -

      {{_i}}Add text or buttons before or after any text-based input. Do note that select elements are not supported here.{{/i}}

      +

      {{_i}}Prepended and appended inputs{{/i}}

      +

      {{_i}}Add text or buttons before or after any text-based input. Do note that select elements are not supported here.{{/i}}

      -

      {{_i}}Default options{{/i}}

      -

      {{_i}}Wrap a .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

      -
      -
      - @ - -
      -
      -
      - - .00 -
      -
      +

      {{_i}}Default options{{/i}}

      +

      {{_i}}Wrap a .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

      +
      +
      + @ + +
      +
      +
      + + .00 +
      + 
       <div class="input-prepend">
   <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
@@ -969,35 +960,35 @@
 </div>
      -

      {{_i}}Combined{{/i}}

      -

      {{_i}}Use both classes and two instances of .add-on to prepend and append an input.{{/i}}

      -
      -
      - $ - - .00 -
      -
      +

      {{_i}}Combined{{/i}}

      +

      {{_i}}Use both classes and two instances of .add-on to prepend and append an input.{{/i}}

      +
      +
      + $ + + .00 +
      + 
       <div class="input-prepend input-append">
   <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
 </div>
      -

      {{_i}}Buttons instead of text{{/i}}

      -

      {{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

      -
      -
      - - -
      -
      -
      - - - -
      -
      +

      {{_i}}Buttons instead of text{{/i}}

      +

      {{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

      +
      +
      + + +
      +
      +
      + + + +
      + 
       <div class="input-append">
   <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
@@ -1008,20 +999,20 @@
 </div>
      -

      {{_i}}Control sizing{{/i}}

      -

      {{_i}}Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.{{/i}}

      +

      {{_i}}Control sizing{{/i}}

      +

      {{_i}}Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.{{/i}}

      -

      {{_i}}Relative sizing{{/i}}

      -
      -
      - - - - - - -
      -
      +

      {{_i}}Relative sizing{{/i}}

      +
      +
      + + + + + + +
      + 
       <input class="input-mini" type="text">
 <input class="input-small" type="text">
@@ -1030,68 +1021,68 @@
 <input class="input-xlarge" type="text">
 <input class="input-xxlarge" type="text">
      -

      - {{_i}}Heads up!{{/i}} In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. -

      +

      + {{_i}}Heads up!{{/i}} In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

      -

      {{_i}}Grid sizing{{/i}}

      -

      {{_i}}Use .span1 to .span12 for inputs that match the same sizes of the grid columns.{{/i}}

      -
      -
      - - - - - - -
      -
      +

      {{_i}}Grid sizing{{/i}}

      +

      {{_i}}Use .span1 to .span12 for inputs that match the same sizes of the grid columns.{{/i}}

      +
      +
      + + + + + + +
      + 
       <input class="span1" type="text">
 <input class="span2" type="text">
 <input class="span3" type="text">
      -

      {{_i}}For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}

      -
      -
      - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      +

      {{_i}}For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}

      +
      +
      + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      + 
       <div class="controls controls-row">
   <input class="span4" type="text" placeholder=".span4">
@@ -1099,23 +1090,23 @@
 </div>
      -

      {{_i}}Uneditable inputs{{/i}}

      -

      {{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}

      -
      - Some value here -
      +

      {{_i}}Uneditable inputs{{/i}}

      +

      {{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}

      +
      + Some value here + 
         <span class="input-xlarge uneditable-input">Some value here</span>
      -

      {{_i}}Form actions{{/i}}

      -

      {{_i}}End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.{{/i}}

      -
      -
      - - -
      -
      +

      {{_i}}Form actions{{/i}}

      +

      {{_i}}End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.{{/i}}

      +
      +
      + + +
      + 
       <div class="form-actions">
   <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
@@ -1123,76 +1114,76 @@
 </div>
      -

      {{_i}}Help text{{/i}}

      -

      {{_i}}Inline and block level support for help text that appears around form controls.{{/i}}

      -

      {{_i}}Inline help{{/i}}

      -
      - Inline help text -
      +

      {{_i}}Help text{{/i}}

      +

      {{_i}}Inline and block level support for help text that appears around form controls.{{/i}}

      +

      {{_i}}Inline help{{/i}}

      +
      + Inline help text + 
       <span class="help-inline">Inline help text</span>
      -

      {{_i}}Block help{{/i}}

      -
      - - A longer block of help text that breaks onto a new line and may extend beyond one line. -
      +

      {{_i}}Block help{{/i}}

      +
      + + A longer block of help text that breaks onto a new line and may extend beyond one line. + 
       <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
      -
      +
      -

      {{_i}}Form control states{{/i}}

      -

      {{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}

      +

      {{_i}}Form control states{{/i}}

      +

      {{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}

      -

      {{_i}}Input focus{{/i}}

      -

      {{_i}}We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.{{/i}}

      -
      - -
      +

      {{_i}}Input focus{{/i}}

      +

      {{_i}}We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.{{/i}}

      +
      + + 
       <input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
      -

      {{_i}}Disabled inputs{{/i}}

      -

      {{_i}}Add the disabled attribute on an input to prevent user input and trigger a slightly different look.{{/i}}

      -
      - -
      +

      {{_i}}Disabled inputs{{/i}}

      +

      {{_i}}Add the disabled attribute on an input to prevent user input and trigger a slightly different look.{{/i}}

      +
      + + 
       <input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here...{{/i}}" disabled>
      -

      {{_i}}Validation states{{/i}}

      -

      {{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}

      +

      {{_i}}Validation states{{/i}}

      +

      {{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}

      -
      -
      - -
      - - {{_i}}Something may have gone wrong{{/i}} -
      -
      -
      - -
      - - {{_i}}Please correct the error{{/i}} -
      -
      -
      - -
      - - {{_i}}Woohoo!{{/i}} -
      -
      -
      +
      +
      + +
      + + {{_i}}Something may have gone wrong{{/i}} +
      +
      +
      + +
      + + {{_i}}Please correct the error{{/i}} +
      +
      +
      + +
      + + {{_i}}Woohoo!{{/i}} +
      +
      + 
       <div class="control-group warning">
   <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
@@ -1217,133 +1208,133 @@
 </div>
      -
      +
      - -
      -
      -

      {{_i}}Buttons{{/i}}

      -
      + +
      +
      +

      {{_i}}Buttons{{/i}}

      +
      -

      Default buttons

      -

      {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Button{{/i}}{{_i}}class=""{{/i}}{{_i}}Description{{/i}}
      btn{{_i}}Standard gray button with gradient{{/i}}
      btn btn-primary{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
      btn btn-info{{_i}}Used as an alternative to the default styles{{/i}}
      btn btn-success{{_i}}Indicates a successful or positive action{{/i}}
      btn btn-warning{{_i}}Indicates caution should be taken with this action{{/i}}
      btn btn-danger{{_i}}Indicates a dangerous or potentially negative action{{/i}}
      btn btn-inverse{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}
      +

      Default buttons

      +

      {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Button{{/i}}{{_i}}class=""{{/i}}{{_i}}Description{{/i}}
      btn{{_i}}Standard gray button with gradient{{/i}}
      btn btn-primary{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
      btn btn-info{{_i}}Used as an alternative to the default styles{{/i}}
      btn btn-success{{_i}}Indicates a successful or positive action{{/i}}
      btn btn-warning{{_i}}Indicates caution should be taken with this action{{/i}}
      btn btn-danger{{_i}}Indicates a dangerous or potentially negative action{{/i}}
      btn btn-inverse{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}
      -

      {{_i}}Cross browser compatibility{{/i}}

      -

      {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}

      +

      {{_i}}Cross browser compatibility{{/i}}

      +

      {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}

      -
      +
      -

      {{_i}}Button sizes{{/i}}

      -

      {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}

      -

      - - -

      -

      - - -

      -

      - - -

      +

      {{_i}}Button sizes{{/i}}

      +

      {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}

      +

      + + +

      +

      + + +

      +

      + + +

      -
      +
      -

      {{_i}}Disabled state{{/i}}

      -

      {{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}

      +

      {{_i}}Disabled state{{/i}}

      +

      {{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}

      -

      Anchor element

      -

      {{_i}}Add the .disabled class to <a> buttons.{{/i}}

      -

      - {{_i}}Primary link{{/i}} - {{_i}}Link{{/i}} -

      +

      Anchor element

      +

      {{_i}}Add the .disabled class to <a> buttons.{{/i}}

      +

      + {{_i}}Primary link{{/i}} + {{_i}}Link{{/i}} + 

       <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
 <a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
      -

      - {{_i}}Heads up!{{/i}} - {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.{{/i}} -

      +

      + {{_i}}Heads up!{{/i}} + {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.{{/i}} +

      -

      Button element

      -

      {{_i}}Add the disabled attribute to <button> buttons.{{/i}}

      -

      - - -

      +

      Button element

      +

      {{_i}}Add the disabled attribute to <button> buttons.{{/i}}

      +

      + + + 

       <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
 <button type="button" class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
      -
      +
      -

      {{_i}}One class, multiple tags{{/i}}

      -

      {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}

      -
      - {{_i}}Link{{/i}} - - - -
      +

      {{_i}}One class, multiple tags{{/i}}

      +

      {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}

      +
      + {{_i}}Link{{/i}} + + + + 
       <a class="btn" href="">{{_i}}Link{{/i}}</a>
 <button class="btn" type="submit">
@@ -1354,244 +1345,246 @@
 <input class="btn" type="submit"
          value="{{_i}}Submit{{/i}}">
      -

      {{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}

      +

      {{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}

      -
      +
      - -
      -
      -

      {{_i}}Icons Graciously provided by Glyphicons{{/i}}

      -
      + +
      +
      +

      {{_i}}Icons Graciously provided by Glyphicons{{/i}}

      +
      -

      {{_i}}Icon glyphs{{/i}}

      -

      {{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.{{/i}}

      -
        -
      • icon-glass
        • -
      • icon-music
        • -
      • icon-search
        • -
      • icon-envelope
        • -
      • icon-heart
        • -
      • icon-star
        • -
      • icon-star-empty
        • -
      • icon-user
        • -
      • icon-film
        • -
      • icon-th-large
        • -
      • icon-th
        • -
      • icon-th-list
        • -
      • icon-ok
        • -
      • icon-remove
        • -
      • icon-zoom-in
        • -
      • icon-zoom-out
        • -
      • icon-off
        • -
      • icon-signal
        • -
      • icon-cog
        • -
      • icon-trash
        • -
      • icon-home
        • -
      • icon-file
        • -
      • icon-time
        • -
      • icon-road
        • -
      • icon-download-alt
        • -
      • icon-download
        • -
      • icon-upload
        • -
      • icon-inbox
        • +

        {{_i}}Icon glyphs{{/i}}

        +

        {{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.{{/i}}

        +
          +
        • icon-glass
          • +
        • icon-music
          • +
        • icon-search
          • +
        • icon-envelope
          • +
        • icon-heart
          • +
        • icon-star
          • +
        • icon-star-empty
          • +
        • icon-user
          • +
        • icon-film
          • +
        • icon-th-large
          • +
        • icon-th
          • +
        • icon-th-list
          • +
        • icon-ok
          • +
        • icon-remove
          • +
        • icon-zoom-in
          • +
        • icon-zoom-out
          • +
        • icon-off
          • +
        • icon-signal
          • +
        • icon-cog
          • +
        • icon-trash
          • +
        • icon-home
          • +
        • icon-file
          • +
        • icon-time
          • +
        • icon-road
          • +
        • icon-download-alt
          • +
        • icon-download
          • +
        • icon-upload
          • +
        • icon-inbox
          • -
        • icon-play-circle
          • -
        • icon-repeat
          • -
        • icon-refresh
          • -
        • icon-list-alt
          • -
        • icon-lock
          • -
        • icon-flag
          • -
        • icon-headphones
          • -
        • icon-volume-off
          • -
        • icon-volume-down
          • -
        • icon-volume-up
          • -
        • icon-qrcode
          • -
        • icon-barcode
          • -
        • icon-tag
          • -
        • icon-tags
          • -
        • icon-book
          • -
        • icon-bookmark
          • -
        • icon-print
          • -
        • icon-camera
          • -
        • icon-font
          • -
        • icon-bold
          • -
        • icon-italic
          • -
        • icon-text-height
          • -
        • icon-text-width
          • -
        • icon-align-left
          • -
        • icon-align-center
          • -
        • icon-align-right
          • -
        • icon-align-justify
          • -
        • icon-list
          • +
        • icon-play-circle
          • +
        • icon-repeat
          • +
        • icon-refresh
          • +
        • icon-list-alt
          • +
        • icon-lock
          • +
        • icon-flag
          • +
        • icon-headphones
          • +
        • icon-volume-off
          • +
        • icon-volume-down
          • +
        • icon-volume-up
          • +
        • icon-qrcode
          • +
        • icon-barcode
          • +
        • icon-tag
          • +
        • icon-tags
          • +
        • icon-book
          • +
        • icon-bookmark
          • +
        • icon-print
          • +
        • icon-camera
          • +
        • icon-font
          • +
        • icon-bold
          • +
        • icon-italic
          • +
        • icon-text-height
          • +
        • icon-text-width
          • +
        • icon-align-left
          • +
        • icon-align-center
          • +
        • icon-align-right
          • +
        • icon-align-justify
          • +
        • icon-list
          • -
        • icon-indent-left
          • -
        • icon-indent-right
          • -
        • icon-facetime-video
          • -
        • icon-picture
          • -
        • icon-pencil
          • -
        • icon-map-marker
          • -
        • icon-adjust
          • -
        • icon-tint
          • -
        • icon-edit
          • -
        • icon-share
          • -
        • icon-check
          • -
        • icon-move
          • -
        • icon-step-backward
          • -
        • icon-fast-backward
          • -
        • icon-backward
          • -
        • icon-play
          • -
        • icon-pause
          • -
        • icon-stop
          • -
        • icon-forward
          • -
        • icon-fast-forward
          • -
        • icon-step-forward
          • -
        • icon-eject
          • -
        • icon-chevron-left
          • -
        • icon-chevron-right
          • -
        • icon-plus-sign
          • -
        • icon-minus-sign
          • -
        • icon-remove-sign
          • -
        • icon-ok-sign
          • +
        • icon-indent-left
          • +
        • icon-indent-right
          • +
        • icon-facetime-video
          • +
        • icon-picture
          • +
        • icon-pencil
          • +
        • icon-map-marker
          • +
        • icon-adjust
          • +
        • icon-tint
          • +
        • icon-edit
          • +
        • icon-share
          • +
        • icon-check
          • +
        • icon-move
          • +
        • icon-step-backward
          • +
        • icon-fast-backward
          • +
        • icon-backward
          • +
        • icon-play
          • +
        • icon-pause
          • +
        • icon-stop
          • +
        • icon-forward
          • +
        • icon-fast-forward
          • +
        • icon-step-forward
          • +
        • icon-eject
          • +
        • icon-chevron-left
          • +
        • icon-chevron-right
          • +
        • icon-plus-sign
          • +
        • icon-minus-sign
          • +
        • icon-remove-sign
          • +
        • icon-ok-sign
          • -
        • icon-question-sign
          • -
        • icon-info-sign
          • -
        • icon-screenshot
          • -
        • icon-remove-circle
          • -
        • icon-ok-circle
          • -
        • icon-ban-circle
          • -
        • icon-arrow-left
          • -
        • icon-arrow-right
          • -
        • icon-arrow-up
          • -
        • icon-arrow-down
          • -
        • icon-share-alt
          • -
        • icon-resize-full
          • -
        • icon-resize-small
          • -
        • icon-plus
          • -
        • icon-minus
          • -
        • icon-asterisk
          • -
        • icon-exclamation-sign
          • -
        • icon-gift
          • -
        • icon-leaf
          • -
        • icon-fire
          • -
        • icon-eye-open
          • -
        • icon-eye-close
          • -
        • icon-warning-sign
          • -
        • icon-plane
          • -
        • icon-calendar
          • -
        • icon-random
          • -
        • icon-comment
          • -
        • icon-magnet
          • +
        • icon-question-sign
          • +
        • icon-info-sign
          • +
        • icon-screenshot
          • +
        • icon-remove-circle
          • +
        • icon-ok-circle
          • +
        • icon-ban-circle
          • +
        • icon-arrow-left
          • +
        • icon-arrow-right
          • +
        • icon-arrow-up
          • +
        • icon-arrow-down
          • +
        • icon-share-alt
          • +
        • icon-resize-full
          • +
        • icon-resize-small
          • +
        • icon-plus
          • +
        • icon-minus
          • +
        • icon-asterisk
          • +
        • icon-exclamation-sign
          • +
        • icon-gift
          • +
        • icon-leaf
          • +
        • icon-fire
          • +
        • icon-eye-open
          • +
        • icon-eye-close
          • +
        • icon-warning-sign
          • +
        • icon-plane
          • +
        • icon-calendar
          • +
        • icon-random
          • +
        • icon-comment
          • +
        • icon-magnet
          • -
        • icon-chevron-up
          • -
        • icon-chevron-down
          • -
        • icon-retweet
          • -
        • icon-shopping-cart
          • -
        • icon-folder-close
          • -
        • icon-folder-open
          • -
        • icon-resize-vertical
          • -
        • icon-resize-horizontal
          • -
        • icon-hdd
          • -
        • icon-bullhorn
          • -
        • icon-bell
          • -
        • icon-certificate
          • -
        • icon-thumbs-up
          • -
        • icon-thumbs-down
          • -
        • icon-hand-right
          • -
        • icon-hand-left
          • -
        • icon-hand-up
          • -
        • icon-hand-down
          • -
        • icon-circle-arrow-right
          • -
        • icon-circle-arrow-left
          • -
        • icon-circle-arrow-up
          • -
        • icon-circle-arrow-down
          • -
        • icon-globe
          • -
        • icon-wrench
          • -
        • icon-tasks
          • -
        • icon-filter
          • -
        • icon-briefcase
          • -
        • icon-fullscreen
          • -
        +
      • icon-chevron-up
        • +
      • icon-chevron-down
        • +
      • icon-retweet
        • +
      • icon-shopping-cart
        • +
      • icon-folder-close
        • +
      • icon-folder-open
        • +
      • icon-resize-vertical
        • +
      • icon-resize-horizontal
        • +
      • icon-hdd
        • +
      • icon-bullhorn
        • +
      • icon-bell
        • +
      • icon-certificate
        • +
      • icon-thumbs-up
        • +
      • icon-thumbs-down
        • +
      • icon-hand-right
        • +
      • icon-hand-left
        • +
      • icon-hand-up
        • +
      • icon-hand-down
        • +
      • icon-circle-arrow-right
        • +
      • icon-circle-arrow-left
        • +
      • icon-circle-arrow-up
        • +
      • icon-circle-arrow-down
        • +
      • icon-globe
        • +
      • icon-wrench
        • +
      • icon-tasks
        • +
      • icon-filter
        • +
      • icon-briefcase
        • +
      • icon-fullscreen
        • +
      -

      Glyphicons attribution

      -

      {{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}

      +

      Glyphicons attribution

      +

      {{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}

      -
      +
      -

      {{_i}}How to use{{/i}}

      -

      {{_i}}All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:{{/i}}

      +

      {{_i}}How to use{{/i}}

      +

      {{_i}}All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:{{/i}}

       <i class="icon-search"></i>
      -

      {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}

      +

      {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}

       <i class="icon-search icon-white"></i>
      -

      - {{_i}}Heads up!{{/i}} - {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}} -

      +

      + {{_i}}Heads up!{{/i}} + {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}} +

      -
      +
      -

      {{_i}}Icon examples{{/i}}

      -

      {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

      +

      {{_i}}Icon examples{{/i}}

      +

      {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

      -

      {{_i}}Buttons{{/i}}

      -
      -
      -
      - - - - -
      -
      - {{_i}}User{{/i}} - - -
      -
      -
      {{! /bs-docs-example }} - -

      {{_i}}Navigation{{/i}}

      -
      -
      - -
      {{! /well }} -
      {{! /bs-docs-example }} - -

      {{_i}}Form fields{{/i}}

      -
      -
      - -
      -
      - +

      {{_i}}Buttons{{/i}}

      +
      +
      +
      + + + + +
      +
      + {{_i}}User{{/i}} + + +
      -
      -
      - +
      {{! /bs-docs-example }} -
      +

      {{_i}}Navigation{{/i}}

      +
      +
      + +
      {{! /well }} +
      {{! /bs-docs-example }} -
      -
      \ No newline at end of file +

      {{_i}}Form fields{{/i}}

      +
      +
      + +
      +
      + +
      +
      +
      +
      + + + + + +
      {{! /span9 }} +
      {{! row}} From 0ca210395c0e4c3337312a81c22b81bbd5d1a2be Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 22:36:12 -0700 Subject: [PATCH 178/422] fix indenting and remove hidden subnav on Scaffolding --- docs/scaffolding.html | 736 +++++++++++---------- docs/templates/pages/scaffolding.mustache | 745 +++++++++++----------- 2 files changed, 734 insertions(+), 747 deletions(-) diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 0538b2ab6a..edb7274a8f 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -68,26 +68,17 @@
      -

      Scaffolding

      Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.

      -
      -
      - -
      -
      + +
        @@ -103,15 +94,15 @@ - -
        -
        -

        Global styles for CSS reset, typography, and links

        -
        + +
        +
        +

        Global styles for CSS reset, typography, and links

        +
        -

        Requires HTML5 doctype

        -

        Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

        +

        Requires HTML5 doctype

        +

        Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

         <!DOCTYPE html>
 <html lang="en">
@@ -119,89 +110,89 @@
 </html>
        -

        Typography and links

        -

        Bootstrap sets basic global display, typography, and link styles. Specifically, we:

        -
          -
        • Remove margin on the body
          • -
        • Set background-color: white; on the body
          • -
        • Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base
          • -
        • Set the global link color via @linkColor and apply link underlines only on :hover
          • -
        -

        These styles can be found within scaffolding.less.

        +

        Typography and links

        +

        Bootstrap sets basic global display, typography, and link styles. Specifically, we:

        +
          +
        • Remove margin on the body
          • +
        • Set background-color: white; on the body
          • +
        • Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base
          • +
        • Set the global link color via @linkColor and apply link underlines only on :hover
          • +
        +

        These styles can be found within scaffolding.less.

        -

        Reset via Normalize

        -

        With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

        +

        Reset via Normalize

        +

        With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

        -
        +
        - -
        -
        -

        Default grid system 12 columns with a responsive twist

        -
        + +
        +
        +

        Default grid system 12 columns with a responsive twist

        +
        -

        Live grid example

        -

        The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

        -
        -
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        -
        -
        2
        -
        4
        -
        4
        -
        -
        -
        4
        -
        6
        -
        -
        -
        5
        -
        5
        -
        -
        -
        10
        -
        -
        +

        Live grid example

        +

        The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

        +
        +
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        +
        +
        2
        +
        4
        +
        4
        +
        +
        +
        4
        +
        6
        +
        +
        +
        5
        +
        5
        +
        +
        +
        10
        +
        +
        -

        Basic grid HTML

        -

        For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row.

        +

        Basic grid HTML

        +

        For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row.

         <div class="row">
   <div class="span4">...</div>
   <div class="span8">...</div>
 </div>
        -

        Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

        +

        Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

        -

        Offsetting columns

        -

        Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

        -
        -
        -
        4
        -
        4 offset 2
        -
        -
        -
        3 offset 2
        -
        3 offset 2
        -
        -
        -
        6 offset 4
        -
        -
        +

        Offsetting columns

        +

        Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

        +
        +
        +
        4
        +
        4 offset 2
        +
        +
        +
        3 offset 2
        +
        3 offset 2
        +
        +
        +
        6 offset 4
        +
        + 
         <div class="row">
   <div class="span4">...</div>
@@ -209,23 +200,23 @@
 </div>
        -

        Nesting columns

        -

        To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

        -

        Example

        -

        Here two nested .span4 columns are placed within a .span8.

        -
        -
        - Level 1 of column +

        Nesting columns

        +

        To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

        +

        Example

        +

        Here two nested .span4 columns are placed within a .span8.

        -
        - Level 2 -
        -
        - Level 2 +
        + Level 1 of column +
        +
        + Level 2 +
        +
        + Level 2 +
        +
        -
        - 
         <div class="row">
   <div class="span10">
@@ -237,54 +228,54 @@
   </div>
 </div>
        -
        +
        - -
        -
        -

        Fluid grid system 12 responsive, percent-based columns

        -
        + +
        +
        +

        Fluid grid system 12 responsive, percent-based columns

        +
        -

        Live fluid grid example

        -

        The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

        -
        -
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        -
        -
        4
        -
        4
        -
        4
        -
        -
        -
        4
        -
        8
        -
        -
        -
        6
        -
        6
        -
        -
        -
        12
        -
        -
        +

        Live fluid grid example

        +

        The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

        +
        +
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        +
        +
        4
        +
        4
        +
        4
        +
        +
        +
        4
        +
        8
        +
        +
        +
        6
        +
        6
        +
        +
        +
        12
        +
        +
        -

        Basic fluid grid HTML

        -

        Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

        +

        Basic fluid grid HTML

        +

        Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

         <div class="row-fluid">
   <div class="span4">...</div>
@@ -292,21 +283,21 @@
 </div>
        -

        Fluid offsetting

        -

        Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

        -
        -
        -
        4
        -
        4 offset 4
        -
        -
        -
        3 offset 3
        -
        3 offset 3
        -
        -
        -
        6 offset 6
        -
        -
        +

        Fluid offsetting

        +

        Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

        +
        +
        +
        4
        +
        4 offset 4
        +
        +
        +
        3 offset 3
        +
        3 offset 3
        +
        +
        +
        6 offset 6
        +
        + 
         <div class="row-fluid">
   <div class="span4">...</div>
@@ -314,21 +305,21 @@
 </div>
        -

        Fluid nesting

        -

        Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.

        -
        -
        - Fluid 12 +

        Fluid nesting

        +

        Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.

        -
        - Fluid 6 -
        -
        - Fluid 6 +
        + Fluid 12 +
        +
        + Fluid 6 +
        +
        + Fluid 6 +
        +
        -
        - 
         <div class="row-fluid">
   <div class="span12">
@@ -341,78 +332,78 @@
 </div>
        -
        +
        - -
        -
        -

        Grid customization

        -
        + +
        +
        +

        Grid customization

        +
        -

        Variables in LESS

        -

        The default grid is built on a few variables for easy customization via LESS. All variables can be found in variables.less.

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        VariableDefault valueDescription
        @gridColumns12Number of columns
        @gridColumnWidth60pxWidth of each column
        @gridGutterWidth20pxNegative space between columns
        @fluidGridColumnWidth6.382978723%Width of each fluid column
        @fluidGridGutterWidth2.127659574%Negative space between fluid columns
        +

        Variables in LESS

        +

        The default grid is built on a few variables for easy customization via LESS. All variables can be found in variables.less.

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        VariableDefault valueDescription
        @gridColumns12Number of columns
        @gridColumnWidth60pxWidth of each column
        @gridGutterWidth20pxNegative space between columns
        @fluidGridColumnWidth6.382978723%Width of each fluid column
        @fluidGridGutterWidth2.127659574%Negative space between fluid columns
        -

        How to customize

        -

        Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.

        +

        How to customize

        +

        Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.

        -

        Staying responsive

        -

        Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in responsive.less until a future update improves this.

        +

        Staying responsive

        +

        Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in responsive.less until a future update improves this.

        -
        +
        - -
        -
        -

        Layouts Basic templates to create webpages

        -
        + +
        +
        +

        Layouts Basic templates to create webpages

        +
        -

        Fixed layout

        -

        Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.

        -
        -
        -
        +

        Fixed layout

        +

        Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.

        +
        +
        + 
         <body>
   <div class="container">
@@ -421,12 +412,12 @@
 </body>
        -

        Fluid layout

        -

        Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

        -
        -
        -
        -
        +

        Fluid layout

        +

        Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

        +
        +
        +
        + 
         <div class="container-fluid">
   <div class="row-fluid">
@@ -439,78 +430,78 @@
   </div>
 </div>
        -
        +
        - -
        -
        -

        Responsive design Media queries for various devices and resolutions

        -
        + +
        +
        +

        Responsive design Media queries for various devices and resolutions

        +
        -

        Enabling responsive features

        -

        Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

        +

        Enabling responsive features

        +

        Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
        -

        Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.

        +

        Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.

        -

        About responsive Bootstrap

        - Responsive devices -

        Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

        -
          -
        • Modify the width of column in our grid
          • -
        • Stack elements instead of float wherever necessary
          • -
        • Resize headings and text to be more appropriate for devices
          • -
        -

        Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

        +

        About responsive Bootstrap

        + Responsive devices +

        Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

        +
          +
        • Modify the width of column in our grid
          • +
        • Stack elements instead of float wherever necessary
          • +
        • Resize headings and text to be more appropriate for devices
          • +
        +

        Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

        -

        Supported devices

        -

        Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        LabelLayout widthColumn widthGutter width
        Phones480px and belowFluid columns, no fixed widths
        Phones to tablets767px and belowFluid columns, no fixed widths
        Portrait tablets768px and above42px20px
        Default980px and up60px20px
        Large display1200px and up70px30px
        +

        Supported devices

        +

        Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        LabelLayout widthColumn widthGutter width
        Phones480px and belowFluid columns, no fixed widths
        Phones to tablets767px and belowFluid columns, no fixed widths
        Portrait tablets768px and above42px20px
        Default980px and up60px20px
        Large display1200px and up70px30px
         /* Landscape phones and down */
 @media (max-width: 480px) { ... }
@@ -526,81 +517,84 @@
        -

        Responsive utility classes

        -

        For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
        .visible-phoneVisible
        .visible-tabletVisible
        .visible-desktopVisible
        .hidden-phoneVisibleVisible
        .hidden-tabletVisibleVisible
        .hidden-desktopVisibleVisible
        +

        Responsive utility classes

        +

        For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
        .visible-phoneVisible
        .visible-tabletVisible
        .visible-desktopVisible
        .hidden-phoneVisibleVisible
        .hidden-tabletVisibleVisible
        .hidden-desktopVisibleVisible
        -

        When to use

        -

        Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

        +

        When to use

        +

        Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

        -

        Responsive utilities test case

        -

        Resize your browser or load on different devices to test the above classes.

        -

        Visible on...

        -

        Green checkmarks indicate that class is visible in your current viewport.

        -
          -
        • Phone✔ Phone
          • -
        • Tablet✔ Tablet
          • -
        • Desktop✔ Desktop
          • -
        -

        Hidden on...

        -

        Here, green checkmarks indicate that class is hidden in your current viewport.

        -
          -
        • Phone✔ Phone
          • -
        • Tablet✔ Tablet
          • -
        • Desktop✔ Desktop
          • -
        +

        Responsive utilities test case

        +

        Resize your browser or load on different devices to test the above classes.

        +

        Visible on...

        +

        Green checkmarks indicate that class is visible in your current viewport.

        +
          +
        • Phone✔ Phone
          • +
        • Tablet✔ Tablet
          • +
        • Desktop✔ Desktop
          • +
        +

        Hidden on...

        +

        Here, green checkmarks indicate that class is hidden in your current viewport.

        +
          +
        • Phone✔ Phone
          • +
        • Tablet✔ Tablet
          • +
        • Desktop✔ Desktop
          • +
        -
        +
        + + +
      -
      + diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index e055974055..02d8a9df18 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -1,23 +1,14 @@ -

      {{_i}}Scaffolding{{/i}}

      {{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}

      -
      -
      - -
      -
      + +
        @@ -33,15 +24,15 @@ - -
        -
        -

        {{_i}}Global styles for CSS reset, typography, and links{{/i}}

        -
        + +
        +
        +

        {{_i}}Global styles for CSS reset, typography, and links{{/i}}

        +
        -

        {{_i}}Requires HTML5 doctype{{/i}}

        -

        {{_i}}Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.{{/i}}

        +

        {{_i}}Requires HTML5 doctype{{/i}}

        +

        {{_i}}Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.{{/i}}

         <!DOCTYPE html>
 <html lang="en">
@@ -49,89 +40,89 @@
 </html>
        -

        {{_i}}Typography and links{{/i}}

        -

        {{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}

        -
          -
        • {{_i}}Remove margin on the body{{/i}}
          • -
        • {{_i}}Set background-color: white; on the body{{/i}}
          • -
        • {{_i}}Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base{{/i}}
          • -
        • {{_i}}Set the global link color via @linkColor and apply link underlines only on :hover{{/i}}
          • -
        -

        {{_i}}These styles can be found within scaffolding.less.{{/i}}

        +

        {{_i}}Typography and links{{/i}}

        +

        {{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}

        +
          +
        • {{_i}}Remove margin on the body{{/i}}
          • +
        • {{_i}}Set background-color: white; on the body{{/i}}
          • +
        • {{_i}}Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base{{/i}}
          • +
        • {{_i}}Set the global link color via @linkColor and apply link underlines only on :hover{{/i}}
          • +
        +

        {{_i}}These styles can be found within scaffolding.less.{{/i}}

        -

        {{_i}}Reset via Normalize{{/i}}

        -

        {{_i}}With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.{{/i}}

        +

        {{_i}}Reset via Normalize{{/i}}

        +

        {{_i}}With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.{{/i}}

        -
        +
        - -
        -
        -

        {{_i}}Default grid system 12 columns with a responsive twist{{/i}}

        -
        + +
        +
        +

        {{_i}}Default grid system 12 columns with a responsive twist{{/i}}

        +
        -

        {{_i}}Live grid example{{/i}}

        -

        {{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}

        -
        -
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        -
        -
        2
        -
        4
        -
        4
        -
        -
        -
        4
        -
        6
        -
        -
        -
        5
        -
        5
        -
        -
        -
        10
        -
        -
        +

        {{_i}}Live grid example{{/i}}

        +

        {{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}

        +
        +
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        +
        +
        2
        +
        4
        +
        4
        +
        +
        +
        4
        +
        6
        +
        +
        +
        5
        +
        5
        +
        +
        +
        10
        +
        +
        -

        {{_i}}Basic grid HTML{{/i}}

        -

        {{_i}}For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row.{{/i}}

        +

        {{_i}}Basic grid HTML{{/i}}

        +

        {{_i}}For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row.{{/i}}

         <div class="row">
   <div class="span4">...</div>
   <div class="span8">...</div>
 </div>
        -

        {{_i}}Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.{{/i}}

        +

        {{_i}}Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.{{/i}}

        -

        {{_i}}Offsetting columns{{/i}}

        -

        {{_i}}Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.{{/i}}

        -
        -
        -
        4
        -
        4 offset 2
        -
        -
        -
        3 offset 2
        -
        3 offset 2
        -
        -
        -
        6 offset 4
        -
        -
        +

        {{_i}}Offsetting columns{{/i}}

        +

        {{_i}}Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.{{/i}}

        +
        +
        +
        4
        +
        4 offset 2
        +
        +
        +
        3 offset 2
        +
        3 offset 2
        +
        +
        +
        6 offset 4
        +
        + 
         <div class="row">
   <div class="span4">...</div>
@@ -139,23 +130,23 @@
 </div>
        -

        {{_i}}Nesting columns{{/i}}

        -

        {{_i}}To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}

        -

        {{_i}}Example{{/i}}

        -

        {{_i}}Here two nested .span4 columns are placed within a .span8.{{/i}}

        -
        -
        - {{_i}}Level 1 of column{{/i}} +

        {{_i}}Nesting columns{{/i}}

        +

        {{_i}}To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}

        +

        {{_i}}Example{{/i}}

        +

        {{_i}}Here two nested .span4 columns are placed within a .span8.{{/i}}

        -
        - {{_i}}Level 2{{/i}} -
        -
        - {{_i}}Level 2{{/i}} +
        + {{_i}}Level 1 of column{{/i}} +
        +
        + {{_i}}Level 2{{/i}} +
        +
        + {{_i}}Level 2{{/i}} +
        +
        -
        - 
         <div class="row">
   <div class="span10">
@@ -167,54 +158,54 @@
   </div>
 </div>
        -
        +
        - -
        -
        -

        {{_i}}Fluid grid system 12 responsive, percent-based columns{{/i}}

        -
        + +
        +
        +

        {{_i}}Fluid grid system 12 responsive, percent-based columns{{/i}}

        +
        -

        {{_i}}Live fluid grid example{{/i}}

        -

        {{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}

        -
        -
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        1
        -
        -
        -
        4
        -
        4
        -
        4
        -
        -
        -
        4
        -
        8
        -
        -
        -
        6
        -
        6
        -
        -
        -
        12
        -
        -
        +

        {{_i}}Live fluid grid example{{/i}}

        +

        {{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}

        +
        +
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        1
        +
        +
        +
        4
        +
        4
        +
        4
        +
        +
        +
        4
        +
        8
        +
        +
        +
        6
        +
        6
        +
        +
        +
        12
        +
        +
        -

        {{_i}}Basic fluid grid HTML{{/i}}

        -

        {{_i}}Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}

        +

        {{_i}}Basic fluid grid HTML{{/i}}

        +

        {{_i}}Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}

         <div class="row-fluid">
   <div class="span4">...</div>
@@ -222,21 +213,21 @@
 </div>
        -

        {{_i}}Fluid offsetting{{/i}}

        -

        {{_i}}Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.{{/i}}

        -
        -
        -
        4
        -
        4 offset 4
        -
        -
        -
        3 offset 3
        -
        3 offset 3
        -
        -
        -
        6 offset 6
        -
        -
        +

        {{_i}}Fluid offsetting{{/i}}

        +

        {{_i}}Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.{{/i}}

        +
        +
        +
        4
        +
        4 offset 4
        +
        +
        +
        3 offset 3
        +
        3 offset 3
        +
        +
        +
        6 offset 6
        +
        + 
         <div class="row-fluid">
   <div class="span4">...</div>
@@ -244,21 +235,21 @@
 </div>
        -

        {{_i}}Fluid nesting{{/i}}

        -

        {{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}

        -
        -
        - {{_i}}Fluid 12{{/i}} +

        {{_i}}Fluid nesting{{/i}}

        +

        {{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}

        -
        - {{_i}}Fluid 6{{/i}} -
        -
        - {{_i}}Fluid 6{{/i}} +
        + {{_i}}Fluid 12{{/i}} +
        +
        + {{_i}}Fluid 6{{/i}} +
        +
        + {{_i}}Fluid 6{{/i}} +
        +
        -
        - 
         <div class="row-fluid">
   <div class="span12">
@@ -271,78 +262,78 @@
 </div>
        -
        +
        - -
        -
        -

        {{_i}}Grid customization{{/i}}

        -
        + +
        +
        +

        {{_i}}Grid customization{{/i}}

        +
        -

        {{_i}}Variables in LESS{{/i}}

        -

        {{_i}}The default grid is built on a few variables for easy customization via LESS. All variables can be found in variables.less.{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Variable{{/i}}{{_i}}Default value{{/i}}{{_i}}Description{{/i}}
        @gridColumns12{{_i}}Number of columns{{/i}}
        @gridColumnWidth60px{{_i}}Width of each column{{/i}}
        @gridGutterWidth20px{{_i}}Negative space between columns{{/i}}
        @fluidGridColumnWidth6.382978723%{{_i}}Width of each fluid column{{/i}}
        @fluidGridGutterWidth2.127659574%{{_i}}Negative space between fluid columns{{/i}}
        +

        {{_i}}Variables in LESS{{/i}}

        +

        {{_i}}The default grid is built on a few variables for easy customization via LESS. All variables can be found in variables.less.{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Variable{{/i}}{{_i}}Default value{{/i}}{{_i}}Description{{/i}}
        @gridColumns12{{_i}}Number of columns{{/i}}
        @gridColumnWidth60px{{_i}}Width of each column{{/i}}
        @gridGutterWidth20px{{_i}}Negative space between columns{{/i}}
        @fluidGridColumnWidth6.382978723%{{_i}}Width of each fluid column{{/i}}
        @fluidGridGutterWidth2.127659574%{{_i}}Negative space between fluid columns{{/i}}
        -

        {{_i}}How to customize{{/i}}

        -

        {{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}

        +

        {{_i}}How to customize{{/i}}

        +

        {{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}

        -

        {{_i}}Staying responsive{{/i}}

        -

        {{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in responsive.less until a future update improves this.{{/i}}

        +

        {{_i}}Staying responsive{{/i}}

        +

        {{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in responsive.less until a future update improves this.{{/i}}

        -
        +
        - -
        -
        -

        {{_i}}Layouts Basic templates to create webpages{{/i}}

        -
        + +
        +
        +

        {{_i}}Layouts Basic templates to create webpages{{/i}}

        +
        -

        {{_i}}Fixed layout{{/i}}

        -

        {{_i}}Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.{{/i}}

        -
        -
        -
        +

        {{_i}}Fixed layout{{/i}}

        +

        {{_i}}Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.{{/i}}

        +
        +
        + 
         <body>
   <div class="container">
@@ -351,12 +342,12 @@
 </body>
        -

        {{_i}}Fluid layout{{/i}}

        -

        {{_i}}Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.{{/i}}

        -
        -
        -
        -
        +

        {{_i}}Fluid layout{{/i}}

        +

        {{_i}}Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.{{/i}}

        +
        +
        +
        + 
         <div class="container-fluid">
   <div class="row-fluid">
@@ -369,81 +360,81 @@
   </div>
 </div>
        -
        +
        - -
        -
        -

        {{_i}}Responsive design Media queries for various devices and resolutions{{/i}}

        -
        + +
        +
        +

        {{_i}}Responsive design Media queries for various devices and resolutions{{/i}}

        +
        - {{! Enabling }} -

        {{_i}}Enabling responsive features{{/i}}

        -

        {{_i}}Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.{{/i}}

        + {{! Enabling }} +

        {{_i}}Enabling responsive features{{/i}}

        +

        {{_i}}Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.{{/i}}

         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
        -

        {{_i}}Heads up!{{/i}} {{_i}} Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.{{/i}}

        +

        {{_i}}Heads up!{{/i}} {{_i}} Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.{{/i}}

        - {{! About }} -

        {{_i}}About responsive Bootstrap{{/i}}

        - Responsive devices -

        {{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}

        -
          -
        • {{_i}}Modify the width of column in our grid{{/i}}
          • -
        • {{_i}}Stack elements instead of float wherever necessary{{/i}}
          • -
        • {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
          • -
        -

        {{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}

        + {{! About }} +

        {{_i}}About responsive Bootstrap{{/i}}

        + Responsive devices +

        {{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}

        +
          +
        • {{_i}}Modify the width of column in our grid{{/i}}
          • +
        • {{_i}}Stack elements instead of float wherever necessary{{/i}}
          • +
        • {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
          • +
        +

        {{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}

        - {{! Supported }} -

        {{_i}}Supported devices{{/i}}

        -

        {{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Label{{/i}}{{_i}}Layout width{{/i}}{{_i}}Column width{{/i}}{{_i}}Gutter width{{/i}}
        {{_i}}Phones{{/i}}480px and below{{_i}}Fluid columns, no fixed widths{{/i}}
        {{_i}}Phones to tablets{{/i}}767px and below{{_i}}Fluid columns, no fixed widths{{/i}}
        {{_i}}Portrait tablets{{/i}}768px and above42px20px
        {{_i}}Default{{/i}}980px and up60px20px
        {{_i}}Large display{{/i}}1200px and up70px30px
        + {{! Supported }} +

        {{_i}}Supported devices{{/i}}

        +

        {{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Label{{/i}}{{_i}}Layout width{{/i}}{{_i}}Column width{{/i}}{{_i}}Gutter width{{/i}}
        {{_i}}Phones{{/i}}480px and below{{_i}}Fluid columns, no fixed widths{{/i}}
        {{_i}}Phones to tablets{{/i}}767px and below{{_i}}Fluid columns, no fixed widths{{/i}}
        {{_i}}Portrait tablets{{/i}}768px and above42px20px
        {{_i}}Default{{/i}}980px and up60px20px
        {{_i}}Large display{{/i}}1200px and up70px30px
         /* {{_i}}Landscape phones and down{{/i}} */
 @media (max-width: 480px) { ... }
@@ -459,79 +450,81 @@
        - {{! Responsive utility classes }} -

        {{_i}}Responsive utility classes{{/i}}

        -

        {{_i}}For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.{{/i}}

        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        {{_i}}Class{{/i}}{{_i}}Phones 767px and below{{/i}}{{_i}}Tablets 979px to 768px{{/i}}{{_i}}Desktops Default{{/i}}
        .visible-phone{{_i}}Visible{{/i}}
        .visible-tablet{{_i}}Visible{{/i}}
        .visible-desktop{{_i}}Visible{{/i}}
        .hidden-phone{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
        .hidden-tablet{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
        .hidden-desktop{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
        + {{! Responsive utility classes }} +

        {{_i}}Responsive utility classes{{/i}}

        +

        {{_i}}For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.{{/i}}

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        {{_i}}Class{{/i}}{{_i}}Phones 767px and below{{/i}}{{_i}}Tablets 979px to 768px{{/i}}{{_i}}Desktops Default{{/i}}
        .visible-phone{{_i}}Visible{{/i}}
        .visible-tablet{{_i}}Visible{{/i}}
        .visible-desktop{{_i}}Visible{{/i}}
        .hidden-phone{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
        .hidden-tablet{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
        .hidden-desktop{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
        -

        {{_i}}When to use{{/i}}

        -

        {{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}

        +

        {{_i}}When to use{{/i}}

        +

        {{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}

        -

        {{_i}}Responsive utilities test case{{/i}}

        -

        {{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}

        -

        {{_i}}Visible on...{{/i}}

        -

        {{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}

        -
          -
        • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
          • -
        • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
          • -
        • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
          • -
        -

        {{_i}}Hidden on...{{/i}}

        -

        {{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}

        -
          -
        • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
          • -
        • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
          • -
        • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
          • -
        +

        {{_i}}Responsive utilities test case{{/i}}

        +

        {{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}

        +

        {{_i}}Visible on...{{/i}}

        +

        {{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}

        +
          +
        • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
          • +
        • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
          • +
        • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
          • +
        +

        {{_i}}Hidden on...{{/i}}

        +

        {{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}

        +
          +
        • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
          • +
        • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
          • +
        • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
          • +
        -
        +
        -
      -
      \ No newline at end of file + + +
      {{! /span9 }} +
      {{! row}} From 75d952ffd80c3c3e18b2e47eac30a2b23d8ae7a7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 22:40:58 -0700 Subject: [PATCH 179/422] fix indenting and remove hidden subnav on Components --- docs/components.html | 2678 +++++++++++---------- docs/templates/pages/components.mustache | 2694 +++++++++++----------- 2 files changed, 2662 insertions(+), 2710 deletions(-) diff --git a/docs/components.html b/docs/components.html index 719a8ad48b..fec662d47e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -68,43 +68,17 @@
      -

      Components

      Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

      -
      -
      - -
      -
      + + + 
       <ul class="nav nav-tabs">
   <li class="dropdown">
@@ -772,23 +746,23 @@
 </ul>
      -

      Pills with dropdowns

      -
      -
      + 
       <ul class="nav nav-pills">
   <li class="dropdown">
@@ -806,29 +780,29 @@
      -
      +
      -

      Nav lists

      -

      A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

      +

      Nav lists

      +

      A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

      -

      Example nav list

      -

      Take a list of links and add class="nav nav-list":

      -
      -
      - -
      -
      +

      Example nav list

      +

      Take a list of links and add class="nav nav-list":

      +
      +
      + +
      + 
       <ul class="nav nav-list">
   <li class="nav-header">List header</li>
@@ -837,50 +811,50 @@
   ...
 </ul>
      -

      - Note - For nesting within a nav list, include class="nav nav-list" on any nested <ul>. -

      +

      + Note + For nesting within a nav list, include class="nav nav-list" on any nested <ul>. +

      -

      Horizontal dividers

      -

      Add a horizontal divider by creating an empty list item with the class .divider, like so:

      +

      Horizontal dividers

      +

      Add a horizontal divider by creating an empty list item with the class .divider, like so:

       <ul class="nav nav-list">
   ...
   <li class="divider"></li>
   ...
 </ul>
-
      + -
      +
      -

      Tabbable nav

      -

      Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

      +

      Tabbable nav

      +

      Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

      -

      Tabbable example

      -

      To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

      -
      -
      - -
      -
      -

      I'm in Section 1.

      -
      -
      -

      Howdy, I'm in Section 2.

      -
      -
      -

      What up girl, this is Section 3.

      -
      +

      Tabbable example

      +

      To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

      +
      +
      + +
      +
      +

      I'm in Section 1.

      +
      +
      +

      Howdy, I'm in Section 2.

      +
      +
      +

      What up girl, this is Section 3.

      +
      +
      +
      -
      - 
       <div class="tabbable"> <!-- Only required for left/right tabs -->
   <ul class="nav nav-tabs">
@@ -898,36 +872,36 @@
 </div>
      -

      Fade in tabs

      -

      To make tabs fade in, add .fade to each .tab-pane.

      +

      Fade in tabs

      +

      To make tabs fade in, add .fade to each .tab-pane.

      -

      Requires jQuery plugin

      -

      All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

      +

      Requires jQuery plugin

      +

      All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

      -

      Tabbable in any direction

      +

      Tabbable in any direction

      -

      Tabs on the bottom

      -

      Flip the order of the HTML and add a class to put tabs on the bottom.

      -
      -
      -
      -
      -

      I'm in Section A.

      -
      -
      -

      Howdy, I'm in Section B.

      -
      -
      -

      What up girl, this is Section C.

      -
      +

      Tabs on the bottom

      +

      Flip the order of the HTML and add a class to put tabs on the bottom.

      +
      +
      +
      +
      +

      I'm in Section A.

      +
      +
      +

      Howdy, I'm in Section B.

      +
      +
      +

      What up girl, this is Section C.

      +
      +
      + +
      - -
      - 
       <div class="tabbable tabs-below">
   <div class="tab-content">
@@ -939,28 +913,28 @@
 </div>
      -

      Tabs on the left

      -

      Swap the class to put tabs on the left.

      -
      -
      - -
      -
      -

      I'm in Section A.

      -
      -
      -

      Howdy, I'm in Section B.

      -
      -
      -

      What up girl, this is Section C.

      -
      +

      Tabs on the left

      +

      Swap the class to put tabs on the left.

      +
      +
      + +
      +
      +

      I'm in Section A.

      +
      +
      +

      Howdy, I'm in Section B.

      +
      +
      +

      What up girl, this is Section C.

      +
      +
      +
      -
      - 
       <div class="tabbable tabs-left">
   <ul class="nav nav-tabs">
@@ -972,28 +946,28 @@
 </div>
      -

      Tabs on the right

      -

      Swap the class to put tabs on the right.

      -
      -
      - -
      -
      -

      I'm in Section A.

      -
      -
      -

      Howdy, I'm in Section B.

      -
      -
      -

      What up girl, this is Section C.

      -
      +

      Tabs on the right

      +

      Swap the class to put tabs on the right.

      +
      +
      + +
      +
      +

      I'm in Section A.

      +
      +
      +

      Howdy, I'm in Section B.

      +
      +
      +

      What up girl, this is Section C.

      +
      +
      +
      -
      - 
       <div class="tabbable tabs-right">
   <ul class="nav nav-tabs">
@@ -1005,32 +979,32 @@
 </div>
      - + - -
      +
      +
      +
      +
      - + - - - -
      -
      -

      Pagination Two options for paging through content

      -
      + +
      +
      +

      Pagination Two options for paging through content

      +
      -

      Standard pagination

      -

      Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

      -
      - -
      +

      Standard pagination

      +

      Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

      +
      + + 
       <div class="pagination">
   <ul>
@@ -1382,26 +1356,26 @@
      -
      +
      -

      Options

      +

      Options

      -

      Disabled and active states

      -

      Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

      -
      - -
      +

      Disabled and active states

      +

      Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

      +
      + + 
       <div class="pagination ">
   <ul>
@@ -1412,39 +1386,39 @@
 </div>
      -

      Alignment

      -

      Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

      -
      - -
      +

      Alignment

      +

      Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

      +
      + + 
       <div class="pagination pagination-centered">
   ...
 </div>
      -
      - -
      +
      + + 
       <div class="pagination pagination-right">
   ...
@@ -1452,20 +1426,20 @@
      -
      +
      -

      Pager

      -

      Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

      +

      Pager

      +

      Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

      -

      Default example

      -

      By default, the pager centers links.

      -
      - -
      +

      Default example

      +

      By default, the pager centers links.

      +
      + + 
       <ul class="pager">
   <li>
@@ -1477,14 +1451,14 @@
 </ul>
      -

      Aligned links

      -

      Alternatively, you can align each link to the sides:

      -
      - -
      +

      Aligned links

      +

      Alternatively, you can align each link to the sides:

      +
      + + 
       <ul class="pager">
   <li class="previous">
@@ -1496,14 +1470,14 @@
 </ul>
      -

      Optional disabled state

      -

      Pager links also use the general .disabled utility class from the pagination.

      -
      - -
      +

      Optional disabled state

      +

      Pager links also use the general .disabled utility class from the pagination.

      +
      + + 
       <ul class="pager">
   <li class="previous disabled">
@@ -1513,187 +1487,187 @@
 </ul>
      -
      +
      - -
      -
      -

      Inline labels Label and annotate text

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      LabelsMarkup
      - Default - - <span class="label">Default</span> -
      - Success - - <span class="label label-success">Success</span> -
      - Warning - - <span class="label label-warning">Warning</span> -
      - Important - - <span class="label label-important">Important</span> -
      - Info - - <span class="label label-info">Info</span> -
      - Inverse - - <span class="label label-inverse">Inverse</span> -
      -
      + +
      +
      +

      Inline labels Label and annotate text

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      LabelsMarkup
      + Default + + <span class="label">Default</span> +
      + Success + + <span class="label label-success">Success</span> +
      + Warning + + <span class="label label-warning">Warning</span> +
      + Important + + <span class="label label-important">Important</span> +
      + Info + + <span class="label label-info">Info</span> +
      + Inverse + + <span class="label label-inverse">Inverse</span> +
      +
      - -
      -
      -

      Badges Indicators and unread counts

      -
      + +
      +
      +

      Badges Indicators and unread counts

      +
      -

      About

      -

      Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.

      +

      About

      +

      Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.

      -

      Available classes

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      NameExampleMarkup
      - Default - - 1 - - <span class="badge">1</span> -
      - Success - - 2 - - <span class="badge badge-success">2</span> -
      - Warning - - 4 - - <span class="badge badge-warning">4</span> -
      - Important - - 6 - - <span class="badge badge-important">6</span> -
      - Info - - 8 - - <span class="badge badge-info">8</span> -
      - Inverse - - 10 - - <span class="badge badge-inverse">10</span> -
      +

      Available classes

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      NameExampleMarkup
      + Default + + 1 + + <span class="badge">1</span> +
      + Success + + 2 + + <span class="badge badge-success">2</span> +
      + Warning + + 4 + + <span class="badge badge-warning">4</span> +
      + Important + + 6 + + <span class="badge badge-important">6</span> +
      + Info + + 8 + + <span class="badge badge-info">8</span> +
      + Inverse + + 10 + + <span class="badge badge-inverse">10</span> +
      -
      +
      - -
      -
      -

      Typographic components Page header and hero unit for segmenting content

      -
      + +
      +
      +

      Typographic components Page header and hero unit for segmenting content

      +
      -

      Hero unit

      -

      A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

      -
      -
      -

      Hello, world!

      -

      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

      -

      Learn more

      -
      -
      +

      Hero unit

      +

      A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

      +
      +
      +

      Hello, world!

      +

      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

      +

      Learn more

      +
      + 
       <div class="hero-unit">
   <h1>Heading</h1>
@@ -1706,105 +1680,105 @@
 </div>
      -

      Page header

      -

      A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

      -
      -
      -

      Example page header Subtext for header

      -
      -
      +

      Page header

      +

      A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

      +
      +
      +

      Example page header Subtext for header

      +
      + 
       <div class="page-header">
   <h1>Example page header</h1>
 </div>
      -
      +
      - -
      -
      -

      Thumbnails Grids of images, videos, text, and more

      -
      + +
      +
      +

      Thumbnails Grids of images, videos, text, and more

      +
      -

      Default thumbnails

      -

      By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

      -
      - -
      +

      Default thumbnails

      +

      By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

      +
      + +
      -

      Highly customizable

      -

      With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

      -
      -
        -
      • -
        - -
        -

        Thumbnail label

        -

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        -

        Action Action

        -
        -
        -
        • -
      • -
        - -
        -

        Thumbnail label

        -

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        -

        Action Action

        -
        -
        -
        • -
      • -
        - -
        -

        Thumbnail label

        -

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        -

        Action Action

        -
        -
        -
        • -
      -
      +

      Highly customizable

      +

      With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

      +
      +
        +
      • +
        + +
        +

        Thumbnail label

        +

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        +

        Action Action

        +
        +
        +
        • +
      • +
        + +
        +

        Thumbnail label

        +

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        +

        Action Action

        +
        +
        +
        • +
      • +
        + +
        +

        Thumbnail label

        +

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        +

        Action Action

        +
        +
        +
        • +
      +
      -

      Why use thumbnails

      -

      Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

      +

      Why use thumbnails

      +

      Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

      -

      Simple, flexible markup

      -

      Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

      +

      Simple, flexible markup

      +

      Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

      -

      Uses grid column sizes

      -

      Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

      +

      Uses grid column sizes

      +

      Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

      -

      The markup

      -

      As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

      +

      The markup

      +

      As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

       <ul class="thumbnails">
   <li class="span4">
@@ -1815,7 +1789,7 @@
   ...
 </ul>
      -

      For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

      +

      For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

       <ul class="thumbnails">
   <li class="span4">
@@ -1829,65 +1803,65 @@
 </ul>
      -

      More examples

      -

      Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

      - +

      More examples

      +

      Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

      + -
      +
      - -
      -
      -

      Alerts Styles for success, warning, and error messages

      -
      + +
      +
      +

      Alerts Styles for success, warning, and error messages

      +
      -

      Default alert

      -

      Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

      -
      -
      - - Warning! Best check yo self, you're not looking too good. -
      -
      +

      Default alert

      +

      Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

      +
      +
      + + Warning! Best check yo self, you're not looking too good. +
      + 
       <div class="alert">
   <button type="button" class="close" data-dismiss="alert">×</button>
@@ -1895,32 +1869,32 @@
 </div>
      -

      Dismiss buttons

      -

      Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

      +

      Dismiss buttons

      +

      Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

       <a href="#" class="close" data-dismiss="alert">×</button>
      -

      Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

      +

      Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

       <button type="button" class="close" data-dismiss="alert">×</button>
      -

      Dismiss alerts via javascript

      -

      Use the alerts jQuery plugin for quick and easy dismissal of alerts.

      +

      Dismiss alerts via javascript

      +

      Use the alerts jQuery plugin for quick and easy dismissal of alerts.

      -
      +
      -

      Options

      -

      For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

      -
      -
      - -

      Warning!

      -

      Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      -
      -
      +

      Options

      +

      For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

      +
      +
      + +

      Warning!

      +

      Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      +
      + 
       <div class="alert alert-block">
   <a class="close" data-dismiss="alert" href="#">&times;</a>
@@ -1930,97 +1904,97 @@
      -
      +
      -

      Contextual alternatives

      -

      Add optional classes to change an alert's connotation.

      +

      Contextual alternatives

      +

      Add optional classes to change an alert's connotation.

      -

      Error or danger

      -
      -
      - - Oh snap! Change a few things up and try submitting again. -
      -
      +

      Error or danger

      +
      +
      + + Oh snap! Change a few things up and try submitting again. +
      + 
       <div class="alert alert-error">
   ...
 </div>
      -

      Success

      -
      -
      - - Well done! You successfully read this important alert message. -
      -
      +

      Success

      +
      +
      + + Well done! You successfully read this important alert message. +
      + 
       <div class="alert alert-success">
   ...
 </div>
      -

      Information

      -
      -
      - - Heads up! This alert needs your attention, but it's not super important. -
      -
      +

      Information

      +
      +
      + + Heads up! This alert needs your attention, but it's not super important. +
      + 
       <div class="alert alert-info">
   ...
 </div>
      -
      +
      - -
      -
      -

      Progress bars For loading, redirecting, or action status

      -
      + +
      +
      +

      Progress bars For loading, redirecting, or action status

      +
      -

      Examples and markup

      +

      Examples and markup

      -

      Basic

      -

      Default progress bar with a vertical gradient.

      -
      -
      -
      -
      -
      +

      Basic

      +

      Default progress bar with a vertical gradient.

      +
      +
      +
      +
      + 
       <div class="progress">
   <div class="bar" style="width: 60%;"></div>
 </div>
      -

      Striped

      -

      Uses a gradient to create a striped effect. Not available in IE7-8.

      -
      -
      -
      -
      -
      +

      Striped

      +

      Uses a gradient to create a striped effect. Not available in IE7-8.

      +
      +
      +
      +
      + 
       <div class="progress progress-striped">
   <div class="bar" style="width: 20%;"></div>
 </div>
      -

      Animated

      -

      Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

      -
      -
      -
      -
      -
      +

      Animated

      +

      Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

      +
      +
      +
      +
      + 
       <div class="progress progress-striped active">
   <div class="bar" style="width: 40%;"></div>
@@ -2028,27 +2002,27 @@
      -
      +
      -

      Options

      +

      Options

      -

      Additional colors

      -

      Progress bars use some of the same button and alert classes for consistent styles.

      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      +

      Additional colors

      +

      Progress bars use some of the same button and alert classes for consistent styles.

      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + 
       <div class="progress progress-info">
   <div class="bar" style="width: 20%"></div>
@@ -2064,22 +2038,22 @@
 </div>
      -

      Striped bars

      -

      Similar to the solid colors, we have varied striped progress bars.

      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      +

      Striped bars

      +

      Similar to the solid colors, we have varied striped progress bars.

      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + 
       <div class="progress progress-info progress-striped">
   <div class="bar" style="width: 20%"></div>
@@ -2096,74 +2070,74 @@
      -
      +
      -

      Browser support

      -

      Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

      -

      Opera and IE do not support animations at this time.

      +

      Browser support

      +

      Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

      +

      Opera and IE do not support animations at this time.

      -
      +
      - -
      -
      -

      Miscellaneous Lightweight utility components

      -
      + +
      +
      +

      Miscellaneous Lightweight utility components

      +
      -

      Wells

      -

      Use the well as a simple effect on an element to give it an inset effect.

      -
      -
      - Look, I'm in a well! -
      -
      +

      Wells

      +

      Use the well as a simple effect on an element to give it an inset effect.

      +
      +
      + Look, I'm in a well! +
      + 
       <div class="well">
   ...
 </div>
      -

      Optional classes

      -

      Control padding and rounded corners with two optional modifier classes.

      -
      -
      - Look, I'm in a well! -
      -
      +

      Optional classes

      +

      Control padding and rounded corners with two optional modifier classes.

      +
      +
      + Look, I'm in a well! +
      + 
       <div class="well well-large">
   ...
 </div>
      -
      -
      - Look, I'm in a well! -
      -
      +
      +
      + Look, I'm in a well! +
      + 
       <div class="well well-small">
   ...
 </div>
      -

      Close icon

      -

      Use the generic close icon for dismissing content like modals and alerts.

      -
      -

      -
      +

      Close icon

      +

      Use the generic close icon for dismissing content like modals and alerts.

      +
      +

      + 
      <button class="close">&times;</button>

      iOS devices require an href="#" for click events if you rather use an anchor.

      <a class="close" href="#">&times;</a>
      -

      Helper classes

      -

      Simple, focused classes for small display or behavior tweaks.

      +

      Helper classes

      +

      Simple, focused classes for small display or behavior tweaks.

      -

      .pull-left

      -

      Float an element left

      +

      .pull-left

      +

      Float an element left

       class="pull-left"
      @@ -2173,8 +2147,8 @@ class="pull-left" } -

      .pull-right

      -

      Float an element right

      +

      .pull-right

      +

      Float an element right

       class="pull-right"
      @@ -2184,8 +2158,8 @@ class="pull-right" } -

      .muted

      -

      Change an element's color to #999

      +

      .muted

      +

      Change an element's color to #999

       class="muted"
      @@ -2195,8 +2169,8 @@ class="muted" } -

      .clearfix

      -

      Clear the float on any element

      +

      .clearfix

      +

      Clear the float on any element

       class="clearfix"
      @@ -2214,7 +2188,9 @@ class="clearfix" } -
      +
      + + diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index d696e683c8..c7727fd180 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1,40 +1,14 @@ -

      {{_i}}Components{{/i}}

      {{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}

      -
      -
      - -
      -
      + + + 
       <ul class="nav nav-tabs">
   <li class="dropdown">
@@ -702,23 +676,23 @@
 </ul>
      -

      {{_i}}Pills with dropdowns{{/i}}

      -
      -
      {{! /example }} +
      {{! /example }} 
       <ul class="nav nav-pills">
   <li class="dropdown">
@@ -736,29 +710,29 @@
      -
      +
      -

      {{_i}}Nav lists{{/i}}

      -

      {{_i}}A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}

      +

      {{_i}}Nav lists{{/i}}

      +

      {{_i}}A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}

      -

      {{_i}}Example nav list{{/i}}

      -

      {{_i}}Take a list of links and add class="nav nav-list":{{/i}}

      -
      -
      - -
      -
      {{! /example }} +

      {{_i}}Example nav list{{/i}}

      +

      {{_i}}Take a list of links and add class="nav nav-list":{{/i}}

      +
      +
      + +
      +
      {{! /example }} 
       <ul class="nav nav-list">
   <li class="nav-header">{{_i}}List header{{/i}}</li>
@@ -767,50 +741,50 @@
   ...
 </ul>
      -

      - {{_i}}Note{{/i}} - {{_i}}For nesting within a nav list, include class="nav nav-list" on any nested <ul>.{{/i}} -

      +

      + {{_i}}Note{{/i}} + {{_i}}For nesting within a nav list, include class="nav nav-list" on any nested <ul>.{{/i}} +

      -

      {{_i}}Horizontal dividers{{/i}}

      -

      {{_i}}Add a horizontal divider by creating an empty list item with the class .divider, like so:{{/i}}

      +

      {{_i}}Horizontal dividers{{/i}}

      +

      {{_i}}Add a horizontal divider by creating an empty list item with the class .divider, like so:{{/i}}

       <ul class="nav nav-list">
   ...
   <li class="divider"></li>
   ...
 </ul>
-
      + -
      +
      -

      {{_i}}Tabbable nav{{/i}}

      -

      {{_i}}Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.{{/i}}

      +

      {{_i}}Tabbable nav{{/i}}

      +

      {{_i}}Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.{{/i}}

      -

      {{_i}}Tabbable example{{/i}}

      -

      {{_i}}To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.{{/i}}

      -
      -
      - -
      -
      -

      {{_i}}I'm in Section 1.{{/i}}

      -
      -
      -

      {{_i}}Howdy, I'm in Section 2.{{/i}}

      -
      -
      -

      {{_i}}What up girl, this is Section 3.{{/i}}

      -
      -
      -
      -
      {{! /example }} +

      {{_i}}Tabbable example{{/i}}

      +

      {{_i}}To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.{{/i}}

      +
      +
      + +
      +
      +

      {{_i}}I'm in Section 1.{{/i}}

      +
      +
      +

      {{_i}}Howdy, I'm in Section 2.{{/i}}

      +
      +
      +

      {{_i}}What up girl, this is Section 3.{{/i}}

      +
      +
      +
      +
      {{! /example }} 
       <div class="tabbable"> <!-- Only required for left/right tabs -->
   <ul class="nav nav-tabs">
@@ -828,36 +802,36 @@
 </div>
      -

      {{_i}}Fade in tabs{{/i}}

      -

      {{_i}}To make tabs fade in, add .fade to each .tab-pane.{{/i}}

      +

      {{_i}}Fade in tabs{{/i}}

      +

      {{_i}}To make tabs fade in, add .fade to each .tab-pane.{{/i}}

      -

      {{_i}}Requires jQuery plugin{{/i}}

      -

      {{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.{{/i}}

      +

      {{_i}}Requires jQuery plugin{{/i}}

      +

      {{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.{{/i}}

      -

      {{_i}}Tabbable in any direction{{/i}}

      +

      {{_i}}Tabbable in any direction{{/i}}

      -

      {{_i}}Tabs on the bottom{{/i}}

      -

      {{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}

      -
      -
      -
      -
      -

      {{_i}}I'm in Section A.{{/i}}

      -
      -
      -

      {{_i}}Howdy, I'm in Section B.{{/i}}

      -
      -
      -

      {{_i}}What up girl, this is Section C.{{/i}}

      -
      -
      - -
      -
      {{! /example }} +

      {{_i}}Tabs on the bottom{{/i}}

      +

      {{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}

      +
      +
      +
      +
      +

      {{_i}}I'm in Section A.{{/i}}

      +
      +
      +

      {{_i}}Howdy, I'm in Section B.{{/i}}

      +
      +
      +

      {{_i}}What up girl, this is Section C.{{/i}}

      +
      +
      + +
      +
      {{! /example }} 
       <div class="tabbable tabs-below">
   <div class="tab-content">
@@ -869,28 +843,28 @@
 </div>
      -

      {{_i}}Tabs on the left{{/i}}

      -

      {{_i}}Swap the class to put tabs on the left.{{/i}}

      -
      -
      - -
      -
      -

      {{_i}}I'm in Section A.{{/i}}

      -
      -
      -

      {{_i}}Howdy, I'm in Section B.{{/i}}

      -
      -
      -

      {{_i}}What up girl, this is Section C.{{/i}}

      -
      -
      -
      -
      {{! /example }} +

      {{_i}}Tabs on the left{{/i}}

      +

      {{_i}}Swap the class to put tabs on the left.{{/i}}

      +
      +
      + +
      +
      +

      {{_i}}I'm in Section A.{{/i}}

      +
      +
      +

      {{_i}}Howdy, I'm in Section B.{{/i}}

      +
      +
      +

      {{_i}}What up girl, this is Section C.{{/i}}

      +
      +
      +
      +
      {{! /example }} 
       <div class="tabbable tabs-left">
   <ul class="nav nav-tabs">
@@ -902,28 +876,28 @@
 </div>
      -

      {{_i}}Tabs on the right{{/i}}

      -

      {{_i}}Swap the class to put tabs on the right.{{/i}}

      -
      -
      - -
      -
      -

      {{_i}}I'm in Section A.{{/i}}

      -
      -
      -

      {{_i}}Howdy, I'm in Section B.{{/i}}

      -
      -
      -

      {{_i}}What up girl, this is Section C.{{/i}}

      -
      -
      -
      -
      {{! /example }} +

      {{_i}}Tabs on the right{{/i}}

      +

      {{_i}}Swap the class to put tabs on the right.{{/i}}

      +
      +
      + +
      +
      +

      {{_i}}I'm in Section A.{{/i}}

      +
      +
      +

      {{_i}}Howdy, I'm in Section B.{{/i}}

      +
      +
      +

      {{_i}}What up girl, this is Section C.{{/i}}

      +
      +
      +
      +
      {{! /example }} 
       <div class="tabbable tabs-right">
   <ul class="nav nav-tabs">
@@ -935,32 +909,32 @@
 </div>
      - + - - + - - - -
      -
      -

      {{_i}}Pagination{{/i}} {{_i}}Two options for paging through content{{/i}}

      -
      + +
      +
      +

      {{_i}}Pagination{{/i}} {{_i}}Two options for paging through content{{/i}}

      +
      -

      {{_i}}Standard pagination{{/i}}

      -

      {{_i}}Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}

      -
      - -
      +

      {{_i}}Standard pagination{{/i}}

      +

      {{_i}}Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}

      +
      + + 
       <div class="pagination">
   <ul>
@@ -1312,26 +1286,26 @@
      -
      +
      -

      {{_i}}Options{{/i}}

      +

      {{_i}}Options{{/i}}

      -

      {{_i}}Disabled and active states{{/i}}

      -

      {{_i}}Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.{{/i}}

      -
      - -
      +

      {{_i}}Disabled and active states{{/i}}

      +

      {{_i}}Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.{{/i}}

      +
      + + 
       <div class="pagination ">
   <ul>
@@ -1342,39 +1316,39 @@
 </div>
      -

      {{_i}}Alignment{{/i}}

      -

      {{_i}}Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}

      -
      - -
      +

      {{_i}}Alignment{{/i}}

      +

      {{_i}}Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}

      +
      + + 
       <div class="pagination pagination-centered">
   ...
 </div>
      -
      - -
      +
      + + 
       <div class="pagination pagination-right">
   ...
@@ -1382,20 +1356,20 @@
      -
      +
      -

      {{_i}}Pager{{/i}}

      -

      {{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}

      +

      {{_i}}Pager{{/i}}

      +

      {{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}

      -

      {{_i}}Default example{{/i}}

      -

      {{_i}}By default, the pager centers links.{{/i}}

      -
      - -
      +

      {{_i}}Default example{{/i}}

      +

      {{_i}}By default, the pager centers links.{{/i}}

      +
      + + 
       <ul class="pager">
   <li>
@@ -1407,14 +1381,14 @@
 </ul>
      -

      {{_i}}Aligned links{{/i}}

      -

      {{_i}}Alternatively, you can align each link to the sides:{{/i}}

      -
      - -
      +

      {{_i}}Aligned links{{/i}}

      +

      {{_i}}Alternatively, you can align each link to the sides:{{/i}}

      +
      + + 
       <ul class="pager">
   <li class="previous">
@@ -1426,14 +1400,14 @@
 </ul>
      -

      {{_i}}Optional disabled state{{/i}}

      -

      {{_i}}Pager links also use the general .disabled utility class from the pagination.{{/i}}

      -
      - -
      +

      {{_i}}Optional disabled state{{/i}}

      +

      {{_i}}Pager links also use the general .disabled utility class from the pagination.{{/i}}

      +
      + + 
       <ul class="pager">
   <li class="previous disabled">
@@ -1443,187 +1417,187 @@
 </ul>
      -
      +
      - -
      -
      -

      {{_i}}Inline labels{{/i}} {{_i}}Label and annotate text{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Labels{{/i}}{{_i}}Markup{{/i}}
      - {{_i}}Default{{/i}} - - <span class="label">{{_i}}Default{{/i}}</span> -
      - {{_i}}Success{{/i}} - - <span class="label label-success">{{_i}}Success{{/i}}</span> -
      - {{_i}}Warning{{/i}} - - <span class="label label-warning">{{_i}}Warning{{/i}}</span> -
      - {{_i}}Important{{/i}} - - <span class="label label-important">{{_i}}Important{{/i}}</span> -
      - {{_i}}Info{{/i}} - - <span class="label label-info">{{_i}}Info{{/i}}</span> -
      - {{_i}}Inverse{{/i}} - - <span class="label label-inverse">{{_i}}Inverse{{/i}}</span> -
      -
      + +
      +
      +

      {{_i}}Inline labels{{/i}} {{_i}}Label and annotate text{{/i}}

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Labels{{/i}}{{_i}}Markup{{/i}}
      + {{_i}}Default{{/i}} + + <span class="label">{{_i}}Default{{/i}}</span> +
      + {{_i}}Success{{/i}} + + <span class="label label-success">{{_i}}Success{{/i}}</span> +
      + {{_i}}Warning{{/i}} + + <span class="label label-warning">{{_i}}Warning{{/i}}</span> +
      + {{_i}}Important{{/i}} + + <span class="label label-important">{{_i}}Important{{/i}}</span> +
      + {{_i}}Info{{/i}} + + <span class="label label-info">{{_i}}Info{{/i}}</span> +
      + {{_i}}Inverse{{/i}} + + <span class="label label-inverse">{{_i}}Inverse{{/i}}</span> +
      +
      - -
      -
      -

      {{_i}}Badges{{/i}} {{_i}}Indicators and unread counts{{/i}}

      -
      + +
      +
      +

      {{_i}}Badges{{/i}} {{_i}}Indicators and unread counts{{/i}}

      +
      -

      About

      -

      {{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}

      +

      About

      +

      {{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}

      -

      Available classes

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Name{{/i}}{{_i}}Example{{/i}}{{_i}}Markup{{/i}}
      - {{_i}}Default{{/i}} - - 1 - - <span class="badge">1</span> -
      - {{_i}}Success{{/i}} - - 2 - - <span class="badge badge-success">2</span> -
      - {{_i}}Warning{{/i}} - - 4 - - <span class="badge badge-warning">4</span> -
      - {{_i}}Important{{/i}} - - 6 - - <span class="badge badge-important">6</span> -
      - {{_i}}Info{{/i}} - - 8 - - <span class="badge badge-info">8</span> -
      - {{_i}}Inverse{{/i}} - - 10 - - <span class="badge badge-inverse">10</span> -
      +

      Available classes

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Name{{/i}}{{_i}}Example{{/i}}{{_i}}Markup{{/i}}
      + {{_i}}Default{{/i}} + + 1 + + <span class="badge">1</span> +
      + {{_i}}Success{{/i}} + + 2 + + <span class="badge badge-success">2</span> +
      + {{_i}}Warning{{/i}} + + 4 + + <span class="badge badge-warning">4</span> +
      + {{_i}}Important{{/i}} + + 6 + + <span class="badge badge-important">6</span> +
      + {{_i}}Info{{/i}} + + 8 + + <span class="badge badge-info">8</span> +
      + {{_i}}Inverse{{/i}} + + 10 + + <span class="badge badge-inverse">10</span> +
      -
      +
      - -
      -
      -

      {{_i}}Typographic components{{/i}} {{_i}}Page header and hero unit for segmenting content{{/i}}

      -
      + +
      +
      +

      {{_i}}Typographic components{{/i}} {{_i}}Page header and hero unit for segmenting content{{/i}}

      +
      -

      {{_i}}Hero unit{{/i}}

      -

      {{_i}}A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}

      -
      -
      -

      {{_i}}Hello, world!{{/i}}

      -

      {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}

      -

      {{_i}}Learn more{{/i}}

      -
      -
      +

      {{_i}}Hero unit{{/i}}

      +

      {{_i}}A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}

      +
      +
      +

      {{_i}}Hello, world!{{/i}}

      +

      {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}

      +

      {{_i}}Learn more{{/i}}

      +
      + 
       <div class="hero-unit">
   <h1>{{_i}}Heading{{/i}}</h1>
@@ -1636,105 +1610,105 @@
 </div>
      -

      {{_i}}Page header{{/i}}

      -

      {{_i}}A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}

      -
      -
      -

      {{_i}}Example page header{{/i}} {{_i}}Subtext for header{{/i}}

      -
      -
      +

      {{_i}}Page header{{/i}}

      +

      {{_i}}A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}

      +
      +
      +

      {{_i}}Example page header{{/i}} {{_i}}Subtext for header{{/i}}

      +
      + 
       <div class="page-header">
   <h1>{{_i}}Example page header{{/i}}</h1>
 </div>
      -
      +
      - -
      -
      -

      {{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}

      -
      + +
      +
      +

      {{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}

      +
      -

      {{_i}}Default thumbnails{{/i}}

      -

      {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

      -
      - -
      +

      {{_i}}Default thumbnails{{/i}}

      +

      {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

      +
      + +
      -

      {{_i}}Highly customizable{{/i}}

      -

      {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}

      -
      -
        -
      • -
        - -
        -

        {{_i}}Thumbnail label{{/i}}

        -

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        -

        {{_i}}Action{{/i}} {{_i}}Action{{/i}}

        -
        -
        -
        • -
      • -
        - -
        -

        {{_i}}Thumbnail label{{/i}}

        -

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        -

        {{_i}}Action{{/i}} {{_i}}Action{{/i}}

        -
        -
        -
        • -
      • -
        - -
        -

        {{_i}}Thumbnail label{{/i}}

        -

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        -

        {{_i}}Action{{/i}} {{_i}}Action{{/i}}

        -
        -
        -
        • -
      -
      +

      {{_i}}Highly customizable{{/i}}

      +

      {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}

      +
      +
        +
      • +
        + +
        +

        {{_i}}Thumbnail label{{/i}}

        +

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        +

        {{_i}}Action{{/i}} {{_i}}Action{{/i}}

        +
        +
        +
        • +
      • +
        + +
        +

        {{_i}}Thumbnail label{{/i}}

        +

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        +

        {{_i}}Action{{/i}} {{_i}}Action{{/i}}

        +
        +
        +
        • +
      • +
        + +
        +

        {{_i}}Thumbnail label{{/i}}

        +

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        +

        {{_i}}Action{{/i}} {{_i}}Action{{/i}}

        +
        +
        +
        • +
      +
      -

      {{_i}}Why use thumbnails{{/i}}

      -

      {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

      +

      {{_i}}Why use thumbnails{{/i}}

      +

      {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

      -

      {{_i}}Simple, flexible markup{{/i}}

      -

      {{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}

      +

      {{_i}}Simple, flexible markup{{/i}}

      +

      {{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}

      -

      {{_i}}Uses grid column sizes{{/i}}

      -

      {{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

      +

      {{_i}}Uses grid column sizes{{/i}}

      +

      {{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

      -

      {{_i}}The markup{{/i}}

      -

      {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

      +

      {{_i}}The markup{{/i}}

      +

      {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

       <ul class="thumbnails">
   <li class="span4">
@@ -1745,7 +1719,7 @@
   ...
 </ul>
      -

      {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}

      +

      {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}

       <ul class="thumbnails">
   <li class="span4">
@@ -1759,65 +1733,65 @@
 </ul>
      -

      {{_i}}More examples{{/i}}

      -

      {{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

      - +

      {{_i}}More examples{{/i}}

      +

      {{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

      + -
      +
      - -
      -
      -

      {{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}

      -
      + +
      +
      +

      {{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}

      +
      -

      {{_i}}Default alert{{/i}}

      -

      {{_i}}Wrap any text and an optional dismiss button in .alert for a basic warning alert message.{{/i}}

      -
      -
      - - {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} -
      -
      +

      {{_i}}Default alert{{/i}}

      +

      {{_i}}Wrap any text and an optional dismiss button in .alert for a basic warning alert message.{{/i}}

      +
      +
      + + {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} +
      + 
       <div class="alert">
   <button type="button" class="close" data-dismiss="alert">×</button>
@@ -1825,32 +1799,32 @@
 </div>
      -

      {{_i}}Dismiss buttons{{/i}}

      -

      {{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}

      +

      {{_i}}Dismiss buttons{{/i}}

      +

      {{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}

       <a href="#" class="close" data-dismiss="alert">×</button>
      -

      {{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}

      +

      {{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}

       <button type="button" class="close" data-dismiss="alert">×</button>
      -

      {{_i}}Dismiss alerts via javascript{{/i}}

      -

      {{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}

      +

      {{_i}}Dismiss alerts via javascript{{/i}}

      +

      {{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}

      -
      +
      -

      {{_i}}Options{{/i}}

      -

      {{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.{{/i}}

      -
      -
      - -

      {{_i}}Warning!{{/i}}

      -

      {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      -
      -
      +

      {{_i}}Options{{/i}}

      +

      {{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.{{/i}}

      +
      +
      + +

      {{_i}}Warning!{{/i}}

      +

      {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      +
      + 
       <div class="alert alert-block">
   <a class="close" data-dismiss="alert" href="#">&times;</a>
@@ -1860,97 +1834,97 @@
      -
      +
      -

      {{_i}}Contextual alternatives{{/i}}

      -

      {{_i}}Add optional classes to change an alert's connotation.{{/i}}

      +

      {{_i}}Contextual alternatives{{/i}}

      +

      {{_i}}Add optional classes to change an alert's connotation.{{/i}}

      -

      {{_i}}Error or danger{{/i}}

      -
      -
      - - {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}} -
      -
      +

      {{_i}}Error or danger{{/i}}

      +
      +
      + + {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}} +
      + 
       <div class="alert alert-error">
   ...
 </div>
      -

      {{_i}}Success{{/i}}

      -
      -
      - - {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}} -
      -
      +

      {{_i}}Success{{/i}}

      +
      +
      + + {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}} +
      + 
       <div class="alert alert-success">
   ...
 </div>
      -

      {{_i}}Information{{/i}}

      -
      -
      - - {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}} -
      -
      +

      {{_i}}Information{{/i}}

      +
      +
      + + {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}} +
      + 
       <div class="alert alert-info">
   ...
 </div>
      -
      +
      - -
      -
      -

      {{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

      -
      + +
      +
      +

      {{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

      +
      -

      {{_i}}Examples and markup{{/i}}

      +

      {{_i}}Examples and markup{{/i}}

      -

      {{_i}}Basic{{/i}}

      -

      {{_i}}Default progress bar with a vertical gradient.{{/i}}

      -
      -
      -
      -
      -
      +

      {{_i}}Basic{{/i}}

      +

      {{_i}}Default progress bar with a vertical gradient.{{/i}}

      +
      +
      +
      +
      + 
       <div class="progress">
   <div class="bar" style="width: 60%;"></div>
 </div>
      -

      {{_i}}Striped{{/i}}

      -

      {{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}

      -
      -
      -
      -
      -
      +

      {{_i}}Striped{{/i}}

      +

      {{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}

      +
      +
      +
      +
      + 
       <div class="progress progress-striped">
   <div class="bar" style="width: 20%;"></div>
 </div>
      -

      {{_i}}Animated{{/i}}

      -

      {{_i}}Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.{{/i}}

      -
      -
      -
      -
      -
      +

      {{_i}}Animated{{/i}}

      +

      {{_i}}Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.{{/i}}

      +
      +
      +
      +
      + 
       <div class="progress progress-striped active">
   <div class="bar" style="width: 40%;"></div>
@@ -1958,27 +1932,27 @@
      -
      +
      -

      {{_i}}Options{{/i}}

      +

      {{_i}}Options{{/i}}

      -

      {{_i}}Additional colors{{/i}}

      -

      {{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}

      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      +

      {{_i}}Additional colors{{/i}}

      +

      {{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}

      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + 
       <div class="progress progress-info">
   <div class="bar" style="width: 20%"></div>
@@ -1994,22 +1968,22 @@
 </div>
      -

      {{_i}}Striped bars{{/i}}

      -

      {{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}

      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      +

      {{_i}}Striped bars{{/i}}

      +

      {{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}

      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + 
       <div class="progress progress-info progress-striped">
   <div class="bar" style="width: 20%"></div>
@@ -2026,74 +2000,74 @@
      -
      +
      -

      {{_i}}Browser support{{/i}}

      -

      {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}

      -

      {{_i}}Opera and IE do not support animations at this time.{{/i}}

      +

      {{_i}}Browser support{{/i}}

      +

      {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}

      +

      {{_i}}Opera and IE do not support animations at this time.{{/i}}

      -
      +
      - -
      -
      -

      {{_i}}Miscellaneous{{/i}} {{_i}}Lightweight utility components{{/i}}

      -
      + +
      +
      +

      {{_i}}Miscellaneous{{/i}} {{_i}}Lightweight utility components{{/i}}

      +
      -

      {{_i}}Wells{{/i}}

      -

      {{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

      -
      -
      - {{_i}}Look, I'm in a well!{{/i}} -
      -
      +

      {{_i}}Wells{{/i}}

      +

      {{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

      +
      +
      + {{_i}}Look, I'm in a well!{{/i}} +
      + 
       <div class="well">
   ...
 </div>
      -

      {{_i}}Optional classes{{/i}}

      -

      {{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}

      -
      -
      - {{_i}}Look, I'm in a well!{{/i}} -
      -
      +

      {{_i}}Optional classes{{/i}}

      +

      {{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}

      +
      +
      + {{_i}}Look, I'm in a well!{{/i}} +
      + 
       <div class="well well-large">
   ...
 </div>
      -
      -
      - {{_i}}Look, I'm in a well!{{/i}} -
      -
      +
      +
      + {{_i}}Look, I'm in a well!{{/i}} +
      + 
       <div class="well well-small">
   ...
 </div>
      -

      {{_i}}Close icon{{/i}}

      -

      {{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

      -
      -

      -
      +

      {{_i}}Close icon{{/i}}

      +

      {{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

      +
      +

      + 
      <button class="close">&times;</button>

      {{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}

      <a class="close" href="#">&times;</a>
      -

      {{_i}}Helper classes{{/i}}

      -

      {{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}

      +

      {{_i}}Helper classes{{/i}}

      +

      {{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}

      -

      {{_i}}.pull-left{{/i}}

      -

      {{_i}}Float an element left{{/i}}

      +

      {{_i}}.pull-left{{/i}}

      +

      {{_i}}Float an element left{{/i}}

       class="pull-left"
      @@ -2103,8 +2077,8 @@ class="pull-left" } -

      {{_i}}.pull-right{{/i}}

      -

      {{_i}}Float an element right{{/i}}

      +

      {{_i}}.pull-right{{/i}}

      +

      {{_i}}Float an element right{{/i}}

       class="pull-right"
      @@ -2114,8 +2088,8 @@ class="pull-right" } -

      {{_i}}.muted{{/i}}

      -

      {{_i}}Change an element's color to #999{{/i}}

      +

      {{_i}}.muted{{/i}}

      +

      {{_i}}Change an element's color to #999{{/i}}

       class="muted"
      @@ -2125,8 +2099,8 @@ class="muted" } -

      {{_i}}.clearfix{{/i}}

      -

      {{_i}}Clear the float on any element{{/i}}

      +

      {{_i}}.clearfix{{/i}}

      +

      {{_i}}Clear the float on any element{{/i}}

       class="clearfix"
      @@ -2144,7 +2118,9 @@ class="clearfix" } -
      +
      - - + + + {{! /span9 }} +{{! row}} From 83846ba0d629a3882e727ccc7b64684507206cce Mon Sep 17 00:00:00 2001 From: Roberto - phproberto Date: Tue, 10 Jul 2012 08:12:16 +0200 Subject: [PATCH 180/422] Fixes #4002 responsive utilities classes --- docs/assets/css/bootstrap-responsive.css | 28 ++++++++++++--------- less/responsive-utilities.less | 14 +++++------ less/tests/css-tests.html | 31 ++++++++++++++++++++++++ 3 files changed, 54 insertions(+), 19 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index a584b806e6..8916f313c1 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -57,34 +57,38 @@ display: none !important; } +.visible-desktop { + display: inherit !important; +} + @media (min-width: 768px) and (max-width: 979px) { - .visible-tablet { - display: inherit !important; - } - .hidden-tablet { - display: none !important; - } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important ; } + .visible-tablet { + display: inherit !important; + } + .hidden-tablet { + display: none !important; + } } @media (max-width: 767px) { - .visible-phone { - display: inherit !important; - } - .hidden-phone { - display: none !important; - } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; } + .visible-phone { + display: inherit !important; + } + .hidden-phone { + display: none !important; + } } @media (min-width: 1200px) { diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 59deafe81c..2c3f6c15fe 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -15,29 +15,29 @@ // For desktops .visible-phone { display: none !important; } .visible-tablet { display: none !important; } -.visible-desktop { } // Don't set initially .hidden-phone { } .hidden-tablet { } .hidden-desktop { display: none !important; } +.visible-desktop { display: inherit !important; } // Tablets & small desktops only @media (min-width: 768px) and (max-width: 979px) { + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important ; } // Show .visible-tablet { display: inherit !important; } // Hide .hidden-tablet { display: none !important; } - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important ; } } // Phones only @media (max-width: 767px) { + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important; } // Show .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior // Hide .hidden-phone { display: none !important; } - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } } diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 4b8b1a2772..341c802645 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -1019,6 +1019,37 @@ + + +
      +

      Responsive utility classes

      +
      + +

      Visible on...

      +
        +
      • Phone✔ Phone
        • +
      • Tablet✔ Tablet
        • +
      • Desktop✔ Desktop
        • +
      +
        +
      • Phone + Tablet✔ Phone + Tablet
        • +
      • Tablet + Desktop✔ Tablet + Desktop
        • +
      • All✔ All
        • +
      + +

      Hidden on...

      +
        +
      • Phone✔ Phone
        • +
      • Tablet✔ Tablet
        • +
      • Desktop✔ Desktop
        • +
      +
        +
      • Phone + Tablet✔ Phone + Tablet
        • +
      • Tablet + Desktop✔ Tablet + Desktop
        • +
      • All✔ All
        • +
      + From 5d8e78e0faedb4365216f1ebbc5d70dc560f3f6e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jul 2012 00:32:04 -0700 Subject: [PATCH 181/422] fixes #3605: add support for input-prepend/-append to .form-search --- docs/assets/css/bootstrap.css | 71 +++++++++++++++++++------- docs/base-css.html | 20 ++++++++ docs/templates/pages/base-css.mustache | 20 ++++++++ less/forms.less | 29 +++++++++-- 4 files changed, 116 insertions(+), 24 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f8edafa3b1..e290d86464 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -851,7 +851,7 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: 30px; + margin-bottom: 20px; font-size: 21px; line-height: 40px; color: #333333; @@ -1408,19 +1408,19 @@ select:focus:required:invalid:focus { *zoom: 1; } -.input-prepend, -.input-append { +.input-append, +.input-prepend { margin-bottom: 5px; font-size: 0; white-space: nowrap; } -.input-prepend input, .input-append input, -.input-prepend select, +.input-prepend input, .input-append select, -.input-prepend .uneditable-input, -.input-append .uneditable-input { +.input-prepend select, +.input-append .uneditable-input, +.input-prepend .uneditable-input { position: relative; margin-bottom: 0; *margin-left: 0; @@ -1431,17 +1431,17 @@ select:focus:required:invalid:focus { border-radius: 0 3px 3px 0; } -.input-prepend input:focus, .input-append input:focus, -.input-prepend select:focus, +.input-prepend input:focus, .input-append select:focus, -.input-prepend .uneditable-input:focus, -.input-append .uneditable-input:focus { +.input-prepend select:focus, +.input-append .uneditable-input:focus, +.input-prepend .uneditable-input:focus { z-index: 2; } -.input-prepend .add-on, -.input-append .add-on { +.input-append .add-on, +.input-prepend .add-on { display: inline-block; width: auto; height: 20px; @@ -1457,18 +1457,18 @@ select:focus:required:invalid:focus { border: 1px solid #ccc; } -.input-prepend .add-on, .input-append .add-on, -.input-prepend .btn, -.input-append .btn { +.input-prepend .add-on, +.input-append .btn, +.input-prepend .btn { margin-left: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } -.input-prepend .active, -.input-append .active { +.input-append .active, +.input-prepend .active { background-color: #a9dba9; border-color: #46a546; } @@ -1524,7 +1524,7 @@ select:focus:required:invalid:focus { border-radius: 0 3px 3px 0; } -input.search-query { +.search-query { padding-right: 14px; padding-right: 4px \9; padding-left: 14px; @@ -1537,6 +1537,39 @@ input.search-query { border-radius: 14px; } +/* Allow for input prepend/append in search forms */ + +.form-search .input-append .search-query, +.form-search .input-prepend .search-query { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.form-search .input-append .search-query { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + +.form-search .input-append .btn { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .search-query { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .btn { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + .form-search input, .form-inline input, .form-horizontal input, diff --git a/docs/base-css.html b/docs/base-css.html index 175825c714..75296003b4 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -752,6 +752,7 @@ For example, <code>section</code> should be wrapped as inline.

      Default styles

      Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

      + Legend

      Example block-level help text here.

      @@ -822,6 +823,7 @@ For example, <code>section</code> should be wrapped as inline.
    • Wrap any associated controls in .controls for proper alignment
      • + Legend
      @@ -1059,6 +1061,24 @@ For example, <code>section</code> should be wrapped as inline. <div class="input-append"> <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> </div> + + +

      Search form

      + +
      + + +
      +
      + + +
      + +
      +<form class="form-search">
+  <input type="text" class="span2 search-query">
+  <button type="submit" class="btn">Search</button>
+</form>

      Control sizing

      diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index cc09f83016..21c24657a2 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -690,6 +690,7 @@

      {{_i}}Default styles{{/i}}

      {{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

      + Legend

      {{_i}}Example block-level help text here.{{/i}}

      @@ -760,6 +761,7 @@
    • {{_i}}Wrap any associated controls in .controls for proper alignment{{/i}}
      • + Legend
      @@ -997,6 +999,24 @@ <div class="input-append"> <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> </div> + + +

      {{_i}}Search form{{/i}}

      + +
      + + +
      +
      + + +
      + {{! /example }} +
      +<form class="form-search">
+  <input type="text" class="span2 search-query">
+  <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+</form>

      {{_i}}Control sizing{{/i}}

      diff --git a/less/forms.less b/less/forms.less index 078b36704d..ddadab8ca3 100644 --- a/less/forms.less +++ b/less/forms.less @@ -22,7 +22,7 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: @baseLineHeight * 1.5; + margin-bottom: @baseLineHeight; font-size: @baseFontSize * 1.5; line-height: @baseLineHeight * 2; color: @grayDark; @@ -399,8 +399,8 @@ select:focus:required:invalid { // ------------ // Allow us to put symbols and text within the input field for a cleaner look -.input-prepend, -.input-append { +.input-append, +.input-prepend { margin-bottom: 5px; font-size: 0; white-space: nowrap; // Prevent span and input from separating @@ -489,15 +489,34 @@ select:focus:required:invalid { // SEARCH FORM // ----------- -input.search-query { +.search-query { padding-right: 14px; padding-right: 4px \9; padding-left: 14px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ - margin-bottom: 0; // remove the default margin on all inputs + margin-bottom: 0; // Remove the default margin on all inputs .border-radius(14px); } +/* Allow for input prepend/append in search forms */ +.form-search .input-append .search-query, +.form-search .input-prepend .search-query { + .border-radius(0); // Override due to specificity +} +.form-search .input-append .search-query { + .border-radius(14px 0 0 14px) +} +.form-search .input-append .btn { + .border-radius(0 14px 14px 0) +} +.form-search .input-prepend .search-query { + .border-radius(0 14px 14px 0) +} +.form-search .input-prepend .btn { + .border-radius(14px 0 0 14px) +} + + // HORIZONTAL & VERTICAL FORMS From a750551feee3a70005327fb1ec9318629c4f1f29 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jul 2012 00:36:21 -0700 Subject: [PATCH 182/422] add vars for tooltip customization via background and color --- less/tooltip.less | 4 ++-- less/variables.less | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/less/tooltip.less b/less/tooltip.less index 89143decab..fba1856f58 100644 --- a/less/tooltip.less +++ b/less/tooltip.less @@ -23,10 +23,10 @@ .tooltip-inner { max-width: 200px; padding: 3px 8px; - color: @white; + color: @tooltipColor; text-align: center; text-decoration: none; - background-color: @black; + background-color: @tooltipBackground; .border-radius(4px); } diff --git a/less/variables.less b/less/variables.less index 394d10636c..725100443b 100644 --- a/less/variables.less +++ b/less/variables.less @@ -200,8 +200,10 @@ // Tooltips and popovers // ------------------------- +@tooltipColor: #fff; +@tooltipBackground: #000; @tooltipArrowWidth: 5px; -@tooltipArrowColor: #000; +@tooltipArrowColor: @tooltipBackground; @popoverArrowWidth: 10px; @popoverArrowColor: #fff; From 713105774fcccf1250a7555b47483b578cf82eb6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jul 2012 00:45:44 -0700 Subject: [PATCH 183/422] fixes #3706: add textColor and textShadow as options to .buttonBackground mixin --- docs/assets/css/bootstrap.css | 38 ++++++++++++++++++++--------------- less/buttons.less | 21 +------------------ less/mixins.less | 9 ++++++--- 3 files changed, 29 insertions(+), 39 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e290d86464..e98f9357bc 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2820,6 +2820,7 @@ button.close { .btn.active, .btn.disabled, .btn[disabled] { + color: #333333; background-color: #e6e6e6; *background-color: #d9d9d9; } @@ -2905,22 +2906,6 @@ button.close { line-height: 16px; } -.btn-primary, -.btn-primary:hover, -.btn-warning, -.btn-warning:hover, -.btn-danger, -.btn-danger:hover, -.btn-success, -.btn-success:hover, -.btn-info, -.btn-info:hover, -.btn-inverse, -.btn-inverse:hover { - color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); -} - .btn-primary.active, .btn-warning.active, .btn-danger.active, @@ -2936,6 +2921,8 @@ button.close { } .btn-primary { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #006dcc; *background-color: #0044cc; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); @@ -2955,6 +2942,7 @@ button.close { .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { + color: #ffffff; background-color: #0044cc; *background-color: #003bb3; } @@ -2965,6 +2953,8 @@ button.close { } .btn-warning { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #faa732; *background-color: #f89406; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); @@ -2984,6 +2974,7 @@ button.close { .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] { + color: #ffffff; background-color: #f89406; *background-color: #df8505; } @@ -2994,6 +2985,8 @@ button.close { } .btn-danger { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #da4f49; *background-color: #bd362f; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); @@ -3013,6 +3006,7 @@ button.close { .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] { + color: #ffffff; background-color: #bd362f; *background-color: #a9302a; } @@ -3023,6 +3017,8 @@ button.close { } .btn-success { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #5bb75b; *background-color: #51a351; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); @@ -3042,6 +3038,7 @@ button.close { .btn-success.active, .btn-success.disabled, .btn-success[disabled] { + color: #ffffff; background-color: #51a351; *background-color: #499249; } @@ -3052,6 +3049,8 @@ button.close { } .btn-info { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #49afcd; *background-color: #2f96b4; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); @@ -3071,6 +3070,7 @@ button.close { .btn-info.active, .btn-info.disabled, .btn-info[disabled] { + color: #ffffff; background-color: #2f96b4; *background-color: #2a85a0; } @@ -3081,6 +3081,8 @@ button.close { } .btn-inverse { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #363636; *background-color: #222222; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); @@ -3100,6 +3102,7 @@ button.close { .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] { + color: #ffffff; background-color: #222222; *background-color: #151515; } @@ -4101,6 +4104,8 @@ input[type="submit"].btn.btn-mini { padding: 7px 10px; margin-right: 5px; margin-left: 5px; + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e0e0e; *background-color: #040404; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); @@ -4123,6 +4128,7 @@ input[type="submit"].btn.btn-mini { .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] { + color: #ffffff; background-color: #040404; *background-color: #000000; } diff --git a/less/buttons.less b/less/buttons.less index 222a587bdc..b25d971805 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -15,12 +15,10 @@ font-size: 13px; line-height: 20px; *line-height: 20px; - color: @grayDark; text-align: center; - text-shadow: 0 1px 1px rgba(255,255,255,.75); vertical-align: middle; cursor: pointer; - .buttonBackground(@btnBackground, @btnBackgroundHighlight); + .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); border: 1px solid @btnBorder; *border: 0; // Remove the border to prevent IE7's black border on input:focus border-bottom-color: darken(@btnBorder, 10%); @@ -105,23 +103,6 @@ // Alternate buttons // -------------------------------------------------- -// Set text color -// ------------------------- -.btn-primary, -.btn-primary:hover, -.btn-warning, -.btn-warning:hover, -.btn-danger, -.btn-danger:hover, -.btn-success, -.btn-success:hover, -.btn-info, -.btn-info:hover, -.btn-inverse, -.btn-inverse:hover { - color: @white; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); -} // Provide *some* extra contrast for those who can get it .btn-primary.active, .btn-warning.active, diff --git a/less/mixins.less b/less/mixins.less index 957e7faccc..54490b73bc 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -389,7 +389,9 @@ } // Gradient Bar Colors for buttons and alerts -.gradientBar(@primaryColor, @secondaryColor) { +.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + color: @textColor; + text-shadow: @textShadow; #gradient > .vertical(@primaryColor, @secondaryColor); border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); @@ -481,14 +483,15 @@ // Button backgrounds // ------------------ -.buttonBackground(@startColor, @endColor) { +.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { // gradientBar will set the background to a pleasing blend of these, to support IE<=9 - .gradientBar(@startColor, @endColor); + .gradientBar(@startColor, @endColor, @textColor, @textShadow); *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ .reset-filter(); // in these cases the gradient won't cover the background, so we override &:hover, &:active, &.active, &.disabled, &[disabled] { + color: @textColor; background-color: @endColor; *background-color: darken(@endColor, 5%); } From 5b5352c92d5edbcf02f0d210e04e7fe241f7e68b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 Jul 2012 11:15:04 -0700 Subject: [PATCH 184/422] fix grid alignment on scaffolding --- docs/scaffolding.html | 25 +++++++++-------------- docs/templates/pages/scaffolding.mustache | 25 +++++++++-------------- 2 files changed, 20 insertions(+), 30 deletions(-) diff --git a/docs/scaffolding.html b/docs/scaffolding.html index edb7274a8f..b09d504083 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -148,23 +148,18 @@
      1
      1
      1
      -
      1
      2
      -
      4
      +
      3
      4
      4
      -
      6
      -
      -
      -
      5
      5
      -
      10
      +
      9
      @@ -183,20 +178,20 @@
      4
      -
      4 offset 2
      -
      -
      -
      3 offset 2
      3 offset 2
      -
      6 offset 4
      +
      3 offset 1
      +
      3 offset 2
      +
      +
      +
      6 offset 3
       <div class="row">
   <div class="span4">...</div>
-  <div class="span4 offset4">...</div>
+  <div class="span3 offset2">...</div>
 </div>
      @@ -205,13 +200,13 @@

      Example

      Here two nested .span4 columns are placed within a .span8.

      -
      +
      Level 1 of column
      Level 2
      -
      +
      Level 2
      diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 02d8a9df18..6888747dd7 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -78,23 +78,18 @@
      1
      1
      1
      -
      1
      2
      -
      4
      +
      3
      4
      4
      -
      6
      -
      -
      -
      5
      5
      -
      10
      +
      9
      @@ -113,20 +108,20 @@
      4
      -
      4 offset 2
      -
      -
      -
      3 offset 2
      3 offset 2
      -
      6 offset 4
      +
      3 offset 1
      +
      3 offset 2
      +
      +
      +
      6 offset 3
       <div class="row">
   <div class="span4">...</div>
-  <div class="span4 offset4">...</div>
+  <div class="span3 offset2">...</div>
 </div>
      @@ -135,13 +130,13 @@

      {{_i}}Example{{/i}}

      {{_i}}Here two nested .span4 columns are placed within a .span8.{{/i}}

      -
      +
      {{_i}}Level 1 of column{{/i}}
      {{_i}}Level 2{{/i}}
      -
      +
      {{_i}}Level 2{{/i}}
      From 338c7ef2b6aa62cc6b5f08f687f04eeb960719f0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 13:45:07 -0700 Subject: [PATCH 185/422] tweak code snippet on pager and clean up type and font-sizes on docs Home --- docs/assets/css/docs.css | 11 +++++++---- docs/components.html | 8 ++------ docs/templates/pages/components.mustache | 8 ++------ 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index bbdff228dc..a0aca52826 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -222,19 +222,22 @@ hr.soften { .marketing { text-align: center; + color: #5a5a5a; } .marketing h1 { margin: 60px 0 10px; font-size: 60px; - font-weight: 400; + font-weight: 200; line-height: 1; letter-spacing: -1px; } .marketing h2 { - font-weight: 400; -`} + font-weight: 200; + margin-bottom: 5px; +} .marketing p { - color: #555; + font-size: 16px; + line-height: 1.5; } .marketing .marketing-byline { margin-bottom: 40px; diff --git a/docs/components.html b/docs/components.html index fec662d47e..c144c130ab 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1442,12 +1442,8 @@ 
       <ul class="pager">
-  <li>
-    <a href="#">Previous</a>
-  </li>
-  <li>
-    <a href="#">Next</a>
-  </li>
+  <li><a href="#">Previous</a></li>
+  <li><a href="#">Next</a></li>
 </ul>
      diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index c7727fd180..b89257b1d3 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1372,12 +1372,8 @@ 
       <ul class="pager">
-  <li>
-    <a href="#">{{_i}}Previous{{/i}}</a>
-  </li>
-  <li>
-    <a href="#">{{_i}}Next{{/i}}</a>
-  </li>
+  <li><a href="#">{{_i}}Previous{{/i}}</a></li>
+  <li><a href="#">{{_i}}Next{{/i}}</a></li>
 </ul>
      From c884d6eaa6bbcf4cb4d679c4d9be57d2f28ce93b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 13:50:27 -0700 Subject: [PATCH 186/422] clean up docs for subnav --- docs/assets/css/bootstrap.css | 42 ++++++++++++++++++++++++ docs/assets/css/docs.css | 5 +++ docs/components.html | 13 +++++--- docs/templates/pages/components.mustache | 13 +++++--- less/navbar.less | 11 +++++++ 5 files changed, 76 insertions(+), 8 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e98f9357bc..aae62efc64 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4301,6 +4301,48 @@ input[type="submit"].btn.btn-mini { color: #005580; } +.navbar-subnav .btn-navbar { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #ededed; + *background-color: #e4e4e4; + background-image: -moz-linear-gradient(top, #f2f2f2, #e4e4e4); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e4e4e4)); + background-image: -webkit-linear-gradient(top, #f2f2f2, #e4e4e4); + background-image: -o-linear-gradient(top, #f2f2f2, #e4e4e4); + background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4); + background-repeat: repeat-x; + border-color: #e4e4e4 #e4e4e4 #bebebe; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe4e4e4', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25); +} + +.navbar-subnav .btn-navbar:hover, +.navbar-subnav .btn-navbar:active, +.navbar-subnav .btn-navbar.active, +.navbar-subnav .btn-navbar.disabled, +.navbar-subnav .btn-navbar[disabled] { + color: #ffffff; + background-color: #e4e4e4; + *background-color: #d7d7d7; +} + +.navbar-subnav .btn-navbar:active, +.navbar-subnav .btn-navbar.active { + background-color: #cbcbcb \9; +} + +.navbar .btn-navbar .icon-bar { + background-color: #999; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); +} + .navbar-subnav-fixed { position: fixed; top: 40px; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index a0aca52826..148dc3f0c1 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -570,6 +570,11 @@ h2 + .row { padding: 0; height: 90px; } +.bs-navbar-top-example .navbar-fixed-top, +.bs-navbar-bottom-example .navbar-fixed-bottom { + margin-left: 0; + margin-right: 0; +} .bs-navbar-top-example { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; diff --git a/docs/components.html b/docs/components.html index c144c130ab..40cd2e19e2 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1228,19 +1228,19 @@
      -

      Responsive navbar

      -

      To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

      +

      Subnav variation

      +

      Modify the look of the navbar by adding .navbar-subnav. Perfect for a secondary nav, or just a replacement to the default dark navbar.

      - + Title -
      +
      +
      +<div class="navbar navbar-subnav">
+  ...
+</div>
+
      diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index b89257b1d3..450433d3b2 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1158,19 +1158,19 @@
      -

      {{_i}}Responsive navbar{{/i}}

      -

      {{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.{{/i}}

      +

      {{_i}}Subnav variation{{/i}}

      +

      {{_i}}Modify the look of the navbar by adding .navbar-subnav. Perfect for a secondary nav, or just a replacement to the default dark navbar.{{/i}}

      - + {{_i}}Title{{/i}} -
      +
      {{! /example }} +
      +<div class="navbar navbar-subnav">
+  ...
+</div>
+
      diff --git a/less/navbar.less b/less/navbar.less index c58fd83d0c..54c5079bd4 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -439,6 +439,17 @@ color: @linkColorHover; } +// Collapse button +.navbar-subnav .btn-navbar { + .buttonBackground(darken(#ffffff, 5%), darken(#f1f1f1, 5%)); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.25)"); +} +.navbar .btn-navbar .icon-bar { + background-color: #999; + .box-shadow(0 1px 0 rgba(0,0,0,.25)); +} + + // Fixed subnav on scroll, but only for 980px and up (sorry IE!) .navbar-subnav-fixed { position: fixed; From 280dfda6edda74772bfd5f2b16828411e7e8c5d0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 16:16:06 -0700 Subject: [PATCH 187/422] docs css cleanup for spacing and stuff --- docs/assets/css/docs.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 148dc3f0c1..c3c82a6590 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -602,9 +602,6 @@ form.bs-docs-example { font-size: 18px; line-height: 24px; } -.bs-docs-example li { - line-height: 18px; -} /* Tooltips */ .bs-docs-tooltip-examples { @@ -765,6 +762,9 @@ form.bs-docs-example { .masthead .btn { font-size: 24px; } + .marketing .span4 { + margin-bottom: 40px; + } .bs-docs-social { margin: 0 -20px; } From 3c775f24323d649f55aaa175eb6a1a19024ab30c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 16:23:21 -0700 Subject: [PATCH 188/422] add chevrons to other docs navs --- docs/base-css.html | 12 +++++------ docs/extend.html | 6 +++--- docs/javascript.html | 26 +++++++++++------------ docs/scaffolding.html | 12 +++++------ docs/templates/pages/base-css.mustache | 12 +++++------ docs/templates/pages/extend.mustache | 6 +++--- docs/templates/pages/javascript.mustache | 26 +++++++++++------------ docs/templates/pages/scaffolding.mustache | 12 +++++------ 8 files changed, 56 insertions(+), 56 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 75296003b4..b79d5295ab 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -82,12 +82,12 @@
      diff --git a/docs/extend.html b/docs/extend.html index 967c377430..a372361a01 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -82,9 +82,9 @@
      diff --git a/docs/javascript.html b/docs/javascript.html index 43b0ca7116..0b475ae3b3 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -82,19 +82,19 @@
      diff --git a/docs/scaffolding.html b/docs/scaffolding.html index b09d504083..b703ad89d6 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -82,12 +82,12 @@
      diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 21c24657a2..6f4e84975f 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -12,12 +12,12 @@
      diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index 12a198c3c4..2449ae8390 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -12,9 +12,9 @@
      diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 442a7e29ee..4c25bb08b6 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -12,19 +12,19 @@
      diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 6888747dd7..05e1c4e2ad 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -12,12 +12,12 @@
      From 549d61fc289cb9efe5f8959e706e170b080663ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 17:02:55 -0700 Subject: [PATCH 189/422] updated footer --- docs/assets/css/docs.css | 1 + docs/base-css.html | 15 +++++++++------ docs/components.html | 15 +++++++++------ docs/download.html | 15 +++++++++------ docs/examples.html | 15 +++++++++------ docs/extend.html | 15 +++++++++------ docs/getting-started.html | 15 +++++++++------ docs/index.html | 15 +++++++++------ docs/javascript.html | 15 +++++++++------ docs/scaffolding.html | 15 +++++++++------ docs/templates/layout.mustache | 15 +++++++++------ docs/upgrading.html | 15 +++++++++------ less/tests/css-tests.html | 28 ++++++++++++++++++---------- 13 files changed, 118 insertions(+), 76 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index c3c82a6590..ff6e37fe01 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -260,6 +260,7 @@ hr.soften { padding: 70px 0; margin-top: 70px; border-top: 1px solid #e5e5e5; + background-color: #f5f5f5; } .footer p { margin-bottom: 0; diff --git a/docs/base-css.html b/docs/base-css.html index b79d5295ab..b829dc3aef 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1671,10 +1671,14 @@ For example, <code>section</code> should be wrapped as inline.
      +
      - -
      +
      + diff --git a/docs/components.html b/docs/components.html index 40cd2e19e2..b176a6d7eb 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2196,10 +2196,14 @@ class="clearfix"
      +
      - -
      +
      + diff --git a/docs/download.html b/docs/download.html index 9aebb74d23..6419d13175 100644 --- a/docs/download.html +++ b/docs/download.html @@ -416,10 +416,14 @@ +
      - -
      +
      + diff --git a/docs/examples.html b/docs/examples.html index a2c7447b82..568d846c88 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -100,10 +100,14 @@ +
      - -
      +
      + diff --git a/docs/extend.html b/docs/extend.html index a372361a01..71a9dddc2f 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -172,10 +172,14 @@
      +
      - -
      +
      + diff --git a/docs/getting-started.html b/docs/getting-started.html index 26a9bc38ee..856964bd94 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -211,10 +211,14 @@
      +
      - -
      +
      + diff --git a/docs/index.html b/docs/index.html index ae841b3c16..274a9df9ed 100644 --- a/docs/index.html +++ b/docs/index.html @@ -158,10 +158,14 @@
      +
      - - diff --git a/docs/javascript.html b/docs/javascript.html index 0b475ae3b3..1792f75c41 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1588,10 +1588,14 @@ $('.carousel').carousel({ + - - diff --git a/docs/scaffolding.html b/docs/scaffolding.html index b703ad89d6..0a94cf49a1 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -590,10 +590,14 @@ + - - diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index dbec68eebd..9808c7b663 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -82,10 +82,14 @@ {{>body}} + {{! /container }} - - diff --git a/docs/upgrading.html b/docs/upgrading.html index e322337628..5d6985725b 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -263,10 +263,14 @@ + - - diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 341c802645..6cc48a6082 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -1054,20 +1054,28 @@ - - - - + + + + + From a12f0e551f7da763a9be23013d1b51c161a0f6f8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 18:11:49 -0700 Subject: [PATCH 190/422] overhaul docs on sub pages, clean up css and copy --- docs/assets/css/docs.css | 42 +- docs/base-css.html | 2197 +++++++------- docs/components.html | 2662 ++++++++-------- docs/download.html | 4 - docs/examples.html | 4 - docs/extend.html | 147 +- docs/getting-started.html | 8 +- docs/index.html | 7 +- docs/javascript.html | 2379 +++++++-------- docs/scaffolding.html | 702 ++--- docs/templates/layout.mustache | 4 - docs/templates/pages/base-css.mustache | 2213 +++++++------- docs/templates/pages/components.mustache | 2672 ++++++++--------- docs/templates/pages/extend.mustache | 145 +- docs/templates/pages/getting-started.mustache | 4 + docs/templates/pages/index.mustache | 5 +- docs/templates/pages/javascript.mustache | 2427 +++++++-------- docs/templates/pages/scaffolding.mustache | 708 ++--- docs/upgrading.html | 4 - 19 files changed, 8101 insertions(+), 8233 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index ff6e37fe01..35eb7b83cb 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -12,12 +12,8 @@ body { position: relative; - padding-top: 80px; + padding-top: 40px; font-size: 14px; - background-color: #fff; - background-image: url(../img/grid-20px.png); - background-repeat: repeat-x; - background-position: 0 40px; } /* Code in headings */ @@ -87,7 +83,22 @@ hr.soften { ------------------------- */ .jumbotron { position: relative; + padding: 40px 0; + color: #fff; text-align: center; + text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075); + background: #020031; /* Old browsers */ + background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */ + background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); + -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); + box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); + } .jumbotron h1 { font-size: 80px; @@ -118,22 +129,8 @@ hr.soften { ------------------------- */ .masthead { padding: 50px 0 60px; - margin-top: -40px; margin-bottom: 0; color: #fff; - text-align: center; - text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075); - background: #020031; /* Old browsers */ - background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */ - background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ - -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); - -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); - box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); } .masthead h1 { font-size: 120px; @@ -211,6 +208,9 @@ hr.soften { .subhead h1 { font-size: 60px; } +.subhead p { + margin-bottom: 10px; +} .subhead .navbar { display: none; } @@ -736,7 +736,7 @@ form.bs-docs-example { padding-top: 0; } /* Widen masthead and social buttons to fill body padding */ - .masthead { + .jumbotron { margin-top: -20px; /* Offset bottom margin on .navbar */ } } @@ -750,7 +750,7 @@ form.bs-docs-example { } /* Widen masthead and social buttons to fill body padding */ - .masthead { + .jumbotron { padding: 40px 20px; margin-top: -20px; /* Offset bottom margin on .navbar */ margin-right: -20px; diff --git a/docs/base-css.html b/docs/base-css.html index b829dc3aef..fc04ea4c20 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -66,142 +66,143 @@ -
      -
      -

      Base CSS

      -

      On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.

      +
      +

      Base CSS

      +

      On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.

      +
      +
      - -
      -
      - -
      -
      + +
      +
      + +
      +
      - -
      -
      -

      Typography Headings, paragraphs, lists, and other inline type elements

      -
      + +
      +
      +

      Typography Headings, paragraphs, lists, and other inline type elements

      +
      -

      Headings

      -

      All HTML headings, <h1> through <h6> are available.

      -
      -

      h1. Heading 1

      -

      h2. Heading 2

      -

      h3. Heading 3

      -

      h4. Heading 4

      -
      h5. Heading 5
      -
      h6. Heading 6
      -
      +

      Headings

      +

      All HTML headings, <h1> through <h6> are available.

      +
      +

      h1. Heading 1

      +

      h2. Heading 2

      +

      h3. Heading 3

      +

      h4. Heading 4

      +
      h5. Heading 5
      +
      h6. Heading 6
      +
      -

      Body copy

      -

      Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).

      -
      -

      Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

      -

      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

      -

      Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

      -
      +

      Body copy

      +

      Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).

      +
      +

      Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

      +

      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

      +

      Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

      +
      -

      Lead body copy

      -

      Make a paragraph stand out by adding .lead.

      -
      -

      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

      -
      +

      Lead body copy

      +

      Make a paragraph stand out by adding .lead.

      +
      +

      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

      +
      -

      Built with Less

      -

      The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

      +

      Built with Less

      +

      The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

      -
      +
      -

      Emphasis

      -

      Make use of HTML's default emphasis tags, <strong> and <em>.

      +

      Emphasis

      +

      Make use of HTML's default emphasis tags, <strong> and <em>.

      -

      <strong>

      -

      For emphasizing a snippet of text with important

      -
      -

      The following snippet of text is rendered as bold text.

      -
      +

      <strong>

      +

      For emphasizing a snippet of text with important

      +
      +

      The following snippet of text is rendered as bold text.

      + 
       <strong>rendered as bold text</strong>
      -

      <em>

      -

      For emphasizing a snippet of text with stress

      -
      -

      The following snippet of text is rendered as italicized text.

      -
      - 
      -    <em>rendered as italicized text</em>
-
      +

      <em>

      +

      For emphasizing a snippet of text with stress

      +
      +

      The following snippet of text is rendered as italicized text.

      +
      +
      +<em>rendered as italicized text</em>
+
      -

      Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

      +

      Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

      -
      +
      -

      Abbreviations

      -

      Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

      +

      Abbreviations

      +

      Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

      -

      <abbr>

      -

      For expanded text on long hover of an abbreviation, include the title attribute.

      -
      -

      An abbreviation of the word attribute is attr.

      -
      +

      <abbr>

      +

      For expanded text on long hover of an abbreviation, include the title attribute.

      +
      +

      An abbreviation of the word attribute is attr.

      + 
       <abbr title="attribute">attr</abbr>
      -

      <abbr class="initialism">

      -

      Add .initialism to an abbreviation for a slightly smaller font-size.

      -
      -

      HTML is the best thing since sliced bread.

      -
      +

      <abbr class="initialism">

      +

      Add .initialism to an abbreviation for a slightly smaller font-size.

      +
      +

      HTML is the best thing since sliced bread.

      + 
       <abbr title="attribute" class="initialism">attr</abbr>
      -
      +
      -

      Addresses

      -

      Present contact information for the nearest ancestor or the entire body of work.

      +

      Addresses

      +

      Present contact information for the nearest ancestor or the entire body of work.

      -

      <address>

      -

      Preserve formatting by ending all lines with <br>.

      -
      -
      - Twitter, Inc.
      - 795 Folsom Ave, Suite 600
      - San Francisco, CA 94107
      - P: (123) 456-7890 -
      -
      - Full Name
      - first.last@gmail.com -
      -
      +

      <address>

      +

      Preserve formatting by ending all lines with <br>.

      +
      +
      + Twitter, Inc.
      + 795 Folsom Ave, Suite 600
      + San Francisco, CA 94107
      + P: (123) 456-7890 +
      +
      + Full Name
      + first.last@gmail.com +
      + 
       <address>
   <strong>Twitter, Inc.</strong><br>
@@ -217,36 +218,36 @@
      -
      +
      -

      Blockquotes

      -

      For quoting blocks of content from another source within your document.

      +

      Blockquotes

      +

      For quoting blocks of content from another source within your document.

      -

      Default blockqoute

      -

      Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

      -
      -
      -

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      -
      -
      +

      Default blockqoute

      +

      Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

      +
      +
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      +
      + 
       <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
      -

      Blockquote options

      -

      Style and content changes for simple variations on a standard blockquote.

      +

      Blockquote options

      +

      Style and content changes for simple variations on a standard blockquote.

      -

      Naming a source

      -

      Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

      -
      -
      -

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      - Someone famous in Source Title -
      -
      +

      Naming a source

      +

      Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

      +
      +
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      + Someone famous in Source Title +
      + 
       <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -254,14 +255,14 @@
 </blockquote>
      -

      Alternate displays

      -

      Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.

      -
      -
      -

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      - Someone famous in Source Title -
      -
      +

      Alternate displays

      +

      Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.

      +
      +
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      + Someone famous in Source Title +
      + 
       <blockquote class="pull-right">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -270,16 +271,63 @@
      -
      +
      - -

      Lists

      + +

      Lists

      -

      Unordered

      -

      A list of items in which the order does not explicitly matter.

      +

      Unordered

      +

      A list of items in which the order does not explicitly matter.

      +
      +
        +
      • Lorem ipsum dolor sit amet
        • +
      • Consectetur adipiscing elit
        • +
      • Integer molestie lorem at massa
        • +
      • Facilisis in pretium nisl aliquet
        • +
      • Nulla volutpat aliquam velit +
          +
        • Phasellus iaculis neque
          • +
        • Purus sodales ultricies
          • +
        • Vestibulum laoreet porttitor sem
          • +
        • Ac tristique libero volutpat at
          • +
        +
        • +
      • Faucibus porta lacus fringilla vel
        • +
      • Aenean sit amet erat nunc
        • +
      • Eget porttitor lorem
        • +
      +
      +
      +<ul>
+  <li>...</li>
+</ul>
+
      + +

      Ordered

      +

      A list of items in which the order does explicitly matter.

      +
      +
        +
      1. Lorem ipsum dolor sit amet
        2. +
      2. Consectetur adipiscing elit
        3. +
      3. Integer molestie lorem at massa
        4. +
      4. Facilisis in pretium nisl aliquet
        5. +
      5. Nulla volutpat aliquam velit
        6. +
      6. Faucibus porta lacus fringilla vel
        7. +
      7. Aenean sit amet erat nunc
        8. +
      8. Eget porttitor lorem
        9. +
      +
      +
      +<ol>
+  <li>...</li>
+</ol>
+
      + +

      Unstyled

      +

      A list of items with no list-style or additional left padding.

      -
        +
        • Lorem ipsum dolor sit amet
        • Consectetur adipiscing elit
        • Integer molestie lorem at massa
          • @@ -298,71 +346,24 @@ 
      -<ul>
-  <li>...</li>
-</ul>
-
      - -

      Ordered

      -

      A list of items in which the order does explicitly matter.

      -
      -
        -
      1. Lorem ipsum dolor sit amet
        2. -
      2. Consectetur adipiscing elit
        3. -
      3. Integer molestie lorem at massa
        4. -
      4. Facilisis in pretium nisl aliquet
        5. -
      5. Nulla volutpat aliquam velit
        6. -
      6. Faucibus porta lacus fringilla vel
        7. -
      7. Aenean sit amet erat nunc
        8. -
      8. Eget porttitor lorem
        9. -
      -
      -
      -<ol>
-  <li>...</li>
-</ol>
-
      - -

      Unstyled

      -

      A list of items with no list-style or additional left padding.

      -
      -
        -
      • Lorem ipsum dolor sit amet
        • -
      • Consectetur adipiscing elit
        • -
      • Integer molestie lorem at massa
        • -
      • Facilisis in pretium nisl aliquet
        • -
      • Nulla volutpat aliquam velit -
          -
        • Phasellus iaculis neque
          • -
        • Purus sodales ultricies
          • -
        • Vestibulum laoreet porttitor sem
          • -
        • Ac tristique libero volutpat at
          • -
        -
        • -
      • Faucibus porta lacus fringilla vel
        • -
      • Aenean sit amet erat nunc
        • -
      • Eget porttitor lorem
        • -
      -
      -
       <ul class="unstyled">
   <li>...</li>
 </ul>
      -

      Description

      -

      A list of terms with their associated descriptions.

      -
      -
      -
      Description lists
      -
      A description list is perfect for defining terms.
      -
      Euismod
      -
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      -
      Donec id elit non mi porta gravida at eget metus.
      -
      Malesuada porta
      -
      Etiam porta sem malesuada magna mollis euismod.
      -
      -
      +

      Description

      +

      A list of terms with their associated descriptions.

      +
      +
      +
      Description lists
      +
      A description list is perfect for defining terms.
      +
      Euismod
      +
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      +
      Donec id elit non mi porta gravida at eget metus.
      +
      Malesuada porta
      +
      Etiam porta sem malesuada magna mollis euismod.
      +
      + 
       <dl>
   <dt>...</dt>
@@ -370,50 +371,50 @@
 </dl>
      -

      Horizontal description

      -

      Make terms and descriptions in <dl> line up side-by-side.

      -
      -
      -
      Description lists
      -
      A description list is perfect for defining terms.
      -
      Euismod
      -
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      -
      Donec id elit non mi porta gravida at eget metus.
      -
      Malesuada porta
      -
      Etiam porta sem malesuada magna mollis euismod.
      -
      Felis euismod semper eget lacinia
      -
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      -
      -
      +

      Horizontal description

      +

      Make terms and descriptions in <dl> line up side-by-side.

      +
      +
      +
      Description lists
      +
      A description list is perfect for defining terms.
      +
      Euismod
      +
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      +
      Donec id elit non mi porta gravida at eget metus.
      +
      Malesuada porta
      +
      Etiam porta sem malesuada magna mollis euismod.
      +
      Felis euismod semper eget lacinia
      +
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      +
      + 
       <dl class="dl-horizontal">
   <dt>...</dt>
   <dd>...</dd>
 </dl>
      -

      - Heads up! - Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout. -

      -
      +

      + Heads up! + Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout. +

      +
      - -
      -
      -

      Code Inline and block code snippets

      -
      + +
      +
      +

      Code Inline and block code snippets

      +
      -

      Inline

      -

      Wrap inline snippets of code with <code>.

      +

      Inline

      +

      Wrap inline snippets of code with <code>.

       For example, <code>section</code> should be wrapped as inline.
      -

      Basic block

      -

      Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

      +

      Basic block

      +

      Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

       <p>Sample text here...</p>
      @@ -422,53 +423,53 @@ For example, <code>section</code> should be wrapped as inline. &lt;p&gt;Sample text here...&lt;/p&gt; </pre> -

      Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

      -

      You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

      -
      +

      Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

      +

      You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

      +
      - -
      -
      -

      Tables For, you guessed it, tabular data

      -
      + +
      +
      +

      Tables For, you guessed it, tabular data

      +
      -

      Default styles

      -

      For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      -
      +

      Default styles

      +

      For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      + 
       <table class="table">
   …
@@ -476,168 +477,168 @@ For example, <code>section</code> should be wrapped as inline.
      -
      +
      -

      Optional classes

      -

      Add any of the follow classes to the .table base class.

      +

      Optional classes

      +

      Add any of the follow classes to the .table base class.

      -

      .table-striped

      -

      Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      -
      +

      .table-striped

      +

      Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      + 
       <table class="table table-striped">
   …
 </table>
      -

      .table-bordered

      -

      Add borders and rounded corners to the table.

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #First NameLast NameUsername
      1MarkOtto@mdo
      MarkOtto@TwBootstrap
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      +

      .table-bordered

      +

      Add borders and rounded corners to the table.

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #First NameLast NameUsername
      1MarkOtto@mdo
      MarkOtto@TwBootstrap
      2JacobThornton@fat
      3Larry the Bird@twitter
      + 
       <table class="table table-bordered">
   …
 </table>
      -

      .table-hover

      -

      Enable a hover state on table rows within a <tbody>.

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      +

      .table-hover

      +

      Enable a hover state on table rows within a <tbody>.

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      + 
       <table class="table table-hover">
   …
 </table>
      -

      .table-condensed

      -

      Makes tables more compact by cutting cell padding in half.

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      +

      .table-condensed

      +

      Makes tables more compact by cutting cell padding in half.

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #First NameLast NameUsername
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      + 
       <table class="table table-condensed">
   …
@@ -645,82 +646,82 @@ For example, <code>section</code> should be wrapped as inline.
      -
      +
      -

      Supported table markup

      -

      List of supported table HTML elements and how they should be used.

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      TagDescription
      - <table> - - Wrapping element for displaying data in a tabular format -
      - <thead> - - Container element for table header rows (<tr>) to label table columns -
      - <tbody> - - Container element for table rows (<tr>) in the body of the table -
      - <tr> - - Container element for a set of table cells (<td> or <th>) that appears on a single row -
      - <td> - - Default table cell -
      - <th> - - Special table cell for column (or row, depending on scope and placement) labels
      - Must be used within a <thead> -
      - <caption> - - Description or summary of what the table holds, especially useful for screen readers -
      +

      Supported table markup

      +

      List of supported table HTML elements and how they should be used.

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      TagDescription
      + <table> + + Wrapping element for displaying data in a tabular format +
      + <thead> + + Container element for table header rows (<tr>) to label table columns +
      + <tbody> + + Container element for table rows (<tr>) in the body of the table +
      + <tr> + + Container element for a set of table cells (<td> or <th>) that appears on a single row +
      + <td> + + Default table cell +
      + <th> + + Special table cell for column (or row, depending on scope and placement) labels
      + Must be used within a <thead> +
      + <caption> + + Description or summary of what the table holds, especially useful for screen readers + 
       <table>
   <thead>
@@ -738,29 +739,29 @@ For example, <code>section</code> should be wrapped as inline.
 </table>
      -
      +
      - -
      -
      -

      Forms

      -
      + +
      +
      +

      Forms

      +
      -

      Default styles

      -

      Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

      -
      - Legend - - -

      Example block-level help text here.

      - - -
      +

      Default styles

      +

      Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

      +
      + Legend + + +

      Example block-level help text here.

      + + + 
       <form class="well">
   <label>Label name</label>
@@ -774,18 +775,18 @@ For example, <code>section</code> should be wrapped as inline.
      -
      +
      -

      Optional layouts

      -

      Included with Bootstrap are three optional form layouts for common use cases.

      +

      Optional layouts

      +

      Included with Bootstrap are three optional form layouts for common use cases.

      -

      Search form

      -

      Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

      -
      - - -
      +

      Search form

      +

      Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

      +
      + + + 
       <form class="form-search">
   <input type="text" class="input-medium search-query">
@@ -793,16 +794,16 @@ For example, <code>section</code> should be wrapped as inline.
 </form>
      -

      Inline form

      -

      Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

      -
      - - - - -
      +

      Inline form

      +

      Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

      +
      + + + + + 
       <form class="form-inline">
   <input type="text" class="input-small" placeholder="Email">
@@ -814,37 +815,37 @@ For example, <code>section</code> should be wrapped as inline.
 </form>
      -

      Horizontal form

      -

      Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

      -
        -
      • Add .form-horizontal to the form
        • -
      • Wrap labels and controls in .control-group
        • -
      • Add .control-label to the label
        • -
      • Wrap any associated controls in .controls for proper alignment
        • -
      -
      - Legend -
      - -
      - +

      Horizontal form

      +

      Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

      +
        +
      • Add .form-horizontal to the form
        • +
      • Wrap labels and controls in .control-group
        • +
      • Add .control-label to the label
        • +
      • Wrap any associated controls in .controls for proper alignment
        • +
      + + Legend +
      + +
      + +
      -
      -
      - -
      - +
      + +
      + +
      -
      -
      -
      - - +
      +
      + + +
      -
      - + 
       <form class="form-horizontal">
   <div class="control-group">
@@ -871,49 +872,49 @@ For example, <code>section</code> should be wrapped as inline.
      -
      +
      -

      Supported form controls

      -

      Examples of standard form controls supported in an example form layout.

      +

      Supported form controls

      +

      Examples of standard form controls supported in an example form layout.

      -

      Inputs

      -

      Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

      -

      Requires the use of a specified type at all times.

      -
      - -
      +

      Inputs

      +

      Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

      +

      Requires the use of a specified type at all times.

      +
      + + 
       <input type="text" placeholder="Text input">
      -

      Textarea

      -

      Form control which supports multiple lines of text. Change row attribute as necessary.

      -
      - -
      +

      Textarea

      +

      Form control which supports multiple lines of text. Change row attribute as necessary.

      +
      + + 
       <textarea id="textarea" rows="3"></textarea>
      -

      Checkboxes and radios

      -

      Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

      -

      Default (stacked)

      -
      - -
      - - -
      +

      Checkboxes and radios

      +

      Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

      +

      Default (stacked)

      +
      + +
      + + + 
       <label class="checkbox">
   <input type="checkbox" value="">
@@ -930,19 +931,19 @@ For example, <code>section</code> should be wrapped as inline.
 </label>
      -

      Inline checkboxes

      -

      Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

      -
      - - - -
      +

      Inline checkboxes

      +

      Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

      +
      + + + + 
       <label class="checkbox inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -955,25 +956,25 @@ For example, <code>section</code> should be wrapped as inline.
 </label>
      -

      Selects

      -

      Use the default option or specify a multiple="multiple" to show multiple options at once.

      -
      - -
      - -
      +

      Selects

      +

      Use the default option or specify a multiple="multiple" to show multiple options at once.

      +
      + +
      + + 
       <select>
   <option>something</option>
@@ -993,28 +994,28 @@ For example, <code>section</code> should be wrapped as inline.
      -
      +
      -

      Extending form controls

      -

      Adding on top of existing browser controls, Bootstrap includes other useful form components.

      +

      Extending form controls

      +

      Adding on top of existing browser controls, Bootstrap includes other useful form components.

      -

      Prepended and appended inputs

      -

      Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

      +

      Prepended and appended inputs

      +

      Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

      -

      Default options

      -

      Wrap a .add-on and an input with one of two classes to prepend or append text to an input.

      -
      -
      - @ - -
      -
      -
      - - .00 -
      -
      +

      Default options

      +

      Wrap a .add-on and an input with one of two classes to prepend or append text to an input.

      +
      +
      + @ + +
      +
      +
      + + .00 +
      + 
       <div class="input-prepend">
   <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
@@ -1024,35 +1025,35 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
      -

      Combined

      -

      Use both classes and two instances of .add-on to prepend and append an input.

      -
      -
      - $ - - .00 -
      -
      +

      Combined

      +

      Use both classes and two instances of .add-on to prepend and append an input.

      +
      +
      + $ + + .00 +
      + 
       <div class="input-prepend input-append">
   <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
 </div>
      -

      Buttons instead of text

      -

      Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

      -
      -
      - - -
      -
      -
      - - - -
      -
      +

      Buttons instead of text

      +

      Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

      +
      +
      + + +
      +
      +
      + + + +
      + 
       <div class="input-append">
   <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
@@ -1063,17 +1064,17 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
      -

      Search form

      -
      -
      - - -
      -
      - - -
      -
      +

      Search form

      +
      +
      + + +
      +
      + + +
      + 
       <form class="form-search">
   <input type="text" class="span2 search-query">
@@ -1081,20 +1082,20 @@ For example, <code>section</code> should be wrapped as inline.
 </form>
      -

      Control sizing

      -

      Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

      +

      Control sizing

      +

      Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

      -

      Relative sizing

      -
      -
      - - - - - - -
      -
      +

      Relative sizing

      +
      +
      + + + + + + +
      + 
       <input class="input-mini" type="text">
 <input class="input-small" type="text">
@@ -1103,68 +1104,68 @@ For example, <code>section</code> should be wrapped as inline.
 <input class="input-xlarge" type="text">
 <input class="input-xxlarge" type="text">
      -

      - Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. -

      +

      + Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

      -

      Grid sizing

      -

      Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

      -
      -
      - - - - - - -
      -
      +

      Grid sizing

      +

      Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

      +
      +
      + + + + + + +
      + 
       <input class="span1" type="text">
 <input class="span2" type="text">
 <input class="span3" type="text">
      -

      For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

      -
      -
      - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      +

      For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

      +
      +
      + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      + 
       <div class="controls controls-row">
   <input class="span4" type="text" placeholder=".span4">
@@ -1172,23 +1173,23 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
      -

      Uneditable inputs

      -

      Present data in a form that's not editable without using actual form markup.

      -
      - Some value here -
      +

      Uneditable inputs

      +

      Present data in a form that's not editable without using actual form markup.

      +
      + Some value here + 
         <span class="input-xlarge uneditable-input">Some value here</span>
      -

      Form actions

      -

      End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

      -
      -
      - - -
      -
      +

      Form actions

      +

      End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

      +
      +
      + + +
      + 
       <div class="form-actions">
   <button type="submit" class="btn btn-primary">Save changes</button>
@@ -1196,76 +1197,76 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
      -

      Help text

      -

      Inline and block level support for help text that appears around form controls.

      -

      Inline help

      -
      - Inline help text -
      +

      Help text

      +

      Inline and block level support for help text that appears around form controls.

      +

      Inline help

      +
      + Inline help text + 
       <span class="help-inline">Inline help text</span>
      -

      Block help

      -
      - - A longer block of help text that breaks onto a new line and may extend beyond one line. -
      +

      Block help

      +
      + + A longer block of help text that breaks onto a new line and may extend beyond one line. + 
       <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
      -
      +
      -

      Form control states

      -

      Provide feedback to users or visitors with basic feedback states on form controls and labels.

      +

      Form control states

      +

      Provide feedback to users or visitors with basic feedback states on form controls and labels.

      -

      Input focus

      -

      We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

      -
      - -
      +

      Input focus

      +

      We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

      +
      + + 
       <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
      -

      Disabled inputs

      -

      Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

      -
      - -
      +

      Disabled inputs

      +

      Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

      +
      + + 
       <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
      -

      Validation states

      -

      Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.

      +

      Validation states

      +

      Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.

      -
      -
      - -
      - - Something may have gone wrong + +
      + +
      + + Something may have gone wrong +
      -
      -
      - -
      - - Please correct the error +
      + +
      + + Please correct the error +
      -
      -
      - -
      - - Woohoo! +
      + +
      + + Woohoo! +
      -
      - + 
       <div class="control-group warning">
   <label class="control-label" for="inputWarning">Input with warning</label>
@@ -1290,133 +1291,133 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
      -
      +
      - -
      -
      -

      Buttons

      -
      + +
      +
      +

      Buttons

      +
      -

      Default buttons

      -

      Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      Buttonclass=""Description
      btnStandard gray button with gradient
      btn btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons
      btn btn-infoUsed as an alternative to the default styles
      btn btn-successIndicates a successful or positive action
      btn btn-warningIndicates caution should be taken with this action
      btn btn-dangerIndicates a dangerous or potentially negative action
      btn btn-inverseAlternate dark gray button, not tied to a semantic action or use
      +

      Default buttons

      +

      Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Buttonclass=""Description
      btnStandard gray button with gradient
      btn btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons
      btn btn-infoUsed as an alternative to the default styles
      btn btn-successIndicates a successful or positive action
      btn btn-warningIndicates caution should be taken with this action
      btn btn-dangerIndicates a dangerous or potentially negative action
      btn btn-inverseAlternate dark gray button, not tied to a semantic action or use
      -

      Cross browser compatibility

      -

      IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

      +

      Cross browser compatibility

      +

      IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

      -
      +
      -

      Button sizes

      -

      Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

      -

      - - -

      -

      - - -

      -

      - - -

      +

      Button sizes

      +

      Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

      +

      + + +

      +

      + + +

      +

      + + +

      -
      +
      -

      Disabled state

      -

      Make buttons look unclickable by fading them back 50%.

      +

      Disabled state

      +

      Make buttons look unclickable by fading them back 50%.

      -

      Anchor element

      -

      Add the .disabled class to <a> buttons.

      -

      - Primary link - Link -

      +

      Anchor element

      +

      Add the .disabled class to <a> buttons.

      +

      + Primary link + Link + 

       <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
 <a href="#" class="btn btn-large disabled">Link</a>
      -

      - Heads up! - We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. -

      +

      + Heads up! + We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. +

      -

      Button element

      -

      Add the disabled attribute to <button> buttons.

      -

      - - -

      +

      Button element

      +

      Add the disabled attribute to <button> buttons.

      +

      + + + 

       <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
 <button type="button" class="btn btn-large" disabled>Button</button>
      -
      +
      -

      One class, multiple tags

      -

      Use the .btn class on an <a>, <button>, or <input> element.

      -
      - Link - - - -
      +

      One class, multiple tags

      +

      Use the .btn class on an <a>, <button>, or <input> element.

      +
      + Link + + + + 
       <a class="btn" href="">Link</a>
 <button class="btn" type="submit">
@@ -1427,251 +1428,251 @@ For example, <code>section</code> should be wrapped as inline.
 <input class="btn" type="submit"
          value="Submit">
      -

      As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

      +

      As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

      -
      +
      - -
      -
      -

      Icons Graciously provided by Glyphicons

      -
      + +
      +
      +

      Icons Graciously provided by Glyphicons

      +
      -

      Icon glyphs

      -

      140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

      -
        -
      • icon-glass
        • -
      • icon-music
        • -
      • icon-search
        • -
      • icon-envelope
        • -
      • icon-heart
        • -
      • icon-star
        • -
      • icon-star-empty
        • -
      • icon-user
        • -
      • icon-film
        • -
      • icon-th-large
        • -
      • icon-th
        • -
      • icon-th-list
        • -
      • icon-ok
        • -
      • icon-remove
        • -
      • icon-zoom-in
        • -
      • icon-zoom-out
        • -
      • icon-off
        • -
      • icon-signal
        • -
      • icon-cog
        • -
      • icon-trash
        • -
      • icon-home
        • -
      • icon-file
        • -
      • icon-time
        • -
      • icon-road
        • -
      • icon-download-alt
        • -
      • icon-download
        • -
      • icon-upload
        • -
      • icon-inbox
        • +

        Icon glyphs

        +

        140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

        +
          +
        • icon-glass
          • +
        • icon-music
          • +
        • icon-search
          • +
        • icon-envelope
          • +
        • icon-heart
          • +
        • icon-star
          • +
        • icon-star-empty
          • +
        • icon-user
          • +
        • icon-film
          • +
        • icon-th-large
          • +
        • icon-th
          • +
        • icon-th-list
          • +
        • icon-ok
          • +
        • icon-remove
          • +
        • icon-zoom-in
          • +
        • icon-zoom-out
          • +
        • icon-off
          • +
        • icon-signal
          • +
        • icon-cog
          • +
        • icon-trash
          • +
        • icon-home
          • +
        • icon-file
          • +
        • icon-time
          • +
        • icon-road
          • +
        • icon-download-alt
          • +
        • icon-download
          • +
        • icon-upload
          • +
        • icon-inbox
          • -
        • icon-play-circle
          • -
        • icon-repeat
          • -
        • icon-refresh
          • -
        • icon-list-alt
          • -
        • icon-lock
          • -
        • icon-flag
          • -
        • icon-headphones
          • -
        • icon-volume-off
          • -
        • icon-volume-down
          • -
        • icon-volume-up
          • -
        • icon-qrcode
          • -
        • icon-barcode
          • -
        • icon-tag
          • -
        • icon-tags
          • -
        • icon-book
          • -
        • icon-bookmark
          • -
        • icon-print
          • -
        • icon-camera
          • -
        • icon-font
          • -
        • icon-bold
          • -
        • icon-italic
          • -
        • icon-text-height
          • -
        • icon-text-width
          • -
        • icon-align-left
          • -
        • icon-align-center
          • -
        • icon-align-right
          • -
        • icon-align-justify
          • -
        • icon-list
          • +
        • icon-play-circle
          • +
        • icon-repeat
          • +
        • icon-refresh
          • +
        • icon-list-alt
          • +
        • icon-lock
          • +
        • icon-flag
          • +
        • icon-headphones
          • +
        • icon-volume-off
          • +
        • icon-volume-down
          • +
        • icon-volume-up
          • +
        • icon-qrcode
          • +
        • icon-barcode
          • +
        • icon-tag
          • +
        • icon-tags
          • +
        • icon-book
          • +
        • icon-bookmark
          • +
        • icon-print
          • +
        • icon-camera
          • +
        • icon-font
          • +
        • icon-bold
          • +
        • icon-italic
          • +
        • icon-text-height
          • +
        • icon-text-width
          • +
        • icon-align-left
          • +
        • icon-align-center
          • +
        • icon-align-right
          • +
        • icon-align-justify
          • +
        • icon-list
          • -
        • icon-indent-left
          • -
        • icon-indent-right
          • -
        • icon-facetime-video
          • -
        • icon-picture
          • -
        • icon-pencil
          • -
        • icon-map-marker
          • -
        • icon-adjust
          • -
        • icon-tint
          • -
        • icon-edit
          • -
        • icon-share
          • -
        • icon-check
          • -
        • icon-move
          • -
        • icon-step-backward
          • -
        • icon-fast-backward
          • -
        • icon-backward
          • -
        • icon-play
          • -
        • icon-pause
          • -
        • icon-stop
          • -
        • icon-forward
          • -
        • icon-fast-forward
          • -
        • icon-step-forward
          • -
        • icon-eject
          • -
        • icon-chevron-left
          • -
        • icon-chevron-right
          • -
        • icon-plus-sign
          • -
        • icon-minus-sign
          • -
        • icon-remove-sign
          • -
        • icon-ok-sign
          • +
        • icon-indent-left
          • +
        • icon-indent-right
          • +
        • icon-facetime-video
          • +
        • icon-picture
          • +
        • icon-pencil
          • +
        • icon-map-marker
          • +
        • icon-adjust
          • +
        • icon-tint
          • +
        • icon-edit
          • +
        • icon-share
          • +
        • icon-check
          • +
        • icon-move
          • +
        • icon-step-backward
          • +
        • icon-fast-backward
          • +
        • icon-backward
          • +
        • icon-play
          • +
        • icon-pause
          • +
        • icon-stop
          • +
        • icon-forward
          • +
        • icon-fast-forward
          • +
        • icon-step-forward
          • +
        • icon-eject
          • +
        • icon-chevron-left
          • +
        • icon-chevron-right
          • +
        • icon-plus-sign
          • +
        • icon-minus-sign
          • +
        • icon-remove-sign
          • +
        • icon-ok-sign
          • -
        • icon-question-sign
          • -
        • icon-info-sign
          • -
        • icon-screenshot
          • -
        • icon-remove-circle
          • -
        • icon-ok-circle
          • -
        • icon-ban-circle
          • -
        • icon-arrow-left
          • -
        • icon-arrow-right
          • -
        • icon-arrow-up
          • -
        • icon-arrow-down
          • -
        • icon-share-alt
          • -
        • icon-resize-full
          • -
        • icon-resize-small
          • -
        • icon-plus
          • -
        • icon-minus
          • -
        • icon-asterisk
          • -
        • icon-exclamation-sign
          • -
        • icon-gift
          • -
        • icon-leaf
          • -
        • icon-fire
          • -
        • icon-eye-open
          • -
        • icon-eye-close
          • -
        • icon-warning-sign
          • -
        • icon-plane
          • -
        • icon-calendar
          • -
        • icon-random
          • -
        • icon-comment
          • -
        • icon-magnet
          • +
        • icon-question-sign
          • +
        • icon-info-sign
          • +
        • icon-screenshot
          • +
        • icon-remove-circle
          • +
        • icon-ok-circle
          • +
        • icon-ban-circle
          • +
        • icon-arrow-left
          • +
        • icon-arrow-right
          • +
        • icon-arrow-up
          • +
        • icon-arrow-down
          • +
        • icon-share-alt
          • +
        • icon-resize-full
          • +
        • icon-resize-small
          • +
        • icon-plus
          • +
        • icon-minus
          • +
        • icon-asterisk
          • +
        • icon-exclamation-sign
          • +
        • icon-gift
          • +
        • icon-leaf
          • +
        • icon-fire
          • +
        • icon-eye-open
          • +
        • icon-eye-close
          • +
        • icon-warning-sign
          • +
        • icon-plane
          • +
        • icon-calendar
          • +
        • icon-random
          • +
        • icon-comment
          • +
        • icon-magnet
          • -
        • icon-chevron-up
          • -
        • icon-chevron-down
          • -
        • icon-retweet
          • -
        • icon-shopping-cart
          • -
        • icon-folder-close
          • -
        • icon-folder-open
          • -
        • icon-resize-vertical
          • -
        • icon-resize-horizontal
          • -
        • icon-hdd
          • -
        • icon-bullhorn
          • -
        • icon-bell
          • -
        • icon-certificate
          • -
        • icon-thumbs-up
          • -
        • icon-thumbs-down
          • -
        • icon-hand-right
          • -
        • icon-hand-left
          • -
        • icon-hand-up
          • -
        • icon-hand-down
          • -
        • icon-circle-arrow-right
          • -
        • icon-circle-arrow-left
          • -
        • icon-circle-arrow-up
          • -
        • icon-circle-arrow-down
          • -
        • icon-globe
          • -
        • icon-wrench
          • -
        • icon-tasks
          • -
        • icon-filter
          • -
        • icon-briefcase
          • -
        • icon-fullscreen
          • -
        +
      • icon-chevron-up
        • +
      • icon-chevron-down
        • +
      • icon-retweet
        • +
      • icon-shopping-cart
        • +
      • icon-folder-close
        • +
      • icon-folder-open
        • +
      • icon-resize-vertical
        • +
      • icon-resize-horizontal
        • +
      • icon-hdd
        • +
      • icon-bullhorn
        • +
      • icon-bell
        • +
      • icon-certificate
        • +
      • icon-thumbs-up
        • +
      • icon-thumbs-down
        • +
      • icon-hand-right
        • +
      • icon-hand-left
        • +
      • icon-hand-up
        • +
      • icon-hand-down
        • +
      • icon-circle-arrow-right
        • +
      • icon-circle-arrow-left
        • +
      • icon-circle-arrow-up
        • +
      • icon-circle-arrow-down
        • +
      • icon-globe
        • +
      • icon-wrench
        • +
      • icon-tasks
        • +
      • icon-filter
        • +
      • icon-briefcase
        • +
      • icon-fullscreen
        • +
      -

      Glyphicons attribution

      -

      Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

      +

      Glyphicons attribution

      +

      Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

      -
      +
      -

      How to use

      -

      All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

      +

      How to use

      +

      All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

       <i class="icon-search"></i>
      -

      There are also styles available for inverted (white) icons, made ready with one extra class:

      +

      There are also styles available for inverted (white) icons, made ready with one extra class:

       <i class="icon-search icon-white"></i>
      -

      - Heads up! - When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing. -

      +

      + Heads up! + When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing. +

      -
      +
      -

      Icon examples

      -

      Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

      +

      Icon examples

      +

      Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

      -

      Buttons

      -
      -
      -
      - - - - -
      -
      - User - - -
      -
      -
      - -

      Navigation

      -
      -
      - -
      -
      - -

      Form fields

      -
      -
      - -
      -
      - +

      Buttons

      +
      +
      +
      + + + + +
      +
      + User + +
      - -
      +

      Navigation

      +
      +
      + +
      +
      + +

      Form fields

      +
      +
      + +
      +
      + +
      +
      +
      +
      + +
      -
      -
      -
      +
      + +
      diff --git a/docs/components.html b/docs/components.html index b176a6d7eb..ca8cfe2ddc 100644 --- a/docs/components.html +++ b/docs/components.html @@ -66,62 +66,62 @@
      -
      -
      -

      Components

      -

      Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

      +
      +

      Components

      +

      Dozens of reusable components built to provide navigation, alerts, popovers, and more.

      +
      +
      - -
      -
      - -
      -
      + +
      +
      + +
      +
      - - + - -
      -
      -

      Button groups

      -
      - -

      Examples

      -

      Two basic options, along with two more specific variations.

      - -

      Single button group

      -

      Wrap a series of buttons with .btn in .btn-group.

      -
      -
      - - - + +
      +
      +

      Button groups

      +
      + +

      Examples

      +

      Two basic options, along with two more specific variations.

      + +

      Single button group

      +

      Wrap a series of buttons with .btn in .btn-group.

      +
      +
      + + + +
      - 
       <div class="btn-group">
   <button class="btn">1</button>
@@ -211,26 +211,26 @@
 </div>
      -

      Multiple button groups

      -

      Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

      -
      -
      -
      - - - - -
      -
      - - - -
      -
      - +

      Multiple button groups

      +

      Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

      +
      +
      +
      + + + + +
      +
      + + + +
      +
      + +
      - 
       <div class="btn-toolbar">
   <div class="btn-group">
@@ -239,16 +239,16 @@
 </div>
      -

      Vertical button groups

      -

      Make a set of buttons appear vertically stacked rather than horizontally.

      -
      -
      - - - - +

      Vertical button groups

      +

      Make a set of buttons appear vertically stacked rather than horizontally.

      +
      +
      + + + + +
      - 
       <div class="btn-group btn-group-vertical">
   ...
@@ -256,102 +256,102 @@
      -
      +
      -

      Checkbox and radio flavors

      -

      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 the Javascript docs for that.

      +

      Checkbox and radio flavors

      +

      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 the Javascript docs for that.

      -

      Dropdowns in button groups

      -

      Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

      -
      +

      Dropdowns in button groups

      +

      Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

      + - -
      -
      -

      Button dropdown menus

      -
      + +
      +
      +

      Button dropdown menus

      +
      -

      Overview and examples

      -

      Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

      -
      -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      -
      +

      Overview and examples

      +

      Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

      +
      +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + 
       <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -364,134 +364,134 @@
 </div>
      -

      Works with all button sizes

      -

      Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.

      -
      -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      -
      +

      Works with all button sizes

      +

      Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.

      +
      +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      +
      -

      Requires javascript

      -

      Button dropdowns require the Bootstrap dropdown plugin to function.

      -

      In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

      +

      Requires javascript

      +

      Button dropdowns require the Bootstrap dropdown plugin to function.

      +

      In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

      -
      +
      -

      Split button dropdowns

      -

      Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

      -
      -
      -
      - - - -
      -
      - - - -
      -
      - - - -
      -
      - - - -
      -
      - - - -
      -
      - - - -
      -
      - - - -
      -
      -
      +

      Split button dropdowns

      +

      Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

      +
      +
      +
      + + + +
      +
      + + + +
      +
      + + + +
      +
      + + + +
      +
      + + + +
      +
      + + + +
      +
      + + + +
      +
      + 
       <div class="btn-group">
   <button class="btn">Action</button>
@@ -504,49 +504,49 @@
 </div>
      -

      Sizes

      -

      Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

      -
      -
      -
      - - - -
      -
      -
      -
      - - - -
      -
      -
      -
      - - - -
      -
      -
      +

      Sizes

      +

      Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

      +
      +
      +
      + + + +
      +
      +
      +
      + + + +
      +
      +
      +
      + + + +
      +
      + 
       <div class="btn-group">
   <button class="btn btn-mini">Action</button>
@@ -559,34 +559,34 @@
 </div>
      -

      Dropup menus

      -

      Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

      -
      -
      -
      - - - -
      -
      - - - -
      +

      Dropup menus

      +

      Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

      +
      +
      +
      + + + +
      +
      + + + +
      +
      - 
       <div class="btn-group dropup">
   <button class="btn">Dropup</button>
@@ -599,29 +599,29 @@
 </div>
      -
      +
      - - - - - - - -
      -
      -

      Pagination Two options for paging through content

      -
      - -

      Standard pagination

      -

      Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

      -
      - 
       <div class="pagination">
   <ul>
@@ -1361,26 +1361,26 @@
      -
      +
      -

      Options

      +

      Options

      -

      Disabled and active states

      -

      Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

      -
      - 
       <div class="pagination ">
   <ul>
@@ -1391,39 +1391,39 @@
 </div>
      -

      Alignment

      -

      Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

      -
      - 
       <div class="pagination pagination-centered">
   ...
 </div>
      -
      - 
       <div class="pagination pagination-right">
   ...
@@ -1431,20 +1431,20 @@
      -
      +
      -

      Pager

      -

      Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

      +

      Pager

      +

      Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

      -

      Default example

      -

      By default, the pager centers links.

      -
      - -
      +

      Default example

      +

      By default, the pager centers links.

      +
      + + 
       <ul class="pager">
   <li><a href="#">Previous</a></li>
@@ -1452,14 +1452,14 @@
 </ul>
      -

      Aligned links

      -

      Alternatively, you can align each link to the sides:

      -
      - -
      +

      Aligned links

      +

      Alternatively, you can align each link to the sides:

      +
      + + 
       <ul class="pager">
   <li class="previous">
@@ -1471,14 +1471,14 @@
 </ul>
      -

      Optional disabled state

      -

      Pager links also use the general .disabled utility class from the pagination.

      -
      - -
      +

      Optional disabled state

      +

      Pager links also use the general .disabled utility class from the pagination.

      +
      + + 
       <ul class="pager">
   <li class="previous disabled">
@@ -1488,187 +1488,175 @@
 </ul>
      -
      + - -
      -
      -

      Inline labels Label and annotate text

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      LabelsMarkup
      - Default - - <span class="label">Default</span> -
      - Success - - <span class="label label-success">Success</span> -
      - Warning - - <span class="label label-warning">Warning</span> -
      - Important - - <span class="label label-important">Important</span> -
      - Info - - <span class="label label-info">Info</span> -
      - Inverse - - <span class="label label-inverse">Inverse</span> -
      -
      - - - - -
      -
      -

      Badges Indicators and unread counts

      -
      - -

      About

      -

      Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.

      - -

      Available classes

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      NameExampleMarkup
      - Default - - 1 - - <span class="badge">1</span> -
      - Success - - 2 - - <span class="badge badge-success">2</span> -
      - Warning - - 4 - - <span class="badge badge-warning">4</span> -
      - Important - - 6 - - <span class="badge badge-important">6</span> -
      - Info - - 8 - - <span class="badge badge-info">8</span> -
      - Inverse - - 10 - - <span class="badge badge-inverse">10</span> -
      - -
      - - - - -
      -
      -

      Typographic components Page header and hero unit for segmenting content

      -
      - -

      Hero unit

      -

      A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

      -
      -
      -

      Hello, world!

      -

      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

      -

      Learn more

      + +
      +
      +

      Labels and badges

      +
      +

      Labels

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      LabelsMarkup
      + Default + + <span class="label">Default</span> +
      + Success + + <span class="label label-success">Success</span> +
      + Warning + + <span class="label label-warning">Warning</span> +
      + Important + + <span class="label label-important">Important</span> +
      + Info + + <span class="label label-info">Info</span> +
      + Inverse + + <span class="label label-inverse">Inverse</span> +
      + +

      Badges

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      NameExampleMarkup
      + Default + + 1 + + <span class="badge">1</span> +
      + Success + + 2 + + <span class="badge badge-success">2</span> +
      + Warning + + 4 + + <span class="badge badge-warning">4</span> +
      + Important + + 6 + + <span class="badge badge-important">6</span> +
      + Info + + 8 + + <span class="badge badge-info">8</span> +
      + Inverse + + 10 + + <span class="badge badge-inverse">10</span> +
      + +
      + + + + +
      +
      +

      Typographic components

      +
      + +

      Hero unit

      +

      A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

      +
      +
      +

      Hello, world!

      +

      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

      +

      Learn more

      +
      - 
       <div class="hero-unit">
   <h1>Heading</h1>
@@ -1681,105 +1669,105 @@
 </div>
      -

      Page header

      -

      A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

      -
      -
      -

      Example page header Subtext for header

      +

      Page header

      +

      A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

      +
      +
      +

      Example page header Subtext for header

      +
      - 
       <div class="page-header">
   <h1>Example page header</h1>
 </div>
      -
      + - -
      -
      -

      Thumbnails Grids of images, videos, text, and more

      -
      + +
      +
      +

      Thumbnails Grids of images, videos, text, and more

      +
      -

      Default thumbnails

      -

      By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

      -
      - -
      +

      Default thumbnails

      +

      By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

      +
      + +
      -

      Highly customizable

      -

      With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

      -
      -
        -
      • -
        - -
        -

        Thumbnail label

        -

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        -

        Action Action

        +

        Highly customizable

        +

        With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

        +
        +
          +
        • +
          + +
          +

          Thumbnail label

          +

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          +

          Action Action

          +
          -
        -
        • -
      • -
        - -
        -

        Thumbnail label

        -

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        -

        Action Action

        +
        • +
      • +
        + +
        +

        Thumbnail label

        +

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        +

        Action Action

        +
        -
      - -
    • -
      - -
      -

      Thumbnail label

      -

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      -

      Action Action

      +
      • +
    • +
      + +
      +

      Thumbnail label

      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      Action Action

      +
      -
      • - - -
      + + +
      -

      Why use thumbnails

      -

      Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

      +

      Why use thumbnails

      +

      Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

      -

      Simple, flexible markup

      -

      Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

      +

      Simple, flexible markup

      +

      Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

      -

      Uses grid column sizes

      -

      Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

      +

      Uses grid column sizes

      +

      Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

      -

      The markup

      -

      As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

      +

      Markup

      +

      As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

       <ul class="thumbnails">
   <li class="span4">
@@ -1790,7 +1778,7 @@
   ...
 </ul>
      -

      For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

      +

      For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

       <ul class="thumbnails">
   <li class="span4">
@@ -1804,65 +1792,55 @@
 </ul>
      -

      More examples

      -

      Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

      - +

      More examples

      +

      Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

      + - + - -
      -
      -

      Alerts Styles for success, warning, and error messages

      -
      - -

      Default alert

      -

      Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

      -
      -
      - - Warning! Best check yo self, you're not looking too good. + +
      +
      +

      Alerts Styles for success, warning, and error messages

      +
      + +

      Default alert

      +

      Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

      +
      +
      + + Warning! Best check yo self, you're not looking too good. +
      - 
       <div class="alert">
   <button type="button" class="close" data-dismiss="alert">×</button>
@@ -1870,32 +1848,32 @@
 </div>
      -

      Dismiss buttons

      -

      Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

      +

      Dismiss buttons

      +

      Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

       <a href="#" class="close" data-dismiss="alert">×</button>
      -

      Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

      +

      Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

       <button type="button" class="close" data-dismiss="alert">×</button>
      -

      Dismiss alerts via javascript

      -

      Use the alerts jQuery plugin for quick and easy dismissal of alerts.

      +

      Dismiss alerts via javascript

      +

      Use the alerts jQuery plugin for quick and easy dismissal of alerts.

      -
      +
      -

      Options

      -

      For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

      -
      -
      - -

      Warning!

      -

      Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      +

      Options

      +

      For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

      +
      +
      + +

      Warning!

      +

      Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      +
      - 
       <div class="alert alert-block">
   <a class="close" data-dismiss="alert" href="#">&times;</a>
@@ -1905,97 +1883,97 @@
      -
      +
      -

      Contextual alternatives

      -

      Add optional classes to change an alert's connotation.

      +

      Contextual alternatives

      +

      Add optional classes to change an alert's connotation.

      -

      Error or danger

      -
      -
      - - Oh snap! Change a few things up and try submitting again. +

      Error or danger

      +
      +
      + + Oh snap! Change a few things up and try submitting again. +
      - 
       <div class="alert alert-error">
   ...
 </div>
      -

      Success

      -
      -
      - - Well done! You successfully read this important alert message. +

      Success

      +
      +
      + + Well done! You successfully read this important alert message. +
      - 
       <div class="alert alert-success">
   ...
 </div>
      -

      Information

      -
      -
      - - Heads up! This alert needs your attention, but it's not super important. +

      Information

      +
      +
      + + Heads up! This alert needs your attention, but it's not super important. +
      - 
       <div class="alert alert-info">
   ...
 </div>
      -
      + - -
      -
      -

      Progress bars For loading, redirecting, or action status

      -
      - -

      Examples and markup

      - -

      Basic

      -

      Default progress bar with a vertical gradient.

      -
      -
      -
      + +
      +
      +

      Progress bars For loading, redirecting, or action status

      +
      + +

      Examples and markup

      + +

      Basic

      +

      Default progress bar with a vertical gradient.

      +
      +
      +
      +
      - 
       <div class="progress">
   <div class="bar" style="width: 60%;"></div>
 </div>
      -

      Striped

      -

      Uses a gradient to create a striped effect. Not available in IE7-8.

      -
      -
      -
      +

      Striped

      +

      Uses a gradient to create a striped effect. Not available in IE7-8.

      +
      +
      +
      +
      - 
       <div class="progress progress-striped">
   <div class="bar" style="width: 20%;"></div>
 </div>
      -

      Animated

      -

      Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

      -
      -
      -
      +

      Animated

      +

      Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

      +
      +
      +
      +
      - 
       <div class="progress progress-striped active">
   <div class="bar" style="width: 40%;"></div>
@@ -2003,27 +1981,27 @@
      -
      +
      -

      Options

      +

      Options

      -

      Additional colors

      -

      Progress bars use some of the same button and alert classes for consistent styles.

      -
      -
      -
      +

      Additional colors

      +

      Progress bars use some of the same button and alert classes for consistent styles.

      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      -
      -
      -
      -
      -
      -
      -
      -
      -
      - 
       <div class="progress progress-info">
   <div class="bar" style="width: 20%"></div>
@@ -2039,22 +2017,22 @@
 </div>
      -

      Striped bars

      -

      Similar to the solid colors, we have varied striped progress bars.

      -
      -
      -
      +

      Striped bars

      +

      Similar to the solid colors, we have varied striped progress bars.

      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      -
      -
      -
      -
      -
      -
      -
      -
      -
      - 
       <div class="progress progress-info progress-striped">
   <div class="bar" style="width: 20%"></div>
@@ -2071,74 +2049,74 @@
      -
      +
      -

      Browser support

      -

      Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

      -

      Opera and IE do not support animations at this time.

      +

      Browser support

      +

      Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

      +

      Opera and IE do not support animations at this time.

      -
      + - -
      -
      -

      Miscellaneous Lightweight utility components

      -
      - -

      Wells

      -

      Use the well as a simple effect on an element to give it an inset effect.

      -
      -
      - Look, I'm in a well! + +
      +
      +

      Miscellaneous Lightweight utility components

      +
      + +

      Wells

      +

      Use the well as a simple effect on an element to give it an inset effect.

      +
      +
      + Look, I'm in a well! +
      - 
       <div class="well">
   ...
 </div>
      -

      Optional classes

      -

      Control padding and rounded corners with two optional modifier classes.

      -
      -
      - Look, I'm in a well! +

      Optional classes

      +

      Control padding and rounded corners with two optional modifier classes.

      +
      +
      + Look, I'm in a well! +
      - 
       <div class="well well-large">
   ...
 </div>
      -
      -
      - Look, I'm in a well! +
      +
      + Look, I'm in a well! +
      - 
       <div class="well well-small">
   ...
 </div>
      -

      Close icon

      -

      Use the generic close icon for dismissing content like modals and alerts.

      -
      -

      -
      +

      Close icon

      +

      Use the generic close icon for dismissing content like modals and alerts.

      +
      +

      + 
      <button class="close">&times;</button>
      -

      iOS devices require an href="#" for click events if you rather use an anchor.

      +

      iOS devices require an href="#" for click events if you rather use an anchor.

      <a class="close" href="#">&times;</a>
      -

      Helper classes

      -

      Simple, focused classes for small display or behavior tweaks.

      +

      Helper classes

      +

      Simple, focused classes for small display or behavior tweaks.

      -

      .pull-left

      -

      Float an element left

      +

      .pull-left

      +

      Float an element left

       class="pull-left"
      @@ -2148,8 +2126,8 @@ class="pull-left" } -

      .pull-right

      -

      Float an element right

      +

      .pull-right

      +

      Float an element right

       class="pull-right"
      @@ -2159,8 +2137,8 @@ class="pull-right" } -

      .muted

      -

      Change an element's color to #999

      +

      .muted

      +

      Change an element's color to #999

       class="muted"
      @@ -2170,8 +2148,8 @@ class="muted" } -

      .clearfix

      -

      Clear the float on any element

      +

      .clearfix

      +

      Clear the float on any element

       class="clearfix"
      @@ -2189,14 +2167,14 @@ class="clearfix" } -
      + -
      -
      -
      + + + diff --git a/docs/download.html b/docs/download.html index 6419d13175..2573b45c95 100644 --- a/docs/download.html +++ b/docs/download.html @@ -66,8 +66,6 @@ -
      -
      @@ -416,8 +414,6 @@ -
      -
      @@ -100,8 +98,6 @@ - -
      -

      Extending Bootstrap

      -

      Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

      +
      +

      Extending Bootstrap

      +

      Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

      +
      +
      - -
      -
      - -
      -
      + +
      +
      + +
      +
      - -
      -
      -

      Built with LESS

      -
      + +
      +
      +

      Built with LESS

      +
      -

      Why LESS?

      -

      Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

      +

      Why LESS?

      +

      Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

      -

      What's included?

      -

      As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

      +

      What's included?

      +

      As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

      -

      Learn more

      - LESS CSS -

      Visit the official website at http://lesscss.org to learn more.

      -
      +

      Learn more

      + LESS CSS +

      Visit the official website at http://lesscss.org to learn more.

      +
      - -
      -
      -

      Compiling Bootstrap with LESS

      -
      -
      - Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods. -
      + +
      +
      +

      Compiling Bootstrap with LESS

      +
      +
      + Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods. +
      -

      Tools for compiling

      +

      Tools for compiling

      -

      Node with makefile

      -

      Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:

      - 
      $ npm install -g less jshint recess uglify-js
      -

      Once installed just run make from the root of your bootstrap directory and you're all set.

      -

      Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

      +

      Node with makefile

      +

      Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:

      + 
      $ npm install -g less jshint recess uglify-js
      +

      Once installed just run make from the root of your bootstrap directory and you're all set.

      +

      Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

      -

      Command line

      -

      Install the LESS command line tool via Node and run the following command:

      - 
      $ lessc ./less/bootstrap.less > bootstrap.css
      -

      Be sure to include --compress in that command if you're trying to save some bytes!

      +

      Command line

      +

      Install the LESS command line tool via Node and run the following command:

      + 
      $ lessc ./less/bootstrap.less > bootstrap.css
      +

      Be sure to include --compress in that command if you're trying to save some bytes!

      -

      Javascript

      -

      Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

      +

      Javascript

      +

      Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

       <link rel="stylesheet/less" href="/path/to/bootstrap.less">
 <script src="/path/to/less.js"></script>
      -

      To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

      +

      To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

      -

      Unofficial Mac app

      -

      The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.

      -

      If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

      +

      Unofficial Mac app

      +

      The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.

      +

      If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

      -

      More Mac apps

      -

      Crunch

      -

      Crunch is a great looking LESS editor and compiler built on Adobe Air.

      -

      CodeKit

      -

      Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

      -

      Simpless

      -

      Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

      +

      More Mac apps

      +

      Crunch

      +

      Crunch is a great looking LESS editor and compiler built on Adobe Air.

      +

      CodeKit

      +

      Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

      +

      Simpless

      +

      Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

      -
      +
      - -
      -
      -

      Use as static assets

      -
      -

      ...

      -
      + +
      +
      +

      Use as static assets

      +
      +

      ...

      +
      -
      -
      -
      +
      + +
      diff --git a/docs/getting-started.html b/docs/getting-started.html index 856964bd94..c0e99542e9 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -66,15 +66,17 @@ -
      - +
      +

      Getting started

      Overview of the project, it's contents, and how to get started with a simple template.

      +
      +
        @@ -211,8 +213,6 @@
      -
      - - + diff --git a/docs/javascript.html b/docs/javascript.html index 1792f75c41..21d0044b09 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -66,112 +66,113 @@ -
      -
      -

      Javascript for Bootstrap

      -

      Bring Bootstrap's components to life—now with 12 custom jQuery plugins. +

      +

      Javascript for Bootstrap

      +

      Bring Bootstrap's components to life—now with 12 custom jQuery plugins. +

      +
      - -
      -
      - -
      -
      - - - - -
      -
      -

      Javascript in Bootstrap

      -
      - -

      Individual or compiled

      -

      If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.

      - -

      Data attributes

      -

      ...

      - -

      Programmatic API

      -

      ...

      - - - -
      - - - - -
      -
      -

      Transitions bootstrap-transition.js

      -
      -

      About transitions

      -

      For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.

      -

      Use cases

      -

      A few examples of the transition plugin:

      -
      +
      +
      - -
      -
      -

      Modals bootstrap-modal.js

      -
      + +
      +
      +

      Javascript in Bootstrap

      +
      + +

      Individual or compiled

      +

      If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.

      + +

      Data attributes

      +

      ...

      + +

      Programmatic API

      +

      ...

      -

      Examples

      -

      Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

      -

      Static example

      -

      A rendered modal with header, body, and set of actions in the footer.

      -
      -
      -
      - -

      Modal header

      -
      -
      -

      One fine body…

      -
      -
      - Close - Save changes +
      + + + + +
      +
      +

      Transitions bootstrap-transition.js

      +
      +

      About transitions

      +

      For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.

      +

      Use cases

      +

      A few examples of the transition plugin:

      +
        +
      • Sliding or fading in modals
        • +
      • Fading out tabs
        • +
      • Fading out alerts
        • +
      • Sliding carousel panes
        • +
      + +
      + + + + +
      +
      +

      Modals bootstrap-modal.js

      +
      + + +

      Examples

      +

      Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

      + +

      Static example

      +

      A rendered modal with header, body, and set of actions in the footer.

      +
      +
      +
      + +

      Modal header

      +
      +
      +

      One fine body…

      +
      +
      + Close + Save changes +
      - 
       <div class="modal hide fade">
   <div class="modal-header">
@@ -188,43 +189,43 @@
 </div>
      -

      Live demo

      -

      Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.

      - - -
      +
      + +
      diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 0a94cf49a1..ca94d8a542 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -66,43 +66,44 @@ -
      -
      -

      Scaffolding

      -

      Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.

      +
      +

      Scaffolding

      +

      Bootstrap is built on a responsive 12-column grid and includes fixed- and fluid-width layouts.

      +
      +
      - -
      -
      - -
      -
      + + +
      +
      + +
      +
      - -
      -
      -

      Global styles for CSS reset, typography, and links

      -
      + +
      +
      +

      Global styles for CSS reset, typography, and links

      +
      -

      Requires HTML5 doctype

      -

      Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

      +

      Requires HTML5 doctype

      +

      Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

       <!DOCTYPE html>
 <html lang="en">
@@ -110,84 +111,84 @@
 </html>
      -

      Typography and links

      -

      Bootstrap sets basic global display, typography, and link styles. Specifically, we:

      -
        -
      • Remove margin on the body
        • -
      • Set background-color: white; on the body
        • -
      • Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base
        • -
      • Set the global link color via @linkColor and apply link underlines only on :hover
        • -
      -

      These styles can be found within scaffolding.less.

      +

      Typography and links

      +

      Bootstrap sets basic global display, typography, and link styles. Specifically, we:

      +
        +
      • Remove margin on the body
        • +
      • Set background-color: white; on the body
        • +
      • Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base
        • +
      • Set the global link color via @linkColor and apply link underlines only on :hover
        • +
      +

      These styles can be found within scaffolding.less.

      -

      Reset via Normalize

      -

      With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

      +

      Reset via Normalize

      +

      With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

      -
      +
      - -
      -
      -

      Default grid system 12 columns with a responsive twist

      -
      - -

      Live grid example

      -

      The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

      -
      -
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      + +
      +
      +

      Default grid system 12 columns with a responsive twist

      -
      -
      2
      -
      3
      -
      4
      -
      -
      -
      4
      -
      5
      -
      -
      -
      9
      -
      -
      -

      Basic grid HTML

      -

      For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row.

      +

      Live grid example

      +

      The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

      +
      +
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      +
      +
      2
      +
      3
      +
      4
      +
      +
      +
      4
      +
      5
      +
      +
      +
      9
      +
      +
      + +

      Basic grid HTML

      +

      For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row.

       <div class="row">
   <div class="span4">...</div>
   <div class="span8">...</div>
 </div>
      -

      Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

      +

      Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

      -

      Offsetting columns

      -

      Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

      -
      -
      -
      4
      -
      3 offset 2
      -
      -
      -
      3 offset 1
      -
      3 offset 2
      -
      -
      -
      6 offset 3
      -
      -
      +

      Offsetting columns

      +

      Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

      +
      +
      +
      4
      +
      3 offset 2
      +
      +
      +
      3 offset 1
      +
      3 offset 2
      +
      +
      +
      6 offset 3
      +
      + 
       <div class="row">
   <div class="span4">...</div>
@@ -195,23 +196,23 @@
 </div>
      -

      Nesting columns

      -

      To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

      -

      Example

      -

      Here two nested .span4 columns are placed within a .span8.

      -
      -
      - Level 1 of column -
      -
      - Level 2 -
      -
      - Level 2 +

      Nesting columns

      +

      To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

      +

      Example

      +

      Here two nested .span4 columns are placed within a .span8.

      +
      +
      + Level 1 of column +
      +
      + Level 2 +
      +
      + Level 2 +
      - 
       <div class="row">
   <div class="span10">
@@ -223,54 +224,54 @@
   </div>
 </div>
      -
      + - -
      -
      -

      Fluid grid system 12 responsive, percent-based columns

      -
      + +
      +
      +

      Fluid grid system 12 responsive, percent-based columns

      +
      -

      Live fluid grid example

      -

      The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

      -
      -
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      +

      Live fluid grid example

      +

      The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

      +
      +
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      +
      +
      4
      +
      4
      +
      4
      +
      +
      +
      4
      +
      8
      +
      +
      +
      6
      +
      6
      +
      +
      +
      12
      +
      -
      -
      4
      -
      4
      -
      4
      -
      -
      -
      4
      -
      8
      -
      -
      -
      6
      -
      6
      -
      -
      -
      12
      -
      -
      -

      Basic fluid grid HTML

      -

      Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

      +

      Basic fluid grid HTML

      +

      Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

       <div class="row-fluid">
   <div class="span4">...</div>
@@ -278,21 +279,21 @@
 </div>
      -

      Fluid offsetting

      -

      Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

      -
      -
      -
      4
      -
      4 offset 4
      -
      -
      -
      3 offset 3
      -
      3 offset 3
      -
      -
      -
      6 offset 6
      -
      -
      +

      Fluid offsetting

      +

      Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

      +
      +
      +
      4
      +
      4 offset 4
      +
      +
      +
      3 offset 3
      +
      3 offset 3
      +
      +
      +
      6 offset 6
      +
      + 
       <div class="row-fluid">
   <div class="span4">...</div>
@@ -300,21 +301,21 @@
 </div>
      -

      Fluid nesting

      -

      Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.

      -
      -
      - Fluid 12 -
      -
      - Fluid 6 -
      -
      - Fluid 6 +

      Fluid nesting

      +

      Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.

      +
      +
      + Fluid 12 +
      +
      + Fluid 6 +
      +
      + Fluid 6 +
      - 
       <div class="row-fluid">
   <div class="span12">
@@ -327,78 +328,23 @@
 </div>
      -
      +
      - -
      -
      -

      Grid customization

      -
      -

      Variables in LESS

      -

      The default grid is built on a few variables for easy customization via LESS. All variables can be found in variables.less.

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      VariableDefault valueDescription
      @gridColumns12Number of columns
      @gridColumnWidth60pxWidth of each column
      @gridGutterWidth20pxNegative space between columns
      @fluidGridColumnWidth6.382978723%Width of each fluid column
      @fluidGridGutterWidth2.127659574%Negative space between fluid columns
      + +
      +
      +

      Layouts Basic templates to create webpages

      +
      -

      How to customize

      -

      Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.

      - -

      Staying responsive

      -

      Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in responsive.less until a future update improves this.

      - -
      - - - - -
      -
      -

      Layouts Basic templates to create webpages

      -
      - -

      Fixed layout

      -

      Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.

      -
      -
      -
      +

      Fixed layout

      +

      Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.

      +
      +
      + 
       <body>
   <div class="container">
@@ -407,12 +353,12 @@
 </body>
      -

      Fluid layout

      -

      Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

      -
      -
      -
      -
      +

      Fluid layout

      +

      Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

      +
      +
      +
      + 
       <div class="container-fluid">
   <div class="row-fluid">
@@ -425,78 +371,78 @@
   </div>
 </div>
      -
      +
      - -
      -
      -

      Responsive design Media queries for various devices and resolutions

      -
      + +
      +
      +

      Responsive design Media queries for various devices and resolutions

      +
      -

      Enabling responsive features

      -

      Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

      +

      Enabling responsive features

      +

      Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

       <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
      -

      Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.

      +

      Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.

      -

      About responsive Bootstrap

      - Responsive devices -

      Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

      -
        -
      • Modify the width of column in our grid
        • -
      • Stack elements instead of float wherever necessary
        • -
      • Resize headings and text to be more appropriate for devices
        • -
      -

      Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

      +

      About responsive Bootstrap

      + Responsive devices +

      Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

      +
        +
      • Modify the width of column in our grid
        • +
      • Stack elements instead of float wherever necessary
        • +
      • Resize headings and text to be more appropriate for devices
        • +
      +

      Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

      -

      Supported devices

      -

      Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      LabelLayout widthColumn widthGutter width
      Phones480px and belowFluid columns, no fixed widths
      Phones to tablets767px and belowFluid columns, no fixed widths
      Portrait tablets768px and above42px20px
      Default980px and up60px20px
      Large display1200px and up70px30px
      +

      Supported devices

      +

      Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      LabelLayout widthColumn widthGutter width
      Phones480px and belowFluid columns, no fixed widths
      Phones to tablets767px and belowFluid columns, no fixed widths
      Portrait tablets768px and above42px20px
      Default980px and up60px20px
      Large display1200px and up70px30px
       /* Landscape phones and down */
 @media (max-width: 480px) { ... }
@@ -512,85 +458,85 @@
      -

      Responsive utility classes

      -

      For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
      .visible-phoneVisible
      .visible-tabletVisible
      .visible-desktopVisible
      .hidden-phoneVisibleVisible
      .hidden-tabletVisibleVisible
      .hidden-desktopVisibleVisible
      +

      Responsive utility classes

      +

      For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
      .visible-phoneVisible
      .visible-tabletVisible
      .visible-desktopVisible
      .hidden-phoneVisibleVisible
      .hidden-tabletVisibleVisible
      .hidden-desktopVisibleVisible
      -

      When to use

      -

      Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

      +

      When to use

      +

      Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

      -

      Responsive utilities test case

      -

      Resize your browser or load on different devices to test the above classes.

      -

      Visible on...

      -

      Green checkmarks indicate that class is visible in your current viewport.

      -
        -
      • Phone✔ Phone
        • -
      • Tablet✔ Tablet
        • -
      • Desktop✔ Desktop
        • -
      -

      Hidden on...

      -

      Here, green checkmarks indicate that class is hidden in your current viewport.

      -
        -
      • Phone✔ Phone
        • -
      • Tablet✔ Tablet
        • -
      • Desktop✔ Desktop
        • -
      +

      Responsive utilities test case

      +

      Resize your browser or load on different devices to test the above classes.

      +

      Visible on...

      +

      Green checkmarks indicate that class is visible in your current viewport.

      +
        +
      • Phone✔ Phone
        • +
      • Tablet✔ Tablet
        • +
      • Desktop✔ Desktop
        • +
      +

      Hidden on...

      +

      Here, green checkmarks indicate that class is hidden in your current viewport.

      +
        +
      • Phone✔ Phone
        • +
      • Tablet✔ Tablet
        • +
      • Desktop✔ Desktop
        • +
      -
      +
      -
      -
      -
      +
      + +
      diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 9808c7b663..cbfae7f26f 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -78,12 +78,8 @@
      -
      - {{>body}} -
      {{! /container }} -
      -

      {{_i}}Base CSS{{/i}}

      -

      {{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}

      +
      +

      {{_i}}Base CSS{{/i}}

      +

      {{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.{{/i}}

      +
      +
      - -
      -
      - -
      -
      + +
      +
      + +
      +
      - -
      -
      -

      {{_i}}Typography Headings, paragraphs, lists, and other inline type elements{{/i}}

      -
      + +
      +
      +

      {{_i}}Typography Headings, paragraphs, lists, and other inline type elements{{/i}}

      +
      - {{! Headings }} -

      {{_i}}Headings{{/i}}

      -

      {{_i}}All HTML headings, <h1> through <h6> are available.{{/i}}

      -
      -

      h1. {{_i}}Heading 1{{/i}}

      -

      h2. {{_i}}Heading 2{{/i}}

      -

      h3. {{_i}}Heading 3{{/i}}

      -

      h4. {{_i}}Heading 4{{/i}}

      -
      h5. {{_i}}Heading 5{{/i}}
      -
      h6. {{_i}}Heading 6{{/i}}
      -
      + {{! Headings }} +

      {{_i}}Headings{{/i}}

      +

      {{_i}}All HTML headings, <h1> through <h6> are available.{{/i}}

      +
      +

      h1. {{_i}}Heading 1{{/i}}

      +

      h2. {{_i}}Heading 2{{/i}}

      +

      h3. {{_i}}Heading 3{{/i}}

      +

      h4. {{_i}}Heading 4{{/i}}

      +
      h5. {{_i}}Heading 5{{/i}}
      +
      h6. {{_i}}Heading 6{{/i}}
      +
      - {{! Body copy }} -

      {{_i}}Body copy{{/i}}

      -

      {{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}

      -
      -

      Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

      -

      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

      -

      Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

      -
      + {{! Body copy }} +

      {{_i}}Body copy{{/i}}

      +

      {{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}

      +
      +

      Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

      +

      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

      +

      Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

      +
      - {{! Body copy .lead }} -

      {{_i}}Lead body copy{{/i}}

      -

      {{_i}}Make a paragraph stand out by adding .lead.{{/i}}

      -
      -

      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

      -
      + {{! Body copy .lead }} +

      {{_i}}Lead body copy{{/i}}

      +

      {{_i}}Make a paragraph stand out by adding .lead.{{/i}}

      +
      +

      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

      +
      - {{! Using LESS }} -

      {{_i}}Built with Less{{/i}}

      -

      {{_i}}The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}

      + {{! Using LESS }} +

      {{_i}}Built with Less{{/i}}

      +

      {{_i}}The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}

      -
      +
      - {{! Emphasis }} -

      {{_i}}Emphasis{{/i}}

      -

      {{_i}}Make use of HTML's default emphasis tags, <strong> and <em>.{{/i}}

      + {{! Emphasis }} +

      {{_i}}Emphasis{{/i}}

      +

      {{_i}}Make use of HTML's default emphasis tags, <strong> and <em>.{{/i}}

      -

      <strong>

      -

      {{_i}}For emphasizing a snippet of text with important{{/i}}

      -
      -

      The following snippet of text is rendered as bold text.

      -
      +

      <strong>

      +

      {{_i}}For emphasizing a snippet of text with important{{/i}}

      +
      +

      The following snippet of text is rendered as bold text.

      + 
       <strong>rendered as bold text</strong>
      -

      <em>

      -

      {{_i}}For emphasizing a snippet of text with stress{{/i}}

      -
      -

      The following snippet of text is rendered as italicized text.

      -
      - 
      -    <em>rendered as italicized text</em>
-
      +

      <em>

      +

      {{_i}}For emphasizing a snippet of text with stress{{/i}}

      +
      +

      The following snippet of text is rendered as italicized text.

      +
      +
      +<em>rendered as italicized text</em>
+
      -

      {{_i}}Heads up!{{/i}} {{_i}}Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.{{/i}}

      +

      {{_i}}Heads up!{{/i}} {{_i}}Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.{{/i}}

      -
      +
      - {{! Abbreviations }} -

      {{_i}}Abbreviations{{/i}}

      -

      {{_i}}Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}

      + {{! Abbreviations }} +

      {{_i}}Abbreviations{{/i}}

      +

      {{_i}}Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}

      -

      <abbr>

      -

      {{_i}}For expanded text on long hover of an abbreviation, include the title attribute.{{/i}}

      -
      -

      {{_i}}An abbreviation of the word attribute is attr.{{/i}}

      -
      +

      <abbr>

      +

      {{_i}}For expanded text on long hover of an abbreviation, include the title attribute.{{/i}}

      +
      +

      {{_i}}An abbreviation of the word attribute is attr.{{/i}}

      + 
       <abbr title="attribute">attr</abbr>
      -

      <abbr class="initialism">

      -

      {{_i}}Add .initialism to an abbreviation for a slightly smaller font-size.{{/i}}

      -
      -

      {{_i}}HTML is the best thing since sliced bread.{{/i}}

      -
      +

      <abbr class="initialism">

      +

      {{_i}}Add .initialism to an abbreviation for a slightly smaller font-size.{{/i}}

      +
      +

      {{_i}}HTML is the best thing since sliced bread.{{/i}}

      + 
       <abbr title="attribute" class="initialism">attr</abbr>
      -
      +
      - {{! Addresses }} -

      {{_i}}Addresses{{/i}}

      -

      {{_i}}Present contact information for the nearest ancestor or the entire body of work.{{/i}}

      + {{! Addresses }} +

      {{_i}}Addresses{{/i}}

      +

      {{_i}}Present contact information for the nearest ancestor or the entire body of work.{{/i}}

      -

      <address>

      -

      {{_i}}Preserve formatting by ending all lines with <br>.{{/i}}

      -
      -
      - Twitter, Inc.
      - 795 Folsom Ave, Suite 600
      - San Francisco, CA 94107
      - P: (123) 456-7890 -
      -
      - {{_i}}Full Name{{/i}}
      - {{_i}}first.last@gmail.com{{/i}} -
      -
      +

      <address>

      +

      {{_i}}Preserve formatting by ending all lines with <br>.{{/i}}

      +
      +
      + Twitter, Inc.
      + 795 Folsom Ave, Suite 600
      + San Francisco, CA 94107
      + P: (123) 456-7890 +
      +
      + {{_i}}Full Name{{/i}}
      + {{_i}}first.last@gmail.com{{/i}} +
      + 
       <address>
   <strong>Twitter, Inc.</strong><br>
@@ -154,37 +157,37 @@
      -
      +
      - {{! Blockquotes }} -

      {{_i}}Blockquotes{{/i}}

      -

      {{_i}}For quoting blocks of content from another source within your document.{{/i}}

      + {{! Blockquotes }} +

      {{_i}}Blockquotes{{/i}}

      +

      {{_i}}For quoting blocks of content from another source within your document.{{/i}}

      -

      {{_i}}Default blockqoute{{/i}}

      -

      {{_i}}Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}

      -
      -
      -

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      -
      -
      +

      {{_i}}Default blockqoute{{/i}}

      +

      {{_i}}Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}

      +
      +
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      +
      + 
       <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
      -

      {{_i}}Blockquote options{{/i}}

      -

      {{_i}}Style and content changes for simple variations on a standard blockquote.{{/i}}

      +

      {{_i}}Blockquote options{{/i}}

      +

      {{_i}}Style and content changes for simple variations on a standard blockquote.{{/i}}

      -

      {{_i}}Naming a source{{/i}}

      -

      {{_i}}Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.{{/i}}

      -
      -
      -

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      - {{_i}}Someone famous in Source Title{{/i}} -
      -
      +

      {{_i}}Naming a source{{/i}}

      +

      {{_i}}Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.{{/i}}

      +
      +
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      + {{_i}}Someone famous in Source Title{{/i}} +
      + 
       <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -192,14 +195,14 @@
 </blockquote>
      -

      {{_i}}Alternate displays{{/i}}

      -

      {{_i}}Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.{{/i}}

      -
      -
      -

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      - {{_i}}Someone famous in Source Title{{/i}} -
      -
      +

      {{_i}}Alternate displays{{/i}}

      +

      {{_i}}Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.{{/i}}

      +
      +
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      + {{_i}}Someone famous in Source Title{{/i}} +
      + 
       <blockquote class="pull-right">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -208,16 +211,63 @@
      -
      +
      - -

      {{_i}}Lists{{/i}}

      + +

      {{_i}}Lists{{/i}}

      -

      {{_i}}Unordered{{/i}}

      -

      {{_i}}A list of items in which the order does not explicitly matter.{{/i}}

      +

      {{_i}}Unordered{{/i}}

      +

      {{_i}}A list of items in which the order does not explicitly matter.{{/i}}

      +
      +
        +
      • Lorem ipsum dolor sit amet
        • +
      • Consectetur adipiscing elit
        • +
      • Integer molestie lorem at massa
        • +
      • Facilisis in pretium nisl aliquet
        • +
      • Nulla volutpat aliquam velit +
          +
        • Phasellus iaculis neque
          • +
        • Purus sodales ultricies
          • +
        • Vestibulum laoreet porttitor sem
          • +
        • Ac tristique libero volutpat at
          • +
        +
        • +
      • Faucibus porta lacus fringilla vel
        • +
      • Aenean sit amet erat nunc
        • +
      • Eget porttitor lorem
        • +
      +
      +
      +<ul>
+  <li>...</li>
+</ul>
+
      + +

      {{_i}}Ordered{{/i}}

      +

      {{_i}}A list of items in which the order does explicitly matter.{{/i}}

      +
      +
        +
      1. Lorem ipsum dolor sit amet
        2. +
      2. Consectetur adipiscing elit
        3. +
      3. Integer molestie lorem at massa
        4. +
      4. Facilisis in pretium nisl aliquet
        5. +
      5. Nulla volutpat aliquam velit
        6. +
      6. Faucibus porta lacus fringilla vel
        7. +
      7. Aenean sit amet erat nunc
        8. +
      8. Eget porttitor lorem
        9. +
      +
      +
      +<ol>
+  <li>...</li>
+</ol>
+
      + +

      {{_i}}Unstyled{{/i}}

      +

      {{_i}}A list of items with no list-style or additional left padding.{{/i}}

      -
        +
        • Lorem ipsum dolor sit amet
        • Consectetur adipiscing elit
        • Integer molestie lorem at massa
          • @@ -236,71 +286,24 @@ 
      -<ul>
-  <li>...</li>
-</ul>
-
      - -

      {{_i}}Ordered{{/i}}

      -

      {{_i}}A list of items in which the order does explicitly matter.{{/i}}

      -
      -
        -
      1. Lorem ipsum dolor sit amet
        2. -
      2. Consectetur adipiscing elit
        3. -
      3. Integer molestie lorem at massa
        4. -
      4. Facilisis in pretium nisl aliquet
        5. -
      5. Nulla volutpat aliquam velit
        6. -
      6. Faucibus porta lacus fringilla vel
        7. -
      7. Aenean sit amet erat nunc
        8. -
      8. Eget porttitor lorem
        9. -
      -
      -
      -<ol>
-  <li>...</li>
-</ol>
-
      - -

      {{_i}}Unstyled{{/i}}

      -

      {{_i}}A list of items with no list-style or additional left padding.{{/i}}

      -
      -
        -
      • Lorem ipsum dolor sit amet
        • -
      • Consectetur adipiscing elit
        • -
      • Integer molestie lorem at massa
        • -
      • Facilisis in pretium nisl aliquet
        • -
      • Nulla volutpat aliquam velit -
          -
        • Phasellus iaculis neque
          • -
        • Purus sodales ultricies
          • -
        • Vestibulum laoreet porttitor sem
          • -
        • Ac tristique libero volutpat at
          • -
        -
        • -
      • Faucibus porta lacus fringilla vel
        • -
      • Aenean sit amet erat nunc
        • -
      • Eget porttitor lorem
        • -
      -
      -
       <ul class="unstyled">
   <li>...</li>
 </ul>
      -

      {{_i}}Description{{/i}}

      -

      {{_i}}A list of terms with their associated descriptions.{{/i}}

      -
      -
      -
      {{_i}}Description lists{{/i}}
      -
      {{_i}}A description list is perfect for defining terms.{{/i}}
      -
      Euismod
      -
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      -
      Donec id elit non mi porta gravida at eget metus.
      -
      Malesuada porta
      -
      Etiam porta sem malesuada magna mollis euismod.
      -
      -
      +

      {{_i}}Description{{/i}}

      +

      {{_i}}A list of terms with their associated descriptions.{{/i}}

      +
      +
      +
      {{_i}}Description lists{{/i}}
      +
      {{_i}}A description list is perfect for defining terms.{{/i}}
      +
      Euismod
      +
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      +
      Donec id elit non mi porta gravida at eget metus.
      +
      Malesuada porta
      +
      Etiam porta sem malesuada magna mollis euismod.
      +
      + 
       <dl>
   <dt>...</dt>
@@ -308,50 +311,50 @@
 </dl>
      -

      {{_i}}Horizontal description{{/i}}

      -

      {{_i}}Make terms and descriptions in <dl> line up side-by-side.{{/i}}

      -
      -
      -
      {{_i}}Description lists{{/i}}
      -
      {{_i}}A description list is perfect for defining terms.{{/i}}
      -
      Euismod
      -
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      -
      Donec id elit non mi porta gravida at eget metus.
      -
      Malesuada porta
      -
      Etiam porta sem malesuada magna mollis euismod.
      -
      Felis euismod semper eget lacinia
      -
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      -
      -
      +

      {{_i}}Horizontal description{{/i}}

      +

      {{_i}}Make terms and descriptions in <dl> line up side-by-side.{{/i}}

      +
      +
      +
      {{_i}}Description lists{{/i}}
      +
      {{_i}}A description list is perfect for defining terms.{{/i}}
      +
      Euismod
      +
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      +
      Donec id elit non mi porta gravida at eget metus.
      +
      Malesuada porta
      +
      Etiam porta sem malesuada magna mollis euismod.
      +
      Felis euismod semper eget lacinia
      +
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      +
      + 
       <dl class="dl-horizontal">
   <dt>...</dt>
   <dd>...</dd>
 </dl>
      -

      - {{_i}}Heads up!{{/i}} - {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.{{/i}} -

      -
      +

      + {{_i}}Heads up!{{/i}} + {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.{{/i}} +

      +
      - -
      -
      -

      {{_i}}Code{{/i}} {{_i}}Inline and block code snippets{{/i}}

      -
      + +
      +
      +

      {{_i}}Code{{/i}} {{_i}}Inline and block code snippets{{/i}}

      +
      -

      Inline

      -

      Wrap inline snippets of code with <code>.

      +

      Inline

      +

      Wrap inline snippets of code with <code>.

       {{_i}}For example, <code>section</code> should be wrapped as inline.{{/i}}
      -

      Basic block

      -

      {{_i}}Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}

      +

      Basic block

      +

      {{_i}}Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}

       <p>{{_i}}Sample text here...{{/i}}</p>
      @@ -360,53 +363,53 @@ &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt; </pre> -

      {{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

      -

      {{_i}}You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}

      -
      +

      {{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

      +

      {{_i}}You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}

      +
      - -
      -
      -

      {{_i}}Tables For, you guessed it, tabular data{{/i}}

      -
      + +
      +
      +

      {{_i}}Tables For, you guessed it, tabular data{{/i}}

      +
      -

      {{_i}}Default styles{{/i}}

      -

      {{_i}}For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      -
      {{! /example }} +

      {{_i}}Default styles{{/i}}

      +

      {{_i}}For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.{{/i}}

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      +
      {{! /example }} 
       <table class="table">
   …
@@ -414,168 +417,168 @@
      -
      +
      -

      {{_i}}Optional classes{{/i}}

      -

      {{_i}}Add any of the follow classes to the .table base class.{{/i}}

      +

      {{_i}}Optional classes{{/i}}

      +

      {{_i}}Add any of the follow classes to the .table base class.{{/i}}

      -

      {{_i}}.table-striped{{/i}}

      -

      {{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      -
      {{! /example }} +

      {{_i}}.table-striped{{/i}}

      +

      {{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larrythe Bird@twitter
      +
      {{! /example }} 
       <table class="table table-striped">
   …
 </table>
      -

      {{_i}}.table-bordered{{/i}}

      -

      {{_i}}Add borders and rounded corners to the table.{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      MarkOtto@TwBootstrap
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      {{! /example }} +

      {{_i}}.table-bordered{{/i}}

      +

      {{_i}}Add borders and rounded corners to the table.{{/i}}

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      MarkOtto@TwBootstrap
      2JacobThornton@fat
      3Larry the Bird@twitter
      +
      {{! /example }} 
       <table class="table table-bordered">
   …
 </table>
      -

      {{_i}}.table-hover{{/i}}

      -

      {{_i}}Enable a hover state on table rows within a <tbody>.{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      {{! /example }} +

      {{_i}}.table-hover{{/i}}

      +

      {{_i}}Enable a hover state on table rows within a <tbody>.{{/i}}

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +
      {{! /example }} 
       <table class="table table-hover">
   …
 </table>
      -

      {{_i}}.table-condensed{{/i}}

      -

      {{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      -
      {{! /example }} +

      {{_i}}.table-condensed{{/i}}

      +

      {{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}

      +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
      1MarkOtto@mdo
      2JacobThornton@fat
      3Larry the Bird@twitter
      +
      {{! /example }} 
       <table class="table table-condensed">
   …
@@ -583,82 +586,82 @@
      -
      +
      -

      {{_i}}Supported table markup{{/i}}

      -

      {{_i}}List of supported table HTML elements and how they should be used.{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Tag{{/i}}{{_i}}Description{{/i}}
      - <table> - - {{_i}}Wrapping element for displaying data in a tabular format{{/i}} -
      - <thead> - - {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}} -
      - <tbody> - - {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}} -
      - <tr> - - {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}} -
      - <td> - - {{_i}}Default table cell{{/i}} -
      - <th> - - {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
      - {{_i}}Must be used within a <thead>{{/i}} -
      - <caption> - - {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} -
      +

      {{_i}}Supported table markup{{/i}}

      +

      {{_i}}List of supported table HTML elements and how they should be used.{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Tag{{/i}}{{_i}}Description{{/i}}
      + <table> + + {{_i}}Wrapping element for displaying data in a tabular format{{/i}} +
      + <thead> + + {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}} +
      + <tbody> + + {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}} +
      + <tr> + + {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}} +
      + <td> + + {{_i}}Default table cell{{/i}} +
      + <th> + + {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
      + {{_i}}Must be used within a <thead>{{/i}} +
      + <caption> + + {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} + 
       <table>
   <thead>
@@ -676,29 +679,29 @@
 </table>
      -
      +
      - -
      -
      -

      {{_i}}Forms{{/i}}

      -
      + +
      +
      +

      {{_i}}Forms{{/i}}

      +
      -

      {{_i}}Default styles{{/i}}

      -

      {{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

      -
      - Legend - - -

      {{_i}}Example block-level help text here.{{/i}}

      - - -
      {{! /example }} +

      {{_i}}Default styles{{/i}}

      +

      {{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

      +
      + Legend + + +

      {{_i}}Example block-level help text here.{{/i}}

      + + +
      {{! /example }} 
       <form class="well">
   <label>{{_i}}Label name{{/i}}</label>
@@ -712,18 +715,18 @@
      -
      +
      -

      {{_i}}Optional layouts{{/i}}

      -

      {{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}

      +

      {{_i}}Optional layouts{{/i}}

      +

      {{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}

      -

      {{_i}}Search form{{/i}}

      -

      {{_i}}Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.{{/i}}

      -
      - - -
      {{! /example }} +

      {{_i}}Search form{{/i}}

      +

      {{_i}}Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.{{/i}}

      +
      + + +
      {{! /example }} 
       <form class="form-search">
   <input type="text" class="input-medium search-query">
@@ -731,16 +734,16 @@
 </form>
      -

      {{_i}}Inline form{{/i}}

      -

      {{_i}}Add .form-inline for left-aligned labels and inline-block controls for a compact layout.{{/i}}

      -
      - - - - -
      {{! /example }} +

      {{_i}}Inline form{{/i}}

      +

      {{_i}}Add .form-inline for left-aligned labels and inline-block controls for a compact layout.{{/i}}

      +
      + + + + +
      {{! /example }} 
       <form class="form-inline">
   <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
@@ -752,37 +755,37 @@
 </form>
      -

      {{_i}}Horizontal form{{/i}}

      -

      {{_i}}Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:{{/i}}

      -
        -
      • {{_i}}Add .form-horizontal to the form{{/i}}
        • -
      • {{_i}}Wrap labels and controls in .control-group{{/i}}
        • -
      • {{_i}}Add .control-label to the label{{/i}}
        • -
      • {{_i}}Wrap any associated controls in .controls for proper alignment{{/i}}
        • -
      -
      - Legend -
      - -
      - +

      {{_i}}Horizontal form{{/i}}

      +

      {{_i}}Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:{{/i}}

      +
        +
      • {{_i}}Add .form-horizontal to the form{{/i}}
        • +
      • {{_i}}Wrap labels and controls in .control-group{{/i}}
        • +
      • {{_i}}Add .control-label to the label{{/i}}
        • +
      • {{_i}}Wrap any associated controls in .controls for proper alignment{{/i}}
        • +
      + + Legend +
      + +
      + +
      -
      -
      - -
      - +
      + +
      + +
      -
      -
      -
      - - +
      +
      + + +
      -
      - + 
       <form class="form-horizontal">
   <div class="control-group">
@@ -809,49 +812,49 @@
      -
      +
      -

      {{_i}}Supported form controls{{/i}}

      -

      {{_i}}Examples of standard form controls supported in an example form layout.{{/i}}

      +

      {{_i}}Supported form controls{{/i}}

      +

      {{_i}}Examples of standard form controls supported in an example form layout.{{/i}}

      -

      {{_i}}Inputs{{/i}}

      -

      {{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}

      -

      {{_i}}Requires the use of a specified type at all times.{{/i}}

      -
      - -
      +

      {{_i}}Inputs{{/i}}

      +

      {{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}

      +

      {{_i}}Requires the use of a specified type at all times.{{/i}}

      +
      + + 
       <input type="text" placeholder="Text input">
      -

      {{_i}}Textarea{{/i}}

      -

      {{_i}}Form control which supports multiple lines of text. Change row attribute as necessary.{{/i}}

      -
      - -
      +

      {{_i}}Textarea{{/i}}

      +

      {{_i}}Form control which supports multiple lines of text. Change row attribute as necessary.{{/i}}

      +
      + + 
       <textarea id="textarea" rows="3"></textarea>
      -

      {{_i}}Checkboxes and radios{{/i}}

      -

      {{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}

      -

      {{_i}}Default (stacked){{/i}}

      -
      - -
      - - -
      +

      {{_i}}Checkboxes and radios{{/i}}

      +

      {{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}

      +

      {{_i}}Default (stacked){{/i}}

      +
      + +
      + + + 
       <label class="checkbox">
   <input type="checkbox" value="">
@@ -868,19 +871,19 @@
 </label>
      -

      {{_i}}Inline checkboxes{{/i}}

      -

      {{_i}}Add the .inline class to a series of checkboxes or radios for controls appear on the same line.{{/i}}

      -
      - - - -
      +

      {{_i}}Inline checkboxes{{/i}}

      +

      {{_i}}Add the .inline class to a series of checkboxes or radios for controls appear on the same line.{{/i}}

      +
      + + + + 
       <label class="checkbox inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -893,25 +896,25 @@
 </label>
      -

      {{_i}}Selects{{/i}}

      -

      {{_i}}Use the default option or specify a multiple="multiple" to show multiple options at once.{{/i}}

      -
      - -
      - -
      +

      {{_i}}Selects{{/i}}

      +

      {{_i}}Use the default option or specify a multiple="multiple" to show multiple options at once.{{/i}}

      +
      + +
      + + 
       <select>
   <option>something</option>
@@ -931,28 +934,28 @@
      -
      +
      -

      {{_i}}Extending form controls{{/i}}

      -

      {{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}

      +

      {{_i}}Extending form controls{{/i}}

      +

      {{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}

      -

      {{_i}}Prepended and appended inputs{{/i}}

      -

      {{_i}}Add text or buttons before or after any text-based input. Do note that select elements are not supported here.{{/i}}

      +

      {{_i}}Prepended and appended inputs{{/i}}

      +

      {{_i}}Add text or buttons before or after any text-based input. Do note that select elements are not supported here.{{/i}}

      -

      {{_i}}Default options{{/i}}

      -

      {{_i}}Wrap a .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

      -
      -
      - @ - -
      -
      -
      - - .00 -
      -
      +

      {{_i}}Default options{{/i}}

      +

      {{_i}}Wrap a .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

      +
      +
      + @ + +
      +
      +
      + + .00 +
      + 
       <div class="input-prepend">
   <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
@@ -962,35 +965,35 @@
 </div>
      -

      {{_i}}Combined{{/i}}

      -

      {{_i}}Use both classes and two instances of .add-on to prepend and append an input.{{/i}}

      -
      -
      - $ - - .00 -
      -
      +

      {{_i}}Combined{{/i}}

      +

      {{_i}}Use both classes and two instances of .add-on to prepend and append an input.{{/i}}

      +
      +
      + $ + + .00 +
      + 
       <div class="input-prepend input-append">
   <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
 </div>
      -

      {{_i}}Buttons instead of text{{/i}}

      -

      {{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

      -
      -
      - - -
      -
      -
      - - - -
      -
      +

      {{_i}}Buttons instead of text{{/i}}

      +

      {{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

      +
      +
      + + +
      +
      +
      + + + +
      + 
       <div class="input-append">
   <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
@@ -1001,17 +1004,17 @@
 </div>
      -

      {{_i}}Search form{{/i}}

      -
      -
      - - -
      -
      - - -
      -
      {{! /example }} +

      {{_i}}Search form{{/i}}

      +
      +
      + + +
      +
      + + +
      +
      {{! /example }} 
       <form class="form-search">
   <input type="text" class="span2 search-query">
@@ -1019,20 +1022,20 @@
 </form>
      -

      {{_i}}Control sizing{{/i}}

      -

      {{_i}}Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.{{/i}}

      +

      {{_i}}Control sizing{{/i}}

      +

      {{_i}}Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.{{/i}}

      -

      {{_i}}Relative sizing{{/i}}

      -
      -
      - - - - - - -
      -
      +

      {{_i}}Relative sizing{{/i}}

      +
      +
      + + + + + + +
      + 
       <input class="input-mini" type="text">
 <input class="input-small" type="text">
@@ -1041,68 +1044,68 @@
 <input class="input-xlarge" type="text">
 <input class="input-xxlarge" type="text">
      -

      - {{_i}}Heads up!{{/i}} In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. -

      +

      + {{_i}}Heads up!{{/i}} In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

      -

      {{_i}}Grid sizing{{/i}}

      -

      {{_i}}Use .span1 to .span12 for inputs that match the same sizes of the grid columns.{{/i}}

      -
      -
      - - - - - - -
      -
      +

      {{_i}}Grid sizing{{/i}}

      +

      {{_i}}Use .span1 to .span12 for inputs that match the same sizes of the grid columns.{{/i}}

      +
      +
      + + + + + + +
      + 
       <input class="span1" type="text">
 <input class="span2" type="text">
 <input class="span3" type="text">
      -

      {{_i}}For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}

      -
      -
      - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      +

      {{_i}}For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}

      +
      +
      + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      + 
       <div class="controls controls-row">
   <input class="span4" type="text" placeholder=".span4">
@@ -1110,23 +1113,23 @@
 </div>
      -

      {{_i}}Uneditable inputs{{/i}}

      -

      {{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}

      -
      - Some value here -
      +

      {{_i}}Uneditable inputs{{/i}}

      +

      {{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}

      +
      + Some value here + 
         <span class="input-xlarge uneditable-input">Some value here</span>
      -

      {{_i}}Form actions{{/i}}

      -

      {{_i}}End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.{{/i}}

      -
      -
      - - -
      -
      +

      {{_i}}Form actions{{/i}}

      +

      {{_i}}End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.{{/i}}

      +
      +
      + + +
      + 
       <div class="form-actions">
   <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
@@ -1134,76 +1137,76 @@
 </div>
      -

      {{_i}}Help text{{/i}}

      -

      {{_i}}Inline and block level support for help text that appears around form controls.{{/i}}

      -

      {{_i}}Inline help{{/i}}

      -
      - Inline help text -
      +

      {{_i}}Help text{{/i}}

      +

      {{_i}}Inline and block level support for help text that appears around form controls.{{/i}}

      +

      {{_i}}Inline help{{/i}}

      +
      + Inline help text + 
       <span class="help-inline">Inline help text</span>
      -

      {{_i}}Block help{{/i}}

      -
      - - A longer block of help text that breaks onto a new line and may extend beyond one line. -
      +

      {{_i}}Block help{{/i}}

      +
      + + A longer block of help text that breaks onto a new line and may extend beyond one line. + 
       <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
      -
      +
      -

      {{_i}}Form control states{{/i}}

      -

      {{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}

      +

      {{_i}}Form control states{{/i}}

      +

      {{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}

      -

      {{_i}}Input focus{{/i}}

      -

      {{_i}}We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.{{/i}}

      -
      - -
      +

      {{_i}}Input focus{{/i}}

      +

      {{_i}}We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.{{/i}}

      +
      + + 
       <input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
      -

      {{_i}}Disabled inputs{{/i}}

      -

      {{_i}}Add the disabled attribute on an input to prevent user input and trigger a slightly different look.{{/i}}

      -
      - -
      +

      {{_i}}Disabled inputs{{/i}}

      +

      {{_i}}Add the disabled attribute on an input to prevent user input and trigger a slightly different look.{{/i}}

      +
      + + 
       <input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here...{{/i}}" disabled>
      -

      {{_i}}Validation states{{/i}}

      -

      {{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}

      +

      {{_i}}Validation states{{/i}}

      +

      {{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}

      -
      -
      - -
      - - {{_i}}Something may have gone wrong{{/i}} + +
      + +
      + + {{_i}}Something may have gone wrong{{/i}} +
      -
      -
      - -
      - - {{_i}}Please correct the error{{/i}} +
      + +
      + + {{_i}}Please correct the error{{/i}} +
      -
      -
      - -
      - - {{_i}}Woohoo!{{/i}} +
      + +
      + + {{_i}}Woohoo!{{/i}} +
      -
      - + 
       <div class="control-group warning">
   <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
@@ -1228,133 +1231,133 @@
 </div>
      -
      +
      - -
      -
      -

      {{_i}}Buttons{{/i}}

      -
      + +
      +
      +

      {{_i}}Buttons{{/i}}

      +
      -

      Default buttons

      -

      {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Button{{/i}}{{_i}}class=""{{/i}}{{_i}}Description{{/i}}
      btn{{_i}}Standard gray button with gradient{{/i}}
      btn btn-primary{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
      btn btn-info{{_i}}Used as an alternative to the default styles{{/i}}
      btn btn-success{{_i}}Indicates a successful or positive action{{/i}}
      btn btn-warning{{_i}}Indicates caution should be taken with this action{{/i}}
      btn btn-danger{{_i}}Indicates a dangerous or potentially negative action{{/i}}
      btn btn-inverse{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}
      +

      Default buttons

      +

      {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Button{{/i}}{{_i}}class=""{{/i}}{{_i}}Description{{/i}}
      btn{{_i}}Standard gray button with gradient{{/i}}
      btn btn-primary{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
      btn btn-info{{_i}}Used as an alternative to the default styles{{/i}}
      btn btn-success{{_i}}Indicates a successful or positive action{{/i}}
      btn btn-warning{{_i}}Indicates caution should be taken with this action{{/i}}
      btn btn-danger{{_i}}Indicates a dangerous or potentially negative action{{/i}}
      btn btn-inverse{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}
      -

      {{_i}}Cross browser compatibility{{/i}}

      -

      {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}

      +

      {{_i}}Cross browser compatibility{{/i}}

      +

      {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}

      -
      +
      -

      {{_i}}Button sizes{{/i}}

      -

      {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}

      -

      - - -

      -

      - - -

      -

      - - -

      +

      {{_i}}Button sizes{{/i}}

      +

      {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}

      +

      + + +

      +

      + + +

      +

      + + +

      -
      +
      -

      {{_i}}Disabled state{{/i}}

      -

      {{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}

      +

      {{_i}}Disabled state{{/i}}

      +

      {{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}

      -

      Anchor element

      -

      {{_i}}Add the .disabled class to <a> buttons.{{/i}}

      -

      - {{_i}}Primary link{{/i}} - {{_i}}Link{{/i}} -

      +

      Anchor element

      +

      {{_i}}Add the .disabled class to <a> buttons.{{/i}}

      +

      + {{_i}}Primary link{{/i}} + {{_i}}Link{{/i}} + 

       <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
 <a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
      -

      - {{_i}}Heads up!{{/i}} - {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.{{/i}} -

      +

      + {{_i}}Heads up!{{/i}} + {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.{{/i}} +

      -

      Button element

      -

      {{_i}}Add the disabled attribute to <button> buttons.{{/i}}

      -

      - - -

      +

      Button element

      +

      {{_i}}Add the disabled attribute to <button> buttons.{{/i}}

      +

      + + + 

       <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
 <button type="button" class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
      -
      +
      -

      {{_i}}One class, multiple tags{{/i}}

      -

      {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}

      -
      - {{_i}}Link{{/i}} - - - -
      +

      {{_i}}One class, multiple tags{{/i}}

      +

      {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}

      +
      + {{_i}}Link{{/i}} + + + + 
       <a class="btn" href="">{{_i}}Link{{/i}}</a>
 <button class="btn" type="submit">
@@ -1365,246 +1368,248 @@
 <input class="btn" type="submit"
          value="{{_i}}Submit{{/i}}">
      -

      {{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}

      +

      {{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}

      -
      +
      - -
      -
      -

      {{_i}}Icons Graciously provided by Glyphicons{{/i}}

      -
      + +
      +
      +

      {{_i}}Icons Graciously provided by Glyphicons{{/i}}

      +
      -

      {{_i}}Icon glyphs{{/i}}

      -

      {{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.{{/i}}

      -
        -
      • icon-glass
        • -
      • icon-music
        • -
      • icon-search
        • -
      • icon-envelope
        • -
      • icon-heart
        • -
      • icon-star
        • -
      • icon-star-empty
        • -
      • icon-user
        • -
      • icon-film
        • -
      • icon-th-large
        • -
      • icon-th
        • -
      • icon-th-list
        • -
      • icon-ok
        • -
      • icon-remove
        • -
      • icon-zoom-in
        • -
      • icon-zoom-out
        • -
      • icon-off
        • -
      • icon-signal
        • -
      • icon-cog
        • -
      • icon-trash
        • -
      • icon-home
        • -
      • icon-file
        • -
      • icon-time
        • -
      • icon-road
        • -
      • icon-download-alt
        • -
      • icon-download
        • -
      • icon-upload
        • -
      • icon-inbox
        • +

        {{_i}}Icon glyphs{{/i}}

        +

        {{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.{{/i}}

        +
          +
        • icon-glass
          • +
        • icon-music
          • +
        • icon-search
          • +
        • icon-envelope
          • +
        • icon-heart
          • +
        • icon-star
          • +
        • icon-star-empty
          • +
        • icon-user
          • +
        • icon-film
          • +
        • icon-th-large
          • +
        • icon-th
          • +
        • icon-th-list
          • +
        • icon-ok
          • +
        • icon-remove
          • +
        • icon-zoom-in
          • +
        • icon-zoom-out
          • +
        • icon-off
          • +
        • icon-signal
          • +
        • icon-cog
          • +
        • icon-trash
          • +
        • icon-home
          • +
        • icon-file
          • +
        • icon-time
          • +
        • icon-road
          • +
        • icon-download-alt
          • +
        • icon-download
          • +
        • icon-upload
          • +
        • icon-inbox
          • -
        • icon-play-circle
          • -
        • icon-repeat
          • -
        • icon-refresh
          • -
        • icon-list-alt
          • -
        • icon-lock
          • -
        • icon-flag
          • -
        • icon-headphones
          • -
        • icon-volume-off
          • -
        • icon-volume-down
          • -
        • icon-volume-up
          • -
        • icon-qrcode
          • -
        • icon-barcode
          • -
        • icon-tag
          • -
        • icon-tags
          • -
        • icon-book
          • -
        • icon-bookmark
          • -
        • icon-print
          • -
        • icon-camera
          • -
        • icon-font
          • -
        • icon-bold
          • -
        • icon-italic
          • -
        • icon-text-height
          • -
        • icon-text-width
          • -
        • icon-align-left
          • -
        • icon-align-center
          • -
        • icon-align-right
          • -
        • icon-align-justify
          • -
        • icon-list
          • +
        • icon-play-circle
          • +
        • icon-repeat
          • +
        • icon-refresh
          • +
        • icon-list-alt
          • +
        • icon-lock
          • +
        • icon-flag
          • +
        • icon-headphones
          • +
        • icon-volume-off
          • +
        • icon-volume-down
          • +
        • icon-volume-up
          • +
        • icon-qrcode
          • +
        • icon-barcode
          • +
        • icon-tag
          • +
        • icon-tags
          • +
        • icon-book
          • +
        • icon-bookmark
          • +
        • icon-print
          • +
        • icon-camera
          • +
        • icon-font
          • +
        • icon-bold
          • +
        • icon-italic
          • +
        • icon-text-height
          • +
        • icon-text-width
          • +
        • icon-align-left
          • +
        • icon-align-center
          • +
        • icon-align-right
          • +
        • icon-align-justify
          • +
        • icon-list
          • -
        • icon-indent-left
          • -
        • icon-indent-right
          • -
        • icon-facetime-video
          • -
        • icon-picture
          • -
        • icon-pencil
          • -
        • icon-map-marker
          • -
        • icon-adjust
          • -
        • icon-tint
          • -
        • icon-edit
          • -
        • icon-share
          • -
        • icon-check
          • -
        • icon-move
          • -
        • icon-step-backward
          • -
        • icon-fast-backward
          • -
        • icon-backward
          • -
        • icon-play
          • -
        • icon-pause
          • -
        • icon-stop
          • -
        • icon-forward
          • -
        • icon-fast-forward
          • -
        • icon-step-forward
          • -
        • icon-eject
          • -
        • icon-chevron-left
          • -
        • icon-chevron-right
          • -
        • icon-plus-sign
          • -
        • icon-minus-sign
          • -
        • icon-remove-sign
          • -
        • icon-ok-sign
          • +
        • icon-indent-left
          • +
        • icon-indent-right
          • +
        • icon-facetime-video
          • +
        • icon-picture
          • +
        • icon-pencil
          • +
        • icon-map-marker
          • +
        • icon-adjust
          • +
        • icon-tint
          • +
        • icon-edit
          • +
        • icon-share
          • +
        • icon-check
          • +
        • icon-move
          • +
        • icon-step-backward
          • +
        • icon-fast-backward
          • +
        • icon-backward
          • +
        • icon-play
          • +
        • icon-pause
          • +
        • icon-stop
          • +
        • icon-forward
          • +
        • icon-fast-forward
          • +
        • icon-step-forward
          • +
        • icon-eject
          • +
        • icon-chevron-left
          • +
        • icon-chevron-right
          • +
        • icon-plus-sign
          • +
        • icon-minus-sign
          • +
        • icon-remove-sign
          • +
        • icon-ok-sign
          • -
        • icon-question-sign
          • -
        • icon-info-sign
          • -
        • icon-screenshot
          • -
        • icon-remove-circle
          • -
        • icon-ok-circle
          • -
        • icon-ban-circle
          • -
        • icon-arrow-left
          • -
        • icon-arrow-right
          • -
        • icon-arrow-up
          • -
        • icon-arrow-down
          • -
        • icon-share-alt
          • -
        • icon-resize-full
          • -
        • icon-resize-small
          • -
        • icon-plus
          • -
        • icon-minus
          • -
        • icon-asterisk
          • -
        • icon-exclamation-sign
          • -
        • icon-gift
          • -
        • icon-leaf
          • -
        • icon-fire
          • -
        • icon-eye-open
          • -
        • icon-eye-close
          • -
        • icon-warning-sign
          • -
        • icon-plane
          • -
        • icon-calendar
          • -
        • icon-random
          • -
        • icon-comment
          • -
        • icon-magnet
          • +
        • icon-question-sign
          • +
        • icon-info-sign
          • +
        • icon-screenshot
          • +
        • icon-remove-circle
          • +
        • icon-ok-circle
          • +
        • icon-ban-circle
          • +
        • icon-arrow-left
          • +
        • icon-arrow-right
          • +
        • icon-arrow-up
          • +
        • icon-arrow-down
          • +
        • icon-share-alt
          • +
        • icon-resize-full
          • +
        • icon-resize-small
          • +
        • icon-plus
          • +
        • icon-minus
          • +
        • icon-asterisk
          • +
        • icon-exclamation-sign
          • +
        • icon-gift
          • +
        • icon-leaf
          • +
        • icon-fire
          • +
        • icon-eye-open
          • +
        • icon-eye-close
          • +
        • icon-warning-sign
          • +
        • icon-plane
          • +
        • icon-calendar
          • +
        • icon-random
          • +
        • icon-comment
          • +
        • icon-magnet
          • -
        • icon-chevron-up
          • -
        • icon-chevron-down
          • -
        • icon-retweet
          • -
        • icon-shopping-cart
          • -
        • icon-folder-close
          • -
        • icon-folder-open
          • -
        • icon-resize-vertical
          • -
        • icon-resize-horizontal
          • -
        • icon-hdd
          • -
        • icon-bullhorn
          • -
        • icon-bell
          • -
        • icon-certificate
          • -
        • icon-thumbs-up
          • -
        • icon-thumbs-down
          • -
        • icon-hand-right
          • -
        • icon-hand-left
          • -
        • icon-hand-up
          • -
        • icon-hand-down
          • -
        • icon-circle-arrow-right
          • -
        • icon-circle-arrow-left
          • -
        • icon-circle-arrow-up
          • -
        • icon-circle-arrow-down
          • -
        • icon-globe
          • -
        • icon-wrench
          • -
        • icon-tasks
          • -
        • icon-filter
          • -
        • icon-briefcase
          • -
        • icon-fullscreen
          • -
        +
      • icon-chevron-up
        • +
      • icon-chevron-down
        • +
      • icon-retweet
        • +
      • icon-shopping-cart
        • +
      • icon-folder-close
        • +
      • icon-folder-open
        • +
      • icon-resize-vertical
        • +
      • icon-resize-horizontal
        • +
      • icon-hdd
        • +
      • icon-bullhorn
        • +
      • icon-bell
        • +
      • icon-certificate
        • +
      • icon-thumbs-up
        • +
      • icon-thumbs-down
        • +
      • icon-hand-right
        • +
      • icon-hand-left
        • +
      • icon-hand-up
        • +
      • icon-hand-down
        • +
      • icon-circle-arrow-right
        • +
      • icon-circle-arrow-left
        • +
      • icon-circle-arrow-up
        • +
      • icon-circle-arrow-down
        • +
      • icon-globe
        • +
      • icon-wrench
        • +
      • icon-tasks
        • +
      • icon-filter
        • +
      • icon-briefcase
        • +
      • icon-fullscreen
        • +
      -

      Glyphicons attribution

      -

      {{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}

      +

      Glyphicons attribution

      +

      {{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}

      -
      +
      -

      {{_i}}How to use{{/i}}

      -

      {{_i}}All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:{{/i}}

      +

      {{_i}}How to use{{/i}}

      +

      {{_i}}All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:{{/i}}

       <i class="icon-search"></i>
      -

      {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}

      +

      {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}

       <i class="icon-search icon-white"></i>
      -

      - {{_i}}Heads up!{{/i}} - {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}} -

      +

      + {{_i}}Heads up!{{/i}} + {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}} +

      -
      +
      -

      {{_i}}Icon examples{{/i}}

      -

      {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

      +

      {{_i}}Icon examples{{/i}}

      +

      {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

      -

      {{_i}}Buttons{{/i}}

      -
      -
      -
      - - - - -
      -
      - {{_i}}User{{/i}} - - -
      -
      -
      {{! /bs-docs-example }} - -

      {{_i}}Navigation{{/i}}

      -
      -
      - -
      {{! /well }} -
      {{! /bs-docs-example }} - -

      {{_i}}Form fields{{/i}}

      -
      -
      - -
      -
      - +

      {{_i}}Buttons{{/i}}

      +
      +
      +
      + + + + +
      +
      + {{_i}}User{{/i}} + +
      -
      - +
      {{! /bs-docs-example }} -
      +

      {{_i}}Navigation{{/i}}

      +
      +
      + +
      {{! /well }} +
      {{! /bs-docs-example }} + +

      {{_i}}Form fields{{/i}}

      +
      +
      + +
      +
      + +
      +
      +
      +
      + +
      -
      {{! /span9 }} -
      {{! row}} +
      {{! /span9 }} +
      {{! row}} + +
      {{! /container }} diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 450433d3b2..c2005dbc62 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1,57 +1,59 @@
      -

      {{_i}}Components{{/i}}

      -

      {{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}

      +
      +

      {{_i}}Components{{/i}}

      +

      {{_i}}Dozens of reusable components built to provide navigation, alerts, popovers, and more.{{/i}}

      +
      +
      - -
      -
      - -
      -
      + +
      +
      + +
      +
      - - + - -
      -
      -

      {{_i}}Button groups{{/i}}

      -
      - -

      {{_i}}Examples{{/i}}

      -

      {{_i}}Two basic options, along with two more specific variations.{{/i}}

      - -

      {{_i}}Single button group{{/i}}

      -

      {{_i}}Wrap a series of buttons with .btn in .btn-group.{{/i}}

      -
      -
      - - - + +
      +
      +

      {{_i}}Button groups{{/i}}

      +
      + +

      {{_i}}Examples{{/i}}

      +

      {{_i}}Two basic options, along with two more specific variations.{{/i}}

      + +

      {{_i}}Single button group{{/i}}

      +

      {{_i}}Wrap a series of buttons with .btn in .btn-group.{{/i}}

      +
      +
      + + + +
      - 
       <div class="btn-group">
   <button class="btn">1</button>
@@ -141,26 +143,26 @@
 </div>
      -

      {{_i}}Multiple button groups{{/i}}

      -

      {{_i}}Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.{{/i}}

      -
      -
      -
      - - - - -
      -
      - - - -
      -
      - +

      {{_i}}Multiple button groups{{/i}}

      +

      {{_i}}Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.{{/i}}

      +
      +
      +
      + + + + +
      +
      + + + +
      +
      + +
      - 
       <div class="btn-toolbar">
   <div class="btn-group">
@@ -169,16 +171,16 @@
 </div>
      -

      {{_i}}Vertical button groups{{/i}}

      -

      {{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}

      -
      -
      - - - - +

      {{_i}}Vertical button groups{{/i}}

      +

      {{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}

      +
      +
      + + + + +
      - 
       <div class="btn-group btn-group-vertical">
   ...
@@ -186,102 +188,102 @@
      -
      +
      -

      {{_i}}Checkbox and radio flavors{{/i}}

      -

      {{_i}}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 the Javascript docs for that.{{/i}}

      +

      {{_i}}Checkbox and radio flavors{{/i}}

      +

      {{_i}}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 the Javascript docs for that.{{/i}}

      -

      {{_i}}Dropdowns in button groups{{/i}}

      -

      {{_i}}Heads up!{{/i}} {{_i}}Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.{{/i}}

      -
      +

      {{_i}}Dropdowns in button groups{{/i}}

      +

      {{_i}}Heads up!{{/i}} {{_i}}Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.{{/i}}

      + - -
      -
      -

      {{_i}}Button dropdown menus{{/i}}

      -
      + +
      +
      +

      {{_i}}Button dropdown menus{{/i}}

      +
      -

      {{_i}}Overview and examples{{/i}}

      -

      {{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}

      -
      -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      -
      {{! /example }} +

      {{_i}}Overview and examples{{/i}}

      +

      {{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}

      +
      +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      +
      {{! /example }} 
       <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -294,134 +296,134 @@
 </div>
      -

      {{_i}}Works with all button sizes{{/i}}

      -

      {{_i}}Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.{{/i}}

      -
      -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      -
      {{! /example }} +

      {{_i}}Works with all button sizes{{/i}}

      +

      {{_i}}Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.{{/i}}

      +
      +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      +
      {{! /example }} -

      {{_i}}Requires javascript{{/i}}

      -

      {{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}

      -

      {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}

      +

      {{_i}}Requires javascript{{/i}}

      +

      {{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}

      +

      {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}

      -
      +
      -

      {{_i}}Split button dropdowns{{/i}}

      -

      {{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

      -
      -
      -
      - - - -
      -
      - - - -
      -
      - - - -
      -
      - - - -
      -
      - - - -
      -
      - - - -
      -
      - - - -
      -
      -
      {{! /example }} +

      {{_i}}Split button dropdowns{{/i}}

      +

      {{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

      +
      +
      +
      + + + +
      +
      + + + +
      +
      + + + +
      +
      + + + +
      +
      + + + +
      +
      + + + +
      +
      + + + +
      +
      +
      {{! /example }} 
       <div class="btn-group">
   <button class="btn">{{_i}}Action{{/i}}</button>
@@ -434,49 +436,49 @@
 </div>
      -

      {{_i}}Sizes{{/i}}

      -

      {{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}

      -
      -
      -
      - - - -
      -
      -
      -
      - - - -
      -
      -
      -
      - - - -
      -
      -
      {{! /example }} +

      {{_i}}Sizes{{/i}}

      +

      {{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}

      +
      +
      +
      + + + +
      +
      +
      +
      + + + +
      +
      +
      +
      + + + +
      +
      +
      {{! /example }} 
       <div class="btn-group">
   <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
@@ -489,34 +491,34 @@
 </div>
      -

      {{_i}}Dropup menus{{/i}}

      -

      {{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}

      -
      -
      -
      - - - -
      -
      - - - -
      -
      -
      {{! /example }} +

      {{_i}}Dropup menus{{/i}}

      +

      {{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}

      +
      +
      +
      + + + +
      +
      + + + +
      +
      +
      {{! /example }} 
       <div class="btn-group dropup">
   <button class="btn">{{_i}}Dropup{{/i}}</button>
@@ -529,29 +531,29 @@
 </div>
      -
      +
      - - - - + - - - -
      -
      -

      {{_i}}Pagination{{/i}} {{_i}}Two options for paging through content{{/i}}

      -
      - -

      {{_i}}Standard pagination{{/i}}

      -

      {{_i}}Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}

      -
      - 
       <div class="pagination">
   <ul>
@@ -1291,26 +1293,26 @@
      -
      +
      -

      {{_i}}Options{{/i}}

      +

      {{_i}}Options{{/i}}

      -

      {{_i}}Disabled and active states{{/i}}

      -

      {{_i}}Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.{{/i}}

      -
      - 
       <div class="pagination ">
   <ul>
@@ -1321,39 +1323,39 @@
 </div>
      -

      {{_i}}Alignment{{/i}}

      -

      {{_i}}Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}

      -
      - 
       <div class="pagination pagination-centered">
   ...
 </div>
      -
      - 
       <div class="pagination pagination-right">
   ...
@@ -1361,20 +1363,20 @@
      -
      +
      -

      {{_i}}Pager{{/i}}

      -

      {{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}

      +

      {{_i}}Pager{{/i}}

      +

      {{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}

      -

      {{_i}}Default example{{/i}}

      -

      {{_i}}By default, the pager centers links.{{/i}}

      -
      - -
      +

      {{_i}}Default example{{/i}}

      +

      {{_i}}By default, the pager centers links.{{/i}}

      +
      + + 
       <ul class="pager">
   <li><a href="#">{{_i}}Previous{{/i}}</a></li>
@@ -1382,14 +1384,14 @@
 </ul>
      -

      {{_i}}Aligned links{{/i}}

      -

      {{_i}}Alternatively, you can align each link to the sides:{{/i}}

      -
      - -
      +

      {{_i}}Aligned links{{/i}}

      +

      {{_i}}Alternatively, you can align each link to the sides:{{/i}}

      +
      + + 
       <ul class="pager">
   <li class="previous">
@@ -1401,14 +1403,14 @@
 </ul>
      -

      {{_i}}Optional disabled state{{/i}}

      -

      {{_i}}Pager links also use the general .disabled utility class from the pagination.{{/i}}

      -
      - -
      +

      {{_i}}Optional disabled state{{/i}}

      +

      {{_i}}Pager links also use the general .disabled utility class from the pagination.{{/i}}

      +
      + + 
       <ul class="pager">
   <li class="previous disabled">
@@ -1418,187 +1420,175 @@
 </ul>
      -
      + - -
      -
      -

      {{_i}}Inline labels{{/i}} {{_i}}Label and annotate text{{/i}}

      -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Labels{{/i}}{{_i}}Markup{{/i}}
      - {{_i}}Default{{/i}} - - <span class="label">{{_i}}Default{{/i}}</span> -
      - {{_i}}Success{{/i}} - - <span class="label label-success">{{_i}}Success{{/i}}</span> -
      - {{_i}}Warning{{/i}} - - <span class="label label-warning">{{_i}}Warning{{/i}}</span> -
      - {{_i}}Important{{/i}} - - <span class="label label-important">{{_i}}Important{{/i}}</span> -
      - {{_i}}Info{{/i}} - - <span class="label label-info">{{_i}}Info{{/i}}</span> -
      - {{_i}}Inverse{{/i}} - - <span class="label label-inverse">{{_i}}Inverse{{/i}}</span> -
      -
      - - - - -
      -
      -

      {{_i}}Badges{{/i}} {{_i}}Indicators and unread counts{{/i}}

      -
      - -

      About

      -

      {{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}

      - -

      Available classes

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Name{{/i}}{{_i}}Example{{/i}}{{_i}}Markup{{/i}}
      - {{_i}}Default{{/i}} - - 1 - - <span class="badge">1</span> -
      - {{_i}}Success{{/i}} - - 2 - - <span class="badge badge-success">2</span> -
      - {{_i}}Warning{{/i}} - - 4 - - <span class="badge badge-warning">4</span> -
      - {{_i}}Important{{/i}} - - 6 - - <span class="badge badge-important">6</span> -
      - {{_i}}Info{{/i}} - - 8 - - <span class="badge badge-info">8</span> -
      - {{_i}}Inverse{{/i}} - - 10 - - <span class="badge badge-inverse">10</span> -
      - -
      - - - - -
      -
      -

      {{_i}}Typographic components{{/i}} {{_i}}Page header and hero unit for segmenting content{{/i}}

      -
      - -

      {{_i}}Hero unit{{/i}}

      -

      {{_i}}A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}

      -
      -
      -

      {{_i}}Hello, world!{{/i}}

      -

      {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}

      -

      {{_i}}Learn more{{/i}}

      + +
      +
      +

      {{_i}}Labels and badges{{/i}}

      +
      +

      {{_i}}Labels{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Labels{{/i}}{{_i}}Markup{{/i}}
      + {{_i}}Default{{/i}} + + <span class="label">{{_i}}Default{{/i}}</span> +
      + {{_i}}Success{{/i}} + + <span class="label label-success">{{_i}}Success{{/i}}</span> +
      + {{_i}}Warning{{/i}} + + <span class="label label-warning">{{_i}}Warning{{/i}}</span> +
      + {{_i}}Important{{/i}} + + <span class="label label-important">{{_i}}Important{{/i}}</span> +
      + {{_i}}Info{{/i}} + + <span class="label label-info">{{_i}}Info{{/i}}</span> +
      + {{_i}}Inverse{{/i}} + + <span class="label label-inverse">{{_i}}Inverse{{/i}}</span> +
      + +

      {{_i}}Badges{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Name{{/i}}{{_i}}Example{{/i}}{{_i}}Markup{{/i}}
      + {{_i}}Default{{/i}} + + 1 + + <span class="badge">1</span> +
      + {{_i}}Success{{/i}} + + 2 + + <span class="badge badge-success">2</span> +
      + {{_i}}Warning{{/i}} + + 4 + + <span class="badge badge-warning">4</span> +
      + {{_i}}Important{{/i}} + + 6 + + <span class="badge badge-important">6</span> +
      + {{_i}}Info{{/i}} + + 8 + + <span class="badge badge-info">8</span> +
      + {{_i}}Inverse{{/i}} + + 10 + + <span class="badge badge-inverse">10</span> +
      + +
      + + + + +
      +
      +

      {{_i}}Typographic components{{/i}}

      +
      + +

      {{_i}}Hero unit{{/i}}

      +

      {{_i}}A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.{{/i}}

      +
      +
      +

      {{_i}}Hello, world!{{/i}}

      +

      {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}

      +

      {{_i}}Learn more{{/i}}

      +
      - 
       <div class="hero-unit">
   <h1>{{_i}}Heading{{/i}}</h1>
@@ -1611,105 +1601,105 @@
 </div>
      -

      {{_i}}Page header{{/i}}

      -

      {{_i}}A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}

      -
      -
      -

      {{_i}}Example page header{{/i}} {{_i}}Subtext for header{{/i}}

      +

      {{_i}}Page header{{/i}}

      +

      {{_i}}A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}

      +
      +
      +

      {{_i}}Example page header{{/i}} {{_i}}Subtext for header{{/i}}

      +
      - 
       <div class="page-header">
   <h1>{{_i}}Example page header{{/i}}</h1>
 </div>
      -
      + - -
      -
      -

      {{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}

      -
      + +
      +
      +

      {{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}

      +
      -

      {{_i}}Default thumbnails{{/i}}

      -

      {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

      -
      - -
      +

      {{_i}}Default thumbnails{{/i}}

      +

      {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

      +
      + +
      -

      {{_i}}Highly customizable{{/i}}

      -

      {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}

      -
      -
        -
      • -
        - -
        -

        {{_i}}Thumbnail label{{/i}}

        -

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        -

        {{_i}}Action{{/i}} {{_i}}Action{{/i}}

        +

        {{_i}}Highly customizable{{/i}}

        +

        {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}

        +
        +
          +
        • +
          + +
          +

          {{_i}}Thumbnail label{{/i}}

          +

          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

          +

          {{_i}}Action{{/i}} {{_i}}Action{{/i}}

          +
          -
        -
        • -
      • -
        - -
        -

        {{_i}}Thumbnail label{{/i}}

        -

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        -

        {{_i}}Action{{/i}} {{_i}}Action{{/i}}

        +
        • +
      • +
        + +
        +

        {{_i}}Thumbnail label{{/i}}

        +

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        +

        {{_i}}Action{{/i}} {{_i}}Action{{/i}}

        +
        -
      - -
    • -
      - -
      -

      {{_i}}Thumbnail label{{/i}}

      -

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      -

      {{_i}}Action{{/i}} {{_i}}Action{{/i}}

      +
      • +
    • +
      + +
      +

      {{_i}}Thumbnail label{{/i}}

      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      {{_i}}Action{{/i}} {{_i}}Action{{/i}}

      +
      -
      • - - -
      + + +
      -

      {{_i}}Why use thumbnails{{/i}}

      -

      {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

      +

      {{_i}}Why use thumbnails{{/i}}

      +

      {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

      -

      {{_i}}Simple, flexible markup{{/i}}

      -

      {{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}

      +

      {{_i}}Simple, flexible markup{{/i}}

      +

      {{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}

      -

      {{_i}}Uses grid column sizes{{/i}}

      -

      {{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

      +

      {{_i}}Uses grid column sizes{{/i}}

      +

      {{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

      -

      {{_i}}The markup{{/i}}

      -

      {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

      +

      {{_i}}Markup{{/i}}

      +

      {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

       <ul class="thumbnails">
   <li class="span4">
@@ -1720,7 +1710,7 @@
   ...
 </ul>
      -

      {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}

      +

      {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}

       <ul class="thumbnails">
   <li class="span4">
@@ -1734,65 +1724,55 @@
 </ul>
      -

      {{_i}}More examples{{/i}}

      -

      {{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

      - +

      {{_i}}More examples{{/i}}

      +

      {{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

      + - + - -
      -
      -

      {{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}

      -
      - -

      {{_i}}Default alert{{/i}}

      -

      {{_i}}Wrap any text and an optional dismiss button in .alert for a basic warning alert message.{{/i}}

      -
      -
      - - {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} + +
      +
      +

      {{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}

      +
      + +

      {{_i}}Default alert{{/i}}

      +

      {{_i}}Wrap any text and an optional dismiss button in .alert for a basic warning alert message.{{/i}}

      +
      +
      + + {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} +
      - 
       <div class="alert">
   <button type="button" class="close" data-dismiss="alert">×</button>
@@ -1800,32 +1780,32 @@
 </div>
      -

      {{_i}}Dismiss buttons{{/i}}

      -

      {{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}

      +

      {{_i}}Dismiss buttons{{/i}}

      +

      {{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}

       <a href="#" class="close" data-dismiss="alert">×</button>
      -

      {{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}

      +

      {{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}

       <button type="button" class="close" data-dismiss="alert">×</button>
      -

      {{_i}}Dismiss alerts via javascript{{/i}}

      -

      {{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}

      +

      {{_i}}Dismiss alerts via javascript{{/i}}

      +

      {{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}

      -
      +
      -

      {{_i}}Options{{/i}}

      -

      {{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.{{/i}}

      -
      -
      - -

      {{_i}}Warning!{{/i}}

      -

      {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      +

      {{_i}}Options{{/i}}

      +

      {{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.{{/i}}

      +
      +
      + +

      {{_i}}Warning!{{/i}}

      +

      {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      +
      - 
       <div class="alert alert-block">
   <a class="close" data-dismiss="alert" href="#">&times;</a>
@@ -1835,97 +1815,97 @@
      -
      +
      -

      {{_i}}Contextual alternatives{{/i}}

      -

      {{_i}}Add optional classes to change an alert's connotation.{{/i}}

      +

      {{_i}}Contextual alternatives{{/i}}

      +

      {{_i}}Add optional classes to change an alert's connotation.{{/i}}

      -

      {{_i}}Error or danger{{/i}}

      -
      -
      - - {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}} +

      {{_i}}Error or danger{{/i}}

      +
      +
      + + {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}} +
      - 
       <div class="alert alert-error">
   ...
 </div>
      -

      {{_i}}Success{{/i}}

      -
      -
      - - {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}} +

      {{_i}}Success{{/i}}

      +
      +
      + + {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}} +
      - 
       <div class="alert alert-success">
   ...
 </div>
      -

      {{_i}}Information{{/i}}

      -
      -
      - - {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}} +

      {{_i}}Information{{/i}}

      +
      +
      + + {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}} +
      - 
       <div class="alert alert-info">
   ...
 </div>
      -
      + - -
      -
      -

      {{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

      -
      - -

      {{_i}}Examples and markup{{/i}}

      - -

      {{_i}}Basic{{/i}}

      -

      {{_i}}Default progress bar with a vertical gradient.{{/i}}

      -
      -
      -
      + +
      +
      +

      {{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

      +
      + +

      {{_i}}Examples and markup{{/i}}

      + +

      {{_i}}Basic{{/i}}

      +

      {{_i}}Default progress bar with a vertical gradient.{{/i}}

      +
      +
      +
      +
      - 
       <div class="progress">
   <div class="bar" style="width: 60%;"></div>
 </div>
      -

      {{_i}}Striped{{/i}}

      -

      {{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}

      -
      -
      -
      +

      {{_i}}Striped{{/i}}

      +

      {{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}

      +
      +
      +
      +
      - 
       <div class="progress progress-striped">
   <div class="bar" style="width: 20%;"></div>
 </div>
      -

      {{_i}}Animated{{/i}}

      -

      {{_i}}Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.{{/i}}

      -
      -
      -
      +

      {{_i}}Animated{{/i}}

      +

      {{_i}}Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.{{/i}}

      +
      +
      +
      +
      - 
       <div class="progress progress-striped active">
   <div class="bar" style="width: 40%;"></div>
@@ -1933,27 +1913,27 @@
      -
      +
      -

      {{_i}}Options{{/i}}

      +

      {{_i}}Options{{/i}}

      -

      {{_i}}Additional colors{{/i}}

      -

      {{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}

      -
      -
      -
      +

      {{_i}}Additional colors{{/i}}

      +

      {{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}

      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      -
      -
      -
      -
      -
      -
      -
      -
      -
      - 
       <div class="progress progress-info">
   <div class="bar" style="width: 20%"></div>
@@ -1969,22 +1949,22 @@
 </div>
      -

      {{_i}}Striped bars{{/i}}

      -

      {{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}

      -
      -
      -
      +

      {{_i}}Striped bars{{/i}}

      +

      {{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}

      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      -
      -
      -
      -
      -
      -
      -
      -
      -
      - 
       <div class="progress progress-info progress-striped">
   <div class="bar" style="width: 20%"></div>
@@ -2001,74 +1981,74 @@
      -
      +
      -

      {{_i}}Browser support{{/i}}

      -

      {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}

      -

      {{_i}}Opera and IE do not support animations at this time.{{/i}}

      +

      {{_i}}Browser support{{/i}}

      +

      {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}

      +

      {{_i}}Opera and IE do not support animations at this time.{{/i}}

      -
      + - -
      -
      -

      {{_i}}Miscellaneous{{/i}} {{_i}}Lightweight utility components{{/i}}

      -
      - -

      {{_i}}Wells{{/i}}

      -

      {{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

      -
      -
      - {{_i}}Look, I'm in a well!{{/i}} + +
      +
      +

      {{_i}}Miscellaneous{{/i}} {{_i}}Lightweight utility components{{/i}}

      +
      + +

      {{_i}}Wells{{/i}}

      +

      {{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

      +
      +
      + {{_i}}Look, I'm in a well!{{/i}} +
      - 
       <div class="well">
   ...
 </div>
      -

      {{_i}}Optional classes{{/i}}

      -

      {{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}

      -
      -
      - {{_i}}Look, I'm in a well!{{/i}} +

      {{_i}}Optional classes{{/i}}

      +

      {{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}

      +
      +
      + {{_i}}Look, I'm in a well!{{/i}} +
      - 
       <div class="well well-large">
   ...
 </div>
      -
      -
      - {{_i}}Look, I'm in a well!{{/i}} +
      +
      + {{_i}}Look, I'm in a well!{{/i}} +
      - 
       <div class="well well-small">
   ...
 </div>
      -

      {{_i}}Close icon{{/i}}

      -

      {{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

      -
      -

      -
      +

      {{_i}}Close icon{{/i}}

      +

      {{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

      +
      +

      + 
      <button class="close">&times;</button>
      -

      {{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}

      +

      {{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}

      <a class="close" href="#">&times;</a>
      -

      {{_i}}Helper classes{{/i}}

      -

      {{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}

      +

      {{_i}}Helper classes{{/i}}

      +

      {{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}

      -

      {{_i}}.pull-left{{/i}}

      -

      {{_i}}Float an element left{{/i}}

      +

      {{_i}}.pull-left{{/i}}

      +

      {{_i}}Float an element left{{/i}}

       class="pull-left"
      @@ -2078,8 +2058,8 @@ class="pull-left" } -

      {{_i}}.pull-right{{/i}}

      -

      {{_i}}Float an element right{{/i}}

      +

      {{_i}}.pull-right{{/i}}

      +

      {{_i}}Float an element right{{/i}}

       class="pull-right"
      @@ -2089,8 +2069,8 @@ class="pull-right" } -

      {{_i}}.muted{{/i}}

      -

      {{_i}}Change an element's color to #999{{/i}}

      +

      {{_i}}.muted{{/i}}

      +

      {{_i}}Change an element's color to #999{{/i}}

       class="muted"
      @@ -2100,8 +2080,8 @@ class="muted" } -

      {{_i}}.clearfix{{/i}}

      -

      {{_i}}Clear the float on any element{{/i}}

      +

      {{_i}}.clearfix{{/i}}

      +

      {{_i}}Clear the float on any element{{/i}}

       class="clearfix"
      @@ -2119,9 +2099,11 @@ class="clearfix" } -
      + -
      {{! /span9 }} -
      {{! row}} + {{! /span9 }} + {{! row}} + +{{! /container }} diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index 2449ae8390..914d22a8e7 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -1,103 +1,108 @@
      -

      {{_i}}Extending Bootstrap{{/i}}

      -

      {{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}

      +
      +

      {{_i}}Extending Bootstrap{{/i}}

      +

      {{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}

      +
      +
      - -
      -
      - -
      -
      + +
      +
      + +
      +
      - -
      -
      -

      {{_i}}Built with LESS{{/i}}

      -
      + +
      +
      +

      {{_i}}Built with LESS{{/i}}

      +
      -

      {{_i}}Why LESS?{{/i}}

      -

      {{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

      +

      {{_i}}Why LESS?{{/i}}

      +

      {{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

      -

      {{_i}}What's included?{{/i}}

      -

      {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

      +

      {{_i}}What's included?{{/i}}

      +

      {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

      -

      {{_i}}Learn more{{/i}}

      - LESS CSS -

      {{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

      -
      +

      {{_i}}Learn more{{/i}}

      + LESS CSS +

      {{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

      +
      - -
      -
      -

      {{_i}}Compiling Bootstrap with LESS{{/i}}

      -
      -
      - {{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}} -
      + +
      +
      +

      {{_i}}Compiling Bootstrap with LESS{{/i}}

      +
      +
      + {{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}} +
      -

      {{_i}}Tools for compiling{{/i}}

      +

      {{_i}}Tools for compiling{{/i}}

      -

      {{_i}}Node with makefile{{/i}}

      -

      {{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}

      - 
      $ npm install -g less jshint recess uglify-js
      -

      {{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}

      -

      {{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}

      +

      {{_i}}Node with makefile{{/i}}

      +

      {{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}

      + 
      $ npm install -g less jshint recess uglify-js
      +

      {{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}

      +

      {{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}

      -

      {{_i}}Command line{{/i}}

      -

      {{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

      - 
      $ lessc ./less/bootstrap.less > bootstrap.css
      -

      {{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

      +

      {{_i}}Command line{{/i}}

      +

      {{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

      + 
      $ lessc ./less/bootstrap.less > bootstrap.css
      +

      {{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

      -

      {{_i}}Javascript{{/i}}

      -

      {{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}

      +

      {{_i}}Javascript{{/i}}

      +

      {{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}

       <link rel="stylesheet/less" href="/path/to/bootstrap.less">
 <script src="/path/to/less.js"></script>
      -

      {{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

      +

      {{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

      -

      {{_i}}Unofficial Mac app{{/i}}

      -

      {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}

      -

      {{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

      +

      {{_i}}Unofficial Mac app{{/i}}

      +

      {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}

      +

      {{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

      -

      {{_i}}More Mac apps{{/i}}

      -

      Crunch

      -

      {{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}

      -

      CodeKit

      -

      {{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

      -

      Simpless

      -

      {{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

      +

      {{_i}}More Mac apps{{/i}}

      +

      Crunch

      +

      {{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}

      +

      CodeKit

      +

      {{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

      +

      Simpless

      +

      {{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

      -
      +
      - -
      -
      -

      {{_i}}Use as static assets{{/i}}

      -
      -

      ...

      -
      + +
      +
      +

      {{_i}}Use as static assets{{/i}}

      +
      +

      ...

      +
      -
      {{! /span9 }} -
      {{! row}} +
      {{! /span9 }} +
      {{! row}} + +
      {{! /container }} diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 5e1407436c..c6a03ec0a0 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -1,10 +1,14 @@ +
      +

      {{_i}}Getting started{{/i}}

      {{_i}}Overview of the project, it's contents, and how to get started with a simple template.{{/i}}

      +
      +
        diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index e90df3d084..0243079596 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -1,11 +1,10 @@ -
      -

      Bootstrap

      Sleek, intuitive, and powerful front-end framework for faster and easier web development.

      {{_i}}Download Bootstrap{{/i}}

      + +
      {{! /container }} diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 4c25bb08b6..81ef75209d 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1,109 +1,112 @@
      -

      {{_i}}Javascript for Bootstrap{{/i}}

      -

      {{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}} +

      +

      {{_i}}Javascript for Bootstrap{{/i}}

      +

      {{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}} +

      +
      - -
      -
      - -
      -
      - - - - -
      -
      -

      {{_i}}Javascript in Bootstrap{{/i}}

      -
      - -

      {{_i}}Individual or compiled{{/i}}

      -

      {{_i}}If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.{{/i}}

      - -

      {{_i}}Data attributes{{/i}}

      -

      {{_i}}...{{/i}}

      - -

      {{_i}}Programmatic API{{/i}}

      -

      {{_i}}...{{/i}}

      - - - {{! Thought: consider porting much of the JS readme here? }} - -
      - - - - -
      -
      -

      {{_i}}Transitions{{/i}} bootstrap-transition.js

      -
      -

      {{_i}}About transitions{{/i}}

      -

      {{_i}}For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.{{/i}}

      -

      {{_i}}Use cases{{/i}}

      -

      {{_i}}A few examples of the transition plugin:{{/i}}

      -
      +
      +
      - -
      -
      -

      {{_i}}Modals{{/i}} bootstrap-modal.js

      -
      - - -

      {{_i}}Examples{{/i}}

      -

      {{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}

      - -

      {{_i}}Static example{{/i}}

      -

      {{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}

      -
      -
      -
      - -

      {{_i}}Modal header{{/i}}

      -
      -
      -

      {{_i}}One fine body…{{/i}}

      -
      -
      - {{_i}}Close{{/i}} - {{_i}}Save changes{{/i}} -
      + +
      +
      +

      {{_i}}Javascript in Bootstrap{{/i}}

      -
      {{! /example }} + +

      {{_i}}Individual or compiled{{/i}}

      +

      {{_i}}If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.{{/i}}

      + +

      {{_i}}Data attributes{{/i}}

      +

      {{_i}}...{{/i}}

      + +

      {{_i}}Programmatic API{{/i}}

      +

      {{_i}}...{{/i}}

      + + + {{! Thought: consider porting much of the JS readme here? }} + +
      + + + + +
      +
      +

      {{_i}}Transitions{{/i}} bootstrap-transition.js

      +
      +

      {{_i}}About transitions{{/i}}

      +

      {{_i}}For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.{{/i}}

      +

      {{_i}}Use cases{{/i}}

      +

      {{_i}}A few examples of the transition plugin:{{/i}}

      +
        +
      • {{_i}}Sliding or fading in modals{{/i}}
        • +
      • {{_i}}Fading out tabs{{/i}}
        • +
      • {{_i}}Fading out alerts{{/i}}
        • +
      • {{_i}}Sliding carousel panes{{/i}}
        • +
      + + {{! Ideas: include docs for .fade.in, .slide.in, etc }} +
      + + + + +
      +
      +

      {{_i}}Modals{{/i}} bootstrap-modal.js

      +
      + + +

      {{_i}}Examples{{/i}}

      +

      {{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}

      + +

      {{_i}}Static example{{/i}}

      +

      {{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}

      +
      +
      +
      + +

      {{_i}}Modal header{{/i}}

      +
      +
      +

      {{_i}}One fine body…{{/i}}

      +
      +
      + {{_i}}Close{{/i}} + {{_i}}Save changes{{/i}} +
      +
      +
      {{! /example }} 
       <div class="modal hide fade">
   <div class="modal-header">
@@ -120,43 +123,43 @@
 </div>
      -

      {{_i}}Live demo{{/i}}

      -

      {{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}

      - -
      +}) + + - - - -
      -
      -

      {{_i}}ScrollSpy{{/i}} bootstrap-scrollspy.js

      -
      + +
      +
      +

      {{_i}}ScrollSpy{{/i}} bootstrap-scrollspy.js

      +
      -

      {{_i}}Example in navbar{{/i}}

      -

      {{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.{{/i}}

      -
      -
      +

      {{_i}}Events{{/i}}

      + + + + + + + + + + + + + +
      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
      {{_i}}activate{{/i}}{{_i}}This event fires whenever a new item becomes activated by the scrollspy.{{/i}}
      +
      - -
      -
      -

      {{_i}}Togglable tabs{{/i}} bootstrap-tab.js

      -
      - - -

      {{_i}}Example tabs{{/i}}

      -

      {{_i}}Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.{{/i}}

      -
      - -
      -
      -

      Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

      -
      -
      -

      Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

      -
      - - + +
      +
      +

      {{_i}}Togglable tabs{{/i}} bootstrap-tab.js

      -
      {{! /example }} -
      +

      {{_i}}Example tabs{{/i}}

      +

      {{_i}}Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.{{/i}}

      +
      + +
      +
      +

      Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

      +
      +
      +

      Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

      +
      + + +
      +
      {{! /example }} -

      {{_i}}Usage{{/i}}

      -

      {{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}

      +
      + + +

      {{_i}}Usage{{/i}}

      +

      {{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}

       $('#myTab a').click(function (e) {
   e.preventDefault();
   $(this).tab('show');
 })
      -

      {{_i}}You can activate individual tabs in several ways:{{/i}}

      +

      {{_i}}You can activate individual tabs in several ways:{{/i}}

       $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
 $('#myTab a:first').tab('show'); // Select first tab
@@ -593,8 +597,8 @@ $('#myTab a:last').tab('show'); // Select last tab
 $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
      -

      {{_i}}Markup{{/i}}

      -

      {{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.{{/i}}

      +

      {{_i}}Markup{{/i}}

      +

      {{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.{{/i}}

       <ul class="nav nav-tabs">
   <li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
@@ -603,11 +607,11 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   <li><a href="#settings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li>
 </ul>
      -

      {{_i}}Methods{{/i}}

      -

      $().tab

      -

      - {{_i}}Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.{{/i}} -

      +

      {{_i}}Methods{{/i}}

      +

      $().tab

      +

      + {{_i}}Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.{{/i}} + 

       <ul class="nav nav-tabs" id="myTab">
   <li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li>
@@ -627,429 +631,432 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   $(function () {
     $('#myTab a:last').tab('show');
   })
-</script>
      +</script> + -

      {{_i}}Events{{/i}}

      - - - - - - - - - - - - - - - - - -
      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
      {{_i}}show{{/i}}{{_i}}This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
      {{_i}}shown{{/i}}{{_i}}This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
      +

      {{_i}}Events{{/i}}

      + + + + + + + + + + + + + + + + + +
      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
      {{_i}}show{{/i}}{{_i}}This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
      {{_i}}shown{{/i}}{{_i}}This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
       $('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
-})
      -
      +}) + + - -
      -
      -

      {{_i}}Tooltips{{/i}} bootstrap-tooltip.js

      -
      - - -

      {{_i}}Examples{{/i}}

      -

      {{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}

      -

      {{_i}}Hover over the links below to see tooltips:{{/i}}

      -
      -

      {{_i}}Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.{{/i}} -

      -
      {{! /example }} - -

      {{_i}}Four directions{{/i}}

      -
      - -
      {{! /example }} - - -
      - - -

      {{_i}}Usage{{/i}}

      -

      {{_i}}Trigger the tooltip via javascript:{{/i}}

      - 
      $('#example').tooltip({{_i}}options{{/i}})
      - -

      {{_i}}Options{{/i}}

      -

      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
      {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
      {{_i}}html{{/i}}{{_i}}boolean{{/i}}true{{_i}}Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
      {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'top'{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right
      {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}If a selector is provided, tooltip objects will be delegated to the specified targets.{{/i}}
      {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` tag isn't present{{/i}}
      {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how tooltip is triggered{{/i}} - hover | focus | manual
      {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 -

      {{_i}}delay showing and hiding the tooltip (ms) - does not apply to manual trigger type{{/i}}

      -

      {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

      -

      {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

      -
      -
      - {{_i}}Heads up!{{/i}} - {{_i}}Options for individual tooltips can alternatively be specified through the use of data attributes.{{/i}} -
      - -

      {{_i}}Markup{{/i}}

      -

      {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

      - 
      -    <a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
-
      - -

      {{_i}}Methods{{/i}}

      -

      $().tooltip({{_i}}options{{/i}})

      -

      {{_i}}Attaches a tooltip handler to an element collection.{{/i}}

      -

      .tooltip('show')

      -

      {{_i}}Reveals an element's tooltip.{{/i}}

      - 
      $('#element').tooltip('show')
      -

      .tooltip('hide')

      -

      {{_i}}Hides an element's tooltip.{{/i}}

      - 
      $('#element').tooltip('hide')
      -

      .tooltip('toggle')

      -

      {{_i}}Toggles an element's tooltip.{{/i}}

      - 
      $('#element').tooltip('toggle')
      -

      .tooltip('destroy')

      -

      {{_i}}Destroys an element's tooltip.{{/i}}

      - 
      $('#element').tooltip('destroy')
      -
      - - - - -
      -
      -

      {{_i}}Popovers{{/i}} bootstrap-popover.js

      -
      - -

      {{_i}}Examples{{/i}}

      -

      {{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.{{/i}}

      - -

      {{_i}}Static popover{{/i}}

      -

      {{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}

      -
      -
      -
      -

      Popover top

      -
      -

      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      -
      + +
      +
      +

      {{_i}}Tooltips{{/i}} bootstrap-tooltip.js

      -
      -
      -

      Popover right

      -
      -

      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      -
      -
      -
      -
      -

      Popover bottom

      -
      -

      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      -
      -
      - -
      -
      -

      Popover left

      -
      -

      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      -
      -
      - -
      -
      -

      {{_i}}No markup shown as popovers are generated from javascript and content within a data attribute.{{/i}}

      - -

      Live demo

      -
      - {{_i}}Hover for popover{{/i}} -
      - - -
      - - -

      {{_i}}Usage{{/i}}

      -

      {{_i}}Enable popovers via javascript:{{/i}}

      - 
      $('#example').popover({{_i}}options{{/i}})
      - -

      {{_i}}Options{{/i}}

      -

      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
      {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
      {{_i}}html{{/i}}{{_i}}boolean{{/i}}true{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
      {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'right'{{_i}}how to position the popover{{/i}} - top | bottom | left | right
      {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}
      {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how popover is triggered{{/i}} - hover | focus | manual
      {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` attribute isn't present{{/i}}
      {{_i}}content{{/i}}{{_i}}string | function{{/i}}''{{_i}}default content value if `data-content` attribute isn't present{{/i}}
      {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 -

      {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}

      -

      {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

      -

      {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

      -
      -
      - {{_i}}Heads up!{{/i}} - {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}} -
      - -

      {{_i}}Markup{{/i}}

      -

      {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

      - -

      {{_i}}Methods{{/i}}

      -

      $().popover({{_i}}options{{/i}})

      -

      {{_i}}Initializes popovers for an element collection.{{/i}}

      -

      .popover('show')

      -

      {{_i}}Reveals an elements popover.{{/i}}

      - 
      $('#element').popover('show')
      -

      .popover('hide')

      -

      {{_i}}Hides an elements popover.{{/i}}

      - 
      $('#element').popover('hide')
      -

      .popover('toggle')

      -

      {{_i}}Toggles an elements popover.{{/i}}

      - 
      $('#element').popover('toggle')
      -

      .popover('destroy')

      -

      {{_i}}Destroys an element's popover.{{/i}}

      - 
      $('#element').popover('destroy')
      -
      - - - - -
      -
      -

      {{_i}}Alert messages{{/i}} bootstrap-alert.js

      -
      - - -

      {{_i}}Example alerts{{/i}}

      -

      {{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}

      -
      -
      - - {{_i}}Holy guacamole!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} -
      -
      {{! /example }} - -
      -
      - -

      {{_i}}Oh snap! You got an error!{{/i}}

      -

      {{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}

      -

      - {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}} +

      {{_i}}Examples{{/i}}

      +

      {{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}

      +

      {{_i}}Hover over the links below to see tooltips:{{/i}}

      +
      +

      {{_i}}Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.{{/i}}

      +
      {{! /example }} + +

      {{_i}}Four directions{{/i}}

      +
      + +
      {{! /example }} + + +
      + + +

      {{_i}}Usage{{/i}}

      +

      {{_i}}Trigger the tooltip via javascript:{{/i}}

      +
      $('#example').tooltip({{_i}}options{{/i}})
      + +

      {{_i}}Options{{/i}}

      +

      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
      {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
      {{_i}}html{{/i}}{{_i}}boolean{{/i}}true{{_i}}Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
      {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'top'{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right
      {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}If a selector is provided, tooltip objects will be delegated to the specified targets.{{/i}}
      {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` tag isn't present{{/i}}
      {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how tooltip is triggered{{/i}} - hover | focus | manual
      {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 +

      {{_i}}delay showing and hiding the tooltip (ms) - does not apply to manual trigger type{{/i}}

      +

      {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

      +

      {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

      +
      +
      + {{_i}}Heads up!{{/i}} + {{_i}}Options for individual tooltips can alternatively be specified through the use of data attributes.{{/i}}
      -
      {{! /example }} + +

      {{_i}}Markup{{/i}}

      +

      {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

      +
      +<a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
+
      + +

      {{_i}}Methods{{/i}}

      +

      $().tooltip({{_i}}options{{/i}})

      +

      {{_i}}Attaches a tooltip handler to an element collection.{{/i}}

      +

      .tooltip('show')

      +

      {{_i}}Reveals an element's tooltip.{{/i}}

      + 
      $('#element').tooltip('show')
      +

      .tooltip('hide')

      +

      {{_i}}Hides an element's tooltip.{{/i}}

      + 
      $('#element').tooltip('hide')
      +

      .tooltip('toggle')

      +

      {{_i}}Toggles an element's tooltip.{{/i}}

      + 
      $('#element').tooltip('toggle')
      +

      .tooltip('destroy')

      +

      {{_i}}Destroys an element's tooltip.{{/i}}

      + 
      $('#element').tooltip('destroy')
      +
      -
      + + +
      +
      +

      {{_i}}Popovers{{/i}} bootstrap-popover.js

      +
      + +

      {{_i}}Examples{{/i}}

      +

      {{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.{{/i}}

      + +

      {{_i}}Static popover{{/i}}

      +

      {{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}

      +
      +
      +
      +

      Popover top

      +
      +

      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      +
      +
      + +
      +
      +

      Popover right

      +
      +

      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      +
      +
      + +
      +
      +

      Popover bottom

      +
      +

      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      +
      +
      + +
      +
      +

      Popover left

      +
      +

      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      +
      +
      + +
      +
      +

      {{_i}}No markup shown as popovers are generated from javascript and content within a data attribute.{{/i}}

      + +

      Live demo

      +
      + {{_i}}Hover for popover{{/i}} +
      -

      {{_i}}Usage{{/i}}

      -

      {{_i}}Enable dismissal of an alert via javascript:{{/i}}

      - 
      $(".alert").alert()
      - -

      {{_i}}Markup{{/i}}

      -

      {{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}

      - 
      <a class="close" data-dismiss="alert" href="#">&times;</a>
      - -

      {{_i}}Methods{{/i}}

      -

      $().alert()

      -

      {{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}

      -

      .alert('close')

      -

      {{_i}}Closes an alert.{{/i}}

      - 
      $(".alert").alert('close')
      +
      -

      {{_i}}Events{{/i}}

      -

      {{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}

      - - - - - - - - - - - - - - - - - -
      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
      {{_i}}close{{/i}}{{_i}}This event fires immediately when the close instance method is called.{{/i}}
      {{_i}}closed{{/i}}{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}
      +

      {{_i}}Usage{{/i}}

      +

      {{_i}}Enable popovers via javascript:{{/i}}

      + 
      $('#example').popover({{_i}}options{{/i}})
      + +

      {{_i}}Options{{/i}}

      +

      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
      {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
      {{_i}}html{{/i}}{{_i}}boolean{{/i}}true{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
      {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'right'{{_i}}how to position the popover{{/i}} - top | bottom | left | right
      {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}
      {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how popover is triggered{{/i}} - hover | focus | manual
      {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` attribute isn't present{{/i}}
      {{_i}}content{{/i}}{{_i}}string | function{{/i}}''{{_i}}default content value if `data-content` attribute isn't present{{/i}}
      {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 +

      {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}

      +

      {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

      +

      {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

      +
      +
      + {{_i}}Heads up!{{/i}} + {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}} +
      + +

      {{_i}}Markup{{/i}}

      +

      {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

      + +

      {{_i}}Methods{{/i}}

      +

      $().popover({{_i}}options{{/i}})

      +

      {{_i}}Initializes popovers for an element collection.{{/i}}

      +

      .popover('show')

      +

      {{_i}}Reveals an elements popover.{{/i}}

      + 
      $('#element').popover('show')
      +

      .popover('hide')

      +

      {{_i}}Hides an elements popover.{{/i}}

      + 
      $('#element').popover('hide')
      +

      .popover('toggle')

      +

      {{_i}}Toggles an elements popover.{{/i}}

      + 
      $('#element').popover('toggle')
      +

      .popover('destroy')

      +

      {{_i}}Destroys an element's popover.{{/i}}

      + 
      $('#element').popover('destroy')
      +
      + + + + +
      +
      +

      {{_i}}Alert messages{{/i}} bootstrap-alert.js

      +
      + + +

      {{_i}}Example alerts{{/i}}

      +

      {{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}

      +
      +
      + + {{_i}}Holy guacamole!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} +
      +
      {{! /example }} + +
      +
      + +

      {{_i}}Oh snap! You got an error!{{/i}}

      +

      {{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}

      +

      + {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}} +

      +
      +
      {{! /example }} + + +
      + + +

      {{_i}}Usage{{/i}}

      +

      {{_i}}Enable dismissal of an alert via javascript:{{/i}}

      + 
      $(".alert").alert()
      + +

      {{_i}}Markup{{/i}}

      +

      {{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}

      + 
      <a class="close" data-dismiss="alert" href="#">&times;</a>
      + +

      {{_i}}Methods{{/i}}

      +

      $().alert()

      +

      {{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}

      +

      .alert('close')

      +

      {{_i}}Closes an alert.{{/i}}

      + 
      $(".alert").alert('close')
      + + +

      {{_i}}Events{{/i}}

      +

      {{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}

      + + + + + + + + + + + + + + + + + +
      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
      {{_i}}close{{/i}}{{_i}}This event fires immediately when the close instance method is called.{{/i}}
      {{_i}}closed{{/i}}{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}
       $('#my-alert').bind('closed', function () {
   // {{_i}}do something…{{/i}}
-})
      -
      +}) + + - -
      -
      -

      {{_i}}Buttons{{/i}} bootstrap-button.js

      -
      + +
      +
      +

      {{_i}}Buttons{{/i}} bootstrap-button.js

      +
      -

      {{_i}}Example uses{{/i}}

      -

      {{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}

      +

      {{_i}}Example uses{{/i}}

      +

      {{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}

      -

      {{_i}}Stateful{{/i}}

      -

      {{_i}}Add data-loading-text="Loading..." to use a loading state on a button.{{/i}}

      -
      - -
      {{! /example }} +

      {{_i}}Stateful{{/i}}

      +

      {{_i}}Add data-loading-text="Loading..." to use a loading state on a button.{{/i}}

      +
      + +
      {{! /example }} 
       <button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
      -

      {{_i}}Single toggle{{/i}}

      -

      {{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}

      -
      - -
      {{! /example }} +

      {{_i}}Single toggle{{/i}}

      +

      {{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}

      +
      + +
      {{! /example }} 
       <button type="button" class="btn" data-toggle="button">Single Toggle</button>
      -

      {{_i}}Checkbox{{/i}}

      -

      {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}

      -
      -
      - - - -
      -
      {{! /example }} +

      {{_i}}Checkbox{{/i}}

      +

      {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}

      +
      +
      + + + +
      +
      {{! /example }} 
       <div class="btn-group" data-toggle="buttons-checkbox">
   <button type="button" class="btn">Left</button>
@@ -1058,15 +1065,15 @@ $('#my-alert').bind('closed', function () {
 </div>
      -

      {{_i}}Radio{{/i}}

      -

      {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group.{{/i}}

      -
      -
      - - - -
      -
      {{! /example }} +

      {{_i}}Radio{{/i}}

      +

      {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group.{{/i}}

      +
      +
      + + + +
      +
      {{! /example }} 
       <div class="btn-group" data-toggle="buttons-radio">
   <button type="button" class="btn">Left</button>
@@ -1076,101 +1083,101 @@ $('#my-alert').bind('closed', function () {
      -
      +
      -

      {{_i}}Usage{{/i}}

      -

      {{_i}}Enable buttons via javascript:{{/i}}

      - 
      $('.nav-tabs').button()
      +

      {{_i}}Usage{{/i}}

      +

      {{_i}}Enable buttons via javascript:{{/i}}

      + 
      $('.nav-tabs').button()
      -

      {{_i}}Markup{{/i}}

      -

      {{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}

      +

      {{_i}}Markup{{/i}}

      +

      {{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}

      -

      {{_i}}Options{{/i}}

      -

      {{_i}}None{{/i}}

      +

      {{_i}}Options{{/i}}

      +

      {{_i}}None{{/i}}

      -

      {{_i}}Methods{{/i}}

      -

      $().button('toggle')

      -

      {{_i}}Toggles push state. Gives the button the appearance that it has been activated.{{/i}}

      -
      - {{_i}}Heads up!{{/i}} - {{_i}}You can enable auto toggling of a button by using the data-toggle attribute.{{/i}} -
      - 
      <button type="button" class="btn" data-toggle="button" >…</button>
      -

      $().button('loading')

      -

      {{_i}}Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.{{/i}} -

      - 
      <button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
      -
      - {{_i}}Heads up!{{/i}} - {{_i}}Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".{{/i}} -
      -

      $().button('reset')

      -

      {{_i}}Resets button state - swaps text to original text.{{/i}}

      -

      $().button(string)

      -

      {{_i}}Resets button state - swaps text to any data defined text state.{{/i}}

      +

      {{_i}}Methods{{/i}}

      +

      $().button('toggle')

      +

      {{_i}}Toggles push state. Gives the button the appearance that it has been activated.{{/i}}

      +
      + {{_i}}Heads up!{{/i}} + {{_i}}You can enable auto toggling of a button by using the data-toggle attribute.{{/i}} +
      + 
      <button type="button" class="btn" data-toggle="button" >…</button>
      +

      $().button('loading')

      +

      {{_i}}Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.{{/i}} +

      + 
      <button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
      +
      + {{_i}}Heads up!{{/i}} + {{_i}}Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".{{/i}} +
      +

      $().button('reset')

      +

      {{_i}}Resets button state - swaps text to original text.{{/i}}

      +

      $().button(string)

      +

      {{_i}}Resets button state - swaps text to any data defined text state.{{/i}}

      <button type="button" class="btn" data-complete-text="finished!" >...</button>
 <script>
   $('.btn').button('complete')
 </script>
      -
      +
      - -
      -
      -

      {{_i}}Collapse{{/i}} bootstrap-collapse.js

      -
      - -

      {{_i}}About{{/i}}

      -

      {{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}

      -

      * {{_i}}Requires the Transitions plugin to be included.{{/i}}

      - -

      {{_i}}Example accordion{{/i}}

      -

      {{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}

      - -
      -
      -
      -
      - - {{_i}}Collapsible Group Item #1{{/i}} - -
      -
      -
      - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
      -
      -
      -
      -
      - - {{_i}}Collapsible Group Item #2{{/i}} - -
      -
      -
      - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
      -
      -
      -
      -
      - - {{_i}}Collapsible Group Item #3{{/i}} - -
      -
      -
      - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
      -
      -
      + +
      +
      +

      {{_i}}Collapse{{/i}} bootstrap-collapse.js

      -
      {{! /example }} + +

      {{_i}}About{{/i}}

      +

      {{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}

      +

      * {{_i}}Requires the Transitions plugin to be included.{{/i}}

      + +

      {{_i}}Example accordion{{/i}}

      +

      {{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}

      + +
      +
      +
      +
      + + {{_i}}Collapsible Group Item #1{{/i}} + +
      +
      +
      + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
      +
      +
      +
      +
      + + {{_i}}Collapsible Group Item #2{{/i}} + +
      +
      +
      + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
      +
      +
      +
      +
      + + {{_i}}Collapsible Group Item #3{{/i}} + +
      +
      +
      + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
      +
      +
      +
      +
      {{! /example }} 
       <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
   {{_i}}simple collapsible{{/i}}
@@ -1180,137 +1187,137 @@ $('#my-alert').bind('closed', function () {
      -
      +
      -

      {{_i}}Usage{{/i}}

      +

      {{_i}}Usage{{/i}}

      -

      {{_i}}Via data attributes{{/i}}

      -

      {{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}

      -

      {{_i}}To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.{{/i}}

      +

      {{_i}}Via data attributes{{/i}}

      +

      {{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}

      +

      {{_i}}To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.{{/i}}

      -

      {{_i}}Via javascript{{/i}}

      -

      {{_i}}Enable manually with:{{/i}}

      - 
      $(".collapse").collapse()
      +

      {{_i}}Via javascript{{/i}}

      +

      {{_i}}Enable manually with:{{/i}}

      + 
      $(".collapse").collapse()
      -

      {{_i}}Options{{/i}}

      -

      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-parent="".{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
      {{_i}}parent{{/i}}{{_i}}selector{{/i}}false{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior){{/i}}
      {{_i}}toggle{{/i}}{{_i}}boolean{{/i}}true{{_i}}Toggles the collapsible element on invocation{{/i}}
      +

      {{_i}}Options{{/i}}

      +

      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-parent="".{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
      {{_i}}parent{{/i}}{{_i}}selector{{/i}}false{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior){{/i}}
      {{_i}}toggle{{/i}}{{_i}}boolean{{/i}}true{{_i}}Toggles the collapsible element on invocation{{/i}}
      -

      {{_i}}Methods{{/i}}

      -

      .collapse({{_i}}options{{/i}})

      -

      {{_i}}Activates your content as a collapsible element. Accepts an optional options object.{{/i}} +

      {{_i}}Methods{{/i}}

      +

      .collapse({{_i}}options{{/i}})

      +

      {{_i}}Activates your content as a collapsible element. Accepts an optional options object.{{/i}} 

       $('#myCollapsible').collapse({
   toggle: false
 })
      -

      .collapse('toggle')

      -

      {{_i}}Toggles a collapsible element to shown or hidden.{{/i}}

      -

      .collapse('show')

      -

      {{_i}}Shows a collapsible element.{{/i}}

      -

      .collapse('hide')

      -

      {{_i}}Hides a collapsible element.{{/i}}

      +

      .collapse('toggle')

      +

      {{_i}}Toggles a collapsible element to shown or hidden.{{/i}}

      +

      .collapse('show')

      +

      {{_i}}Shows a collapsible element.{{/i}}

      +

      .collapse('hide')

      +

      {{_i}}Hides a collapsible element.{{/i}}

      -

      {{_i}}Events{{/i}}

      -

      {{_i}}Bootstrap's collapse class exposes a few events for hooking into collapse functionality.{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
      {{_i}}show{{/i}}{{_i}}This event fires immediately when the show instance method is called.{{/i}}
      {{_i}}shown{{/i}}{{_i}}This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).{{/i}}
      {{_i}}hide{{/i}} - {{_i}}This event is fired immediately when the hide method has been called.{{/i}} -
      {{_i}}hidden{{/i}}{{_i}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}
      +

      {{_i}}Events{{/i}}

      +

      {{_i}}Bootstrap's collapse class exposes a few events for hooking into collapse functionality.{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
      {{_i}}show{{/i}}{{_i}}This event fires immediately when the show instance method is called.{{/i}}
      {{_i}}shown{{/i}}{{_i}}This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).{{/i}}
      {{_i}}hide{{/i}} + {{_i}}This event is fired immediately when the hide method has been called.{{/i}} +
      {{_i}}hidden{{/i}}{{_i}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}
       $('#myCollapsible').on('hidden', function () {
   // {{_i}}do something…{{/i}}
 })
      -
      + - - +

      {{_i}}Events{{/i}}

      +

      {{_i}}Bootstrap's carousel class exposes two events for hooking into carousel functionality.{{/i}}

      + + + + + + + + + + + + + + + + + +
      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
      {{_i}}slide{{/i}}{{_i}}This event fires immediately when the slide instance method is invoked.{{/i}}
      {{_i}}slid{{/i}}{{_i}}This event is fired when the carousel has completed its slide transition.{{/i}}
      + - -
      -
      -

      {{_i}}Typeahead{{/i}} bootstrap-typeahead.js

      -
      + +
      +
      +

      {{_i}}Typeahead{{/i}} bootstrap-typeahead.js

      +
      -

      {{_i}}Example{{/i}}

      -

      {{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}

      -
      - -
      {{! /example }} +

      {{_i}}Example{{/i}}

      +

      {{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}

      +
      + +
      {{! /example }} 
       <input type="text" data-provide="typeahead">
      -
      +
      -

      {{_i}}Usage{{/i}}

      +

      {{_i}}Usage{{/i}}

      -

      {{_i}}Via data attributes{{/i}}

      -

      {{_i}}Add data attributes to register an element with typeahead functionality as shown in the example above.{{/i}}

      +

      {{_i}}Via data attributes{{/i}}

      +

      {{_i}}Add data attributes to register an element with typeahead functionality as shown in the example above.{{/i}}

      -

      {{_i}}Via javascript{{/i}}

      -

      {{_i}}Call the typeahead manually with:{{/i}}

      - 
      $('.typeahead').typeahead()
      +

      {{_i}}Via javascript{{/i}}

      +

      {{_i}}Call the typeahead manually with:{{/i}}

      + 
      $('.typeahead').typeahead()
      -

      {{_i}}Options{{/i}}

      -

      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-source="".{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
      {{_i}}source{{/i}}{{_i}}array, function{{/i}}[ ]{{_i}}The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.{{/i}}
      {{_i}}items{{/i}}{{_i}}number{{/i}}8{{_i}}The max number of items to display in the dropdown.{{/i}}
      {{_i}}matcher{{/i}}{{_i}}function{{/i}}{{_i}}case insensitive{{/i}}{{_i}}The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.{{/i}}
      {{_i}}sorter{{/i}}{{_i}}function{{/i}}{{_i}}exact match,
      case sensitive,
      case insensitive{{/i}}      		{{_i}}Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.{{/i}}
      {{_i}}highlighter{{/i}}{{_i}}function{{/i}}{{_i}}highlights all default matches{{/i}}{{_i}}Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.{{/i}}
      +

      {{_i}}Options{{/i}}

      +

      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-source="".{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
      {{_i}}source{{/i}}{{_i}}array, function{{/i}}[ ]{{_i}}The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.{{/i}}
      {{_i}}items{{/i}}{{_i}}number{{/i}}8{{_i}}The max number of items to display in the dropdown.{{/i}}
      {{_i}}matcher{{/i}}{{_i}}function{{/i}}{{_i}}case insensitive{{/i}}{{_i}}The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.{{/i}}
      {{_i}}sorter{{/i}}{{_i}}function{{/i}}{{_i}}exact match,
      case sensitive,
      case insensitive{{/i}}      		{{_i}}Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.{{/i}}
      {{_i}}highlighter{{/i}}{{_i}}function{{/i}}{{_i}}highlights all default matches{{/i}}{{_i}}Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.{{/i}}
      -

      {{_i}}Methods{{/i}}

      -

      .typeahead({{_i}}options{{/i}})

      -

      {{_i}}Initializes an input with a typeahead.{{/i}}

      -
      +

      {{_i}}Methods{{/i}}

      +

      .typeahead({{_i}}options{{/i}})

      +

      {{_i}}Initializes an input with a typeahead.{{/i}}

      +
      - -
      -
      -

      - {{_i}}Affix{{/i}} - {{_i}}Make an element stick in place{{/i}} -

      -
      + +
      +
      +

      + {{_i}}Affix{{/i}} + {{_i}}Make an element stick in place{{/i}} +

      +
      -

      {{_i}}...{{/i}}

      -

      {{_i}}...{{/i}}

      -
      +

      {{_i}}...{{/i}}

      +

      {{_i}}...{{/i}}

      +
      -
      + 
       ...
      -
      +
      -
      {{! /span9 }} -
      {{! row}} +
      {{! /span9 }} +
      {{! row}} + +{{! /container }} diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 05e1c4e2ad..86806bb563 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -1,38 +1,41 @@
      -

      {{_i}}Scaffolding{{/i}}

      -

      {{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}

      +
      +

      {{_i}}Scaffolding{{/i}}

      +

      {{_i}}Bootstrap is built on a responsive 12-column grid and includes fixed- and fluid-width layouts.{{/i}}

      +
      +
      - -
      -
      - -
      -
      + + +
      +
      + +
      +
      - -
      -
      -

      {{_i}}Global styles for CSS reset, typography, and links{{/i}}

      -
      + +
      +
      +

      {{_i}}Global styles for CSS reset, typography, and links{{/i}}

      +
      -

      {{_i}}Requires HTML5 doctype{{/i}}

      -

      {{_i}}Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.{{/i}}

      +

      {{_i}}Requires HTML5 doctype{{/i}}

      +

      {{_i}}Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.{{/i}}

       <!DOCTYPE html>
 <html lang="en">
@@ -40,84 +43,84 @@
 </html>
      -

      {{_i}}Typography and links{{/i}}

      -

      {{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}

      -
        -
      • {{_i}}Remove margin on the body{{/i}}
        • -
      • {{_i}}Set background-color: white; on the body{{/i}}
        • -
      • {{_i}}Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base{{/i}}
        • -
      • {{_i}}Set the global link color via @linkColor and apply link underlines only on :hover{{/i}}
        • -
      -

      {{_i}}These styles can be found within scaffolding.less.{{/i}}

      +

      {{_i}}Typography and links{{/i}}

      +

      {{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}

      +
        +
      • {{_i}}Remove margin on the body{{/i}}
        • +
      • {{_i}}Set background-color: white; on the body{{/i}}
        • +
      • {{_i}}Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base{{/i}}
        • +
      • {{_i}}Set the global link color via @linkColor and apply link underlines only on :hover{{/i}}
        • +
      +

      {{_i}}These styles can be found within scaffolding.less.{{/i}}

      -

      {{_i}}Reset via Normalize{{/i}}

      -

      {{_i}}With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.{{/i}}

      +

      {{_i}}Reset via Normalize{{/i}}

      +

      {{_i}}With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.{{/i}}

      -
      +
      - -
      -
      -

      {{_i}}Default grid system 12 columns with a responsive twist{{/i}}

      -
      - -

      {{_i}}Live grid example{{/i}}

      -

      {{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}

      -
      -
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      + +
      +
      +

      {{_i}}Default grid system 12 columns with a responsive twist{{/i}}

      -
      -
      2
      -
      3
      -
      4
      -
      -
      -
      4
      -
      5
      -
      -
      -
      9
      -
      -
      -

      {{_i}}Basic grid HTML{{/i}}

      -

      {{_i}}For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row.{{/i}}

      +

      {{_i}}Live grid example{{/i}}

      +

      {{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}

      +
      +
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      +
      +
      2
      +
      3
      +
      4
      +
      +
      +
      4
      +
      5
      +
      +
      +
      9
      +
      +
      + +

      {{_i}}Basic grid HTML{{/i}}

      +

      {{_i}}For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row.{{/i}}

       <div class="row">
   <div class="span4">...</div>
   <div class="span8">...</div>
 </div>
      -

      {{_i}}Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.{{/i}}

      +

      {{_i}}Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.{{/i}}

      -

      {{_i}}Offsetting columns{{/i}}

      -

      {{_i}}Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.{{/i}}

      -
      -
      -
      4
      -
      3 offset 2
      -
      -
      -
      3 offset 1
      -
      3 offset 2
      -
      -
      -
      6 offset 3
      -
      -
      +

      {{_i}}Offsetting columns{{/i}}

      +

      {{_i}}Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.{{/i}}

      +
      +
      +
      4
      +
      3 offset 2
      +
      +
      +
      3 offset 1
      +
      3 offset 2
      +
      +
      +
      6 offset 3
      +
      + 
       <div class="row">
   <div class="span4">...</div>
@@ -125,23 +128,23 @@
 </div>
      -

      {{_i}}Nesting columns{{/i}}

      -

      {{_i}}To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}

      -

      {{_i}}Example{{/i}}

      -

      {{_i}}Here two nested .span4 columns are placed within a .span8.{{/i}}

      -
      -
      - {{_i}}Level 1 of column{{/i}} -
      -
      - {{_i}}Level 2{{/i}} -
      -
      - {{_i}}Level 2{{/i}} +

      {{_i}}Nesting columns{{/i}}

      +

      {{_i}}To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}

      +

      {{_i}}Example{{/i}}

      +

      {{_i}}Here two nested .span4 columns are placed within a .span8.{{/i}}

      +
      +
      + {{_i}}Level 1 of column{{/i}} +
      +
      + {{_i}}Level 2{{/i}} +
      +
      + {{_i}}Level 2{{/i}} +
      - 
       <div class="row">
   <div class="span10">
@@ -153,54 +156,54 @@
   </div>
 </div>
      -
      + - -
      -
      -

      {{_i}}Fluid grid system 12 responsive, percent-based columns{{/i}}

      -
      + +
      +
      +

      {{_i}}Fluid grid system 12 responsive, percent-based columns{{/i}}

      +
      -

      {{_i}}Live fluid grid example{{/i}}

      -

      {{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}

      -
      -
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      -
      1
      +

      {{_i}}Live fluid grid example{{/i}}

      +

      {{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}

      +
      +
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      1
      +
      +
      +
      4
      +
      4
      +
      4
      +
      +
      +
      4
      +
      8
      +
      +
      +
      6
      +
      6
      +
      +
      +
      12
      +
      -
      -
      4
      -
      4
      -
      4
      -
      -
      -
      4
      -
      8
      -
      -
      -
      6
      -
      6
      -
      -
      -
      12
      -
      -
      -

      {{_i}}Basic fluid grid HTML{{/i}}

      -

      {{_i}}Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}

      +

      {{_i}}Basic fluid grid HTML{{/i}}

      +

      {{_i}}Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}

       <div class="row-fluid">
   <div class="span4">...</div>
@@ -208,21 +211,21 @@
 </div>
      -

      {{_i}}Fluid offsetting{{/i}}

      -

      {{_i}}Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.{{/i}}

      -
      -
      -
      4
      -
      4 offset 4
      -
      -
      -
      3 offset 3
      -
      3 offset 3
      -
      -
      -
      6 offset 6
      -
      -
      +

      {{_i}}Fluid offsetting{{/i}}

      +

      {{_i}}Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.{{/i}}

      +
      +
      +
      4
      +
      4 offset 4
      +
      +
      +
      3 offset 3
      +
      3 offset 3
      +
      +
      +
      6 offset 6
      +
      + 
       <div class="row-fluid">
   <div class="span4">...</div>
@@ -230,21 +233,21 @@
 </div>
      -

      {{_i}}Fluid nesting{{/i}}

      -

      {{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}

      -
      -
      - {{_i}}Fluid 12{{/i}} -
      -
      - {{_i}}Fluid 6{{/i}} -
      -
      - {{_i}}Fluid 6{{/i}} +

      {{_i}}Fluid nesting{{/i}}

      +

      {{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}

      +
      +
      + {{_i}}Fluid 12{{/i}} +
      +
      + {{_i}}Fluid 6{{/i}} +
      +
      + {{_i}}Fluid 6{{/i}} +
      - 
       <div class="row-fluid">
   <div class="span12">
@@ -257,78 +260,23 @@
 </div>
      -
      +
      - -
      -
      -

      {{_i}}Grid customization{{/i}}

      -
      -

      {{_i}}Variables in LESS{{/i}}

      -

      {{_i}}The default grid is built on a few variables for easy customization via LESS. All variables can be found in variables.less.{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Variable{{/i}}{{_i}}Default value{{/i}}{{_i}}Description{{/i}}
      @gridColumns12{{_i}}Number of columns{{/i}}
      @gridColumnWidth60px{{_i}}Width of each column{{/i}}
      @gridGutterWidth20px{{_i}}Negative space between columns{{/i}}
      @fluidGridColumnWidth6.382978723%{{_i}}Width of each fluid column{{/i}}
      @fluidGridGutterWidth2.127659574%{{_i}}Negative space between fluid columns{{/i}}
      + +
      +
      +

      {{_i}}Layouts Basic templates to create webpages{{/i}}

      +
      -

      {{_i}}How to customize{{/i}}

      -

      {{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}

      - -

      {{_i}}Staying responsive{{/i}}

      -

      {{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in responsive.less until a future update improves this.{{/i}}

      - -
      - - - - -
      -
      -

      {{_i}}Layouts Basic templates to create webpages{{/i}}

      -
      - -

      {{_i}}Fixed layout{{/i}}

      -

      {{_i}}Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.{{/i}}

      -
      -
      -
      +

      {{_i}}Fixed layout{{/i}}

      +

      {{_i}}Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.{{/i}}

      +
      +
      + 
       <body>
   <div class="container">
@@ -337,12 +285,12 @@
 </body>
      -

      {{_i}}Fluid layout{{/i}}

      -

      {{_i}}Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.{{/i}}

      -
      -
      -
      -
      +

      {{_i}}Fluid layout{{/i}}

      +

      {{_i}}Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.{{/i}}

      +
      +
      +
      + 
       <div class="container-fluid">
   <div class="row-fluid">
@@ -355,81 +303,81 @@
   </div>
 </div>
      -
      +
      - -
      -
      -

      {{_i}}Responsive design Media queries for various devices and resolutions{{/i}}

      -
      + +
      +
      +

      {{_i}}Responsive design Media queries for various devices and resolutions{{/i}}

      +
      - {{! Enabling }} -

      {{_i}}Enabling responsive features{{/i}}

      -

      {{_i}}Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.{{/i}}

      + {{! Enabling }} +

      {{_i}}Enabling responsive features{{/i}}

      +

      {{_i}}Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.{{/i}}

       <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
      -

      {{_i}}Heads up!{{/i}} {{_i}} Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.{{/i}}

      +

      {{_i}}Heads up!{{/i}} {{_i}} Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.{{/i}}

      - {{! About }} -

      {{_i}}About responsive Bootstrap{{/i}}

      - Responsive devices -

      {{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}

      -
        -
      • {{_i}}Modify the width of column in our grid{{/i}}
        • -
      • {{_i}}Stack elements instead of float wherever necessary{{/i}}
        • -
      • {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
        • -
      -

      {{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}

      + {{! About }} +

      {{_i}}About responsive Bootstrap{{/i}}

      + Responsive devices +

      {{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}

      +
        +
      • {{_i}}Modify the width of column in our grid{{/i}}
        • +
      • {{_i}}Stack elements instead of float wherever necessary{{/i}}
        • +
      • {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
        • +
      +

      {{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}

      - {{! Supported }} -

      {{_i}}Supported devices{{/i}}

      -

      {{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Label{{/i}}{{_i}}Layout width{{/i}}{{_i}}Column width{{/i}}{{_i}}Gutter width{{/i}}
      {{_i}}Phones{{/i}}480px and below{{_i}}Fluid columns, no fixed widths{{/i}}
      {{_i}}Phones to tablets{{/i}}767px and below{{_i}}Fluid columns, no fixed widths{{/i}}
      {{_i}}Portrait tablets{{/i}}768px and above42px20px
      {{_i}}Default{{/i}}980px and up60px20px
      {{_i}}Large display{{/i}}1200px and up70px30px
      + {{! Supported }} +

      {{_i}}Supported devices{{/i}}

      +

      {{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Label{{/i}}{{_i}}Layout width{{/i}}{{_i}}Column width{{/i}}{{_i}}Gutter width{{/i}}
      {{_i}}Phones{{/i}}480px and below{{_i}}Fluid columns, no fixed widths{{/i}}
      {{_i}}Phones to tablets{{/i}}767px and below{{_i}}Fluid columns, no fixed widths{{/i}}
      {{_i}}Portrait tablets{{/i}}768px and above42px20px
      {{_i}}Default{{/i}}980px and up60px20px
      {{_i}}Large display{{/i}}1200px and up70px30px
       /* {{_i}}Landscape phones and down{{/i}} */
 @media (max-width: 480px) { ... }
@@ -445,81 +393,83 @@
      - {{! Responsive utility classes }} -

      {{_i}}Responsive utility classes{{/i}}

      -

      {{_i}}For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.{{/i}}

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      {{_i}}Class{{/i}}{{_i}}Phones 767px and below{{/i}}{{_i}}Tablets 979px to 768px{{/i}}{{_i}}Desktops Default{{/i}}
      .visible-phone{{_i}}Visible{{/i}}
      .visible-tablet{{_i}}Visible{{/i}}
      .visible-desktop{{_i}}Visible{{/i}}
      .hidden-phone{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
      .hidden-tablet{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
      .hidden-desktop{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
      + {{! Responsive utility classes }} +

      {{_i}}Responsive utility classes{{/i}}

      +

      {{_i}}For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.{{/i}}

      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      {{_i}}Class{{/i}}{{_i}}Phones 767px and below{{/i}}{{_i}}Tablets 979px to 768px{{/i}}{{_i}}Desktops Default{{/i}}
      .visible-phone{{_i}}Visible{{/i}}
      .visible-tablet{{_i}}Visible{{/i}}
      .visible-desktop{{_i}}Visible{{/i}}
      .hidden-phone{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
      .hidden-tablet{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
      .hidden-desktop{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
      -

      {{_i}}When to use{{/i}}

      -

      {{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}

      +

      {{_i}}When to use{{/i}}

      +

      {{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}

      -

      {{_i}}Responsive utilities test case{{/i}}

      -

      {{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}

      -

      {{_i}}Visible on...{{/i}}

      -

      {{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}

      -
        -
      • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
        • -
      • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
        • -
      • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
        • -
      -

      {{_i}}Hidden on...{{/i}}

      -

      {{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}

      -
        -
      • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
        • -
      • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
        • -
      • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
        • -
      +

      {{_i}}Responsive utilities test case{{/i}}

      +

      {{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}

      +

      {{_i}}Visible on...{{/i}}

      +

      {{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}

      +
        +
      • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
        • +
      • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
        • +
      • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
        • +
      +

      {{_i}}Hidden on...{{/i}}

      +

      {{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}

      +
        +
      • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
        • +
      • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
        • +
      • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
        • +
      -
      +
      -
      {{! /span9 }} -
      {{! row}} +
      {{! /span9 }} +
      {{! row}} + +
      {{! /container }} diff --git a/docs/upgrading.html b/docs/upgrading.html index 5d6985725b..d2b4b21c11 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -66,8 +66,6 @@ -
      -
      @@ -263,8 +261,6 @@ -
      -
      -

      Getting started

      -

      Overview of the project, it's contents, and how to get started with a simple template.

      -
      +

      Getting started

      +

      Overview of the project, it's contents, and how to get started with a simple template.

      +
      -
      -
      - + + +
      +
      + +
      +
      + + + + +
      +
      +

      1. Download

      +
      +

      Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.

      + +
      +
      +

      Download compiled

      +

      Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

      + Download Bootstrap +
      +
      +

      Download source

      +

      Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.

      + Download Bootstrap source +
      +
      +
      + + + + +
      +
      +

      2. File structure

      +
      +

      Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:

      +
      +  bootstrap/
+  ├── css/
+  │   ├── bootstrap.css
+  │   ├── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.js
+  │   ├── bootstrap.min.js
+  ├── img/
+  │   ├── glyphicons-halflings.png
+  │   ├── glyphicons-halflings-white.png
+  └── README.md
+
      +

      This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.

      +
      + + + + +
      +
      +

      3. What's included

      +
      +

      Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.

      + +

      Scaffolding

      +

      Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

      + +

      Base CSS

      +

      Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

      + +

      Components

      +

      Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

      + +

      Javascript plugins

      +

      Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.

      + +
      + +

      List of components

      +

      Together, the Components and Javascript plugins sections provide the following interface elements:

      +
        +
      • Button groups
        • +
      • Button dropdowns
        • +
      • Navigational tabs, pills, and lists
        • +
      • Navbar
        • +
      • Labels
        • +
      • Badges
        • +
      • Page headers and hero unit
        • +
      • Thumbnails
        • +
      • Alerts
        • +
      • Progress bars
        • +
      • Modals
        • +
      • Dropdowns
        • +
      • Tooltips
        • +
      • Popovers
        • +
      • Accordion
        • +
      • Carousel
        • +
      • Typeahead
        • +
      +

      In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.

      +
      + + + + +
      +
      +

      4. Basic HTML template

      +
      +

      With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.

      +

      Now, here's a look at a typical HTML file:

      + 
      +    <html>
+      <head>
+        <title>Bootstrap 101 Template</title>
+      </head>
+      <body>
+        <h1>Hello, world!</h1>
+      </body>
+    </html>
+
      +

      To make this a Bootstrapped template, just include the appropriate CSS and JS files:

      + 
      +    <html>
+      <head>
+        <title>Bootstrap 101 Template</title>
+        <!-- Bootstrap -->
+        <link href="css/bootstrap.min.css" rel="stylesheet">
+        <script src="js/bootstrap.min.js"></script>
+      </head>
+      <body>
+        <h1>Hello, world!</h1>
+      </body>
+    </html>
+
      +

      And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.

      + +
      + +

      What next?

      +

      Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

      + Visit the Bootstrap docs + Customize Bootstrap +
      + + + +
      -
      - -
      -
      -

      Prerequisites

      -
      -

      Before getting started, you need the following:

      -
        -
      • An unzipped copy of the latest version of Bootstrap (which includes all CSS, JavaScript, and images).
        • -
      • An editor of your choice for writing code (I recommend Sublime Text 2).
        • -
      • Some working knowledge of HTML and CSS.
        • -
      -

      When ready, proceed to the next section, File structure.

      -
      - - - -
      -
      -

      File structure

      -
      -

      Once unzipped, the structure of Bootstrap’s files looks like this:

      -
        -
      • bootstrap/ -
          -
        • css/ -
            -
          • bootstrap.css
            • -
          • bootstrap.min.css
            • -
          -
          • -
        • js/ -
            -
          • bootstrap.js
            • -
          • bootstrap.min.js
            • -
          -
          • -
        • img/ -
            -
          • glyphicons-halflings.png
            • -
          • glyphicons-halflings-white.png
            • -
          -
          • -
        • README.md
          • -
        -
        • -
      -

      This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.

      -
      - - - -
      -
      -

      What's included

      -
      -

      Bootstrap comes equipped with CSS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation:

      -
        -
      • Scaffolding: Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
        • -
      • Base CSS: Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.
        • -
      • Components: Basic styles for common interface components like tabs and pills, navbar, page headers, and more.
        • -
      • Javascript plugins: Similar to the Components section, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.
        • -
      -

      Together, the Components and Javascript plugins sections provide the following interface elements:

      -
        -
      • Button groups
        • -
      • Button dropdowns
        • -
      • Navigational tabs, pills, and lists
        • -
      • Navbar
        • -
      • Labels
        • -
      • Badges
        • -
      • Page headers and hero unit
        • -
      • Thumbnails
        • -
      • Alerts
        • -
      • Progress bars
        • -
      • Modals
        • -
      • Dropdowns
        • -
      • Tooltips
        • -
      • Popovers
        • -
      • Accordion
        • -
      • Carousel
        • -
      • Typeahead
        • -
      -

      In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.

      -
      - - - -
      -
      -

      Basic HTML template

      -
      -

      Now that we’ve got the basic information on Bootstrap out of the way, we can focus on getting started. To do that, we’ll utilize a basic HTML template that includes everything we’ve mentioned in the File structure.

      -

      As previously mentioned, we won’t cover the basics of writing HTML and CSS here. Instead, we’ll leapfrog through various points in web development complexity to give you the broadest and most complete overview.

      -

      Now, here’s a look at a typical HTML file:

      - 
      -  <html>
-    <head>
-      <title>Bootstrap 101 Template</title>
-    </head>
-    <body>
-      <h1>Hello, world!</h1>
-    </body>
-  </html>
-
      -

      To make this a Bootstrapped template, just include the appropriate CSS and JS files:

      - 
      -  <html>
-    <head>
-      <title>Bootstrap 101 Template</title>
-      <!-- Bootstrap -->
-      <link href="css/bootstrap.min.css" rel="stylesheet">
-      <script src="js/bootstrap.min.js"></script>
-    </head>
-    <body>
-      <h1>Hello, world!</h1>
-    </body>
-  </html>
-
      -

      And you’re set. With those two files added, you can begin to write Bootstrap-friendly HTML, CSS, and JS to build any site or application you like. Head to the Bootstrap docs for information, examples, and even code snippets for the Bootstrap grid system, base HTML styles, components, and even responsive features.

      -
      - - - -
      +
      diff --git a/docs/index.html b/docs/index.html index d059aaa3e7..4acc040abb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,6 +45,9 @@
    • Home
      • +
    • + Get started +
    • Scaffolding
      • @@ -72,7 +75,6 @@

      Sleek, intuitive, and powerful front-end framework for faster and easier web development.

      Download Bootstrap

        -
      • Getting started
      • Customize
      • GitHub project
      • Version 2.1.0
        • diff --git a/docs/javascript.html b/docs/javascript.html index 21d0044b09..42c8a6f7e9 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -45,6 +45,9 @@
      • Home
        • +
      • + Get started +
      • Scaffolding
        • diff --git a/docs/scaffolding.html b/docs/scaffolding.html index ca94d8a542..dcdbadda4a 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -45,6 +45,9 @@
      • Home
        • +
      • + Get started +
      • Scaffolding
        • diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index cbfae7f26f..6ba72e841d 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -57,6 +57,9 @@
      • {{_i}}Home{{/i}}
        • +
      • + {{_i}}Get started{{/i}} +
      • {{_i}}Scaffolding{{/i}}
        • diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index c6a03ec0a0..46dccbd586 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -1,147 +1,170 @@ -
      -
      -

      {{_i}}Getting started{{/i}}

      -

      {{_i}}Overview of the project, it's contents, and how to get started with a simple template.{{/i}}

      -
      +

      {{_i}}Getting started{{/i}}

      +

      {{_i}}Overview of the project, it's contents, and how to get started with a simple template.{{/i}}

      +
      -
      -
      - -
      -
      -
      -
      -

      {{_i}}Prerequisites{{/i}}

      -
      -

      {{_i}}Before getting started, you need the following:{{/i}}

      -
      +
      +
      -
      -
      -

      {{_i}}File structure{{/i}}

      -
      -

      {{_i}}Once unzipped, the structure of Bootstrap’s files looks like this:{{/i}}

      -
        -
      • bootstrap/ -
          -
        • css/ -
            -
          • bootstrap.css
            • -
          • bootstrap.min.css
            • -
          -
          • -
        • js/ -
            -
          • bootstrap.js
            • -
          • bootstrap.min.js
            • -
          -
          • -
        • img/ -
            -
          • glyphicons-halflings.png
            • -
          • glyphicons-halflings-white.png
            • -
          -
          • -
        • README.md
          • -
        -
        • -
      -

      {{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.{{/i}}

      -
      + +
      +
      +

      {{_i}}1. Download{{/i}}

      +
      +

      {{_i}}Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.{{/i}}

      + +
      +
      +

      Download compiled

      +

      Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

      + Download Bootstrap +
      +
      +

      Download source

      +

      Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.

      + Download Bootstrap source +
      +
      +
      -
      -
      -

      {{_i}}What's included{{/i}}

      -
      -

      {{_i}}Bootstrap comes equipped with CSS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation:{{/i}}

      -
        -
      • Scaffolding: Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
        • -
      • Base CSS: Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.
        • -
      • Components: Basic styles for common interface components like tabs and pills, navbar, page headers, and more.
        • -
      • Javascript plugins: Similar to the Components section, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.
        • -
      -

      Together, the Components and Javascript plugins sections provide the following interface elements:

      -
        -
      • Button groups
        • -
      • Button dropdowns
        • -
      • Navigational tabs, pills, and lists
        • -
      • Navbar
        • -
      • Labels
        • -
      • Badges
        • -
      • Page headers and hero unit
        • -
      • Thumbnails
        • -
      • Alerts
        • -
      • Progress bars
        • -
      • Modals
        • -
      • Dropdowns
        • -
      • Tooltips
        • -
      • Popovers
        • -
      • Accordion
        • -
      • Carousel
        • -
      • Typeahead
        • -
      -

      {{_i}}In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.{{/i}}

      -
      + +
      +
      +

      {{_i}}2. File structure{{/i}}

      +
      +

      {{_i}}Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:{{/i}}

      +
      +  bootstrap/
+  ├── css/
+  │   ├── bootstrap.css
+  │   ├── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.js
+  │   ├── bootstrap.min.js
+  ├── img/
+  │   ├── glyphicons-halflings.png
+  │   ├── glyphicons-halflings-white.png
+  └── README.md
+
      +

      {{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.{{/i}}

      +
      -
      -
      -

      {{_i}}Basic HTML template{{/i}}

      -
      -

      {{_i}}Now that we’ve got the basic information on Bootstrap out of the way, we can focus on getting started. To do that, we’ll utilize a basic HTML template that includes everything we’ve mentioned in the File structure.{{/i}}

      -

      {{_i}}As previously mentioned, we won’t cover the basics of writing HTML and CSS here. Instead, we’ll leapfrog through various points in web development complexity to give you the broadest and most complete overview.{{/i}}

      -

      {{_i}}Now, here’s a look at a typical HTML file:{{/i}}

      - 
      -  <html>
-    <head>
-      <title>Bootstrap 101 Template</title>
-    </head>
-    <body>
-      <h1>Hello, world!</h1>
-    </body>
-  </html>
-
      -

      {{_i}}To make this a Bootstrapped template, just include the appropriate CSS and JS files:{{/i}}

      - 
      -  <html>
-    <head>
-      <title>Bootstrap 101 Template</title>
-      <!-- Bootstrap -->
-      <link href="css/bootstrap.min.css" rel="stylesheet">
-      <script src="js/bootstrap.min.js"></script>
-    </head>
-    <body>
-      <h1>Hello, world!</h1>
-    </body>
-  </html>
-
      -

      {{_i}}And you’re set. With those two files added, you can begin to write Bootstrap-friendly HTML, CSS, and JS to build any site or application you like. Head to the Bootstrap docs for information, examples, and even code snippets for the Bootstrap grid system, base HTML styles, components, and even responsive features.{{/i}}

      -
      + +
      +
      +

      {{_i}}3. What's included{{/i}}

      +
      +

      {{_i}}Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.{{/i}}

      + +

      Scaffolding

      +

      Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

      + +

      Base CSS

      +

      Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

      + +

      Components

      +

      Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

      + +

      Javascript plugins

      +

      Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.

      + +
      + +

      List of components

      +

      Together, the Components and Javascript plugins sections provide the following interface elements:

      +
        +
      • Button groups
        • +
      • Button dropdowns
        • +
      • Navigational tabs, pills, and lists
        • +
      • Navbar
        • +
      • Labels
        • +
      • Badges
        • +
      • Page headers and hero unit
        • +
      • Thumbnails
        • +
      • Alerts
        • +
      • Progress bars
        • +
      • Modals
        • +
      • Dropdowns
        • +
      • Tooltips
        • +
      • Popovers
        • +
      • Accordion
        • +
      • Carousel
        • +
      • Typeahead
        • +
      +

      {{_i}}In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.{{/i}}

      +
      -
      -
      \ No newline at end of file + +
      +
      +

      {{_i}}4. Basic HTML template{{/i}}

      +
      +

      {{_i}}With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.{{/i}}

      +

      {{_i}}Now, here's a look at a typical HTML file:{{/i}}

      + 
      +    <html>
+      <head>
+        <title>Bootstrap 101 Template</title>
+      </head>
+      <body>
+        <h1>Hello, world!</h1>
+      </body>
+    </html>
+
      +

      {{_i}}To make this a Bootstrapped template, just include the appropriate CSS and JS files:{{/i}}

      + 
      +    <html>
+      <head>
+        <title>Bootstrap 101 Template</title>
+        <!-- Bootstrap -->
+        <link href="css/bootstrap.min.css" rel="stylesheet">
+        <script src="js/bootstrap.min.js"></script>
+      </head>
+      <body>
+        <h1>Hello, world!</h1>
+      </body>
+    </html>
+
      +

      {{_i}}And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.{{/i}}

      + +
      + +

      What next?

      +

      Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

      + Visit the Bootstrap docs + Customize Bootstrap +
      + + + +
      {{! /span9 }} + {{! row}} + +{{! /container }} diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 0243079596..6919f8e212 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -4,7 +4,6 @@

      Sleek, intuitive, and powerful front-end framework for faster and easier web development.

      {{_i}}Download Bootstrap{{/i}}

        -
      • Getting started
      • Customize
      • GitHub project
      • Version 2.1.0
        • diff --git a/docs/upgrading.html b/docs/upgrading.html index d2b4b21c11..d2ac6ee161 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -45,6 +45,9 @@
      • Home
        • +
      • + Get started +
      • Scaffolding
        • From f36060dab5872268456a84aa0479bbacb022b959 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 21:40:25 -0700 Subject: [PATCH 192/422] remove getting started link from home, add to navbar, overhaul getting started docs --- docs/templates/pages/getting-started.mustache | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 46dccbd586..519b43e152 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -35,12 +35,12 @@

        Download compiled

        Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

        - Download Bootstrap +

        Download Bootstrap

        Download source

        Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.

        - Download Bootstrap source +

        Download Bootstrap source

        From f22b06097ab51c7fdfbe715ebb9a408c4c56f04f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 21:41:07 -0700 Subject: [PATCH 193/422] add download links to getting started --- docs/getting-started.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/getting-started.html b/docs/getting-started.html index eb6358d868..2550b33a4c 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -106,12 +106,12 @@

        Download compiled

        Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

        - Download Bootstrap +

        Download Bootstrap

        Download source

        Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.

        - Download Bootstrap source +

        Download Bootstrap source

        From fae691c3d914e513a79e8fcde051c34b6c904f8c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 21:41:51 -0700 Subject: [PATCH 194/422] some analytics tracking on getting started --- docs/getting-started.html | 4 ++-- docs/templates/pages/getting-started.mustache | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/getting-started.html b/docs/getting-started.html index 2550b33a4c..ea944baf57 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -229,8 +229,8 @@

        What next?

        Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

        - Visit the Bootstrap docs - Customize Bootstrap + Visit the Bootstrap docs + Customize Bootstrap diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 519b43e152..96b20f7ce2 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -158,8 +158,8 @@

        What next?

        Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

        - Visit the Bootstrap docs - Customize Bootstrap + Visit the Bootstrap docs + Customize Bootstrap From 2d4f5eb5a48f26d024ce0bb329b46ceef7206e87 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 00:56:18 -0700 Subject: [PATCH 195/422] fix indenting on getting started page --- docs/getting-started.html | 46 +++++++++---------- docs/templates/pages/getting-started.mustache | 46 +++++++++---------- 2 files changed, 46 insertions(+), 46 deletions(-) diff --git a/docs/getting-started.html b/docs/getting-started.html index ea944baf57..51eab28415 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -199,30 +199,30 @@

        With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.

        Now, here's a look at a typical HTML file:

        - 
        -    <html>
-      <head>
-        <title>Bootstrap 101 Template</title>
-      </head>
-      <body>
-        <h1>Hello, world!</h1>
-      </body>
-    </html>
-
        +
        +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+

        To make this a Bootstrapped template, just include the appropriate CSS and JS files:

        - 
        -    <html>
-      <head>
-        <title>Bootstrap 101 Template</title>
-        <!-- Bootstrap -->
-        <link href="css/bootstrap.min.css" rel="stylesheet">
-        <script src="js/bootstrap.min.js"></script>
-      </head>
-      <body>
-        <h1>Hello, world!</h1>
-      </body>
-    </html>
-
        +
        +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <script src="js/bootstrap.min.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+

        And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.

        diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 96b20f7ce2..ed203281ae 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -128,30 +128,30 @@

        {{_i}}With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.{{/i}}

        {{_i}}Now, here's a look at a typical HTML file:{{/i}}

        - 
        -    <html>
-      <head>
-        <title>Bootstrap 101 Template</title>
-      </head>
-      <body>
-        <h1>Hello, world!</h1>
-      </body>
-    </html>
-
        +
        +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+

        {{_i}}To make this a Bootstrapped template, just include the appropriate CSS and JS files:{{/i}}

        - 
        -    <html>
-      <head>
-        <title>Bootstrap 101 Template</title>
-        <!-- Bootstrap -->
-        <link href="css/bootstrap.min.css" rel="stylesheet">
-        <script src="js/bootstrap.min.js"></script>
-      </head>
-      <body>
-        <h1>Hello, world!</h1>
-      </body>
-    </html>
-
        +
        +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <script src="js/bootstrap.min.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+

        {{_i}}And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.{{/i}}

        From 5cb116beb897b783195e059b205af52b0f5b72c1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 10:58:20 -0700 Subject: [PATCH 196/422] cleanup subnav example --- docs/assets/css/bootstrap.css | 7 +++++-- docs/components.html | 1 - docs/templates/pages/components.mustache | 1 - less/navbar.less | 3 +++ 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index aae62efc64..30de241fec 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3950,6 +3950,7 @@ input[type="submit"].btn.btn-mini { .navbar-search .search-query { padding: 4px 9px; + margin-bottom: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; @@ -4237,12 +4238,14 @@ input[type="submit"].btn.btn-mini { -------------------------------------------------- */ .navbar-subnav .navbar-inner { + padding-right: 10px; + padding-left: 10px; background-color: #f9f9f9; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1)); background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1); - background-image: -o-linear-gradient(top, #ffffff, #f1f1f1); background-image: linear-gradient(to bottom, #ffffff, #f1f1f1); background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1); + background-image: -o-linear-gradient(top, #ffffff, #f1f1f1); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1)); background-repeat: repeat-x; border: 1px solid #e5e5e5; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0); diff --git a/docs/components.html b/docs/components.html index a48037a2d6..19f33028cf 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1242,7 +1242,6 @@ - Title
        • Home
          • diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index c2005dbc62..5c2c40847a 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1171,7 +1171,6 @@ - {{_i}}Title{{/i}}
          • {{_i}}Home{{/i}}
            • diff --git a/less/navbar.less b/less/navbar.less index 54c5079bd4..8cb4274110 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -117,6 +117,7 @@ .navbarVerticalAlign(28px); // Vertically center in navbar margin-bottom: 0; .search-query { + margin-bottom: 0; padding: 4px 9px; #font > .sans-serif(13px, normal, 1); color: @white; @@ -384,6 +385,8 @@ #gradient > .vertical(#ffffff, #f1f1f1); .box-shadow(none); border: 1px solid #e5e5e5; + padding-left: 10px; + padding-right: 10px; } // Lighten vertical dividers From 93b1519017ecf002883b72cd69d4e08fc2500697 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 11:17:22 -0700 Subject: [PATCH 197/422] content edits to Extend page --- docs/extend.html | 20 +++++++++++++++----- docs/templates/pages/extend.mustache | 20 +++++++++++++++----- 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/docs/extend.html b/docs/extend.html index 8f8f548beb..66576aae80 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -102,8 +102,15 @@

            Built with LESS

          +

          Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

          +

          Why LESS?

          -

          Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

          +

          One of Bootstrap's creators wrote a quick blog post about this, summarized here:

          +
            +
          • Bootstrap compiles faster ~6x faster with Less compared to Sass
            • +
          • Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.
            • +
          • Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.
            • +

          What's included?

          As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

          @@ -119,8 +126,11 @@ ================================================== -->
          -

          Compiling Bootstrap with LESS

          +

          Compiling Bootstrap with Less

          + +

          Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.

          +
          Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.
          @@ -147,8 +157,7 @@

          To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

          Unofficial Mac app

          -

          The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.

          -

          If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

          +

          The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

          More Mac apps

          Crunch

          @@ -156,7 +165,7 @@

          CodeKit

          Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

          Simpless

          -

          Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

          +

          Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

          @@ -168,6 +177,7 @@

          Use as static assets

          +

          Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

          ...

          diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index 914d22a8e7..d3fa364bdf 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -31,8 +31,15 @@

          {{_i}}Built with LESS{{/i}}

        +

        {{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

        +

        {{_i}}Why LESS?{{/i}}

        -

        {{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

        +

        {{_i}}One of Bootstrap's creators wrote a quick blog post about this, summarized here:{{/i}}

        +
          +
        • {{_i}}Bootstrap compiles faster ~6x faster with Less compared to Sass{{/i}}
          • +
        • {{_i}}Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.{{/i}}
          • +
        • {{_i}}Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.{{/i}}
          • +

        {{_i}}What's included?{{/i}}

        {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

        @@ -48,8 +55,11 @@ ================================================== -->
        -

        {{_i}}Compiling Bootstrap with LESS{{/i}}

        +

        {{_i}}Compiling Bootstrap with Less{{/i}}

        + +

        {{_i}}Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.{{/i}}

        +
        {{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}}
        @@ -76,8 +86,7 @@

        {{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

        {{_i}}Unofficial Mac app{{/i}}

        -

        {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}

        -

        {{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

        +

        {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

        {{_i}}More Mac apps{{/i}}

        Crunch

        @@ -85,7 +94,7 @@

        CodeKit

        {{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

        Simpless

        -

        {{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

        +

        {{_i}}Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

        @@ -97,6 +106,7 @@

        {{_i}}Use as static assets{{/i}}

        +

        Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

        ...

        From 6e622ee763867baae6f0c58f026621ee0c200288 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 11:18:35 -0700 Subject: [PATCH 198/422] more content edits to Extend --- docs/extend.html | 2 +- docs/templates/pages/extend.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/extend.html b/docs/extend.html index 66576aae80..1e1c753ea5 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -102,6 +102,7 @@

        Built with LESS

        + LESS CSS

        Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

        Why LESS?

        @@ -116,7 +117,6 @@

        As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

        Learn more

        - LESS CSS

        Visit the official website at http://lesscss.org to learn more.

        diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index d3fa364bdf..56b114b446 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -31,6 +31,7 @@

        {{_i}}Built with LESS{{/i}}

        + LESS CSS

        {{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

        {{_i}}Why LESS?{{/i}}

        @@ -45,7 +46,6 @@

        {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

        {{_i}}Learn more{{/i}}

        - LESS CSS

        {{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

        From 463de252a9d695d6b52045e5e7df4e7b82ffb116 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 14:20:25 -0700 Subject: [PATCH 199/422] update static assets section of extend page, copy changes elsewhere --- docs/base-css.html | 18 +++------ docs/extend.html | 55 +++++++++++++++++++++++++- docs/templates/pages/base-css.mustache | 18 +++------ docs/templates/pages/extend.mustache | 55 +++++++++++++++++++++++++- 4 files changed, 118 insertions(+), 28 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 2897453978..d01d5350c9 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -123,12 +123,14 @@

        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

        Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

        + 
        <p>...</p>

        Lead body copy

        Make a paragraph stand out by adding .lead.

        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

        + 
        <p class="lead">...</p>

        Built with Less

        The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

        @@ -145,18 +147,14 @@

        The following snippet of text is rendered as bold text.

        -
        -<strong>rendered as bold text</strong>
-
        + 
        <strong>rendered as bold text</strong>

        <em>

        For emphasizing a snippet of text with stress

        The following snippet of text is rendered as italicized text.

        -
        -<em>rendered as italicized text</em>
-
        + 
        <em>rendered as italicized text</em>

        Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

        @@ -172,18 +170,14 @@

        An abbreviation of the word attribute is attr.

        -
        -<abbr title="attribute">attr</abbr>
-
        + 
        <abbr title="attribute">attr</abbr>

        <abbr class="initialism">

        Add .initialism to an abbreviation for a slightly smaller font-size.

        HTML is the best thing since sliced bread.

        -
        -<abbr title="attribute" class="initialism">attr</abbr>
-
        + 
        <abbr title="attribute" class="initialism">attr</abbr>
        diff --git a/docs/extend.html b/docs/extend.html index 1e1c753ea5..8e9b79b6b0 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -177,8 +177,59 @@

        Use as static assets

        -

        Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

        -

        ...

        +

        Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

        + +

        Setup file structure

        +

        Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

        +
        +  app/
+  ├── layouts/
+  └── templates/
+  public/
+  ├── css/
+  │   ├── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.min.js
+  └── img/
+      ├── glyphicons-halflings.png
+      └── glyphicons-halflings-white.png
+
        + +

        Utilize starter template

        +

        Copy the following base HTML to get started.

        +
        +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+    <script src="public/js/bootstrap.min.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+
        + +

        Layer on custom code

        +

        Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

        +
        +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+    <script src="public/js/bootstrap.min.js"></script>
+    <!-- Project -->
+    <link href="public/css/application.css" rel="stylesheet">
+    <script src="public/js/application.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+
        + diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 456ea059bc..7e7106fb6e 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -54,6 +54,7 @@

        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

        Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

        + 
        <p>...</p>
        {{! Body copy .lead }}

        {{_i}}Lead body copy{{/i}}

        @@ -61,6 +62,7 @@

        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

        + 
        <p class="lead">...</p>
        {{! Using LESS }}

        {{_i}}Built with Less{{/i}}

        @@ -79,18 +81,14 @@

        The following snippet of text is rendered as bold text.

        -
        -<strong>rendered as bold text</strong>
-
        + 
        <strong>rendered as bold text</strong>

        <em>

        {{_i}}For emphasizing a snippet of text with stress{{/i}}

        The following snippet of text is rendered as italicized text.

        -
        -<em>rendered as italicized text</em>
-
        + 
        <em>rendered as italicized text</em>

        {{_i}}Heads up!{{/i}} {{_i}}Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.{{/i}}

        @@ -107,18 +105,14 @@

        {{_i}}An abbreviation of the word attribute is attr.{{/i}}

        -
        -<abbr title="attribute">attr</abbr>
-
        + 
        <abbr title="attribute">attr</abbr>

        <abbr class="initialism">

        {{_i}}Add .initialism to an abbreviation for a slightly smaller font-size.{{/i}}

        {{_i}}HTML is the best thing since sliced bread.{{/i}}

        -
        -<abbr title="attribute" class="initialism">attr</abbr>
-
        + 
        <abbr title="attribute" class="initialism">attr</abbr>
        diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index 56b114b446..d7384d58ad 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -106,8 +106,59 @@

        {{_i}}Use as static assets{{/i}}

        -

        Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

        -

        ...

        +

        {{_i}}Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.{{/i}}

        + +

        {{_i}}Setup file structure{{/i}}

        +

        {{_i}}Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:{{/i}}

        +
        +  app/
+  ├── layouts/
+  └── templates/
+  public/
+  ├── css/
+  │   ├── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.min.js
+  └── img/
+      ├── glyphicons-halflings.png
+      └── glyphicons-halflings-white.png
+
        + +

        {{_i}}Utilize starter template{{/i}}

        +

        {{_i}}Copy the following base HTML to get started.{{/i}}

        +
        +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+    <script src="public/js/bootstrap.min.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+
        + +

        {{_i}}Layer on custom code{{/i}}

        +

        {{_i}}Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.{{/i}}

        +
        +<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+    <script src="public/js/bootstrap.min.js"></script>
+    <!-- Project -->
+    <link href="public/css/application.css" rel="stylesheet">
+    <script src="public/js/application.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+
        + From 74b167b86d981190120cbc8ba350e99702f0ec00 Mon Sep 17 00:00:00 2001 From: Martin Bean Date: Fri, 13 Jul 2012 22:25:47 +0100 Subject: [PATCH 200/422] Moved JS to bottom as per best practices --- docs/assets/js/bootstrap.min.js | 2 +- docs/getting-started.html | 2 +- docs/templates/pages/getting-started.mustache | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js index b7dc1c7cb0..17791e1f42 100644 --- a/docs/assets/js/bootstrap.min.js +++ b/docs/assets/js/bootstrap.min.js @@ -3,4 +3,4 @@ * Copyright 2012 Twitter, Inc. * http://www.apache.org/licenses/LICENSE-2.0.txt */ -!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove()},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.$element.off().removeData("tooltip")}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
        ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.$element.off().removeData("popover")}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

        '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),this.query?(c=a.isFunction(this.source)?this.source(this.query,a.proxy(this.process,this)):this.source,c?this.process(c):this):this.shown?this.hide():this},process:function(b){var c=this;return b=a.grep(b,function(a){return c.matcher(a)}),b=this.sorter(b),b.length?this.render(b.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(a){return~a.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(a){var b=[],c=[],d=[],e;while(e=a.shift())e.toLowerCase().indexOf(this.query.toLowerCase())?~e.indexOf(this.query)?c.push(e):d.push(e):b.push(e);return b.concat(c,d)},highlighter:function(a){var b=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return a.replace(new RegExp("("+b+")","ig"),function(a,b){return""+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(a){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(a.keyCode),this.move(a)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
          ',item:'
          • '},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file +!function(e){e(function(){"use strict";e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()},e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e(function(){e("body").on("click.alert.data-api",t,n.prototype.close)})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.parent('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")},e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e(function(){e("body").on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=n,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},to:function(t){var n=this.$element.find(".item.active"),r=n.parent().children(),i=r.index(n),s=this;if(t>r.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){s.to(t)}):i==t?this.pause().cycle():this.slide(t>i?"next":"prev",e(r[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f=e.Event("slide",{relatedTarget:i[0]});this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u]();if(i.hasClass("active"))return;if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}},e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e(function(){e("body").on("click.carousel.data-api","[data-slide]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=!i.data("modal")&&e.extend({},i.data(),n.data());i.carousel(s),t.preventDefault()})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning)return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning)return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=typeof n=="object"&&n;i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e(function(){e("body").on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})})}(window.jQuery),!function(e){"use strict";function r(){i(e(t)).removeClass("open")}function i(t){var n=t.attr("data-target"),r;return n||(n=t.attr("href"),n=n&&n.replace(/.*(?=#[^\s]*$)/,"")),r=e(n),r.length||(r=t.parent()),r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||(s.toggleClass("open"),n.focus()),!1},keydown:function(t){var n,r,s,o,u,a;if(!/(38|40|27)/.test(t.keyCode))return;n=e(this),t.preventDefault(),t.stopPropagation();if(n.is(".disabled, :disabled"))return;o=i(n),u=o.hasClass("open");if(!u||u&&t.keyCode==27)return n.click();r=e("[role=menu] li:not(.divider) a",o);if(!r.length)return;a=r.index(r.filter(":focus")),t.keyCode==38&&a>0&&a--,t.keyCode==40&&a').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,e.proxy(this.removeBackdrop,this)):this.removeBackdrop()):t&&t()}},e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e(function(){e("body").on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s)})})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,this.options.trigger!="manual"&&(i=this.options.trigger=="hover"?"mouseenter":"focus",s=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(i,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s,this.options.selector,e.proxy(this.leave,this))),this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,t,this.$element.data()),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);if(!n.options.delay||!n.options.delay.show)return n.show();clearTimeout(this.timeout),n.hoverState="in",this.timeout=setTimeout(function(){n.hoverState=="in"&&n.show()},n.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var e,t,n,r,i,s,o;if(this.hasContent()&&this.enabled){e=this.tip(),this.setContent(),this.options.animation&&e.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,e[0],this.$element[0]):this.options.placement,t=/in/.test(s),e.remove().css({top:0,left:0,display:"block"}).appendTo(t?this.$element:document.body),n=this.getPosition(t),r=e[0].offsetWidth,i=e[0].offsetHeight;switch(t?s.split(" ")[1]:s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}e.css(o).addClass(s).addClass("in")}},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function r(){var t=setTimeout(function(){n.off(e.support.transition.end).remove()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.remove()})}var t=this,n=this.tip();n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?r():n.remove()},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(t){return e.extend({},t?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.$element.off().removeData("tooltip")}},e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
          ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content > *")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-content")||(typeof n.content=="function"?n.content.call(t[0]):n.content),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.$element.off().removeData("popover")}}),e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",content:"",template:'

          '})}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var t=e(this),n=t.data("target")||t.attr("href"),r=/^#\w/.test(n)&&e(n);return r&&r.length&&[[r.position().top,n]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parent(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parent("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}},e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e(function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active a").last()[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}},e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e(function(){e("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=e(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:t.top+t.height,left:t.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),this.query?(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this):this.shown?this.hide():this},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return""+t+""})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),(e.browser.webkit||e.browser.msie)&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this))},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(e){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(e.keyCode),this.move(e)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},blur:function(e){var t=this;setTimeout(function(){t.hide()},150)},click:function(e){e.stopPropagation(),e.preventDefault(),this.select()},mouseenter:function(t){this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")}},e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'
            ',item:'
            • '},e.fn.typeahead.Constructor=t,e(function(){e("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;t.preventDefault(),n.typeahead(n.data())})})}(window.jQuery); \ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index 51eab28415..d46232fc27 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -216,10 +216,10 @@ <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> - <script src="js/bootstrap.min.js"></script> </head> <body> <h1>Hello, world!</h1> + <script src="js/bootstrap.min.js"></script> </body> </html> diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index ed203281ae..486a0b79a1 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -145,10 +145,10 @@ <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> - <script src="js/bootstrap.min.js"></script> </head> <body> <h1>Hello, world!</h1> + <script src="js/bootstrap.min.js"></script> </body> </html> From 750badabf760d7fb0a68a1a214442ecbdff8a16c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 14:43:51 -0700 Subject: [PATCH 201/422] copy edits and tweaks to utility classes to ensure they always are specific enough --- docs/assets/css/bootstrap.css | 4 ++-- docs/assets/css/docs.css | 4 ++++ docs/extend.html | 2 +- docs/templates/layout.mustache | 2 +- less/utilities.less | 5 +++-- 5 files changed, 11 insertions(+), 6 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 30de241fec..123b2ac33f 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -5408,11 +5408,11 @@ a.badge:hover { } .hide { - display: none; + display: none !important; } .show { - display: block; + display: block !important; } .invisible { diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 0a713d626c..2c73a78c2e 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -57,6 +57,10 @@ body > .navbar-fixed-top .brand:hover { section { padding-top: 60px; } +section > .page-header, +section > .lead { + color: #5a5a5a; +} /* Separators (hr) */ .bs-docs-separator { diff --git a/docs/extend.html b/docs/extend.html index 8e9b79b6b0..df30b679ab 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -60,7 +60,7 @@
          • Javascript
            • -
          • +
          • Extend
          diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 6ba72e841d..3366179deb 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -72,7 +72,7 @@
        • {{_i}}Javascript{{/i}}
          • -
        • +
        • {{_i}}Extend{{/i}}
          • diff --git a/less/utilities.less b/less/utilities.less index 35267b3053..9d3a405b1c 100644 --- a/less/utilities.less +++ b/less/utilities.less @@ -12,11 +12,12 @@ } // Toggling content +// Uses `!important` for proper specifity over things like form controls .hide { - display: none; + display: none !important; } .show { - display: block; + display: block !important; } // Visibility From e20d2dfe9d1f43e164d8fdbef64f4041df70b762 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jul 2012 16:13:25 -0700 Subject: [PATCH 202/422] docs cleanup and blockquote cleanup for .pull-right option --- docs/assets/css/bootstrap.css | 8 ++++++++ docs/assets/css/docs.css | 3 +++ docs/base-css.html | 5 ++--- docs/scaffolding.html | 12 ++++++------ docs/templates/pages/base-css.mustache | 5 ++--- docs/templates/pages/scaffolding.mustache | 12 ++++++------ less/tests/css-tests.html | 1 - less/type.less | 8 ++++++++ 8 files changed, 35 insertions(+), 19 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 123b2ac33f..0040d4d0f7 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -763,6 +763,14 @@ blockquote.pull-right small { text-align: right; } +blockquote.pull-right small:before { + content: ''; +} + +blockquote.pull-right small:after { + content: '\00A0 \2014'; +} + q:before, q:after, blockquote:before, diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 2c73a78c2e..a3ca5850e3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -61,6 +61,9 @@ section > .page-header, section > .lead { color: #5a5a5a; } +section > ul li { + margin-bottom: 5px; +} /* Separators (hr) */ .bs-docs-separator { diff --git a/docs/base-css.html b/docs/base-css.html index d01d5350c9..46685b1129 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -253,7 +253,7 @@

          Alternate displays

          -

          Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.

          +

          Use .pull-right for a floated, right-aligned blockquote.

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

          @@ -262,8 +262,7 @@ 
           <blockquote class="pull-right">
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
+  ...
 </blockquote>
          diff --git a/docs/scaffolding.html b/docs/scaffolding.html index dcdbadda4a..1aca819f91 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -168,7 +168,7 @@

          Basic grid HTML

          -

          For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row.

          +

          For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

           <div class="row">
   <div class="span4">...</div>
@@ -207,10 +207,10 @@
             
          
               Level 1 of column
               
          
-                
          
+                
          
                   Level 2
                 
          
-                
          
+                
          
                   Level 2
                 
          
               
          
@@ -218,11 +218,11 @@
           
          
 
           <div class="row">
-  <div class="span10">
+  <div class="span9">
     Level 1 column
     <div class="row">
-      <div class="span5">Level 2</div>
-      <div class="span5">Level 2</div>
+      <div class="span6">Level 2</div>
+      <div class="span3">Level 2</div>
     </div>
   </div>
 </div>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 7e7106fb6e..a630acfeda 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -190,7 +190,7 @@
 
          
 
         
          {{_i}}Alternate displays{{/i}}
          
-        
          {{_i}}Use .pull-left and .pull-right classes for floated, right-aligned blockquote content.{{/i}}
          
+        
          {{_i}}Use .pull-right for a floated, right-aligned blockquote.{{/i}}
          
         
          
           
          
             
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          
@@ -199,8 +199,7 @@
         
          
 
           <blockquote class="pull-right">
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <small>{{_i}}Someone famous <cite title="Source Title">Source Title</cite>{{/i}}</small>
+  ...
 </blockquote>
 
          
 
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 86806bb563..4b9d4c5b25 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -97,7 +97,7 @@
         
          
 
         
          {{_i}}Basic grid HTML{{/i}}
          
-        
          {{_i}}For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row.{{/i}}
          
+        
          {{_i}}For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).{{/i}}
          
 
           <div class="row">
   <div class="span4">...</div>
@@ -136,10 +136,10 @@
             
          
               {{_i}}Level 1 of column{{/i}}
               
          
-                
          
+                
          
                   {{_i}}Level 2{{/i}}
                 
          
-                
          
+                
          
                   {{_i}}Level 2{{/i}}
                 
          
               
          
@@ -147,11 +147,11 @@
           
          
 
           <div class="row">
-  <div class="span10">
+  <div class="span9">
     {{_i}}Level 1 column{{/i}}
     <div class="row">
-      <div class="span5">{{_i}}Level 2{{/i}}</div>
-      <div class="span5">{{_i}}Level 2{{/i}}</div>
+      <div class="span6">{{_i}}Level 2{{/i}}</div>
+      <div class="span3">{{_i}}Level 2{{/i}}</div>
     </div>
   </div>
 </div>
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 6cc48a6082..fd687ac3a5 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -1053,7 +1053,6 @@
 
 
 
-
     
          
 
 
diff --git a/less/type.less b/less/type.less
index 697b64a54b..5cb93af0fe 100644
--- a/less/type.less
+++ b/less/type.less
@@ -179,6 +179,14 @@ blockquote {
     small {
       text-align: right;
     }
+    small {
+      &:before {
+        content: '';
+      }
+      &:after {
+        content: '\00A0 \2014';
+      }
+    }
   }
 }
 

From 9581cbfe3240583d898b788452788e40878b912e Mon Sep 17 00:00:00 2001
From: Ben Oakes 
Date: Mon, 16 Jul 2012 09:29:49 -0400
Subject: [PATCH 203/422] Two of the three apps are for Linux/Windows; adjust
 accordingly

---
 docs/templates/pages/extend.mustache | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache
index aae99f765d..bbebe8e759 100644
--- a/docs/templates/pages/extend.mustache
+++ b/docs/templates/pages/extend.mustache
@@ -79,12 +79,12 @@
   
          {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}
          
   
          {{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}
          
 
-  
          {{_i}}More Mac apps{{/i}}
          
+  
          {{_i}}More apps{{/i}}
          
   
          Crunch
          
   
          {{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}
          
   
          CodeKit
          
   
          {{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}
          
   
          Simpless
          
-  
          {{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}
          
+  
          {{_i}}Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}
          
 
 

From 426e7d9fbd87421e56a76e17a19de97a6e08c460 Mon Sep 17 00:00:00 2001
From: Ben Oakes 
Date: Mon, 16 Jul 2012 09:31:18 -0400
Subject: [PATCH 204/422] Compiled; ignoring bootstrap.css change to avoid
 conflicts

---
 docs/extend.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/extend.html b/docs/extend.html
index 7169908a6a..4b200f31a1 100644
--- a/docs/extend.html
+++ b/docs/extend.html
@@ -156,13 +156,13 @@
   
          The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.
          
   
          If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.
          
 
-  
          More Mac apps
          
+  
          More apps
          
   
          Crunch
          
   
          Crunch is a great looking LESS editor and compiler built on Adobe Air.
          
   
          CodeKit
          
   
          Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.
          
   
          Simpless
          
-  
          Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.
          
+  
          Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.
          
 
 
 

From 2ee9b2717bfd532e93eb6d4037ae7ca7a5436957 Mon Sep 17 00:00:00 2001
From: Jon Stevens 
Date: Mon, 16 Jul 2012 16:01:11 -0700
Subject: [PATCH 205/422] namespace the events for popover/tooltip so that they
 can be cleanly removed. issue #3880

---
 docs/templates/pages/javascript.mustache | 12 ++++++++++++
 js/bootstrap-popover.js                  |  3 ++-
 js/bootstrap-tooltip.js                  |  7 ++++---
 js/tests/unit/bootstrap-popover.js       |  6 ++++--
 js/tests/unit/bootstrap-tooltip.js       |  6 ++++--
 5 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 81ef75209d..49d065c326 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -754,6 +754,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
               
          {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}
          
              
            
+           
+             {{_i}}ns{{/i}}
+             {{_i}}string{{/i}}
+             '.tooltip'
+             {{_i}}jQuery event namespace{{/i}}
+           
           
         
         
          
@@ -912,6 +918,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
               
          {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}
          
              
            
+           
+             {{_i}}ns{{/i}}
+             {{_i}}string{{/i}}
+             '.popover'
+             {{_i}}jQuery event namespace{{/i}}
+           
           
         
         
          
diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js
index fe22ecb47c..845108b9ba 100644
--- a/js/bootstrap-popover.js
+++ b/js/bootstrap-popover.js
@@ -72,7 +72,7 @@
     }
 
   , destroy: function () {
-      this.$element.off().removeData('popover')
+      this.$element.off(this.options.ns).removeData('popover')
     }
 
   })
@@ -97,6 +97,7 @@
     placement: 'right'
   , content: ''
   , template: '
          '
+  , ns: '.popover'
   })
 
 }(window.jQuery);
\ No newline at end of file
diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js
index f280e36966..02f84d470d 100644
--- a/js/bootstrap-tooltip.js
+++ b/js/bootstrap-tooltip.js
@@ -47,8 +47,8 @@
       if (this.options.trigger != 'manual') {
         eventIn  = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
         eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
-        this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
-        this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
+        this.$element.on(eventIn + this.options.ns, this.options.selector, $.proxy(this.enter, this))
+        this.$element.on(eventOut + this.options.ns, this.options.selector, $.proxy(this.leave, this))
       }
 
       this.options.selector ?
@@ -236,7 +236,7 @@
     }
 
   , destroy: function () {
-      this.$element.off().removeData('tooltip')
+      this.$element.off(this.options.ns).removeData('tooltip')
     }
 
   }
@@ -266,6 +266,7 @@
   , title: ''
   , delay: 0
   , html: true
+  , ns: '.tooltip'
   }
 
 }(window.jQuery);
diff --git a/js/tests/unit/bootstrap-popover.js b/js/tests/unit/bootstrap-popover.js
index 6d5d9f7a18..290be827ff 100644
--- a/js/tests/unit/bootstrap-popover.js
+++ b/js/tests/unit/bootstrap-popover.js
@@ -92,12 +92,14 @@ $(function () {
       })
 
       test("should destroy popover", function () {
-        var popover = $('
          ').popover()
+        var popover = $('
          ').popover().on('click.foo', function(){})
         ok(popover.data('popover'), 'popover has data')
         ok(popover.data('events').mouseover && popover.data('events').mouseout, 'popover has hover event')
+        ok(popover.data('events').click[0].namespace == 'foo', 'popover has extra click.foo event')
         popover.popover('destroy')
         ok(!popover.data('popover'), 'popover does not have data')
-        ok(!popover.data('events'), 'popover does not have any events')
+        ok(popover.data('events').click[0].namespace == 'foo', 'popover still has click.foo')
+        ok(!popover.data('events').mouseover && !popover.data('events').mouseout, 'popover does not have any events')
       })
       
 })
\ No newline at end of file
diff --git a/js/tests/unit/bootstrap-tooltip.js b/js/tests/unit/bootstrap-tooltip.js
index 7852305c1e..66bbeac7ec 100644
--- a/js/tests/unit/bootstrap-tooltip.js
+++ b/js/tests/unit/bootstrap-tooltip.js
@@ -129,12 +129,14 @@ $(function () {
       })
 
       test("should destroy tooltip", function () {
-        var tooltip = $('
          ').tooltip()
+        var tooltip = $('
          ').tooltip().on('click.foo', function(){})
         ok(tooltip.data('tooltip'), 'tooltip has data')
         ok(tooltip.data('events').mouseover && tooltip.data('events').mouseout, 'tooltip has hover event')
+        ok(tooltip.data('events').click[0].namespace == 'foo', 'tooltip has extra click.foo event')
         tooltip.tooltip('destroy')
         ok(!tooltip.data('tooltip'), 'tooltip does not have data')
-        ok(!tooltip.data('events'), 'tooltip does not have any events')
+        ok(tooltip.data('events').click[0].namespace == 'foo', 'tooltip still has click.foo')
+        ok(!tooltip.data('events').mouseover && !tooltip.data('events').mouseout, 'tooltip does not have any events')
       })
 
 })

From 478396fd4eaacd505104f44f97e0470409ce433a Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 17 Jul 2012 19:11:41 -0700
Subject: [PATCH 206/422] remove list-type declarations from ul and ol elements
 since those should just use browser defaults

---
 docs/assets/css/bootstrap.css | 8 --------
 less/type.less                | 6 ------
 2 files changed, 14 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 0040d4d0f7..3e79f94102 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -649,14 +649,6 @@ ol ul {
   margin-bottom: 0;
 }
 
-ul {
-  list-style: disc;
-}
-
-ol {
-  list-style: decimal;
-}
-
 li {
   line-height: 20px;
 }
diff --git a/less/type.less b/less/type.less
index 5cb93af0fe..b1e3230337 100644
--- a/less/type.less
+++ b/less/type.less
@@ -75,12 +75,6 @@ ol ol,
 ol ul {
   margin-bottom: 0;
 }
-ul {
-  list-style: disc;
-}
-ol {
-  list-style: decimal;
-}
 li {
   line-height: @baseLineHeight;
 }

From 4008d666a5e8c78766a68811b08f9b8500b1fc8e Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 17 Jul 2012 19:54:29 -0700
Subject: [PATCH 207/422] new pattern for masthead

---
 docs/assets/css/docs.css                     |  19 ++++++++++++++++++-
 docs/assets/img/bs-docs-masthead-pattern.png | Bin 0 -> 16369 bytes
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 docs/assets/img/bs-docs-masthead-pattern.png

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a3ca5850e3..761dc9686b 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -105,7 +105,6 @@ hr.soften {
   -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), inset 0 -3px 7px rgba(0,0,0,.15);
      -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), inset 0 -3px 7px rgba(0,0,0,.15);
           box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), inset 0 -3px 7px rgba(0,0,0,.15);
-
 }
 .jumbotron h1 {
   font-size: 80px;
@@ -132,6 +131,24 @@ hr.soften {
   font-size: 14px;
 }
 
+/* Pattern overlay
+------------------------- */
+.jumbotron .container {
+  position: relative;
+  z-index: 2;
+}
+.jumbotron:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: url(../img/bs-docs-masthead-pattern.png);
+  opacity: .5;
+}
+
 /* Masthead (docs home)
 ------------------------- */
 .masthead {
diff --git a/docs/assets/img/bs-docs-masthead-pattern.png b/docs/assets/img/bs-docs-masthead-pattern.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca0f63458898e24a332ea95ae4160b4b085fdcf4
GIT binary patch
literal 16369
zcmZ9zbySn#`v**ScaE+BqmdX5f|S%85~CZWVRUz+7=TE}Kn4m(jE(`KfQlfXbcn=8
zE8#o8-{1E=?|J{&dCu8+?&rR*XV>og`oxuCW~xt3!9jtChev(SK-U5f4`1Tnhl~XG
zO+-v?DDJ`@qGugq>F*vA?iA#Pr{(JJ?8bY~&&k8h!p+GwB5=YDjEAT3_@1to6?}2u
zJ}r#1r#Yp%HB&OYuJr2fO4yNd2KSva#iJS8ap_a0bKyWq$q7?m+O9i_nl0tfr(1D&
z<;jS-7?3TDbj>5WV|``b;PS_xm3bP|57lS4F=yD`pTx_m^3nG<&48%Mno)NiVbq^X
zJ6^HafX&so^jppEjcJ6k1Jk~A=a-9tM<5c9>!V)`8vWN-Hf!^?(H_%hxhop&?y`)r
zr>3urXpH_u*GJHMr2g##VNUi}<|S{J#4m1s_ak#OmlxngMwDJW9dO83rFZ=lgHn;NX4x?1Lnj|lNJCf;sk4Iwk{vI6*+VSuQq*|8-zS6_D4t`}s2##Eyev4#X{@Y_V
zGR%q$Vgk;euN6W~>_jPz2q8fuUi{pl-q}Y&k#>=O)ba6;18yF9uwiE!(d?%r0^F9z
zZEISIb8q9*d|=#JX5U(9c~FH6O>cyc9N#JwJQ@hS<(ha$4-?Si%{A$aB*;kRO0ecx
zndwQ9&Q^ha8yQZ9ZWT}zHN`Zkofvxcu_Ib(q_9F9E6h8R&z`f&Og!8aw3C;tWMyBQ
zs*pjj-Mv3V-aS&41GS8H2u6OVr+{z+RJmT+f+B5{w~HPmhYtMSRmTw0PoOW)ex5$Vj(`>Z_$8kLl=Q9<8RCy*5?TXK?5L4P80e_*KUII_kg1U{2Ig>QAg@gvO*OLB3M<0hdK_d?Z^W$mFqf;$j1srB
z+C$vl1l4((Fs&j-yQo9b*9JMWza)95a(x|glY(eUsNi#oZpInVXSpqyNpWForlEd8
zQ&DzJVFTH_9qd+7p>}6kH@#woo)y>&i;*M?Dwq8WBjKAj6XKtDzOEG+4IU@p7I_(C
ztxR9vFq^8a(iD|a76^Kgm;W&Kh%chfvlB_@POQiTh^eP(Ip_ZS+Pb4|{CF~?$3Ox_
z@o(sE%Q|mx1q0^+O+k*3re~Ki
zuQnJc0V4v%42WYO>l(vR)gn6vmy>UD(Ec#y(m@(Q65%@)h?8ujf#}_0sfGJ84a$Ro
zjb|4spZ|`SaKRIY>OlC##Fq8
z*7u0s&kvrw(M*iiz2YGK702zOrOyv4a8#MFpnvXjeaokXo=w`Wj*_B>bqx*QK?X5^
zzFzd3jn@(1fwwm8CVToW{bi<^lpBBb+r{M~b?r*6@PPW1ReYZp&*C#Ptd;bXf3h6;DELyy1%p{=8!u
z9)vg%h;A{v)e?AeU#qjYvJnKU0a}HkB9F64zxTR5hPJL@GoX4pmwm=?Z;Lxhca&($
zh>6yzgO#)Gq@IpRuz*v!>3!-)dfqQPa3i%>*Ak(vtGE%N^j{&u%FLR)$N*qRCSE#w
zNN|qfQ$rd$
zc79Qv%QSi3L%r=xF&WRcNx*o}xHn-@qM7&GN+W!kMJBM{EwlyD1~P~^vY5!nQ*33`sIxx5=5-Za
zA9a$U)_0e~!8z|@KXBwsueRr7XrI6Z`F4|?)B2)19QK-l9`WGcR3!ZKD)^2I%?=%W
zU)*gg7Xf7viE9xzf7cVuwn-G$98T>`!e`OXBWVo|}-*
ze)&FBDK6)t^UDL={DSF^me%BEh=Y)T+gcDnpcFKr_z;#dGAxXA&g`TS9Z*3X=jaRk
z3o#2YcJ^D!-Z9;(R%G3!mv}8crsr7H1_7ta7XXImg=2y8fDSlwV?e_(kO=S^MjE)sUuKc?)bcivLl|k)Mh(VD0j#?im~AcOs1TKjpC=3({bD?J?_X)bhxOco
zlsKlK(Dhyei?|nH-M|t~CT3%@A^amwC`&*4qPd3mK`pp>SZ5PL1#de>ysjjF|LK(z
zd^-x{z)HbWj*uvP|K)y1FMn4vAv>-@A>MsmHfy-{%mCAAYTV>&%A5hc@Z71u?&_eu
z(iI1RU0M%`NVaM2{Xp+byvFmQs2tr0q@KHL|FT5ID@(_-pmTdnan!wvcb~4+6`tJ8
zbFagGkBr5~h-yXWhxfRqBl%)nfC?X>adT0lm=njJZriaEkNQI?=x7yDRL>6+xSmUK
zq$M+mJ}*=dRji5jN(2o$b9Yh8OS&Eq{5@A?#co;0TXhtf`9(Oo$kAe`q8DHstMrV>
zATQx_+=au|_R~w+l5l(#87+&y@!KDwz<6y|u~bEkFRFf1oagaR$ag=z7^Ta59#Ldu
z*`8+|ahB$2A9l?TbU6yPQ5v9;D39T>PM8+Hn}Rl@dJvXvN9XfddJG63nQAQMDnZ1I
zj5lhi2+Dcf0b+o42ih(2~pd$;PGnn8=$`$zc%7aT
z8I;`=vM;~_^D-fS=%XsU4U((v
z=FP(wF}D}$x=66o0UC4{Hx0SBXpEoU{WREKuk{1{zU^r`=<&FO?_W3iycv`VNyVr3
zJUSGCZDRYdbRf}rb1D52^+%@_>UgCGYmsSteOM3uxFm|fA2uU|0h4PbxTDkxalV!X
zCC#5weQ!$su*4B<2UemafB5ET4llhlZ+pDMhib)sxpR`op*4dv4(z)19Ez5(5E&WiH8?qatrA;i18W|-!qpo_|?l$aLd7QV^fDbXfrFqo+sBg$a
zUC+w>+^GcmWp^{PO~;(RiQxo~vE^O3d%R`#i#4kaLA$>z=g%n}U4Ap3KCY>BqRJNs
z9kU5p8SSbX!Re5(T7V_i=xM6G+Cw=?6r!YE5(0;a-r@^eIY^SToGe^iwp3{*7E}ei
z&bO18y{;FPHA%(tWXIbptk1&oe@H?j8bYDdmdD_CUMI8@`g&3vGFZ8JwGe<2
z6(OM0k2qLP_DMA#Qy90u_t~AzC7_=jx>-aHn19ZAFG5ec!%jR8O>Ii+AmJG=i?k{{
zjDDnfQ6@o9nMdn=(kxj*dMEha$8aHew?E%PkBTJ0i*TW=wD&0$Us5J(W0qZ7f~Dc6
zk}zhDxb(2Wup$wE0_R)}o)g(%5dAzs1|J|IUm;sA`^#5AS$hst7EWbW{_4}`hE1+b
zRS_kX^NJ7RFUhhL8j>>2;&MjSo_Vx>vxDUn1dS++?!+bTMFPIXib^Wm4hY1(tKFW7x0=Y50P2(Q?U+XJN)e5D&I%H8XqH
z3h}$zzTKMJ9Dx!;2=*@uBZa2$$6{7R?#DxtXEmNLbV)s%;t2B+;YqK`FhGW
zCbsPiOWOK&
zZ&C-Tt^kX)oUHg&;xdyqp2t9DaFCZh%7!nOR*Ca-SvM<7eCNQtkIr~3;cssB9KFsE
zDwo{n@+Q<$yw~qAZNQ(i1XTt9ryT}1=EQb_%*&-HNGaWDyf2ro8Pt0EkhK$m_
zB2v8Rg{GHyVy3RXC)ky}R{((E%;JFjjF|dk!-!?v!k#?;rNjydNk{x~Q2OD%G`u8B
z<-WTg&1+t7Y&2aTWReE`1ZR30Uyixv%1|J_;r=ADcI?7NNi|oud*gXzX&m~;?gS`|
z3s@MnH&WF?Ho|})x)!QysjH>QmKt^>pOG@C#lJ-Au~H&)do}%iQQjj-Lf^j~V+R@N
zB(9?dR<=~}0WP2H6<9x^k+cBnBr+`7anEYZ25#rz!;X)t`yTJz0W?1<04v;x%{08k
zD7BM-pF7^*MKuchK0IMwdC1nOn$!AZCq7jy{a1_*@iqt9TeJasf)%N~QDF3TwDCTi
zsW2G+V(cU0An+*mA+
zKWuddKs1V&YH#(Kj|?4p@`$lb0%Y8+uNIBwM;nE~Uo)^k(zRmeFSpg6JaVYJ*!#p#zooXk
zzagJARr223IGdbD4Y!LGPW*Z(km@!)t)n
z#EA9B#E#acTa<<3^3q-3MU_)DXv>S)D1;6u1HxZtjf*pacblBNBR)M($?BiM4Aih0
zU)4{E&-qc$U%vO_USccvl+14tPONzATe30tZj(4pJN(!t%#OsM391jb+jx5@v8IKJ
zoFM!Be&D=yOst$7ITBVeDPBaDC8_*&s_z2=*t8+>FfxyRo*lR9VwHH+Y%5~}p-A|8
zW)?rQntbw0J+Ln9fDx?_qGkOw_>X%6)Y+vZrXRPn2n`iG>X&g-%`oL0%xRjrf(;Hw
zi9{`4DDz^d3-{(^0rR3Zph~_19Fkl4cgDw~3Y(Lw`K>Q52bv3!@03LSiwD~9gQy_)
zn`e|>ao^nXiP$J&@kW+Kkh$iaAqT^x$ZDkd)0Yg3h8^$PS()@=9q$uMZJjXcpf6`0
zBzWwqs{*soG<8Hi(>Q{$tAo}7wU^|2Y_B-^f31@OW-8r}!PQ+6
zp|(5%mHm=y|H>{F5c5@f3e?7Oh+h44@Ux?T;9_9fWM2VQ3h7LY6x1{)$gm$=K#@;q
zdx_F{NSenMQFLNu{#D(19paZ9Dpv6|Dvx$LYD6X#lg2X0O}=8Qb9+X2#r6hCuqNxt
z+e-nEIRQSa_2y|k-piv272=nYmZ!o8`AINNjHaQa6!`oL0;}iJ_A<*N%KQH^pJ>(K
z17wbYXt4?j+|@9`a97orb*YrnYo)v!P~$~Yc14{RGXEQYNGMM%nkQ(wDpQ}G9XUyr
zVo019>WZ>?XF|RdoAId@ly*R)`bm)#Y1{G9uRWhezW*+Ui;)m)z1yE%%_Eat=TlKQ
znDi}Tmy&LJ_M<}xzeM-j8%YM<4yB6+^e;>KL9zO9DtL=WgjKd_z35)J;P$ftIBLDK
zHnJxvC$UA~OM(^=yrn;iSTelt9r;&j$Auq6BRRrd7Oc%P&X6>84D|BHkofk8SNww;
zbMepyilT9G?9*&Bc!(+GQf+dFzk3TY5jQP;FfCB^h2;z2xl-Nz-Rk=`^
z)!C6oyW~uCRo4FiObnq$k6kFqZt+z=DfOVCR_CAPx4m~g+1jG6dGrRoHz1ziJsfMS
zs|T;g{0}Xa@i|@@B*3?{=U)s4kEuXh%T4H$E)1w$@}|Q{j-$f5;mjPgwx~?My}I{}
zbpNoA*pS6*YE}xeZuMjnDPfju)ztLHftH22P=Mmq_b`?g(2&IzL=+5%9mvuF)g$HC
zilo3C5p#mp&CP{@vul(@E>1GjjFV>dqV>oRQMET*6@eP}D4v3F7+(uzA*RkLe&l;H
zsQ}2q6{rm7r81m5bDtaJ;OLesgpE1PL;l
za-N~iEc|K2)_WXE&f&_=6UVI=az|*BRJulNPKaTjW@Uv@8Xoy*n>bE+>RIPVRfg31
zlNlT+$2PT0iStZL9#5i)Qx&fu@1IpV-CnXNCloKz1k;4GnJ&WQTMo>d%Yo=n1LOMo
z*R4GEW739rwDYLr7j0n^;ymy#$B6m~xq1mpG{04}sw0_k&og_8`y~WA@88Enf0fm$
zsO-@D*tXRg62bg9;00!q70?{9#h7OU%ShC#2I8U(q`A&sjTvr%Gm}fZoPL=y>KB%<
zy0&KQDn9l{pfVwyR=E3VpWzU_z9dq2u+V<=-j?TkD%F^*R~`uoFSOh3dQ9!=FFSs&
z<{m(HW`^cQ#aG~+>$qG|$09&OHg3FD>voqSkvz{zoOeP9IWe0=VQ1uEiZ%w%m+7w$Y~CofVGiPg$KYSn1Y>zh&2p{x(%
zEXj6hg6|io#$2L+5Hv3Lv(PRX%Rum{3&mXMSXQ#%8_K-b6o5aJb4`g%0VY>y=-9nn5k#IG9xD|wfh$C
zOhwPa(
zI
z(_?6tuC>X=pAsmOQ^xPcWuv~vHg*nxgAn|1LfT^3C5@gy9s>-mc$1MvjiZ0fUl+q6
z0c*QJC!N5#RJK~V;i%0ovFV$ON{ZQEFy%yIAs8T};!R4L7&2F{9+y#hE$8fTxa|Se
z&IcFJk!B8k_TfY=YUS$*6X*e0cQDf}MVbX{91-fPT_b6Y=C^xt$>lPBOSlL1db;3o
zw@k)n%F?eDrGfw
za#Q8$2&R*|ylS4IPv*6zg6H4aC*6&cXl&p|E+`pm9dyvZIzcmhwZe9aSe*8<^i?`_
zZ&!0N+5BNgO|^)S@(zi%(D~c6{*qorI>ihQ0$LSA*}>M!P+e`@U;6Qm{8rJlA2sMd
zvQ1Mk*XpwoazVmzqS3CrGJiMo`aLqmyVH@H0x&>A!1r>#oC=lV!k&MWs8weO{J$)v
z%wUkY6o{yz81JV*MRSFr^B+)=dLr=WpG+cESD@W9ySCPec&Le_0<4Qk!XM?FI7$*t
z`smK<-+MDXc-zW-Qd<7)qvye&fty5#nqPFJw)X3R2{+)4F*T8jH-q9!H-&3Ol!M3r
z#Fyue=4AZ_%VwYgaJDg&D**9Xok!Em`u<2=(Wnl|ke(Qciuk*6&H6w8r)B-Wf>e_#
zO*|8IOoW
zjhX(VqeW^ur&v#X;*M93%qM3pzM#vus^b_q%h0|O>f>QxXy&`iPdMW8m<|w%veE9m
zs`t$qCPN%3s-Q9l)z#snL|F$%@PrmLo-0Z9Kmw0WsF)gcbOZbGSR|$Ped$t3^(7U2
z+Ub@GZL0g3C<^Aa4lFR$-NkO#os1ba>dM1|0&3RV^VHAz!K**-3q<47>{IoIAu3)Q
zi+9QVtO&1&y71!qN|Q6$HUiJP;^G9TG?{6eQTgg}grnLr^
z*XO5}zI8K#N2B@-a}A<(19Dy3=wWV-INC^p2cGYAEX6VX<>Sw9;0ZHyqgW6Et>@q-
z$U$${LPC&1@o`tQPEp(J5#KaHwMxz;-~+Ks>H3u^T}!Wr4qxIs?4%ID50$B$Ng-s%
z511BpR)^OJS*!DlEI!jY^0>tN^1HTC-i{eHRg(cL-2TI~=MeZKD66{aLN>l)0ml7x
z3j+Ee1W=C<`tGY|ty_kF0qi`&au=`dB%)V2rPo$Ohs7?I*s=e_Kf1>joT?F~jF*Y#R;uDveEB<3(GCRevNm2_EolKu(D>`
z@(+6dp}m$`pp0APy~fTA%qS>}RLJ_HJWq+W*vS$FR61cf9ukZjklZ2Wq?lbChVQ4~
zyJi^n$g8rsNY+_sco^5;wpZ}O4zE)4f*EwY`G+T{HeSl7|K
z3Aqby;({XotCrEmMKLEnxIE()6VD@}SC6Z%GlvH0(n~4wyJ?0;i`pvh;(aYI<9a=u
z~jr2YGg8RKAs2%1x?X
z|KK1s5681)0^Q~VZLmKy7t))J9PX~wV{jfz>TexTL^`tqnPHLwZ*lv=RzSiE9b&G*
z4us(p0Mt=l581Ekqb7e6^d|@-E4v4z&cq9^%!<@1DSE_U1>ixC+Mum8UF`T)rtA6~
z(UmiIIqViPpz^Wa^1N&DXElk61HOp#Ks0xgT)3{?mxRugPEhO)Z<%?Q~bl
zwG=#JOkUFCW}xj3Zy<^j5p$+*7KR;Y^;4M8>PeH}gdE&1RGV1z2Qs2sdNp0Zw9>*u
zNxbG9k>x}6(CGU2Z+eO%QEO7lTxrM}KkT5q`)_oHxp@Px)sETgSPkt+bh__4*0zOa
z#(qoi4o-pxAgYBJn~}ThOUYTZvk(8qReJP}99?lev&QfOW}lc9{S&O=JaZr8p<)z8
ze*ccuRjM#v8R;(8@P!IiJ6^9oM~%_yZ6b7n9<<4Q{pnT2t5gO~0F!+JKQf5ESrKfE
zLq(rQH|`)^iGM91W_$}A+jh1I1f&P(;`09X(YT7XuG5z|j;8*rDIlHdqtka>3X
zBX{er*;@fh_mydJw`}lHJisX^^dS5HR1-sUY)&te_kv5-v(8)W)}tf0XU!}ItLQ4l
zIK^jVD4tP+eKC91$-nL(7skv9R=IW-a0u`qCve}B+%Itxxgt6v_sQM%B{)f9%`%wl
zS}PJ58Ib$?`SX(dV7ueVx|qw6q&6=|0N*^>N}gKf-kPIHfztY#z2TJQaY(95?Hh)#
zTjmxy0i$F-q)z_rIpnzga#CUa&&vmnJPSVr78fyOXnV@sjB^E=uYXm>5_5I!_yY>{9#*yc1=fd75VomA7Pvy&XUhAbo>?Pdg76D@$g1o>0&U!`Hzc3-eyaAHmV&=5S
zbuEh1Yfix=KTOmvbDF{8OQ+2z1OQiKAAH&}XajlC-gFACHm85^z4Lakv2u*Dc5lsX
zNjddJ$nH1DVUo$~Z?b2sQ(9EiL?XoCZvG~&WCV2{bB%L
zUUO-3Bk3Gsn(?yB$TJT~PV+}f2gxZ8Al!%ATXg2)@I6i!oH|+I8;iOhQ>xRB_9OFt
zr&+zJq>eRQ7I-^|Z|$CM*-%2zJP5`|P!K_Kohq)A?ux!j3{cR6+M^61^?UHMO?KMu
zsP{OTba;ainVE`-d4c&-{V3p3002x$Hp00b#MT9q$ayFMr&8trYL*fHtgBxImNGC*
zjC3Bvjo9OFYBUZ4#%sdXtbCdA>Euom!!Q5(3Tf$V$n2-vxkVHunoVFPag;O;_2aOV
zcV>%gxG>HxqIMeVdw7*Mj7p@T6OXPHGZleJZ1ZTZ&OUzr&%E-W!eR?2fZP4kVAWoT
zIZYJ!Fm_eQx2s1M=L|;|H8{=m>Q5Q1RMn|l3nQh#=~jMY74I9ZlP8}*`!E3?#9!fH
zaOO&y-iNy{hs@mio*E#8sx4{rZu-azeOP4@7HjoyI0RTOZaVAZer9>3xWRrSHqa-)
zc3FpZ9L7JU{!COS>`Q)%zbrU!&yXD^slnT2r^^e%vfaylM-58}NY`N!FF_qU@$e%p
z{)ylUkj`Ual`nDZIg>hnc&k`yI&qnDE!=j4~*r{z&8Gs4Jd{X@p7hh0M>?J*dX
zjS#=p>;Fup+Z;+T&|=^3t5g4Ba+0sM%}8*bFm(uoeBYizT3~oL-WbkIK)XIC(7EEe
z{|QGZ_~AD9|BxB)o!YmAoGrJFK6Z+*Z12jHeyb`Gp2y69I^9JXJa-k_cNVeA|xp34H?xGcOfco`mrtkCnnu2^ackar(5Mt=qHx6
z8UDZzIewWR?rJUYIZt57>@^B~d%n<1e0|E+mxh|lPZ(fm`@0&VP4e7M9BMfve;WEO
z`_8o4cZcRoee(0L-V#janEY8S5LedzGJq>2IW^vVwi2*b8M8SmpR3LPEQsyvEE1R>6e)wlQ`N-p4do(h@tf`GK=iZVqC-%0dlde9&
zIkIvg^;QQs|0xaci*Ov_{YG&xw+kM?!tlm*r4gS_ndd`+-#lAiPiJ6}MxQey?JazK
zQU;m(u-CIA<1d0rFvZFo1a$O4=_DZYdw-(yQ7k2bNn!>ANlN)XryVrT!e;~s;Fm^1m
zD`KQK%*G3~+mtb^e>xNX6vGRMv*ZfZlX_gTwJkE6V?Ro&n<17XA
zS>5-x5)c4A
zBG?+Rg-^X^qz&I}$w@t1Q@z{CdGAVk9pZ#(2|is6E`8jAKlrrx8z9$%4EpQfd2-`N
z>C33{?s08scJe~V#0kQupLV*@%^AKqL!)%gk1XDI@tG9=&c&j^%57w<@TeS-@pO_)
zO;0;a4b6Pl#$K79^PTAPRlcam{tRft>e}0`wmc9lr>o(Xf(oI*%o2}h^{w`XNg#TL
zb^KjQZl^1C68pJY8;>H0;4akpN&Czu1c(zAyW#EHTs#4awQ8YK5_o|L$obU#86enl8)+PICN*}klF!!&X+_EEnZ&%6Q
z+s))rC-?mmg`~SPyZYjyhp-F$%m@4*A)J@-%51CXxD&T9QJMKb5O|jka@HS!`p}W~
z&W&wq=G$-0r}f)V>S_A-Y`}@mRY((jQ(nPptwa5`HYe=h8`yy5DYX
zBnk0aUtYxbzYiw>k5%`0gR1i!c)%Pa^y~DS;e%IWxSd0Ly&x-QVROzOZ10mmIb6i1@u@B8=C4vIrWEMh^9phwOTkjc1fIEP
zL0@4+1$QvAIWHkg8`tfmA4+abU#p6&`wR>8zwjrU<6e?c;6Y^)<6;#B
zmV1ZFK;a|b(4965QGd48SuA;7J|}5*3nGGhkB%SLrh8@M
zVVE^RYn#-yVY5eT)BMan*D*VeNMNB?@MxoD0xbN$J_MHdpKH+&35DK4Qdhw7fuPj`
zGQam`&2*fBXQ>$j+K+TNbX+I0%S-V$jvMcO(g-uw+K6Z&g>qT*e
zD*(Xwzhv7HhL?gcMwayE65_
zzHg&_uHt`5e7*A16jf}fUN_$O1T$XKjx`){$%3DSM7S|H%|#40^D{{ZUUM!l|2mW#
zGTicI|6A%&j&rogPktKJQS4@jXg8svU77wlq|Ro#;sc-idS3wc^R9JU!jbu4l`lr_
z3Wne`v{WTBf-h@9x?x-HpGc?8ad@j6v#{|C$`9XU2%J6fXWAc5$GLAtwFeaBp$c9E
zsSSH-R?z#U$&)cv=_%i5)h(o-s5wuyoVPz~&Vri2n{Xr!&5*)q{ms2u^=vqV4ZQzW
zSlS8^OBm))szeUC3CU=76;q%}aSHuqj$;(&Qc176kQq2S8i!nao!Y9sc@|Nh=$q&f
zn_uys6ZUDmOrG?r`jrx1occzuX$i5v;O&Ph9CXQxQM+%@V!;f0vljee=gW3cuA_-o
zoFyMEm2IIrc@L`+Gb&`Z85`r|DH=So-0nDsHQYfQ@|~-Vg1sn+BmFUN8@_vE4IwQQ
zR-+=611+VKtb$Na$DkhbAc{DErh*KU;Ueqmp$%&RR2V+~k<9aR
z^A}LW5=S%k*^)|!jOMHjuagOpj>k7ebffqZUPSeRdODBz8_e5Fkg!6t7|-Yek013WK>|Rkm_5j-|$g@^N_nau&H+
zwQR8FDyQIFqZ_!{yv?_D)ps
zE`8_P7>iTC(R6_gi~0sIc1o5dsWZZ5E*q95_DJ2Q;nqOB;l3Y3fy}5<$JjMo-F3Xz
zp?+64&UWZu*(G5IJg28bw$&yJMDHfm4gOef+n_0m5n!jFEx&>_mvU@9iH+cA<|XaG
zM5Mi;`6q1eG*mXljEpoclKryKetiMpDZ5B_p<1JrOjKp)dzX6si|<^<)q!}(ZALSa
z8SK1`(^}@#oww$Axc3ZoVK`R{f!(6DaA6j0goC&C5B?2As$z@f||a8hp+inl=bYcb1`ff$LZsGwwGq+Uycl>q!O_3(Lj^4
zFj7upC;fWDBr=R++y#ZrVYEMElhZ&;FL^qrNl*>Qu3{8HlXumO=}m!7m1yWCq8ss%
z7R<0pNgk*s5!@BmUW)v>sXgLy#5(CblO2i}*DT>DIV#{71H3w-+Pv5g`9F8^(wFcF=t5%1N?^tkY~fV&&;+N}#$RCH^PU3PjmlwGvauoOGLa`0X69xNB^Sn5%Gw*Tg-jCmIE;$13B90|i^;g9@xs1W3D^mXT7i)d
zSYDR@=K=EdSd#swCzr?BMpj!sR9hYyc*9Y_z^IOU@LOb_1*P(Q2Td$|%Qk9(+B==YTb2D>W7me<0rzd#-
z^lv$@gF>h}rhW@z{@BCpVJ%MRy9^tkdmbj$V_l|5oci?H)n$`gqPCu2R;kx}m!HQ#
z;WgQRJ_NfHoW;K##Xy{80KrAO&UMK?c$Mme1u{5}?KZr47HeW%f7vP=q_DMOg=-1G
zxyt|767WxO7wXA;JURQ6J?syQ#xwz;T#9#B*vn2ctl#HB?xn_$6)BBb&^~OyC@xo`
z*CF=F?US1IBVCyLr|O_P!(sTrDG^*HMZq{-kbV!fwK7ehR${b<*uZ5I?p$a2uiPH_
zUbp^oEIxW<)Jrjt0?iqsy&zFdRQ%hx*
z)*-&Q8JVT5V~hh17Jt2y4_Ve
zO{UC3u+K@?A$zZ>^EBY2{#-The`e{X7<#yHQRjZxkoJB1LsI>HPX%7hrqT#uV{+QB
zq*KLWKd?4-vLj|B9!=wL6rDVJJ4|d^0$Wqs`$PZpt3k3H<=xPfkv$dZrL8r~?0|Qd
z%VvyDqqo-`ShCSZJB~ck_o|jMrOa6^eH9+Auo(~R2phkI`j@^TuH=tpl8c0IHG=^1
zv9}Db2+O;XqC#jbG&GhB9!>lXoog2fw*+gS0O!bzHs{p5tnladhVYK1G#9@tIL>55
zKTTrOhU6k%o4*j>zVY2pxYxD(1)w}~WPGRv2~-+=;65Zi9uM`EFq(9-FBe(R>b@6d
z3rHT9)qA7xdZ<)@+@ny?Y9gb$dv{RZ^4jT?hkV=AcVq28qPF}Y@!jVqiI%MjG|sui
z29Vx8&K>55G>QEYg^!5bejL|rGugabb=!yU2Si`CE(%FlDPl2$xIV6Qw6fk$oEk2!
zEEWle0+P>BQ=Q1ri-4cGK0r7|Jmr~ZwG5Ij^siQIB8)}yyLYK)!b~t6Y{DzzDD=%8wP!(PBz^4ppCl|
z<;UyGpg;r&dE%Prg8h}AjL3otPkT*@zgpt3Tg43(w%$=1kjh{*Ajv1s4CYZ=nXELM
zqxa1&JBz=I0u!utYw2+4gvtwr|D!}30)Art%ThWgZdJnU$g~ykKj~}R>lBTg+5=;V
zAfL{d$-~C2Ize5YE|2k%#WvokATjG7|DwZ#+HOhEjw_*Ian?kfG3Z}YX(e53L1%>>e+1i$W~EiDx)}BN
z@|Lpn`{G$?RLNNuR3Q%@6(pFQN&Z)LaUATzFy}hO}ywFVpN+eV&og5ho79
zY)==BFg@G@?)?*vyU8~|^9p{LiCMG>oVjv^A6Z}P{6ZAKgA@DD;zuZ23u{#IVorG(
zLGnj@ybY!b@xK^T&W)lq1O@GMvUN$)(ZYN<3tD?}z=ioYjx>6!CBG0jPC|{wWRkNi
ztzZe9^6@kIIw@>rOcBh$A-@d>)rYap
znGbY8ROSRueTT%G^{AUQE@2GnzUf~Qa4oP$9$4wvzIYJi@=51N`{MAkQWG~vkyi#5
zaG|USj^wJtxyeUH^zc6C#75s1}_N9LvwZ(Ez|Hutbr?pq5={;_PFak#(8+L!oY)JP!rVii8>V0=~e{q)h2i2`qbuHDW1^))ZugN
zPOXrkzt>l5aax_yplH
z^ap%)moib7jz~WwpqFFXT6nCHD@B~-YG!NBKlbJo9wA
Date: Tue, 17 Jul 2012 19:55:02 -0700
Subject: [PATCH 208/422] pngcrush masthead pattern to save 10k

---
 docs/assets/img/bs-docs-masthead-pattern.png | Bin 16369 -> 6450 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/docs/assets/img/bs-docs-masthead-pattern.png b/docs/assets/img/bs-docs-masthead-pattern.png
index ca0f63458898e24a332ea95ae4160b4b085fdcf4..75c46a152dec0bd06b8fbda8b870949ca3ca11be 100644
GIT binary patch
literal 6450
zcmeI1c{o)6+s9{&bsCHqh8p`iw#mNBl3isRgJLks5?Ux^-_k_Z5ei>lO3Vy1_9(_0
zBatQ9NmNw!knNd%e?I>`*Y*7QJJ)?*=UnG=pL3nh=Q{WMe%lnS%!y_5ejS;T5XpXQGc8+$8ls!V#%CAWK}rS|q#U;mu2
z`X_Nm3R|M9WP%#*7VWrlCqMKn9sXdOXO&%QXXnau_heVw#M$h|sAaQle13_0{j3}!
zqS2u_U>Ypat0zugo^YMz^=kv}{qbfhEu9_JFokwRx6_l!Y2`tOcJYK5@0(v0P*7qW
z&wEfU6N>=fsULSgSgPmm$baUNQyBM`meQpr3_2$h-m|9CkarTdwCdwMrR=r@vBJ!u
z2%>h%oY=(DXZ6*yu+B&gPWdHBDlakQctekgxb4+`=)3k>8qlZkMB~i64V+MI))oh-
zvQ@Cq4Vm}gcU3tLp%_*Y0P%X+rG+m5N!DL^&A%v%6jtTbr>iHow}TNSiXfucHQ|Uv
zuM+k^9c`yWE=vW0YUv3EUWlY84^-rd-yf3KJ
zqo>~jh&oiqvKQD;IzYb0$&%e`*G^q08rf_&6Ep%J(?F+KV#ngfJ
zfoL>FX|BT|BF(LZKxp45{TZI8H)H>Xz`b}~c|3=$F8s=f$V%%$HD@|-Qo@pXG!xDw
zfk?(?zTME$Av`Kqg){b3!`zCh&6^#vEfNOBJh^cpi;Ss(O+@|6cRu+sS2_yxGZ`Sz
zzkaZsZ3uG(E)L8e4v@ERcq*zS0tM
zd`X`7c)Qlr+K=Pb*=(Aqt88bCwOk1>Ths0rJBYX#r`qZ!wsl@`n#b5IjblE;DYcWE
zhQh1U5}EeIQ{%=y&;(1Iyr{82bYh4)Q+oX9NT5rQLzD`^*KCI8<5(W+dw~26VXeiW
z3n{4db~)(C?lKO^kvhXG4S5l#N&^?Oy>FWHuICg5TCRs;lg4m=%
z&~>$++%(pdA6{ffU*o!eRud}9Pz`vBzlr`$R!qqjO>l}Ee=D|Efj{`qkqmb2j4;-I
z*U{WIPnhRaA`eE45%3=RukWCx3w4F(N|@@$xpP)hN7_w`iMJkL#8QVUNtnc4$IMLR
zRY!%@gM~}9q5B7+;){8X3i`*`)I6tN8VQeo4nuHMlp$Y10$_)Hnw3hgAP>H?c?+p1
znRHctQE}Wf0BJ0p(6(L}=8X<%>YcE)`o*9orB~U6sq~Y$;!o8r>F`XxIbhNBmu*FzAsoFtn}b&+>hHeT-p#(ReqHfi
z({8_am#l74{dE4=rR0LzT;12%i{3q-^#@&ly;~8$3f<-(F3|XzlDzV4%(MOoXY){(
zj1BDp5X+L(eq=V-_VC+Exj{bAhXfhRSqMaDK4&8GvSOryKBy_`>D$a61{{FR9iv1O
zRfGB&!yg#K-mIAJ;Nv*hw2DlS{Fddrb15!1dY(0+oiya{5o~A&fY=-8Ly50>u1}#f
zO5YV480fhKZ(UZP82_ZL$C5?lw-X~>Td(nUdRcZNL+
zn!*A1P*R>Mo8x)aWqmZ;L{W_403&$Z7@rR_
z`f`(R>i4LXpS0npO-ta&LOABaIh!_UYMfgVgaTH!JlmOgtxvPS)$}A!Ly?adc$pRR
ze2xZg9}16!r4q#908G4ihi6jCGw{_CjC?m7OQ5QGVR!O?Xw>N0B%b)}XXBC_Y}LH1
z3hi)A;W--etGXpc$1@hTZUgCgbSQ8$DLo&*?=wgP`-ElgGbv%jAQJH&D89uDeZ-lL
zw`)R~iG>=H$j&pv7K3&Q|DIu5Mrr16;2%f$02p>9^f`Y$g^J}1Pwnt
z;7XMxcCcS98*99E{IF#FBt3IK95ut;yNiHlq6I;44)kt&G-vgv#fAGG1-PV>ZyT3K
zoLPgM@^ER5&FL>!FZUn0Sbj9Bl5zH=(a3mZlj#-Q5igf+!=QCd!P`ek4IJ<$r|>LT
zBly8D5x`!WzG@#m=n&{TDh8rPSY^R#JJuXLZEQ0Dib!Ww#GTxY6r({>5do)P+l*jJ
zUbL(ezapJOus*xyXBFCYxh4Wj(0jkkzgMn8($Nu7
z?}nmi^L4h$FavJ&P1^QGV6ea!^XJT_06Ezw>vM)zLxCVt>$%smaxhfJMEux9tKMj{
zi7{wmX;U|H6I)L=md8RI+$+|@L*}YWYkzb!MH~GHG7_Cwa(#BZSrMv-i-n<&slgUVO!%yva;W68(wskCQ&_bCXUol?>s}fRq>Bl&|(s%)2SmY
z-BwmL{?~)xAks~{aoufyWNqFY*nQf`fHiiA%z31*o$Lsh+&#$^
zFj;qgT;=?j?s2WfonhHsxAXT-HEr!M1$`jSj1yZ0gQuK}+<9Vux><
zj3mtcPZG*s7WO9GcWe)37(46fwv&Um#J!l^FhU}6U8hNA)k3zYC1bf-?==3aQd#(R
z=4F=$X%nv{iBUg2y)~5k{1>^;^lSG#eyAfH37mkMn$$1(B*c
zw|H1FZ(0>i4l)A;C!aMyq&N*%@{&b%=7RR@-l`qGtQCsptIx{cK&x!c1xu+el5xxL
z&?+3Z_$uiO-9M`*%`<+d{j9!7vYPaOX`)*Y%6sIdH)N`im(vi2T<0U=`F3Cf9`4X@
z&{awD@wlbhyY%ws=gk+_GE$swsajkZbDg|a_vc^XIzguuLZDe(90t}X=!A%tb46vq%nDkhvB
zvYW`^kd@0xrt`jPc@TEhlPM%WsQ>oU+<$ZA%9t_EPs)ATD^Z!JCX(!)$eefHPz}~h
z^-{c)zryp|`OZj9oKv*80Ezw9Yc*hHlFFe>>=~&LKYEUC$600D{^&;f#V_$NY7Gjg
zqd9z2^ybjFZp0(Vaz3L1}XgMPwO!vnzga
z{F>9B^3+lZhDl;@x=dyO^Tz$#Ors5dVV0Qzv-N#Tlln8+)-3392*oSK*7rgKG7uRl
z;#0cF)0{c;{(s?c5d(+ABH#(s&gH|L=ERCOQ>;(7DOVJ4K`50DPt4R=hz_h6qhK^&
zsjW;o{;Q-*xO(4v(~~7<BC`YH#Obxzct+-gC-+}Q|nmsRl>MM`P1}KU&`*)iamOTy5t5|VbEgUXcW3#%K=1P!pk@!!4l|5@&
zF>29bOSxN(K0^RRZBhd28*OeN5QMC%li(&sC6^4q6G9B}OV18ns@)oGTOV4*8icDw
zPc~0olKK9t8(+uJ5^0xLMNRwTK3Z_;7amVa_U|)1RPbVa{=$i}N#h)&gjXJ_bdl#(
za(>UVxlhMf4Ftr@4;+;{o;{(t{hh$yY4S}^kQ2gwk`sDcLZQ`fLZR0ix%`j2p4w~2
ze75zY-~Q_QYiLJ8V0cwVsf_opq!xS`FwC#rm+^SBFLOuZ1h=y6vDr{FV@_xwlbUB*
zBitr_A^tX4{P%
zxn0~2Z(Tdk6seJRqvD9eZ+FvCYf+IWDRz5%$Lh+-dFheox^i0K_J8P^29Zk^-*#JX
zmvMV&pKe|!ls((J->UG7`ZYHr7!Ob&M`vxDC#yW+cm6G}v!cu529^#yMQD5wtcKoT}9vz$fR+VQQ
zkgiItXBE8`1f{eiE{{7?v!5+LZhi{xJx{`Ww|U?C=d}SoXgnC4BY{qe+Z-+hhuw*k
zJ>NMO;t2F|y6tGRAqIC`mjDQC2R>jd`2GVdpGdWrF!0@(bZ2cUQrmrrq3gNli2q8I
zs6|WW93Pk)`yE=y7T%L|?DOnm`tw9~V;w41U
zp!@wWgMMAc@!6vEMjt@zfL}j0Da_K1l|uLH2cW~;l1a%TdesYTF@c@jMdRxU=9-7S
z{!-b+xF{d_{6oori}HfF-EaQ(+q+X94`UjSoZP+ZiPXul8s%f;>jIjR&BSS)!_4VkV)^$7)sir9^po3Ro#
z>&$uzf~KfPWiO_%JIODmoOSPYfnQzXblWtP?~C}D6{F`hq)NOltHdTn?jdSOPV^-INlgwpwby87Pp3QeX+KNmc?L$4LmQO2>wjeooxl6)
zkgHe^L#`PD!#i`Fk&(hPyQ|+6T2NIU&=xnS#obr@|jzy5>zyIRvc=|m2cLj=bl$X0~e*eKvj-n(tZl;Nn#LON?+&Lt5})i*}X>K^J^N`
z(Y*lqy7SQ1*{tf7!7kr8uI}Sae^`0f6LMB{9VQf@%%pDq2|Vy#Jd6%|7TA
ztys-nArf8!Lb1ADHV7ic@`%r;H*G(JI{txAD=!Gh<6@n3B(4iH7Q>s_SzRn-P#*1{
z6XnTQ!Y;>i!|nBsEEZ9FAz3Nd=Qh1AbpaZbJLJerFkM%1h<(q#Ub
z9)SEaJ9h;NSP*Hdpx-GvAvbdQl?U{1@aErO(Z$tA>W{1C`BCm3q;tnAua!E#iR`Vi
z9UnDvftJdS>)hBF&^v4UJ=6iOe6MQh{ei&nZ;-$+9zjG|FfQ&V2Xe+q!*g^Q+D#@P7(
E0q_(q{r~^~

literal 16369
zcmZ9zbySn#`v**ScaE+BqmdX5f|S%85~CZWVRUz+7=TE}Kn4m(jE(`KfQlfXbcn=8
zE8#o8-{1E=?|J{&dCu8+?&rR*XV>og`oxuCW~xt3!9jtChev(SK-U5f4`1Tnhl~XG
zO+-v?DDJ`@qGugq>F*vA?iA#Pr{(JJ?8bY~&&k8h!p+GwB5=YDjEAT3_@1to6?}2u
zJ}r#1r#Yp%HB&OYuJr2fO4yNd2KSva#iJS8ap_a0bKyWq$q7?m+O9i_nl0tfr(1D&
z<;jS-7?3TDbj>5WV|``b;PS_xm3bP|57lS4F=yD`pTx_m^3nG<&48%Mno)NiVbq^X
zJ6^HafX&so^jppEjcJ6k1Jk~A=a-9tM<5c9>!V)`8vWN-Hf!^?(H_%hxhop&?y`)r
zr>3urXpH_u*GJHMr2g##VNUi}<|S{J#4m1s_ak#OmlxngMwDJW9dO83rFZ=lgHn;NX4x?1Lnj|lNJCf;sk4Iwk{vI6*+VSuQq*|8-zS6_D4t`}s2##Eyev4#X{@Y_V
zGR%q$Vgk;euN6W~>_jPz2q8fuUi{pl-q}Y&k#>=O)ba6;18yF9uwiE!(d?%r0^F9z
zZEISIb8q9*d|=#JX5U(9c~FH6O>cyc9N#JwJQ@hS<(ha$4-?Si%{A$aB*;kRO0ecx
zndwQ9&Q^ha8yQZ9ZWT}zHN`Zkofvxcu_Ib(q_9F9E6h8R&z`f&Og!8aw3C;tWMyBQ
zs*pjj-Mv3V-aS&41GS8H2u6OVr+{z+RJmT+f+B5{w~HPmhYtMSRmTw0PoOW)ex5$Vj(`>Z_$8kLl=Q9<8RCy*5?TXK?5L4P80e_*KUII_kg1U{2Ig>QAg@gvO*OLB3M<0hdK_d?Z^W$mFqf;$j1srB
z+C$vl1l4((Fs&j-yQo9b*9JMWza)95a(x|glY(eUsNi#oZpInVXSpqyNpWForlEd8
zQ&DzJVFTH_9qd+7p>}6kH@#woo)y>&i;*M?Dwq8WBjKAj6XKtDzOEG+4IU@p7I_(C
ztxR9vFq^8a(iD|a76^Kgm;W&Kh%chfvlB_@POQiTh^eP(Ip_ZS+Pb4|{CF~?$3Ox_
z@o(sE%Q|mx1q0^+O+k*3re~Ki
zuQnJc0V4v%42WYO>l(vR)gn6vmy>UD(Ec#y(m@(Q65%@)h?8ujf#}_0sfGJ84a$Ro
zjb|4spZ|`SaKRIY>OlC##Fq8
z*7u0s&kvrw(M*iiz2YGK702zOrOyv4a8#MFpnvXjeaokXo=w`Wj*_B>bqx*QK?X5^
zzFzd3jn@(1fwwm8CVToW{bi<^lpBBb+r{M~b?r*6@PPW1ReYZp&*C#Ptd;bXf3h6;DELyy1%p{=8!u
z9)vg%h;A{v)e?AeU#qjYvJnKU0a}HkB9F64zxTR5hPJL@GoX4pmwm=?Z;Lxhca&($
zh>6yzgO#)Gq@IpRuz*v!>3!-)dfqQPa3i%>*Ak(vtGE%N^j{&u%FLR)$N*qRCSE#w
zNN|qfQ$rd$
zc79Qv%QSi3L%r=xF&WRcNx*o}xHn-@qM7&GN+W!kMJBM{EwlyD1~P~^vY5!nQ*33`sIxx5=5-Za
zA9a$U)_0e~!8z|@KXBwsueRr7XrI6Z`F4|?)B2)19QK-l9`WGcR3!ZKD)^2I%?=%W
zU)*gg7Xf7viE9xzf7cVuwn-G$98T>`!e`OXBWVo|}-*
ze)&FBDK6)t^UDL={DSF^me%BEh=Y)T+gcDnpcFKr_z;#dGAxXA&g`TS9Z*3X=jaRk
z3o#2YcJ^D!-Z9;(R%G3!mv}8crsr7H1_7ta7XXImg=2y8fDSlwV?e_(kO=S^MjE)sUuKc?)bcivLl|k)Mh(VD0j#?im~AcOs1TKjpC=3({bD?J?_X)bhxOco
zlsKlK(Dhyei?|nH-M|t~CT3%@A^amwC`&*4qPd3mK`pp>SZ5PL1#de>ysjjF|LK(z
zd^-x{z)HbWj*uvP|K)y1FMn4vAv>-@A>MsmHfy-{%mCAAYTV>&%A5hc@Z71u?&_eu
z(iI1RU0M%`NVaM2{Xp+byvFmQs2tr0q@KHL|FT5ID@(_-pmTdnan!wvcb~4+6`tJ8
zbFagGkBr5~h-yXWhxfRqBl%)nfC?X>adT0lm=njJZriaEkNQI?=x7yDRL>6+xSmUK
zq$M+mJ}*=dRji5jN(2o$b9Yh8OS&Eq{5@A?#co;0TXhtf`9(Oo$kAe`q8DHstMrV>
zATQx_+=au|_R~w+l5l(#87+&y@!KDwz<6y|u~bEkFRFf1oagaR$ag=z7^Ta59#Ldu
z*`8+|ahB$2A9l?TbU6yPQ5v9;D39T>PM8+Hn}Rl@dJvXvN9XfddJG63nQAQMDnZ1I
zj5lhi2+Dcf0b+o42ih(2~pd$;PGnn8=$`$zc%7aT
z8I;`=vM;~_^D-fS=%XsU4U((v
z=FP(wF}D}$x=66o0UC4{Hx0SBXpEoU{WREKuk{1{zU^r`=<&FO?_W3iycv`VNyVr3
zJUSGCZDRYdbRf}rb1D52^+%@_>UgCGYmsSteOM3uxFm|fA2uU|0h4PbxTDkxalV!X
zCC#5weQ!$su*4B<2UemafB5ET4llhlZ+pDMhib)sxpR`op*4dv4(z)19Ez5(5E&WiH8?qatrA;i18W|-!qpo_|?l$aLd7QV^fDbXfrFqo+sBg$a
zUC+w>+^GcmWp^{PO~;(RiQxo~vE^O3d%R`#i#4kaLA$>z=g%n}U4Ap3KCY>BqRJNs
z9kU5p8SSbX!Re5(T7V_i=xM6G+Cw=?6r!YE5(0;a-r@^eIY^SToGe^iwp3{*7E}ei
z&bO18y{;FPHA%(tWXIbptk1&oe@H?j8bYDdmdD_CUMI8@`g&3vGFZ8JwGe<2
z6(OM0k2qLP_DMA#Qy90u_t~AzC7_=jx>-aHn19ZAFG5ec!%jR8O>Ii+AmJG=i?k{{
zjDDnfQ6@o9nMdn=(kxj*dMEha$8aHew?E%PkBTJ0i*TW=wD&0$Us5J(W0qZ7f~Dc6
zk}zhDxb(2Wup$wE0_R)}o)g(%5dAzs1|J|IUm;sA`^#5AS$hst7EWbW{_4}`hE1+b
zRS_kX^NJ7RFUhhL8j>>2;&MjSo_Vx>vxDUn1dS++?!+bTMFPIXib^Wm4hY1(tKFW7x0=Y50P2(Q?U+XJN)e5D&I%H8XqH
z3h}$zzTKMJ9Dx!;2=*@uBZa2$$6{7R?#DxtXEmNLbV)s%;t2B+;YqK`FhGW
zCbsPiOWOK&
zZ&C-Tt^kX)oUHg&;xdyqp2t9DaFCZh%7!nOR*Ca-SvM<7eCNQtkIr~3;cssB9KFsE
zDwo{n@+Q<$yw~qAZNQ(i1XTt9ryT}1=EQb_%*&-HNGaWDyf2ro8Pt0EkhK$m_
zB2v8Rg{GHyVy3RXC)ky}R{((E%;JFjjF|dk!-!?v!k#?;rNjydNk{x~Q2OD%G`u8B
z<-WTg&1+t7Y&2aTWReE`1ZR30Uyixv%1|J_;r=ADcI?7NNi|oud*gXzX&m~;?gS`|
z3s@MnH&WF?Ho|})x)!QysjH>QmKt^>pOG@C#lJ-Au~H&)do}%iQQjj-Lf^j~V+R@N
zB(9?dR<=~}0WP2H6<9x^k+cBnBr+`7anEYZ25#rz!;X)t`yTJz0W?1<04v;x%{08k
zD7BM-pF7^*MKuchK0IMwdC1nOn$!AZCq7jy{a1_*@iqt9TeJasf)%N~QDF3TwDCTi
zsW2G+V(cU0An+*mA+
zKWuddKs1V&YH#(Kj|?4p@`$lb0%Y8+uNIBwM;nE~Uo)^k(zRmeFSpg6JaVYJ*!#p#zooXk
zzagJARr223IGdbD4Y!LGPW*Z(km@!)t)n
z#EA9B#E#acTa<<3^3q-3MU_)DXv>S)D1;6u1HxZtjf*pacblBNBR)M($?BiM4Aih0
zU)4{E&-qc$U%vO_USccvl+14tPONzATe30tZj(4pJN(!t%#OsM391jb+jx5@v8IKJ
zoFM!Be&D=yOst$7ITBVeDPBaDC8_*&s_z2=*t8+>FfxyRo*lR9VwHH+Y%5~}p-A|8
zW)?rQntbw0J+Ln9fDx?_qGkOw_>X%6)Y+vZrXRPn2n`iG>X&g-%`oL0%xRjrf(;Hw
zi9{`4DDz^d3-{(^0rR3Zph~_19Fkl4cgDw~3Y(Lw`K>Q52bv3!@03LSiwD~9gQy_)
zn`e|>ao^nXiP$J&@kW+Kkh$iaAqT^x$ZDkd)0Yg3h8^$PS()@=9q$uMZJjXcpf6`0
zBzWwqs{*soG<8Hi(>Q{$tAo}7wU^|2Y_B-^f31@OW-8r}!PQ+6
zp|(5%mHm=y|H>{F5c5@f3e?7Oh+h44@Ux?T;9_9fWM2VQ3h7LY6x1{)$gm$=K#@;q
zdx_F{NSenMQFLNu{#D(19paZ9Dpv6|Dvx$LYD6X#lg2X0O}=8Qb9+X2#r6hCuqNxt
z+e-nEIRQSa_2y|k-piv272=nYmZ!o8`AINNjHaQa6!`oL0;}iJ_A<*N%KQH^pJ>(K
z17wbYXt4?j+|@9`a97orb*YrnYo)v!P~$~Yc14{RGXEQYNGMM%nkQ(wDpQ}G9XUyr
zVo019>WZ>?XF|RdoAId@ly*R)`bm)#Y1{G9uRWhezW*+Ui;)m)z1yE%%_Eat=TlKQ
znDi}Tmy&LJ_M<}xzeM-j8%YM<4yB6+^e;>KL9zO9DtL=WgjKd_z35)J;P$ftIBLDK
zHnJxvC$UA~OM(^=yrn;iSTelt9r;&j$Auq6BRRrd7Oc%P&X6>84D|BHkofk8SNww;
zbMepyilT9G?9*&Bc!(+GQf+dFzk3TY5jQP;FfCB^h2;z2xl-Nz-Rk=`^
z)!C6oyW~uCRo4FiObnq$k6kFqZt+z=DfOVCR_CAPx4m~g+1jG6dGrRoHz1ziJsfMS
zs|T;g{0}Xa@i|@@B*3?{=U)s4kEuXh%T4H$E)1w$@}|Q{j-$f5;mjPgwx~?My}I{}
zbpNoA*pS6*YE}xeZuMjnDPfju)ztLHftH22P=Mmq_b`?g(2&IzL=+5%9mvuF)g$HC
zilo3C5p#mp&CP{@vul(@E>1GjjFV>dqV>oRQMET*6@eP}D4v3F7+(uzA*RkLe&l;H
zsQ}2q6{rm7r81m5bDtaJ;OLesgpE1PL;l
za-N~iEc|K2)_WXE&f&_=6UVI=az|*BRJulNPKaTjW@Uv@8Xoy*n>bE+>RIPVRfg31
zlNlT+$2PT0iStZL9#5i)Qx&fu@1IpV-CnXNCloKz1k;4GnJ&WQTMo>d%Yo=n1LOMo
z*R4GEW739rwDYLr7j0n^;ymy#$B6m~xq1mpG{04}sw0_k&og_8`y~WA@88Enf0fm$
zsO-@D*tXRg62bg9;00!q70?{9#h7OU%ShC#2I8U(q`A&sjTvr%Gm}fZoPL=y>KB%<
zy0&KQDn9l{pfVwyR=E3VpWzU_z9dq2u+V<=-j?TkD%F^*R~`uoFSOh3dQ9!=FFSs&
z<{m(HW`^cQ#aG~+>$qG|$09&OHg3FD>voqSkvz{zoOeP9IWe0=VQ1uEiZ%w%m+7w$Y~CofVGiPg$KYSn1Y>zh&2p{x(%
zEXj6hg6|io#$2L+5Hv3Lv(PRX%Rum{3&mXMSXQ#%8_K-b6o5aJb4`g%0VY>y=-9nn5k#IG9xD|wfh$C
zOhwPa(
zI
z(_?6tuC>X=pAsmOQ^xPcWuv~vHg*nxgAn|1LfT^3C5@gy9s>-mc$1MvjiZ0fUl+q6
z0c*QJC!N5#RJK~V;i%0ovFV$ON{ZQEFy%yIAs8T};!R4L7&2F{9+y#hE$8fTxa|Se
z&IcFJk!B8k_TfY=YUS$*6X*e0cQDf}MVbX{91-fPT_b6Y=C^xt$>lPBOSlL1db;3o
zw@k)n%F?eDrGfw
za#Q8$2&R*|ylS4IPv*6zg6H4aC*6&cXl&p|E+`pm9dyvZIzcmhwZe9aSe*8<^i?`_
zZ&!0N+5BNgO|^)S@(zi%(D~c6{*qorI>ihQ0$LSA*}>M!P+e`@U;6Qm{8rJlA2sMd
zvQ1Mk*XpwoazVmzqS3CrGJiMo`aLqmyVH@H0x&>A!1r>#oC=lV!k&MWs8weO{J$)v
z%wUkY6o{yz81JV*MRSFr^B+)=dLr=WpG+cESD@W9ySCPec&Le_0<4Qk!XM?FI7$*t
z`smK<-+MDXc-zW-Qd<7)qvye&fty5#nqPFJw)X3R2{+)4F*T8jH-q9!H-&3Ol!M3r
z#Fyue=4AZ_%VwYgaJDg&D**9Xok!Em`u<2=(Wnl|ke(Qciuk*6&H6w8r)B-Wf>e_#
zO*|8IOoW
zjhX(VqeW^ur&v#X;*M93%qM3pzM#vus^b_q%h0|O>f>QxXy&`iPdMW8m<|w%veE9m
zs`t$qCPN%3s-Q9l)z#snL|F$%@PrmLo-0Z9Kmw0WsF)gcbOZbGSR|$Ped$t3^(7U2
z+Ub@GZL0g3C<^Aa4lFR$-NkO#os1ba>dM1|0&3RV^VHAz!K**-3q<47>{IoIAu3)Q
zi+9QVtO&1&y71!qN|Q6$HUiJP;^G9TG?{6eQTgg}grnLr^
z*XO5}zI8K#N2B@-a}A<(19Dy3=wWV-INC^p2cGYAEX6VX<>Sw9;0ZHyqgW6Et>@q-
z$U$${LPC&1@o`tQPEp(J5#KaHwMxz;-~+Ks>H3u^T}!Wr4qxIs?4%ID50$B$Ng-s%
z511BpR)^OJS*!DlEI!jY^0>tN^1HTC-i{eHRg(cL-2TI~=MeZKD66{aLN>l)0ml7x
z3j+Ee1W=C<`tGY|ty_kF0qi`&au=`dB%)V2rPo$Ohs7?I*s=e_Kf1>joT?F~jF*Y#R;uDveEB<3(GCRevNm2_EolKu(D>`
z@(+6dp}m$`pp0APy~fTA%qS>}RLJ_HJWq+W*vS$FR61cf9ukZjklZ2Wq?lbChVQ4~
zyJi^n$g8rsNY+_sco^5;wpZ}O4zE)4f*EwY`G+T{HeSl7|K
z3Aqby;({XotCrEmMKLEnxIE()6VD@}SC6Z%GlvH0(n~4wyJ?0;i`pvh;(aYI<9a=u
z~jr2YGg8RKAs2%1x?X
z|KK1s5681)0^Q~VZLmKy7t))J9PX~wV{jfz>TexTL^`tqnPHLwZ*lv=RzSiE9b&G*
z4us(p0Mt=l581Ekqb7e6^d|@-E4v4z&cq9^%!<@1DSE_U1>ixC+Mum8UF`T)rtA6~
z(UmiIIqViPpz^Wa^1N&DXElk61HOp#Ks0xgT)3{?mxRugPEhO)Z<%?Q~bl
zwG=#JOkUFCW}xj3Zy<^j5p$+*7KR;Y^;4M8>PeH}gdE&1RGV1z2Qs2sdNp0Zw9>*u
zNxbG9k>x}6(CGU2Z+eO%QEO7lTxrM}KkT5q`)_oHxp@Px)sETgSPkt+bh__4*0zOa
z#(qoi4o-pxAgYBJn~}ThOUYTZvk(8qReJP}99?lev&QfOW}lc9{S&O=JaZr8p<)z8
ze*ccuRjM#v8R;(8@P!IiJ6^9oM~%_yZ6b7n9<<4Q{pnT2t5gO~0F!+JKQf5ESrKfE
zLq(rQH|`)^iGM91W_$}A+jh1I1f&P(;`09X(YT7XuG5z|j;8*rDIlHdqtka>3X
zBX{er*;@fh_mydJw`}lHJisX^^dS5HR1-sUY)&te_kv5-v(8)W)}tf0XU!}ItLQ4l
zIK^jVD4tP+eKC91$-nL(7skv9R=IW-a0u`qCve}B+%Itxxgt6v_sQM%B{)f9%`%wl
zS}PJ58Ib$?`SX(dV7ueVx|qw6q&6=|0N*^>N}gKf-kPIHfztY#z2TJQaY(95?Hh)#
zTjmxy0i$F-q)z_rIpnzga#CUa&&vmnJPSVr78fyOXnV@sjB^E=uYXm>5_5I!_yY>{9#*yc1=fd75VomA7Pvy&XUhAbo>?Pdg76D@$g1o>0&U!`Hzc3-eyaAHmV&=5S
zbuEh1Yfix=KTOmvbDF{8OQ+2z1OQiKAAH&}XajlC-gFACHm85^z4Lakv2u*Dc5lsX
zNjddJ$nH1DVUo$~Z?b2sQ(9EiL?XoCZvG~&WCV2{bB%L
zUUO-3Bk3Gsn(?yB$TJT~PV+}f2gxZ8Al!%ATXg2)@I6i!oH|+I8;iOhQ>xRB_9OFt
zr&+zJq>eRQ7I-^|Z|$CM*-%2zJP5`|P!K_Kohq)A?ux!j3{cR6+M^61^?UHMO?KMu
zsP{OTba;ainVE`-d4c&-{V3p3002x$Hp00b#MT9q$ayFMr&8trYL*fHtgBxImNGC*
zjC3Bvjo9OFYBUZ4#%sdXtbCdA>Euom!!Q5(3Tf$V$n2-vxkVHunoVFPag;O;_2aOV
zcV>%gxG>HxqIMeVdw7*Mj7p@T6OXPHGZleJZ1ZTZ&OUzr&%E-W!eR?2fZP4kVAWoT
zIZYJ!Fm_eQx2s1M=L|;|H8{=m>Q5Q1RMn|l3nQh#=~jMY74I9ZlP8}*`!E3?#9!fH
zaOO&y-iNy{hs@mio*E#8sx4{rZu-azeOP4@7HjoyI0RTOZaVAZer9>3xWRrSHqa-)
zc3FpZ9L7JU{!COS>`Q)%zbrU!&yXD^slnT2r^^e%vfaylM-58}NY`N!FF_qU@$e%p
z{)ylUkj`Ual`nDZIg>hnc&k`yI&qnDE!=j4~*r{z&8Gs4Jd{X@p7hh0M>?J*dX
zjS#=p>;Fup+Z;+T&|=^3t5g4Ba+0sM%}8*bFm(uoeBYizT3~oL-WbkIK)XIC(7EEe
z{|QGZ_~AD9|BxB)o!YmAoGrJFK6Z+*Z12jHeyb`Gp2y69I^9JXJa-k_cNVeA|xp34H?xGcOfco`mrtkCnnu2^ackar(5Mt=qHx6
z8UDZzIewWR?rJUYIZt57>@^B~d%n<1e0|E+mxh|lPZ(fm`@0&VP4e7M9BMfve;WEO
z`_8o4cZcRoee(0L-V#janEY8S5LedzGJq>2IW^vVwi2*b8M8SmpR3LPEQsyvEE1R>6e)wlQ`N-p4do(h@tf`GK=iZVqC-%0dlde9&
zIkIvg^;QQs|0xaci*Ov_{YG&xw+kM?!tlm*r4gS_ndd`+-#lAiPiJ6}MxQey?JazK
zQU;m(u-CIA<1d0rFvZFo1a$O4=_DZYdw-(yQ7k2bNn!>ANlN)XryVrT!e;~s;Fm^1m
zD`KQK%*G3~+mtb^e>xNX6vGRMv*ZfZlX_gTwJkE6V?Ro&n<17XA
zS>5-x5)c4A
zBG?+Rg-^X^qz&I}$w@t1Q@z{CdGAVk9pZ#(2|is6E`8jAKlrrx8z9$%4EpQfd2-`N
z>C33{?s08scJe~V#0kQupLV*@%^AKqL!)%gk1XDI@tG9=&c&j^%57w<@TeS-@pO_)
zO;0;a4b6Pl#$K79^PTAPRlcam{tRft>e}0`wmc9lr>o(Xf(oI*%o2}h^{w`XNg#TL
zb^KjQZl^1C68pJY8;>H0;4akpN&Czu1c(zAyW#EHTs#4awQ8YK5_o|L$obU#86enl8)+PICN*}klF!!&X+_EEnZ&%6Q
z+s))rC-?mmg`~SPyZYjyhp-F$%m@4*A)J@-%51CXxD&T9QJMKb5O|jka@HS!`p}W~
z&W&wq=G$-0r}f)V>S_A-Y`}@mRY((jQ(nPptwa5`HYe=h8`yy5DYX
zBnk0aUtYxbzYiw>k5%`0gR1i!c)%Pa^y~DS;e%IWxSd0Ly&x-QVROzOZ10mmIb6i1@u@B8=C4vIrWEMh^9phwOTkjc1fIEP
zL0@4+1$QvAIWHkg8`tfmA4+abU#p6&`wR>8zwjrU<6e?c;6Y^)<6;#B
zmV1ZFK;a|b(4965QGd48SuA;7J|}5*3nGGhkB%SLrh8@M
zVVE^RYn#-yVY5eT)BMan*D*VeNMNB?@MxoD0xbN$J_MHdpKH+&35DK4Qdhw7fuPj`
zGQam`&2*fBXQ>$j+K+TNbX+I0%S-V$jvMcO(g-uw+K6Z&g>qT*e
zD*(Xwzhv7HhL?gcMwayE65_
zzHg&_uHt`5e7*A16jf}fUN_$O1T$XKjx`){$%3DSM7S|H%|#40^D{{ZUUM!l|2mW#
zGTicI|6A%&j&rogPktKJQS4@jXg8svU77wlq|Ro#;sc-idS3wc^R9JU!jbu4l`lr_
z3Wne`v{WTBf-h@9x?x-HpGc?8ad@j6v#{|C$`9XU2%J6fXWAc5$GLAtwFeaBp$c9E
zsSSH-R?z#U$&)cv=_%i5)h(o-s5wuyoVPz~&Vri2n{Xr!&5*)q{ms2u^=vqV4ZQzW
zSlS8^OBm))szeUC3CU=76;q%}aSHuqj$;(&Qc176kQq2S8i!nao!Y9sc@|Nh=$q&f
zn_uys6ZUDmOrG?r`jrx1occzuX$i5v;O&Ph9CXQxQM+%@V!;f0vljee=gW3cuA_-o
zoFyMEm2IIrc@L`+Gb&`Z85`r|DH=So-0nDsHQYfQ@|~-Vg1sn+BmFUN8@_vE4IwQQ
zR-+=611+VKtb$Na$DkhbAc{DErh*KU;Ueqmp$%&RR2V+~k<9aR
z^A}LW5=S%k*^)|!jOMHjuagOpj>k7ebffqZUPSeRdODBz8_e5Fkg!6t7|-Yek013WK>|Rkm_5j-|$g@^N_nau&H+
zwQR8FDyQIFqZ_!{yv?_D)ps
zE`8_P7>iTC(R6_gi~0sIc1o5dsWZZ5E*q95_DJ2Q;nqOB;l3Y3fy}5<$JjMo-F3Xz
zp?+64&UWZu*(G5IJg28bw$&yJMDHfm4gOef+n_0m5n!jFEx&>_mvU@9iH+cA<|XaG
zM5Mi;`6q1eG*mXljEpoclKryKetiMpDZ5B_p<1JrOjKp)dzX6si|<^<)q!}(ZALSa
z8SK1`(^}@#oww$Axc3ZoVK`R{f!(6DaA6j0goC&C5B?2As$z@f||a8hp+inl=bYcb1`ff$LZsGwwGq+Uycl>q!O_3(Lj^4
zFj7upC;fWDBr=R++y#ZrVYEMElhZ&;FL^qrNl*>Qu3{8HlXumO=}m!7m1yWCq8ss%
z7R<0pNgk*s5!@BmUW)v>sXgLy#5(CblO2i}*DT>DIV#{71H3w-+Pv5g`9F8^(wFcF=t5%1N?^tkY~fV&&;+N}#$RCH^PU3PjmlwGvauoOGLa`0X69xNB^Sn5%Gw*Tg-jCmIE;$13B90|i^;g9@xs1W3D^mXT7i)d
zSYDR@=K=EdSd#swCzr?BMpj!sR9hYyc*9Y_z^IOU@LOb_1*P(Q2Td$|%Qk9(+B==YTb2D>W7me<0rzd#-
z^lv$@gF>h}rhW@z{@BCpVJ%MRy9^tkdmbj$V_l|5oci?H)n$`gqPCu2R;kx}m!HQ#
z;WgQRJ_NfHoW;K##Xy{80KrAO&UMK?c$Mme1u{5}?KZr47HeW%f7vP=q_DMOg=-1G
zxyt|767WxO7wXA;JURQ6J?syQ#xwz;T#9#B*vn2ctl#HB?xn_$6)BBb&^~OyC@xo`
z*CF=F?US1IBVCyLr|O_P!(sTrDG^*HMZq{-kbV!fwK7ehR${b<*uZ5I?p$a2uiPH_
zUbp^oEIxW<)Jrjt0?iqsy&zFdRQ%hx*
z)*-&Q8JVT5V~hh17Jt2y4_Ve
zO{UC3u+K@?A$zZ>^EBY2{#-The`e{X7<#yHQRjZxkoJB1LsI>HPX%7hrqT#uV{+QB
zq*KLWKd?4-vLj|B9!=wL6rDVJJ4|d^0$Wqs`$PZpt3k3H<=xPfkv$dZrL8r~?0|Qd
z%VvyDqqo-`ShCSZJB~ck_o|jMrOa6^eH9+Auo(~R2phkI`j@^TuH=tpl8c0IHG=^1
zv9}Db2+O;XqC#jbG&GhB9!>lXoog2fw*+gS0O!bzHs{p5tnladhVYK1G#9@tIL>55
zKTTrOhU6k%o4*j>zVY2pxYxD(1)w}~WPGRv2~-+=;65Zi9uM`EFq(9-FBe(R>b@6d
z3rHT9)qA7xdZ<)@+@ny?Y9gb$dv{RZ^4jT?hkV=AcVq28qPF}Y@!jVqiI%MjG|sui
z29Vx8&K>55G>QEYg^!5bejL|rGugabb=!yU2Si`CE(%FlDPl2$xIV6Qw6fk$oEk2!
zEEWle0+P>BQ=Q1ri-4cGK0r7|Jmr~ZwG5Ij^siQIB8)}yyLYK)!b~t6Y{DzzDD=%8wP!(PBz^4ppCl|
z<;UyGpg;r&dE%Prg8h}AjL3otPkT*@zgpt3Tg43(w%$=1kjh{*Ajv1s4CYZ=nXELM
zqxa1&JBz=I0u!utYw2+4gvtwr|D!}30)Art%ThWgZdJnU$g~ykKj~}R>lBTg+5=;V
zAfL{d$-~C2Ize5YE|2k%#WvokATjG7|DwZ#+HOhEjw_*Ian?kfG3Z}YX(e53L1%>>e+1i$W~EiDx)}BN
z@|Lpn`{G$?RLNNuR3Q%@6(pFQN&Z)LaUATzFy}hO}ywFVpN+eV&og5ho79
zY)==BFg@G@?)?*vyU8~|^9p{LiCMG>oVjv^A6Z}P{6ZAKgA@DD;zuZ23u{#IVorG(
zLGnj@ybY!b@xK^T&W)lq1O@GMvUN$)(ZYN<3tD?}z=ioYjx>6!CBG0jPC|{wWRkNi
ztzZe9^6@kIIw@>rOcBh$A-@d>)rYap
znGbY8ROSRueTT%G^{AUQE@2GnzUf~Qa4oP$9$4wvzIYJi@=51N`{MAkQWG~vkyi#5
zaG|USj^wJtxyeUH^zc6C#75s1}_N9LvwZ(Ez|Hutbr?pq5={;_PFak#(8+L!oY)JP!rVii8>V0=~e{q)h2i2`qbuHDW1^))ZugN
zPOXrkzt>l5aax_yplH
z^ap%)moib7jz~WwpqFFXT6nCHD@B~-YG!NBKlbJo9wA
Date: Tue, 17 Jul 2012 20:22:55 -0700
Subject: [PATCH 209/422] center masthead bg pattern

---
 docs/assets/css/docs.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 761dc9686b..844b395778 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -93,7 +93,7 @@ hr.soften {
   padding: 40px 0;
   color: #fff;
   text-align: center;
-  text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
+  text-shadow: 0 1px 5px rgba(0,0,0,.3), 0 0 30px rgba(0,0,0,.075);
   background: #020031; /* Old browsers */
   background: -moz-linear-gradient(45deg,  #020031 0%, #6d3353 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
@@ -145,7 +145,7 @@ hr.soften {
   right: 0;
   bottom: 0;
   left: 0;
-  background: url(../img/bs-docs-masthead-pattern.png);
+  background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
   opacity: .5;
 }
 

From 6a663081a78b2810e7b3904949cfc5a91df81eff Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 17 Jul 2012 21:45:57 -0700
Subject: [PATCH 210/422] remove separate examples page, add to getting started
 page

---
 docs/examples.html                            | 146 ------------------
 docs/getting-started.html                     |  50 +++++-
 docs/templates/pages/examples.mustache        |  31 ----
 docs/templates/pages/getting-started.mustache |  50 +++++-
 4 files changed, 94 insertions(+), 183 deletions(-)
 delete mode 100644 docs/examples.html
 delete mode 100644 docs/templates/pages/examples.mustache

diff --git a/docs/examples.html b/docs/examples.html
deleted file mode 100644
index 1b16f378c9..0000000000
--- a/docs/examples.html
+++ /dev/null
@@ -1,146 +0,0 @@
-
-
-  
-    
-    Examples · Twitter Bootstrap
-    
-    
-    
-
-    
-    
-    
-    
-    
-
-    
-    
-
-    
-    
-    
-    
-    
-    
-
-  
-
-  
-
-    
-    
          
-      
          
-        
          
-          
-          Bootstrap
-          
          
-            
-          
          
-        
          
-      
          
-    
          
-
-
-
          
-  
          Bootstrap examples
          
-  
          We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.
          
-
          
-
-
-
            
-  
          • 
-    
-      
-    
-    
            Basic marketing site
            
-    
            Featuring a hero unit for a primary message and three supporting elements.
            
-  
            • 
-  
          • 
-    
-      
-    
-    
            Fluid layout
            
-    
            Uses our new responsive, fluid grid system to create a seamless liquid layout.
            
-  
            • 
-  
          • 
-    
-      
-    
-    
            Starter template
            
-    
            A barebones HTML document with all the Bootstrap CSS and javascript included.
            
-  
            • 
-
          
-
-
-
-   
-    
-
-
-
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-
-
-  
-
diff --git a/docs/getting-started.html b/docs/getting-started.html
index d46232fc27..3aae4b6c08 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -88,6 +88,8 @@
         
        • File structure 
          • 
         
        • What's included 
          • 
         
        • HTML template 
          • 
+        
        • Examples 
          • 
+        
        • What next? 
          • 
       
     
          
     
          
@@ -224,17 +226,59 @@
 </html>
 
          
         
          And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.
          
+      
 
-        
          
 
-        
          What next?
          
+
+      
+      
          
+        
          
+          
          5. Examples
          
+        
          
+        
          Moving beyond the base template with a few basic examples as starting points for working with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.
          
+        
            
+          
          • 
+            
+              
+            
+            
            Basic marketing site
            
+            
            Featuring a hero unit for a primary message and three supporting elements.
            
+          
            • 
+          
          • 
+            
+              
+            
+            
            Fluid layout
            
+            
            Uses our new responsive, fluid grid system to create a seamless liquid layout.
            
+          
            • 
+          
          • 
+            
+              
+            
+            
            Starter template
            
+            
            A barebones HTML document with all the Bootstrap CSS and javascript included.
            
+          
            • 
+        
          
+      
          
+
+
+
+
+      
+      
          
+        
          
+          
          What next?
          
+        
          
         
          Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.
          
-        Visit the Bootstrap docs
+        Visit the Bootstrap docs
         Customize Bootstrap
       
          
 
 
 
+
     
          
   
 
diff --git a/docs/templates/pages/examples.mustache b/docs/templates/pages/examples.mustache
deleted file mode 100644
index e5c9143efb..0000000000
--- a/docs/templates/pages/examples.mustache
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
          
-  
          {{_i}}Bootstrap examples{{/i}}
          
-  
          {{_i}}We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}
          
-
          
-
-
-
            
-  
          • 
-    
-      
-    
-    
            {{_i}}Basic marketing site{{/i}}
            
-    
            {{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}
            
-  
            • 
-  
          • 
-    
-      
-    
-    
            {{_i}}Fluid layout{{/i}}
            
-    
            {{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}
            
-  
            • 
-  
          • 
-    
-      
-    
-    
            {{_i}}Starter template{{/i}}
            
-    
            {{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}
            
-  
            • 
-
          
diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache
index 486a0b79a1..8a694d55ee 100644
--- a/docs/templates/pages/getting-started.mustache
+++ b/docs/templates/pages/getting-started.mustache
@@ -17,6 +17,8 @@
         
        • {{_i}}File structure{{/i}} 
          • 
         
        • {{_i}}What's included{{/i}} 
          • 
         
        • {{_i}}HTML template{{/i}} 
          • 
+        
        • {{_i}}Examples{{/i}} 
          • 
+        
        • {{_i}}What next?{{/i}} 
          • 
       
     
     
          
@@ -153,17 +155,59 @@
 </html>

          {{_i}}And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.{{/i}}

          + -
          -

          What next?

          + + +
          +
          +

          {{_i}}5. Examples{{/i}}

          +
          +

          {{_i}}Moving beyond the base template with a few basic examples as starting points for working with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}

          +
            +
          • + + + +

            {{_i}}Basic marketing site{{/i}}

            +

            {{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}

            +
            • +
          • + + + +

            {{_i}}Fluid layout{{/i}}

            +

            {{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}

            +
            • +
          • + + + +

            {{_i}}Starter template{{/i}}

            +

            {{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}

            +
            • +
          +
          + + + + + +
          +
          +

          {{_i}}What next?{{/i}}

          +

          Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

          - Visit the Bootstrap docs + Visit the Bootstrap docs Customize Bootstrap
          + {{! /span9 }} {{! row}} From 51c9fa1697d5df631fe37f1147d9265e89e5f4f6 Mon Sep 17 00:00:00 2001 From: Purwandi Date: Wed, 18 Jul 2012 12:19:02 +0700 Subject: [PATCH 211/422] Moved JS to bottom on extends page --- docs/extend.html | 9 ++++++--- docs/templates/pages/extend.mustache | 9 ++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/docs/extend.html b/docs/extend.html index ee7de7a8cf..43bccc8c06 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -203,10 +203,11 @@ <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="public/css/bootstrap.min.css" rel="stylesheet"> - <script src="public/js/bootstrap.min.js"></script> </head> <body> <h1>Hello, world!</h1> + <!-- Bootstrap --> + <script src="public/js/bootstrap.min.js"></script> </body> </html> @@ -219,13 +220,15 @@ <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="public/css/bootstrap.min.css" rel="stylesheet"> - <script src="public/js/bootstrap.min.js"></script> <!-- Project --> <link href="public/css/application.css" rel="stylesheet"> - <script src="public/js/application.js"></script> </head> <body> <h1>Hello, world!</h1> + <!-- Bootstrap --> + <script src="public/js/bootstrap.min.js"></script> + <!-- Project --> + <script src="public/js/application.js"></script> </body> </html> diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index 508bd7e152..e32833b0e8 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -132,10 +132,11 @@ <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="public/css/bootstrap.min.css" rel="stylesheet"> - <script src="public/js/bootstrap.min.js"></script> </head> <body> <h1>Hello, world!</h1> + <!-- Bootstrap --> + <script src="public/js/bootstrap.min.js"></script> </body> </html> @@ -148,13 +149,15 @@ <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="public/css/bootstrap.min.css" rel="stylesheet"> - <script src="public/js/bootstrap.min.js"></script> <!-- Project --> <link href="public/css/application.css" rel="stylesheet"> - <script src="public/js/application.js"></script> </head> <body> <h1>Hello, world!</h1> + <!-- Bootstrap --> + <script src="public/js/bootstrap.min.js"></script> + <!-- Project --> + <script src="public/js/application.js"></script> </body> </html> From 39f8996d6a34ac2fab1bdf47db65fd9bde891308 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jul 2012 22:26:53 -0700 Subject: [PATCH 212/422] fix dropdown vars and make hover state be link color again, add gradient to dropdown link hovers, fix caret positions and active states on nav tabs, tweak nav link padding --- docs/assets/css/bootstrap.css | 39 +++++++++++++++++++++++++++++++---- less/dropdowns.less | 16 +++++++++++--- less/navs.less | 9 +++++++- less/variables.less | 2 +- 4 files changed, 57 insertions(+), 9 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 3e79f94102..0226f24b5b 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2623,7 +2623,7 @@ table .span24 { .dropdown-menu a { display: block; - padding: 3px 15px; + padding: 3px 20px; clear: both; font-weight: normal; line-height: 20px; @@ -2633,9 +2633,17 @@ table .span24 { .dropdown-menu li > a:hover, .dropdown-menu li > a:focus { - color: #333333; + color: #ffffff; text-decoration: none; - background-color: #eeeeee; + background-color: #0088cc; + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); } .dropdown-menu .active > a, @@ -2643,7 +2651,15 @@ table .span24 { color: #ffffff; text-decoration: none; background-color: #0088cc; + background-color: #0081c2; + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-repeat: repeat-x; outline: 0; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); } .dropdown-menu .disabled > a, @@ -2657,6 +2673,11 @@ table .span24 { background-color: transparent; } +.dropdown .dropdown-menu .nav-header { + padding-right: 20px; + padding-left: 20px; +} + .open { *z-index: 1000; } @@ -3659,13 +3680,23 @@ input[type="submit"].btn.btn-mini { border-bottom-color: #005580; } +/* move down carets for tabs */ + +.nav-tabs .dropdown-toggle .caret { + margin-top: 8px; +} + .nav .active .dropdown-toggle .caret { border-top-color: #fff; border-bottom-color: #fff; } +.nav-tabs .active .dropdown-toggle .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} + .nav > .dropdown.active > a:hover { - color: #fff; cursor: pointer; } diff --git a/less/dropdowns.less b/less/dropdowns.less index e9e91b6a4b..1e4f33ff6b 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -84,7 +84,7 @@ // Links within the dropdown menu a { display: block; - padding: 3px 15px; + padding: 3px 20px; clear: both; font-weight: normal; line-height: @baseLineHeight; @@ -98,8 +98,9 @@ .dropdown-menu li > a:hover, .dropdown-menu li > a:focus { text-decoration: none; - color: @dropdownLinkColorActive; + color: @dropdownLinkColorHover; background-color: @dropdownLinkBackgroundHover; + #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%)); } // Active state @@ -108,8 +109,9 @@ .dropdown-menu .active > a:hover { color: @dropdownLinkColorHover; text-decoration: none; - background-color: @dropdownLinkBackgroundActive; outline: 0; + background-color: @dropdownLinkBackgroundActive; + #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%)); } // Disabled state @@ -126,6 +128,14 @@ cursor: default; } +// Tweak nav headers +// ----------------- +// Increase padding from 15px to 20px on sides +.dropdown .dropdown-menu .nav-header { + padding-left: 20px; + padding-right: 20px; +} + // Open state for the dropdown // --------------------------- .open { diff --git a/less/navs.less b/less/navs.less index 33bdfe1d0f..799a38ce51 100644 --- a/less/navs.less +++ b/less/navs.less @@ -213,6 +213,10 @@ border-top-color: @linkColorHover; border-bottom-color: @linkColorHover; } +/* move down carets for tabs */ +.nav-tabs .dropdown-toggle .caret { + margin-top: 8px; +} // Active dropdown links // ------------------------- @@ -220,11 +224,14 @@ border-top-color: #fff; border-bottom-color: #fff; } +.nav-tabs .active .dropdown-toggle .caret { + border-top-color: @gray; + border-bottom-color: @gray; +} // Active:hover dropdown links // ------------------------- .nav > .dropdown.active > a:hover { - color: #fff; cursor: pointer; } diff --git a/less/variables.less b/less/variables.less index 725100443b..ae5cd5e00b 100644 --- a/less/variables.less +++ b/less/variables.less @@ -109,7 +109,7 @@ @dropdownLinkColor: @grayDark; @dropdownLinkColorHover: @white; -@dropdownLinkBackgroundHover: @grayLighter; +@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; @dropdownLinkColorActive: @dropdownLinkColor; @dropdownLinkBackgroundActive: @linkColor; From 326b665065d8a1901cf53c145b98cbbdbdae6057 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jul 2012 22:40:38 -0700 Subject: [PATCH 213/422] de-scope nav-header from .nav --- docs/assets/css/bootstrap.css | 2 +- less/navs.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 0226f24b5b..4905ff7418 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3481,7 +3481,7 @@ input[type="submit"].btn.btn-mini { float: right; } -.nav .nav-header { +.nav-header { display: block; padding: 3px 15px; font-size: 11px; diff --git a/less/navs.less b/less/navs.less index 799a38ce51..96723ffc93 100644 --- a/less/navs.less +++ b/less/navs.less @@ -27,7 +27,7 @@ } // Nav headers (for dropdowns and lists) -.nav .nav-header { +.nav-header { display: block; padding: 3px 15px; font-size: 11px; From aac3736eeaa1ff1eaf3a6a04502efd6d5b9e7e49 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jul 2012 23:32:52 -0700 Subject: [PATCH 214/422] fixes #3845: add .btn-link for transparent buttons styled as links --- docs/assets/css/bootstrap.css | 20 ++++++++++++++++++++ docs/assets/css/docs.css | 4 ++-- docs/base-css.html | 19 +++++++++++++------ docs/templates/pages/base-css.mustache | 5 +++++ less/buttons.less | 24 ++++++++++++++++++++++++ 5 files changed, 64 insertions(+), 8 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 65e0c870fd..239de594a7 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3175,6 +3175,26 @@ input[type="submit"].btn.btn-mini { *padding-bottom: 1px; } +.btn-link { + color: #0088cc; + cursor: pointer; + background-color: transparent; + background-image: none; + border-color: transparent; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +.btn-link:hover { + color: #005580; + text-decoration: underline; + background-color: transparent; +} + .btn-group { position: relative; *margin-left: .3em; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 844b395778..e2cb315fb1 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -93,7 +93,7 @@ hr.soften { padding: 40px 0; color: #fff; text-align: center; - text-shadow: 0 1px 5px rgba(0,0,0,.3), 0 0 30px rgba(0,0,0,.075); + text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075); background: #020031; /* Old browsers */ background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */ @@ -146,7 +146,7 @@ hr.soften { bottom: 0; left: 0; background: url(../img/bs-docs-masthead-pattern.png) repeat center center; - opacity: .5; + opacity: .3; } /* Masthead (docs home) diff --git a/docs/base-css.html b/docs/base-css.html index a6b545c1d9..a23008dd1a 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -712,12 +712,14 @@ For example, <code>section</code> should be wrapped as inline. 
          -<tr class="success">
-  <td>1</td>
-  <td>TB - Monthly</td>
-  <td>01/04/2012</td>
-  <td>Approved</td>
-</tr>
+...
+  <tr class="success">
+    <td>1</td>
+    <td>TB - Monthly</td>
+    <td>01/04/2012</td>
+    <td>Approved</td>
+  </tr>
+...
          @@ -1423,6 +1425,11 @@ For example, <code>section</code> should be wrapped as inline. btn btn-inverse Alternate dark gray button, not tied to a semantic action or use + + + btn btn-link + Deemphasize a button by making it look like a link while maintaining button behavior + diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index c150521cc4..4819745913 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1362,6 +1362,11 @@ btn btn-inverse {{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}} + + + btn btn-link + {{_i}}Deemphasize a button by making it look like a link while maintaining button behavior{{/i}} + diff --git a/less/buttons.less b/less/buttons.less index b25d971805..8bdf34b20a 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -173,3 +173,27 @@ input[type="submit"].btn { *padding-bottom: 1px; } } + + +// Link buttons +// -------------------------------------------------- + +// Make a button look and behave like a link +.btn-link { + background-color: transparent; + background-image: none; + border-color: transparent; + cursor: pointer; + color: @linkColor; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.btn-link:hover { + color: @linkColorHover; + text-decoration: underline; + background-color: transparent; +} From c8fa2600f23ce9cfcbf7d98582198824d7c000a5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jul 2012 23:38:29 -0700 Subject: [PATCH 215/422] copy change --- docs/getting-started.html | 2 +- docs/templates/pages/getting-started.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/getting-started.html b/docs/getting-started.html index 3aae4b6c08..39dd81ff9a 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -236,7 +236,7 @@

          5. Examples

          -

          Moving beyond the base template with a few basic examples as starting points for working with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.

          +

          Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.

          • diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 8a694d55ee..e3f2c7ae7c 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -165,7 +165,7 @@

            {{_i}}5. Examples{{/i}}

            -

            {{_i}}Moving beyond the base template with a few basic examples as starting points for working with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}

            +

            {{_i}}Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}

            • From 6c23fff4d6d06953ae9804a4146cdc3fe2dd5a2e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 18 Jul 2012 01:06:52 -0700 Subject: [PATCH 216/422] misc docs content changes --- docs/assets/css/docs.css | 2 +- docs/components.html | 12 ------------ docs/templates/pages/components.mustache | 12 ------------ 3 files changed, 1 insertion(+), 25 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index e2cb315fb1..7013fb3ea0 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -146,7 +146,7 @@ hr.soften { bottom: 0; left: 0; background: url(../img/bs-docs-masthead-pattern.png) repeat center center; - opacity: .3; + opacity: .4; } /* Masthead (docs home) diff --git a/docs/components.html b/docs/components.html index 19f33028cf..7a25db4dd0 100644 --- a/docs/components.html +++ b/docs/components.html @@ -168,20 +168,8 @@

              Options

              ...

              -

              Dropup menus

              -

              ...

              -

              Aligning the menus

              ...

              - - -
              - - -

              Usage

              -

              ...

              - - diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 5c2c40847a..c21969d657 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -97,20 +97,8 @@

              {{_i}}Options{{/i}}

              {{_i}}...{{/i}}

              -

              {{_i}}Dropup menus{{/i}}

              -

              {{_i}}...{{/i}}

              -

              {{_i}}Aligning the menus{{/i}}

              {{_i}}...{{/i}}

              - - -
              - - -

              {{_i}}Usage{{/i}}

              -

              {{_i}}...{{/i}}

              - - From 89d7ec5290912ddd762f743f450b58b865afc6c3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 19 Jul 2012 21:06:42 -0700 Subject: [PATCH 217/422] fixes #4102: properly round top left corners of .table-border with caption/colgroup; also fix css tests page layout and footer --- docs/assets/css/bootstrap.css | 18 ++++++++++++++++++ less/tables.less | 20 ++++++++++++++++++++ less/tests/css-tests.html | 24 +++++++++++++----------- 3 files changed, 51 insertions(+), 11 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 239de594a7..b9ea3b7d0d 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1803,6 +1803,24 @@ table { -moz-border-radius-bottomright: 4px; } +.table-bordered caption + thead tr:first-child th:first-child, +.table-bordered caption + tbody tr:first-child td:first-child, +.table-bordered colgroup + thead tr:first-child th:first-child, +.table-bordered colgroup + tbody tr:first-child td:first-child { + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; +} + +.table-bordered caption + thead tr:first-child th:last-child, +.table-bordered caption + tbody tr:first-child td:last-child, +.table-bordered colgroup + thead tr:first-child th:last-child, +.table-bordered colgroup + tbody tr:first-child td:last-child { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-right-topleft: 4px; +} + .table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th { background-color: #f9f9f9; diff --git a/less/tables.less b/less/tables.less index 10499a1dbe..4db484062f 100644 --- a/less/tables.less +++ b/less/tables.less @@ -125,9 +125,29 @@ table { border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; } + + // Special fixes to round the left border on the first td/td + caption + thead tr:first-child th:first-child, + caption + tbody tr:first-child td:first-child, + colgroup + thead tr:first-child th:first-child, + colgroup + tbody tr:first-child td:first-child { + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + } + caption + thead tr:first-child th:last-child, + caption + tbody tr:first-child td:last-child, + colgroup + thead tr:first-child th:last-child, + colgroup + tbody tr:first-child td:last-child { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-right-topleft: 4px; + } } + + // ZEBRA-STRIPING // -------------- diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index fd687ac3a5..527e966163 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -42,17 +42,19 @@ -
              -
              -

              CSS Tests

              -

              One stop shop for quick debugging and edge-case tests of CSS.

              +
              +

              CSS Tests

              +

              One stop shop for quick debugging and edge-case tests of CSS.

              +
              +
              + From 3c1a0fbda40d06ab0b89d07ad808aa6975c8381d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 19 Jul 2012 21:25:24 -0700 Subject: [PATCH 218/422] fixes #4103: simpler fix for tfoot in .table-border --- docs/assets/css/bootstrap.css | 35 ++++++++++++++++++++++++++++++-- less/tables.less | 38 ++++++++++++++++++++++++++++++++--- less/tests/css-tests.html | 27 ++++++++++++++++++++++--- 3 files changed, 92 insertions(+), 8 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b9ea3b7d0d..bc52f0f865 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1753,6 +1753,35 @@ table { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + /* thead:last-child tr:last-child th:first-child, + tbody:last-child tr:last-child td:first-child, + tfoot tr:last-child td:first-child { + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + } + + tfoot ~ tbody:last-child tr:last-child td:first-child { + -webkit-border-bottom-left-radius: 0; + border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; + } + + thead:last-child tr:last-child th:last-child, + tbody:last-child tr:last-child td:last-child, + tfoot tr:last-child td:last-child { + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + } + + tfoot ~ tbody:last-child tr:last-child td:last-child { + -webkit-border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; + } +*/ + } .table-bordered th, @@ -1787,7 +1816,8 @@ table { } .table-bordered thead:last-child tr:last-child th:first-child, -.table-bordered tbody:last-child tr:last-child td:first-child { +.table-bordered tbody:last-child tr:last-child td:first-child, +.table-bordered tfoot:last-child tr:last-child td:first-child { -webkit-border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; @@ -1797,7 +1827,8 @@ table { } .table-bordered thead:last-child tr:last-child th:last-child, -.table-bordered tbody:last-child tr:last-child td:last-child { +.table-bordered tbody:last-child tr:last-child td:last-child, +.table-bordered tfoot:last-child tr:last-child td:last-child { -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; diff --git a/less/tables.less b/less/tables.less index 4db484062f..2ccca86890 100644 --- a/less/tables.less +++ b/less/tables.less @@ -113,20 +113,22 @@ table { } // For first th or td in the first row in the first thead or tbody thead:last-child tr:last-child th:first-child, - tbody:last-child tr:last-child td:first-child { + tbody:last-child tr:last-child td:first-child, + tfoot:last-child tr:last-child td:first-child { .border-radius(0 0 0 4px); -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; } thead:last-child tr:last-child th:last-child, - tbody:last-child tr:last-child td:last-child { + tbody:last-child tr:last-child td:last-child, + tfoot:last-child tr:last-child td:last-child { -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; } - // Special fixes to round the left border on the first td/td + // Special fixes to round the left border on the first td/th caption + thead tr:first-child th:first-child, caption + tbody tr:first-child td:first-child, colgroup + thead tr:first-child th:first-child, @@ -143,6 +145,36 @@ table { border-top-right-radius: 4px; -moz-border-right-topleft: 4px; } + + // Accounting for tfoot +/* thead:last-child tr:last-child th:first-child, + tbody:last-child tr:last-child td:first-child, + tfoot tr:last-child td:first-child { + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + } + + tfoot ~ tbody:last-child tr:last-child td:first-child { + -webkit-border-bottom-left-radius: 0; + border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; + } + + thead:last-child tr:last-child th:last-child, + tbody:last-child tr:last-child td:last-child, + tfoot tr:last-child td:last-child { + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + } + + tfoot ~ tbody:last-child tr:last-child td:last-child { + -webkit-border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; + } +*/ } diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 527e966163..81d5b18965 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -404,6 +404,13 @@ 3 + + + 3 + 6 + 9 + +

              Bordered with thead, with colgroup

              @@ -414,9 +421,9 @@ - - - + + + @@ -436,6 +443,13 @@ + + + + + + +
              123ABC
              3
              369
              @@ -466,6 +480,13 @@ 3 + + + 3 + 6 + 9 + +

              Bordered with rowspan and colspan

              From 1d4660beeaa8ef987256a5e7008340505b00c859 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 19 Jul 2012 21:25:42 -0700 Subject: [PATCH 219/422] nuke commented out code from last fix --- docs/assets/css/bootstrap.css | 29 ----------------------------- less/tables.less | 29 ----------------------------- 2 files changed, 58 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index bc52f0f865..73ec0bf83d 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1753,35 +1753,6 @@ table { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - /* thead:last-child tr:last-child th:first-child, - tbody:last-child tr:last-child td:first-child, - tfoot tr:last-child td:first-child { - -webkit-border-bottom-left-radius: 4px; - border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - } - - tfoot ~ tbody:last-child tr:last-child td:first-child { - -webkit-border-bottom-left-radius: 0; - border-bottom-left-radius: 0; - -moz-border-radius-bottomleft: 0; - } - - thead:last-child tr:last-child th:last-child, - tbody:last-child tr:last-child td:last-child, - tfoot tr:last-child td:last-child { - -webkit-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - } - - tfoot ~ tbody:last-child tr:last-child td:last-child { - -webkit-border-bottom-right-radius: 0; - border-bottom-right-radius: 0; - -moz-border-radius-bottomright: 0; - } -*/ - } .table-bordered th, diff --git a/less/tables.less b/less/tables.less index 2ccca86890..b1d34fd245 100644 --- a/less/tables.less +++ b/less/tables.less @@ -146,35 +146,6 @@ table { -moz-border-right-topleft: 4px; } - // Accounting for tfoot -/* thead:last-child tr:last-child th:first-child, - tbody:last-child tr:last-child td:first-child, - tfoot tr:last-child td:first-child { - -webkit-border-bottom-left-radius: 4px; - border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - } - - tfoot ~ tbody:last-child tr:last-child td:first-child { - -webkit-border-bottom-left-radius: 0; - border-bottom-left-radius: 0; - -moz-border-radius-bottomleft: 0; - } - - thead:last-child tr:last-child th:last-child, - tbody:last-child tr:last-child td:last-child, - tfoot tr:last-child td:last-child { - -webkit-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - } - - tfoot ~ tbody:last-child tr:last-child td:last-child { - -webkit-border-bottom-right-radius: 0; - border-bottom-right-radius: 0; - -moz-border-radius-bottomright: 0; - } -*/ } From 117f65d43108d5d7ff1c5011f0b8b61f7ef3b9dd Mon Sep 17 00:00:00 2001 From: Jon Stevens Date: Fri, 20 Jul 2012 09:47:12 -0700 Subject: [PATCH 220/422] on destroy, also hide. issue #3880, pull #4104 --- docs/templates/pages/javascript.mustache | 4 ++-- js/bootstrap-popover.js | 1 + js/bootstrap-tooltip.js | 1 + js/tests/unit/bootstrap-popover.js | 2 ++ js/tests/unit/bootstrap-tooltip.js | 2 ++ 5 files changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 49d065c326..4ec8a5f517 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -786,7 +786,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

              {{_i}}Toggles an element's tooltip.{{/i}}

              $('#element').tooltip('toggle')

              .tooltip('destroy')

              -

              {{_i}}Destroys an element's tooltip.{{/i}}

              +

              {{_i}}Hides and destroys an element's tooltip.{{/i}}

              $('#element').tooltip('destroy')
              @@ -947,7 +947,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

              {{_i}}Toggles an elements popover.{{/i}}

              $('#element').popover('toggle')

              .popover('destroy')

              -

              {{_i}}Destroys an element's popover.{{/i}}

              +

              {{_i}}Hides and destroys an element's popover.{{/i}}

              $('#element').popover('destroy')
              diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 845108b9ba..57420bb5d9 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -72,6 +72,7 @@ } , destroy: function () { + this.hide() this.$element.off(this.options.ns).removeData('popover') } diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js index 02f84d470d..f22aa8e643 100644 --- a/js/bootstrap-tooltip.js +++ b/js/bootstrap-tooltip.js @@ -236,6 +236,7 @@ } , destroy: function () { + this.hide() this.$element.off(this.options.ns).removeData('tooltip') } diff --git a/js/tests/unit/bootstrap-popover.js b/js/tests/unit/bootstrap-popover.js index 290be827ff..daffe215c9 100644 --- a/js/tests/unit/bootstrap-popover.js +++ b/js/tests/unit/bootstrap-popover.js @@ -96,7 +96,9 @@ $(function () { ok(popover.data('popover'), 'popover has data') ok(popover.data('events').mouseover && popover.data('events').mouseout, 'popover has hover event') ok(popover.data('events').click[0].namespace == 'foo', 'popover has extra click.foo event') + popover.popover('show') popover.popover('destroy') + ok(!popover.hasClass('in'), 'popover is hidden') ok(!popover.data('popover'), 'popover does not have data') ok(popover.data('events').click[0].namespace == 'foo', 'popover still has click.foo') ok(!popover.data('events').mouseover && !popover.data('events').mouseout, 'popover does not have any events') diff --git a/js/tests/unit/bootstrap-tooltip.js b/js/tests/unit/bootstrap-tooltip.js index 66bbeac7ec..2eb8c8f7c9 100644 --- a/js/tests/unit/bootstrap-tooltip.js +++ b/js/tests/unit/bootstrap-tooltip.js @@ -133,7 +133,9 @@ $(function () { ok(tooltip.data('tooltip'), 'tooltip has data') ok(tooltip.data('events').mouseover && tooltip.data('events').mouseout, 'tooltip has hover event') ok(tooltip.data('events').click[0].namespace == 'foo', 'tooltip has extra click.foo event') + tooltip.tooltip('show') tooltip.tooltip('destroy') + ok(!tooltip.hasClass('in'), 'tooltip is hidden') ok(!tooltip.data('tooltip'), 'tooltip does not have data') ok(tooltip.data('events').click[0].namespace == 'foo', 'tooltip still has click.foo') ok(!tooltip.data('events').mouseover && !tooltip.data('events').mouseout, 'tooltip does not have any events') From ee750bbce154fd1e8f1137f5782d9ba21ec07406 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 20 Jul 2012 21:38:28 -0700 Subject: [PATCH 221/422] tweak docs masthead links hover --- docs/assets/css/docs.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 7013fb3ea0..f16cb7442e 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -196,9 +196,13 @@ hr.soften { .masthead-links a { color: #fff; color: rgba(255,255,255,.5); + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } .masthead-links a:hover { color: #fff; + text-shadow: 0 0 10px rgba(255,255,255,.25); } /* Social proof buttons from GitHub & Twitter */ From b9105b98f9ee5f15d5b18bccf277344683d4a6db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 20 Jul 2012 22:06:47 -0700 Subject: [PATCH 222/422] move from downloads.html to customize.html to better match purpose of page, fix up customize page layout to match other docs, link style refinement to jumbotrons --- docs/assets/css/docs.css | 63 ++- docs/base-css.html | 2 +- docs/components.html | 34 +- docs/customize.html | 476 +++++++++++++++++++++++ docs/download.html | 462 ---------------------- docs/extend.html | 4 +- docs/getting-started.html | 2 +- docs/index.html | 4 +- docs/javascript.html | 2 +- docs/scaffolding.html | 2 +- docs/templates/layout.mustache | 4 +- docs/templates/pages/components.mustache | 32 +- docs/templates/pages/customize.mustache | 361 +++++++++++++++++ docs/templates/pages/download.mustache | 347 ----------------- docs/templates/pages/index.mustache | 2 +- docs/upgrading.html | 2 +- 16 files changed, 905 insertions(+), 894 deletions(-) create mode 100644 docs/customize.html delete mode 100644 docs/download.html create mode 100644 docs/templates/pages/customize.mustache delete mode 100644 docs/templates/pages/download.mustache diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f16cb7442e..e4dd2e966d 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -118,19 +118,41 @@ hr.soften { line-height: 30px; margin-bottom: 30px; } -.jumbotron .btn-large { - font-size: 18px; - font-weight: normal; - padding: 13px 24px; - margin-right: 10px; + +/* Link styles (used on .masthead-links as well) */ +.jumbotron a { + color: #fff; + color: rgba(255,255,255,.5); + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; +} +.jumbotron a:hover { + color: #fff; + text-shadow: 0 0 10px rgba(255,255,255,.25); +} + +/* Download button */ +.masthead .btn { + padding: 14px 24px; + font-size: 24px; + font-weight: 200; + color: #fff; /* redeclare to override the `.jumbotron a` */ + border: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); } -.jumbotron .btn-large small { - font-size: 14px; +.masthead .btn:active { + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); } + /* Pattern overlay ------------------------- */ .jumbotron .container { @@ -167,22 +189,6 @@ hr.soften { line-height: 1.25; } -/* Drop borders on buttons, improve shadows */ -.masthead .btn { - font-size: 24px; - padding: 14px 24px; - font-weight: 200; - border: 0; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); - box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); -} -.masthead .btn:active { - -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); - -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); - box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); -} - /* Textual links in masthead */ .masthead-links { margin: 0; @@ -193,17 +199,6 @@ hr.soften { padding: 0 10px; color: rgba(255,255,255,.25); } -.masthead-links a { - color: #fff; - color: rgba(255,255,255,.5); - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; - transition: all .2s ease-in-out; -} -.masthead-links a:hover { - color: #fff; - text-shadow: 0 0 10px rgba(255,255,255,.25); -} /* Social proof buttons from GitHub & Twitter */ .bs-docs-social { diff --git a/docs/base-css.html b/docs/base-css.html index a23008dd1a..8713a1b258 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -61,7 +61,7 @@ Javascript
            • - Extend + Customize
              • diff --git a/docs/components.html b/docs/components.html index 7a25db4dd0..11a23efb61 100644 --- a/docs/components.html +++ b/docs/components.html @@ -61,7 +61,7 @@ Javascript
            • - Extend + Customize
              • @@ -113,7 +113,7 @@

              Example

              -

              An isolated (without dropdown toggle) dropdown menu example, designed to be used with the dropdown javascript plugin.

              +

              Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown javascript plugin.

              diff --git a/docs/getting-started.html b/docs/getting-started.html index 39dd81ff9a..d2d261fd1e 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -61,7 +61,7 @@ Javascript
            • - Extend + Customize
              • diff --git a/docs/index.html b/docs/index.html index 4acc040abb..92e9075c9d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -61,7 +61,7 @@ Javascript
            • - Extend + Customize
              • @@ -75,7 +75,7 @@

              Sleek, intuitive, and powerful front-end framework for faster and easier web development.

              Download Bootstrap

              diff --git a/docs/javascript.html b/docs/javascript.html index 42c8a6f7e9..70355957c6 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -61,7 +61,7 @@ Javascript
            • - Extend + Customize
              • diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 1aca819f91..e43b4db30f 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -61,7 +61,7 @@ Javascript
            • - Extend + Customize
              • diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 3366179deb..879e939a14 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -72,8 +72,8 @@
            • {{_i}}Javascript{{/i}}
              • -
            • - {{_i}}Extend{{/i}} +
            • + {{_i}}Customize{{/i}}
              • diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index c21969d657..9b1e605210 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -42,7 +42,7 @@

              {{_i}}Example{{/i}}

              -

              {{_i}}An isolated (without dropdown toggle) dropdown menu example, designed to be used with the dropdown javascript plugin.{{/i}}

              +

              {{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown javascript plugin.{{/i}}

              From 6c2fa9430c04b666ae5f490312be29116a7782d2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jul 2012 12:57:39 -0700 Subject: [PATCH 223/422] add haunt w/ issue guideline spec --- .issue-guidelines.js | 85 ++++++++++++++++++++++++++++++++++++++++++++ Makefile | 7 ++++ 2 files changed, 92 insertions(+) create mode 100644 .issue-guidelines.js diff --git a/.issue-guidelines.js b/.issue-guidelines.js new file mode 100644 index 0000000000..c2de45379f --- /dev/null +++ b/.issue-guidelines.js @@ -0,0 +1,85 @@ +/* ========================================================== + * issue-guidelines.js + * http://twitter.github.com/bootstrap/javascript.html#alerts + * ========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + +var assert = require('assert') + +module.exports = { + + 'pull-requests': { + + 'should always be made against -wip branches': function (pull) { + assert.ok(/\-wip$/.test(pull.base.label)) + }, + + 'should always be made from feature branches': function (pull) { + assert.ok(pull.head.label != 'master') + }, + + 'should always include a unit test if changing js files': function (pull) { + var hasJS = false + var hasTests = false + + pull.files.forEach(function (file) { + if (/^js\/[^./]+.js/.test(file.filename)) hasJS = true + if (/^js\/test\/unit\/[^.]+.js/.test(file.filename)) hasTests = true + }) + + assert.ok(!hasJS || hasJS && hasTests) + }, + + 'after': function (pull) { + if (pull.reporter.stats.failures) { + pull.reportFailures(pull.close.bind(pull)) + } + } + + }, + + 'issues': { + + 'before': function (issue) { + var plus = {} + var labels = issue.labels.map(function (label) { return label.name }); + + if (~labels.indexOf('popular')) return + + issue.comments.forEach(function (comment) { + if (/\+1/.test(comment.body)) plus[comment.user.login] = true + }) + + if (Object.keys(plus).length > 5) { + issue.tag('popular') + issue.comment('Tagging this issue as popular, please stop commenting on this issue with +1. thanks!') + } + }, + + 'should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature': function (issue) { + var labels = issue.labels.map(function (label) { return label.name }); + if (~labels.indexOf('js') && !~labels.indexOf('feature')) assert.ok(/(jsfiddle|jsbin)/.test(issue.body)) + }, + + 'after': function (issue) { + if (issue.reporter.stats.failures) { + issue.reportFailures(issue.close.bind(issue)) + } + } + + } + +} \ No newline at end of file diff --git a/Makefile b/Makefile index 827b6920ec..ba648de20e 100644 --- a/Makefile +++ b/Makefile @@ -90,5 +90,12 @@ watch: echo "Watching less files..."; \ watchr -e "watch('less/.*\.less') { system 'make' }" +# +# HAUNT GITHUB ISSUES 4 FAT & MDO ONLY (O_O ) +# + +haunt: + @haunt -s .issue-guidelines.js https://github.com/twitter/bootstrap + .PHONY: docs watch gh-pages \ No newline at end of file From 77dea2c5eb4c0abecfb3ccc50e6b4f78d3847181 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jul 2012 13:00:17 -0700 Subject: [PATCH 224/422] change haunt to write --- Makefile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Makefile b/Makefile index ba648de20e..e1dcc92712 100644 --- a/Makefile +++ b/Makefile @@ -95,7 +95,7 @@ watch: # haunt: - @haunt -s .issue-guidelines.js https://github.com/twitter/bootstrap + @haunt .issue-guidelines.js https://github.com/twitter/bootstrap .PHONY: docs watch gh-pages \ No newline at end of file From 8281a9023a9a687be007de85f1731d131eedaf30 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jul 2012 13:21:44 -0700 Subject: [PATCH 225/422] *face palm* --- .issue-guidelines.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.issue-guidelines.js b/.issue-guidelines.js index c2de45379f..4c18ab3c03 100644 --- a/.issue-guidelines.js +++ b/.issue-guidelines.js @@ -37,7 +37,7 @@ module.exports = { pull.files.forEach(function (file) { if (/^js\/[^./]+.js/.test(file.filename)) hasJS = true - if (/^js\/test\/unit\/[^.]+.js/.test(file.filename)) hasTests = true + if (/^js\/tests\/unit\/[^.]+.js/.test(file.filename)) hasTests = true }) assert.ok(!hasJS || hasJS && hasTests) From 393f4a7b4244233a6ad24a48b68869329f4756b8 Mon Sep 17 00:00:00 2001 From: Jon Stevens Date: Sun, 22 Jul 2012 14:19:11 -0700 Subject: [PATCH 226/422] simplify things to one line. pull #4104 --- js/bootstrap-popover.js | 3 +-- js/bootstrap-tooltip.js | 5 +++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 57420bb5d9..2a2b298dca 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -72,8 +72,7 @@ } , destroy: function () { - this.hide() - this.$element.off(this.options.ns).removeData('popover') + this.hide().$element.off(this.options.ns).removeData('popover') } }) diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js index f22aa8e643..fa1c9a6c53 100644 --- a/js/bootstrap-tooltip.js +++ b/js/bootstrap-tooltip.js @@ -176,6 +176,8 @@ $.support.transition && this.$tip.hasClass('fade') ? removeWithAnimation() : $tip.remove() + + return this } , fixTitle: function () { @@ -236,8 +238,7 @@ } , destroy: function () { - this.hide() - this.$element.off(this.options.ns).removeData('tooltip') + this.hide().$element.off(this.options.ns).removeData('tooltip') } } From 5b8ff7061b659286bdd27c756bf8a58b05ba70d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 22 Jul 2012 14:31:39 -0700 Subject: [PATCH 227/422] fixes #4136: use @dropdownBorder var, but keep IE7-8 fallback --- less/dropdowns.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/less/dropdowns.less b/less/dropdowns.less index 1e4f33ff6b..5f62d27f04 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -60,8 +60,8 @@ margin: 1px 0 0; // override default ul list-style: none; background-color: @dropdownBackground; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); + border: 1px solid #ccc; // Fallback for IE7-8 + border: 1px solid @dropdownBorder; *border-right-width: 2px; *border-bottom-width: 2px; .border-radius(6px); From d76c8991424b91050636fb94e740daa123306e95 Mon Sep 17 00:00:00 2001 From: Jon Stevens Date: Sun, 22 Jul 2012 14:36:23 -0700 Subject: [PATCH 228/422] remove the ns option --- docs/templates/pages/javascript.mustache | 12 ------------ js/bootstrap-popover.js | 3 +-- js/bootstrap-tooltip.js | 7 +++---- 3 files changed, 4 insertions(+), 18 deletions(-) diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 4ec8a5f517..13480719e2 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -754,12 +754,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

              {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

              -
              - - - - -
              {{_i}}ns{{/i}}{{_i}}string{{/i}}'.tooltip'{{_i}}jQuery event namespace{{/i}}
              @@ -918,12 +912,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

              {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

              - - {{_i}}ns{{/i}} - {{_i}}string{{/i}} - '.popover' - {{_i}}jQuery event namespace{{/i}} -
              diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 2a2b298dca..2e6d9c32a5 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -72,7 +72,7 @@ } , destroy: function () { - this.hide().$element.off(this.options.ns).removeData('popover') + this.hide().$element.off('.' + this.type).removeData(this.type) } }) @@ -97,7 +97,6 @@ placement: 'right' , content: '' , template: '

              ' - , ns: '.popover' }) }(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js index fa1c9a6c53..f9447410ec 100644 --- a/js/bootstrap-tooltip.js +++ b/js/bootstrap-tooltip.js @@ -47,8 +47,8 @@ if (this.options.trigger != 'manual') { eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' - this.$element.on(eventIn + this.options.ns, this.options.selector, $.proxy(this.enter, this)) - this.$element.on(eventOut + this.options.ns, this.options.selector, $.proxy(this.leave, this)) + this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) } this.options.selector ? @@ -238,7 +238,7 @@ } , destroy: function () { - this.hide().$element.off(this.options.ns).removeData('tooltip') + this.hide().$element.off('.' + this.type).removeData(this.type) } } @@ -268,7 +268,6 @@ , title: '' , delay: 0 , html: true - , ns: '.tooltip' } }(window.jQuery); From fae6c36874b102408b53c6e5d980b247a9779dea Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jul 2012 14:50:52 -0700 Subject: [PATCH 229/422] adds minLength #3960 --- docs/assets/js/bootstrap-typeahead.js | 5 +++-- docs/assets/js/bootstrap.js | 5 +++-- docs/assets/js/bootstrap.min.js | 2 +- docs/javascript.html | 6 ++++++ docs/templates/pages/javascript.mustache | 6 ++++++ js/bootstrap-typeahead.js | 5 +++-- js/tests/unit/bootstrap-typeahead.js | 20 ++++++++++++++++++++ 7 files changed, 42 insertions(+), 7 deletions(-) diff --git a/docs/assets/js/bootstrap-typeahead.js b/docs/assets/js/bootstrap-typeahead.js index 6e896bb98b..65b1ddab14 100644 --- a/docs/assets/js/bootstrap-typeahead.js +++ b/docs/assets/js/bootstrap-typeahead.js @@ -81,7 +81,7 @@ this.query = this.$element.val() - if (!this.query) { + if (!this.query || this.query.length < this.options.minLength) { return this.shown ? this.hide() : this } @@ -279,12 +279,13 @@ , items: 8 , menu: '
                ' , item: '
                • ' + , minLength: 1 } $.fn.typeahead.Constructor = Typeahead - /* TYPEAHEAD DATA-API + /* TYPEAHEAD DATA-API * ================== */ $(function () { diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js index 34038ce5a3..f84b726d52 100644 --- a/docs/assets/js/bootstrap.js +++ b/docs/assets/js/bootstrap.js @@ -1690,7 +1690,7 @@ this.query = this.$element.val() - if (!this.query) { + if (!this.query || this.query.length < this.options.minLength) { return this.shown ? this.hide() : this } @@ -1888,12 +1888,13 @@ , items: 8 , menu: '
                  ' , item: '
                  • ' + , minLength: 1 } $.fn.typeahead.Constructor = Typeahead - /* TYPEAHEAD DATA-API + /* TYPEAHEAD DATA-API * ================== */ $(function () { diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js index b7dc1c7cb0..d46491b510 100644 --- a/docs/assets/js/bootstrap.min.js +++ b/docs/assets/js/bootstrap.min.js @@ -3,4 +3,4 @@ * Copyright 2012 Twitter, Inc. * http://www.apache.org/licenses/LICENSE-2.0.txt */ -!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove()},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.$element.off().removeData("tooltip")}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                  ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.$element.off().removeData("popover")}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

                  '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),this.query?(c=a.isFunction(this.source)?this.source(this.query,a.proxy(this.process,this)):this.source,c?this.process(c):this):this.shown?this.hide():this},process:function(b){var c=this;return b=a.grep(b,function(a){return c.matcher(a)}),b=this.sorter(b),b.length?this.render(b.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(a){return~a.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(a){var b=[],c=[],d=[],e;while(e=a.shift())e.toLowerCase().indexOf(this.query.toLowerCase())?~e.indexOf(this.query)?c.push(e):d.push(e):b.push(e);return b.concat(c,d)},highlighter:function(a){var b=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return a.replace(new RegExp("("+b+")","ig"),function(a,b){return""+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(a){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(a.keyCode),this.move(a)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                    ',item:'
                    • '},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file +!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove()},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.$element.off().removeData("tooltip")}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                    ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.$element.off().removeData("popover")}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

                    '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(a){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(a.keyCode),this.move(a)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                      ',item:'
                      • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file diff --git a/docs/javascript.html b/docs/javascript.html index 70355957c6..9b2897699e 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1543,6 +1543,12 @@ $('.carousel').carousel({ 8 The max number of items to display in the dropdown. + + minLength + number + 1 + The minimum character length needed before triggering autocomplete suggestions + matcher function diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 81ef75209d..326f2b2e79 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1474,6 +1474,12 @@ $('.carousel').carousel({ 8 {{_i}}The max number of items to display in the dropdown.{{/i}} + + {{_i}}minLength{{/i}} + {{_i}}number{{/i}} + {{_i}}1{{/i}} + {{_i}}The minimum character length needed before triggering autocomplete suggestions{{/i}} + {{_i}}matcher{{/i}} {{_i}}function{{/i}} diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js index 6e896bb98b..65b1ddab14 100644 --- a/js/bootstrap-typeahead.js +++ b/js/bootstrap-typeahead.js @@ -81,7 +81,7 @@ this.query = this.$element.val() - if (!this.query) { + if (!this.query || this.query.length < this.options.minLength) { return this.shown ? this.hide() : this } @@ -279,12 +279,13 @@ , items: 8 , menu: '
                        ' , item: '
                        • ' + , minLength: 1 } $.fn.typeahead.Constructor = Typeahead - /* TYPEAHEAD DATA-API + /* TYPEAHEAD DATA-API * ================== */ $(function () { diff --git a/js/tests/unit/bootstrap-typeahead.js b/js/tests/unit/bootstrap-typeahead.js index 25d4cafd8e..eb447aaa6e 100644 --- a/js/tests/unit/bootstrap-typeahead.js +++ b/js/tests/unit/bootstrap-typeahead.js @@ -181,4 +181,24 @@ $(function () { typeahead.$menu.remove() }) + + test("should start querying when minLength is met", function () { + var $input = $('').typeahead({ + source: ['aaaa', 'aaab', 'aaac'], + minLength: 3 + }) + , typeahead = $input.data('typeahead') + + $input.val('aa') + typeahead.lookup() + + equals(typeahead.$menu.find('li').length, 0, 'has 0 items in menu') + + $input.val('aaa') + typeahead.lookup() + + equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') + + typeahead.$menu.remove() + }) }) From dcf75697ecd243517b23d8ef440f772d91f699c0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jul 2012 18:28:39 -0700 Subject: [PATCH 230/422] some progress on affix plugin --- docs/assets/css/bootstrap.css | 4 + docs/assets/css/docs.css | 17 +++ docs/assets/js/application.js | 26 ---- docs/assets/js/bootstrap-affix.js | 104 ++++++++++++++++ docs/assets/js/bootstrap-modal.js | 4 +- docs/assets/js/bootstrap-popover.js | 4 +- docs/assets/js/bootstrap-scrollspy.js | 12 +- docs/assets/js/bootstrap-tab.js | 2 +- docs/assets/js/bootstrap-tooltip.js | 8 +- docs/assets/js/bootstrap.js | 30 ++--- docs/assets/js/bootstrap.min.js | 2 +- docs/base-css.html | 3 +- docs/components.html | 3 +- docs/customize.html | 3 +- docs/extend.html | 3 +- docs/getting-started.html | 3 +- docs/index.html | 1 + docs/javascript.html | 107 ++++++++++++++--- docs/scaffolding.html | 3 +- docs/templates/layout.mustache | 1 + docs/templates/pages/base-css.mustache | 2 +- docs/templates/pages/components.mustache | 2 +- docs/templates/pages/customize.mustache | 2 +- docs/templates/pages/extend.mustache | 2 +- docs/templates/pages/getting-started.mustache | 2 +- docs/templates/pages/javascript.mustache | 103 +++++++++++++--- docs/templates/pages/scaffolding.mustache | 2 +- docs/upgrading.html | 1 + js/.jshintrc | 1 + js/README.md | 112 ------------------ js/bootstrap-affix.js | 102 ++++++++++++++++ js/bootstrap-modal.js | 4 +- js/bootstrap-popover.js | 2 +- js/bootstrap-scrollspy.js | 12 +- js/bootstrap-tab.js | 2 +- js/bootstrap-tooltip.js | 2 +- js/tests/index.html | 2 + js/tests/unit/bootstrap-affix.js | 25 ++++ less/utilities.less | 4 + 39 files changed, 503 insertions(+), 221 deletions(-) create mode 100644 docs/assets/js/bootstrap-affix.js delete mode 100644 js/README.md create mode 100644 js/bootstrap-affix.js create mode 100644 js/tests/unit/bootstrap-affix.js diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 73ec0bf83d..5d9860248f 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -5501,3 +5501,7 @@ a.badge:hover { .invisible { visibility: hidden; } + +.affix { + position: fixed; +} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index e4dd2e966d..0f78130deb 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -891,6 +891,7 @@ form.bs-docs-example { margin-right: 10px; background-color: #fff; border: 1px solid #e5e5e5; + margin-left: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; @@ -930,11 +931,27 @@ form.bs-docs-example { opacity: .75; } +.bs-docs-sidenav.affix { + top: 40px; +} + @media (max-width: 979px) { + .bs-docs-sidenav.affix { + top: 0px; + } + .bs-docs-sidenav { margin-top: 30px; margin-right: 0; } } + +@media (max-width: 767px) { + + .bs-docs-sidenav.affix { + position: relative; + } + +} diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index a447c46b7e..9f1fa704f3 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -43,32 +43,6 @@ }) } - // fix sub nav on scroll - var $win = $(window) - , $nav = $('.subhead .navbar-subnav') - , navTop = $('.subhead .navbar-subnav').length && $('.subhead .navbar-subnav').offset().top - 40 - , isFixed = 0 - - processScroll() - - // hack sad times - holdover until rewrite for 2.1 - $nav.on('click', function () { - if (!isFixed) setTimeout(function () { $win.scrollTop($win.scrollTop() - 47) }, 10) - }) - - $win.on('scroll', processScroll) - - function processScroll() { - var i, scrollTop = $win.scrollTop() - if (scrollTop >= navTop && !isFixed) { - isFixed = 1 - $nav.addClass('navbar-subnav-fixed') - } else if (scrollTop <= navTop && isFixed) { - isFixed = 0 - $nav.removeClass('navbar-subnav-fixed') - } - } - // tooltip demo $('.tooltip-demo').tooltip({ selector: "a[rel=tooltip]" diff --git a/docs/assets/js/bootstrap-affix.js b/docs/assets/js/bootstrap-affix.js new file mode 100644 index 0000000000..33207b0fbd --- /dev/null +++ b/docs/assets/js/bootstrap-affix.js @@ -0,0 +1,104 @@ +/* ========================================================== + * bootstrap-affix.js v2.1.0 + * http://twitter.github.com/bootstrap/javascript.html#affix + * ========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* AFFIX CLASS DEFINITION + * ====================== */ + + var Affix = function (element, options) { + this.options = $.extend({}, $.fn.affix.defaults, options) + this.$window = $(window) + .on('scroll.affix.data-api', $.proxy(this.checkPosition, this)) + .on('resize.affix.data-api', $.proxy(this.refresh, this)) + this.$element = $(element) + this.refresh() + } + + Affix.prototype.refresh = function () { + this.position = this.$element.offset() + } + + Affix.prototype.checkPosition = function () { + if (!this.$element.is(':visible')) return + + var scrollLeft = this.$window.scrollLeft() + , scrollTop = this.$window.scrollTop() + , position = this.position + , offset = this.options.offset + , affix + + if (typeof offset != 'object') offset = { x: offset, y: offset } + + + affix = (offset.x == null || (position.left - scrollLeft <= offset.x)) + && (offset.y == null || (position.top - scrollTop <= offset.y)) + + if (affix == this.affixed) return + + this.affixed = affix + + this.$element[affix ? 'addClass' : 'removeClass']('affix') + } + + + /* AFFIX PLUGIN DEFINITION + * ======================= */ + + $.fn.affix = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('affix') + , options = typeof option == 'object' && option + if (!data) $this.data('affix', (data = new Affix(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.affix.Constructor = Affix + + $.fn.affix.defaults = { + offset: 0 + } + + + + /* AFFIX DATA-API + * ============== */ + + $(function () { + $('[data-spy="affix"]').each(function () { + var $spy = $(this) + , data = $spy.data() + + data.offset = data.offset || {} + + data.offsetX && (data.offset.x = data.offsetX) + data.offsetY && (data.offset.y = data.offsetY) + + $spy.affix(data) + }) + }) + + +}(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap-modal.js b/docs/assets/js/bootstrap-modal.js index 9663399081..530b53e07e 100644 --- a/docs/assets/js/bootstrap-modal.js +++ b/docs/assets/js/bootstrap-modal.js @@ -26,9 +26,9 @@ /* MODAL CLASS DEFINITION * ====================== */ - var Modal = function (content, options) { + var Modal = function (element, options) { this.options = options - this.$element = $(content) + this.$element = $(element) .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) this.options.remote && this.$element.find('.modal-body').load(this.options.remote) } diff --git a/docs/assets/js/bootstrap-popover.js b/docs/assets/js/bootstrap-popover.js index fe22ecb47c..b7883c5d2c 100644 --- a/docs/assets/js/bootstrap-popover.js +++ b/docs/assets/js/bootstrap-popover.js @@ -26,7 +26,7 @@ /* POPOVER PUBLIC CLASS DEFINITION * =============================== */ - var Popover = function ( element, options ) { + var Popover = function (element, options) { this.init('popover', element, options) } @@ -72,7 +72,7 @@ } , destroy: function () { - this.$element.off().removeData('popover') + this.hide().$element.off('.' + this.type).removeData(this.type) } }) diff --git a/docs/assets/js/bootstrap-scrollspy.js b/docs/assets/js/bootstrap-scrollspy.js index 4416d21684..e90cdccb97 100644 --- a/docs/assets/js/bootstrap-scrollspy.js +++ b/docs/assets/js/bootstrap-scrollspy.js @@ -23,15 +23,15 @@ "use strict"; // jshint ;_; - /* SCROLLSPY CLASS DEFINITION - * ========================== */ + /* SCROLLSPY CLASS DEFINITION + * ========================== */ - function ScrollSpy( element, options) { + function ScrollSpy(element, options) { var process = $.proxy(this.process, this) , $element = $(element).is('body') ? $(window) : $(element) , href this.options = $.extend({}, $.fn.scrollspy.defaults, options) - this.$scrollElement = $element.on('scroll.scroll.data-api', process) + this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process) this.selector = (this.options.target || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 || '') + ' .nav li > a' @@ -121,7 +121,7 @@ /* SCROLLSPY PLUGIN DEFINITION * =========================== */ - $.fn.scrollspy = function ( option ) { + $.fn.scrollspy = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('scrollspy') @@ -141,7 +141,7 @@ /* SCROLLSPY DATA-API * ================== */ - $(function () { + $(window).on('load', function () { $('[data-spy="scroll"]').each(function () { var $spy = $(this) $spy.scrollspy($spy.data()) diff --git a/docs/assets/js/bootstrap-tab.js b/docs/assets/js/bootstrap-tab.js index d87f35099a..dfcc844125 100644 --- a/docs/assets/js/bootstrap-tab.js +++ b/docs/assets/js/bootstrap-tab.js @@ -26,7 +26,7 @@ /* TAB CLASS DEFINITION * ==================== */ - var Tab = function ( element ) { + var Tab = function (element) { this.element = $(element) } diff --git a/docs/assets/js/bootstrap-tooltip.js b/docs/assets/js/bootstrap-tooltip.js index f280e36966..1e681627ad 100644 --- a/docs/assets/js/bootstrap-tooltip.js +++ b/docs/assets/js/bootstrap-tooltip.js @@ -47,8 +47,8 @@ if (this.options.trigger != 'manual') { eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' - this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this)) - this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this)) + this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) } this.options.selector ? @@ -176,6 +176,8 @@ $.support.transition && this.$tip.hasClass('fade') ? removeWithAnimation() : $tip.remove() + + return this } , fixTitle: function () { @@ -236,7 +238,7 @@ } , destroy: function () { - this.$element.off().removeData('tooltip') + this.hide().$element.off('.' + this.type).removeData(this.type) } } diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js index f84b726d52..3df16ac2cb 100644 --- a/docs/assets/js/bootstrap.js +++ b/docs/assets/js/bootstrap.js @@ -751,9 +751,9 @@ /* MODAL CLASS DEFINITION * ====================== */ - var Modal = function (content, options) { + var Modal = function (element, options) { this.options = options - this.$element = $(content) + this.$element = $(element) .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) this.options.remote && this.$element.find('.modal-body').load(this.options.remote) } @@ -1000,8 +1000,8 @@ if (this.options.trigger != 'manual') { eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' - this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this)) - this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this)) + this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) } this.options.selector ? @@ -1129,6 +1129,8 @@ $.support.transition && this.$tip.hasClass('fade') ? removeWithAnimation() : $tip.remove() + + return this } , fixTitle: function () { @@ -1189,7 +1191,7 @@ } , destroy: function () { - this.$element.off().removeData('tooltip') + this.hide().$element.off('.' + this.type).removeData(this.type) } } @@ -1250,7 +1252,7 @@ /* POPOVER PUBLIC CLASS DEFINITION * =============================== */ - var Popover = function ( element, options ) { + var Popover = function (element, options) { this.init('popover', element, options) } @@ -1296,7 +1298,7 @@ } , destroy: function () { - this.$element.off().removeData('popover') + this.hide().$element.off('.' + this.type).removeData(this.type) } }) @@ -1348,15 +1350,15 @@ "use strict"; // jshint ;_; - /* SCROLLSPY CLASS DEFINITION - * ========================== */ + /* SCROLLSPY CLASS DEFINITION + * ========================== */ - function ScrollSpy( element, options) { + function ScrollSpy(element, options) { var process = $.proxy(this.process, this) , $element = $(element).is('body') ? $(window) : $(element) , href this.options = $.extend({}, $.fn.scrollspy.defaults, options) - this.$scrollElement = $element.on('scroll.scroll.data-api', process) + this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process) this.selector = (this.options.target || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 || '') + ' .nav li > a' @@ -1446,7 +1448,7 @@ /* SCROLLSPY PLUGIN DEFINITION * =========================== */ - $.fn.scrollspy = function ( option ) { + $.fn.scrollspy = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('scrollspy') @@ -1466,7 +1468,7 @@ /* SCROLLSPY DATA-API * ================== */ - $(function () { + $(window).on('load', function () { $('[data-spy="scroll"]').each(function () { var $spy = $(this) $spy.scrollspy($spy.data()) @@ -1501,7 +1503,7 @@ /* TAB CLASS DEFINITION * ==================== */ - var Tab = function ( element ) { + var Tab = function (element) { this.element = $(element) } diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js index d46491b510..41b375fcc6 100644 --- a/docs/assets/js/bootstrap.min.js +++ b/docs/assets/js/bootstrap.min.js @@ -3,4 +3,4 @@ * Copyright 2012 Twitter, Inc. * http://www.apache.org/licenses/LICENSE-2.0.txt */ -!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove()},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.$element.off().removeData("tooltip")}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                        ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.$element.off().removeData("popover")}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

                        '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(a){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(a.keyCode),this.move(a)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                          ',item:'
                          • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file +!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f+"."+this.type,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();return c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove(),this},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                          ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

                          '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(a){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(a.keyCode),this.move(a)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                            ',item:'
                            • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index 8713a1b258..e99c6226bc 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -85,7 +85,7 @@ ================================================== -->
                            -
                              +
                              • Typography
                              • Code
                              • Tables
                                • @@ -1794,6 +1794,7 @@ For example, <code>section</code> should be wrapped as inline. + diff --git a/docs/components.html b/docs/components.html index 11a23efb61..ac4c74cead 100644 --- a/docs/components.html +++ b/docs/components.html @@ -85,7 +85,7 @@ ================================================== -->
                                -
                                  +
                                  • Dropdowns
                                  • Button groups
                                  • Button dropdowns
                                    • @@ -2198,6 +2198,7 @@ class="clearfix" + diff --git a/docs/customize.html b/docs/customize.html index 251da8691f..c6c7831154 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -85,7 +85,7 @@ ================================================== -->
                                    -
                                      +
                                      • 1. Choose components
                                      • 2. Select jQuery plugins
                                      • 3. Customize variables
                                        • @@ -469,6 +469,7 @@ + diff --git a/docs/extend.html b/docs/extend.html index edc5888308..38006289c1 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -85,7 +85,7 @@ ================================================== -->
                                        -
                                          +
                                          • Built with LESS
                                          • Compiling Bootstrap
                                          • Use as static assets
                                            • @@ -281,6 +281,7 @@ + diff --git a/docs/getting-started.html b/docs/getting-started.html index d2d261fd1e..a01e05c21a 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -83,7 +83,7 @@
                                            -
                                              +
                                              • Download
                                              • File structure
                                              • What's included
                                                • @@ -322,6 +322,7 @@ + diff --git a/docs/index.html b/docs/index.html index 92e9075c9d..2691c8b47e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -197,6 +197,7 @@ + diff --git a/docs/javascript.html b/docs/javascript.html index 9b2897699e..bc17456eae 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -85,7 +85,8 @@ ================================================== -->
                                                -

                                                Individual or compiled

                                                -

                                                If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.

                                                +

                                                If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of the plugins listed on this page.

                                                Data attributes

                                                -

                                                ...

                                                +

                                                You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.

                                                + +

                                                That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: + +

                                                +  $('body').off('.data-api')
+
                                                + +

                                                Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:

                                                + +
                                                +  $('body').off('.alert.data-api')
+

                                                Programmatic API

                                                -

                                                ...

                                                +

                                                We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.

                                                + +
                                                +  $(".btn.danger").button("toggle").addClass("fat")
+
                                                + +

                                                All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):

                                                + +
                                                +  $("#myModal").modal()                       // initialized with defaults
+  $("#myModal").modal({ keyboard: false })   // initialized with no keyboard
+  $("#myModal").modal('show')                // initializes and invokes show immediately
                                                
+
                                                + +

                                                Each plugin also exposes it's raw constructor on a `Constructor` property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover').

                                                +

                                                Events

                                                +

                                                Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and it's past participle form (ex. shown) is trigger on the completion of an action.

                                                + +

                                                All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.

                                                + +
                                                +  $('#myModal').on('show', function (e) {
+      if (!data) return e.preventDefault() // stops modal from being shown
+  })
+
                                                @@ -849,7 +886,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

                                                Toggles an element's tooltip.

                                                $('#element').tooltip('toggle')

                                                .tooltip('destroy')

                                                -

                                                Destroys an element's tooltip.

                                                +

                                                Hides and destroys an element's tooltip.

                                                $('#element').tooltip('destroy')
                                                @@ -1004,7 +1041,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

                                                Toggles an elements popover.

                                                $('#element').popover('toggle')

                                                .popover('destroy')

                                                -

                                                Destroys an element's popover.

                                                +

                                                Hides and destroys an element's popover.

                                                $('#element').popover('destroy')
                                                @@ -1581,23 +1618,60 @@ $('.carousel').carousel({ ================================================== -->
                                                -

                                                - Affix - Make an element stick in place -

                                                +

                                                Affix bootstrap-affix.js

                                                -

                                                ...

                                                -

                                                ...

                                                -
                                                +

                                                Example

                                                +

                                                The subnavigation on the left is a live demo of the affix plugin.

                                                + +
                                                + +

                                                Usage

                                                + +

                                                Via data attributes

                                                +

                                                To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. When the affix offsets are satisified, an .affix class is added to the element.

                                                + + 
                                                <div data-spy="affix">...</body>
                                                + +
                                                + Heads up! + It's up to you to maintain the dimensions of an element when toggling between relative and fixed positions. To see how this is done, refer to this pages subnavigation.
                                                + +

                                                Via javascript

                                                +

                                                Call the affix plugin via javascript:

                                                + 
                                                $('#navbar').affix()
                                                + +

                                                Methods

                                                +

                                                .scrollspy('refresh')

                                                +

                                                When using affix in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:

                                                -...
+$('[data-spy="affix"]').each(function () {
+  $(this).affix('refresh')
+});
                                                -
                                                - +

                                                Options

                                                +

                                                Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-offset-y="".

                                                + + + + + + + + + + + + + + + + + +
                                                Nametypedefaultdescription
                                                offsetnumber | object10Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object offset: { x: 10 }.
                                            @@ -1642,6 +1716,7 @@ $('.carousel').carousel({ + diff --git a/docs/scaffolding.html b/docs/scaffolding.html index e43b4db30f..2ee2646784 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -86,7 +86,7 @@ ================================================== -->
                                            -
                                              +
                                              • Global styles
                                              • Grid system
                                              • Fluid grid system
                                                • @@ -579,6 +579,7 @@ + diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 879e939a14..23e84e64ca 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -121,6 +121,7 @@ + {{#production}} diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 4819745913..bce47f2bd5 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -14,7 +14,7 @@ ================================================== -->
                                                -
                                                  +
                                                  • {{_i}}Typography{{/i}}
                                                  • {{_i}}Code{{/i}}
                                                  • {{_i}}Tables{{/i}}
                                                    • diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 9b1e605210..c4ca32016a 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -14,7 +14,7 @@ ================================================== -->
                                                    -
                                                      +
                                                      • {{_i}}Dropdowns{{/i}}
                                                      • {{_i}}Button groups{{/i}}
                                                      • {{_i}}Button dropdowns{{/i}}
                                                        • diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache index 8d14be78c0..34758a2075 100644 --- a/docs/templates/pages/customize.mustache +++ b/docs/templates/pages/customize.mustache @@ -14,7 +14,7 @@ ================================================== -->
                                                        -
                                                          +
                                                          • {{_i}}1. Choose components{{/i}}
                                                          • {{_i}}2. Select jQuery plugins{{/i}}
                                                          • {{_i}}3. Customize variables{{/i}}
                                                            • diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index e32833b0e8..51b14270dd 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -14,7 +14,7 @@ ================================================== -->
                                                            -
                                                              +
                                                              • {{_i}}Built with LESS{{/i}}
                                                              • {{_i}}Compiling Bootstrap{{/i}}
                                                              • {{_i}}Use as static assets{{/i}}
                                                                • diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index e3f2c7ae7c..0e6349e022 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -12,7 +12,7 @@
                                                                -
                                                                  +
                                                                  • {{_i}}Download{{/i}}
                                                                  • {{_i}}File structure{{/i}}
                                                                  • {{_i}}What's included{{/i}}
                                                                    • diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 062e02863e..c5afdfb068 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -14,7 +14,8 @@ ================================================== -->
                                                                    -

                                                                    {{_i}}Individual or compiled{{/i}}

                                                                    -

                                                                    {{_i}}If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.{{/i}}

                                                                    +

                                                                    {{_i}}If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of the plugins listed on this page.{{/i}}

                                                                    {{_i}}Data attributes{{/i}}

                                                                    -

                                                                    {{_i}}...{{/i}}

                                                                    +

                                                                    {{_i}}You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.{{/i}}

                                                                    + +

                                                                    {{_i}}That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:{{/i}} + +

                                                                    +  $('body').off('.data-api')
+
                                                                    + +

                                                                    {{_i}}Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:{{/i}}

                                                                    + +
                                                                    +  $('body').off('.alert.data-api')
+

                                                                    {{_i}}Programmatic API{{/i}}

                                                                    -

                                                                    {{_i}}...{{/i}}

                                                                    +

                                                                    {{_i}}We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.{{/i}}

                                                                    + +
                                                                    +  $(".btn.danger").button("toggle").addClass("fat")
+
                                                                    + +

                                                                    {{_i}}All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):{{/i}}

                                                                    + +
                                                                    +  $("#myModal").modal()                       // initialized with defaults
+  $("#myModal").modal({ keyboard: false })   // initialized with no keyboard
+  $("#myModal").modal('show')                // initializes and invokes show immediately
                                                                    
+
                                                                    + +

                                                                    {{_i}}Each plugin also exposes it's raw constructor on a `Constructor` property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover').{{/i}}

                                                                    - {{! Thought: consider porting much of the JS readme here? }} +

                                                                    {{_i}}Events{{/i}}

                                                                    +

                                                                    {{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and it's past participle form (ex. shown) is trigger on the completion of an action.{{/i}}

                                                                    + +

                                                                    {{_i}}All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.{{/i}}

                                                                    + +
                                                                    +  $('#myModal').on('show', function (e) {
+      if (!data) return e.preventDefault() // stops modal from being shown
+  })
+
                                                                    @@ -1512,23 +1548,60 @@ $('.carousel').carousel({ ================================================== -->
                                                                    -

                                                                    - {{_i}}Affix{{/i}} - {{_i}}Make an element stick in place{{/i}} -

                                                                    +

                                                                    {{_i}}Affix{{/i}} bootstrap-affix.js

                                                                    -

                                                                    {{_i}}...{{/i}}

                                                                    -

                                                                    {{_i}}...{{/i}}

                                                                    -
                                                                    +

                                                                    {{_i}}Example{{/i}}

                                                                    +

                                                                    {{_i}}The subnavigation on the left is a live demo of the affix plugin.{{/i}}

                                                                    + +
                                                                    + +

                                                                    {{_i}}Usage{{/i}}

                                                                    + +

                                                                    {{_i}}Via data attributes{{/i}}

                                                                    +

                                                                    {{_i}}To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. When the affix offsets are satisified, an .affix class is added to the element. {{/i}}

                                                                    + + 
                                                                    <div data-spy="affix">...</body>
                                                                    + +
                                                                    + {{_i}}Heads up!{{/i}} + {{_i}}It's up to you to maintain the dimensions of an element when toggling between relative and fixed positions. To see how this is done, refer to this pages subnavigation.{{/i}}
                                                                    + +

                                                                    {{_i}}Via javascript{{/i}}

                                                                    +

                                                                    {{_i}}Call the affix plugin via javascript:{{/i}}

                                                                    + 
                                                                    $('#navbar').affix()
                                                                    + +

                                                                    {{_i}}Methods{{/i}}

                                                                    +

                                                                    .scrollspy('refresh')

                                                                    +

                                                                    {{_i}}When using affix in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}

                                                                    -...
+$('[data-spy="affix"]').each(function () {
+  $(this).affix('refresh')
+});
                                                                    -
                                                                    - +

                                                                    {{_i}}Options{{/i}}

                                                                    +

                                                                    {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-offset-y="".{{/i}}

                                                                    + + + + + + + + + + + + + + + + + +
                                                                    {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                                                                    {{_i}}offset{{/i}}{{_i}}number | object{{/i}}{{_i}}10{{/i}}{{_i}}Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object offset: { x: 10 }.{{/i}}
                                                                    {{! /span9 }}
                                                                {{! row}} diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 4b9d4c5b25..4759277eea 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -15,7 +15,7 @@ ================================================== -->
                                                                -
                                                                  +
                                                                  • {{_i}}Global styles{{/i}}
                                                                  • {{_i}}Grid system{{/i}}
                                                                  • {{_i}}Fluid grid system{{/i}}
                                                                    • diff --git a/docs/upgrading.html b/docs/upgrading.html index 5e4731e8c3..373fee4749 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -302,6 +302,7 @@ + diff --git a/js/.jshintrc b/js/.jshintrc index 0f064a0b4e..e0722690bd 100644 --- a/js/.jshintrc +++ b/js/.jshintrc @@ -3,6 +3,7 @@ "laxcomma" : true, "laxbreak" : true, "browser" : true, + "eqnull" : true, "debug" : true, "devel" : true, "boss" : true, diff --git a/js/README.md b/js/README.md deleted file mode 100644 index b7927ba6b2..0000000000 --- a/js/README.md +++ /dev/null @@ -1,112 +0,0 @@ -## 2.0 BOOTSTRAP JS PHILOSOPHY -These are the high-level design rules which guide the development of Bootstrap's plugin apis. - ---- - -### DATA-ATTRIBUTE API - -We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API. - -We acknowledge that this isn't always the most performant and it may sometimes be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: - - $('body').off('.data-api') - -To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this: - - $('body').off('.alert.data-api') - ---- - -### PROGRAMATIC API - -We also believe you should be able to use all plugins provided by Bootstrap purely through the JavaScript API. - -All public APIs should be single, chainable methods, and return the collection acted upon. - - $(".btn.danger").button("toggle").addClass("fat") - -All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior: - - $("#myModal").modal() // initialized with defaults - $("#myModal").modal({ keyboard: false }) // initialized with no keyboard - $("#myModal").modal('show') // initializes and invokes show immediately - ---- - -### OPTIONS - -Options should be sparse and add universal value. We should pick the right defaults. - -All plugins should have a default object which can be modified to affect all instances' default options. The defaults object should be available via `$.fn.plugin.defaults`. - - $.fn.modal.defaults = { … } - -An options definition should take the following form: - - *noun*: *adjective* - describes or modifies a quality of an instance - -Examples: - - backdrop: true - keyboard: false - placement: 'top' - ---- - -### EVENTS - -All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action. - - show | shown - hide | hidden - -All infinitive events should provide preventDefault functionality. This provides the abililty to stop the execution of an action. - - $('#myModal').on('show', function (e) { - if (!data) return e.preventDefault() // stops modal from being shown - }) - ---- - -### CONSTRUCTORS - -Each plugin should expose its raw constructor on a `Constructor` property -- accessed in the following way: - - - $.fn.popover.Constructor - ---- - -### DATA ACCESSOR - -Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data API like this: - - $('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor - ---- - -### DATA ATTRIBUTES - -Data attributes should take the following form: - -- data-{{verb}}={{plugin}} - defines main interaction -- data-target || href^=# - defined on "control" element (if element controls an element other than self) -- data-{{noun}} - defines class instance options - -Examples: - - // control other targets - data-toggle="modal" data-target="#foo" - data-toggle="collapse" data-target="#foo" data-parent="#bar" - - // defined on element they control - data-spy="scroll" - - data-dismiss="modal" - data-dismiss="alert" - - data-toggle="dropdown" - - data-toggle="button" - data-toggle="buttons-checkbox" - data-toggle="buttons-radio" \ No newline at end of file diff --git a/js/bootstrap-affix.js b/js/bootstrap-affix.js new file mode 100644 index 0000000000..a1cd10933f --- /dev/null +++ b/js/bootstrap-affix.js @@ -0,0 +1,102 @@ +/* ========================================================== + * bootstrap-affix.js v2.1.0 + * http://twitter.github.com/bootstrap/javascript.html#affix + * ========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function ($) { + + "use strict"; // jshint ;_; + + + /* AFFIX CLASS DEFINITION + * ====================== */ + + var Affix = function (element, options) { + this.options = $.extend({}, $.fn.affix.defaults, options) + this.$window = $(window) + .on('scroll.affix.data-api', $.proxy(this.checkPosition, this)) + .on('resize.affix.data-api', $.proxy(this.refresh, this)) + this.$element = $(element) + this.refresh() + } + + Affix.prototype.refresh = function () { + this.position = this.$element.offset() + } + + Affix.prototype.checkPosition = function () { + if (!this.$element.is(':visible')) return + + var scrollLeft = this.$window.scrollLeft() + , scrollTop = this.$window.scrollTop() + , position = this.position + , offset = this.options.offset + , affix + + if (typeof offset != 'object') offset = { x: offset, y: offset } + + affix = (offset.x == null || (position.left - scrollLeft <= offset.x)) + && (offset.y == null || (position.top - scrollTop <= offset.y)) + + if (affix == this.affixed) return + + this.affixed = affix + + this.$element[affix ? 'addClass' : 'removeClass']('affix') + } + + + /* AFFIX PLUGIN DEFINITION + * ======================= */ + + $.fn.affix = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('affix') + , options = typeof option == 'object' && option + if (!data) $this.data('affix', (data = new Affix(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.affix.Constructor = Affix + + $.fn.affix.defaults = { + offset: 0 + } + + + /* AFFIX DATA-API + * ============== */ + + $(function () { + $('[data-spy="affix"]').each(function () { + var $spy = $(this) + , data = $spy.data() + + data.offset = data.offset || {} + + data.offsetX && (data.offset.x = data.offsetX) + data.offsetY && (data.offset.y = data.offsetY) + + $spy.affix(data) + }) + }) + + +}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 9663399081..530b53e07e 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -26,9 +26,9 @@ /* MODAL CLASS DEFINITION * ====================== */ - var Modal = function (content, options) { + var Modal = function (element, options) { this.options = options - this.$element = $(content) + this.$element = $(element) .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) this.options.remote && this.$element.find('.modal-body').load(this.options.remote) } diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 2e6d9c32a5..b7883c5d2c 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -26,7 +26,7 @@ /* POPOVER PUBLIC CLASS DEFINITION * =============================== */ - var Popover = function ( element, options ) { + var Popover = function (element, options) { this.init('popover', element, options) } diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index 4416d21684..e90cdccb97 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -23,15 +23,15 @@ "use strict"; // jshint ;_; - /* SCROLLSPY CLASS DEFINITION - * ========================== */ + /* SCROLLSPY CLASS DEFINITION + * ========================== */ - function ScrollSpy( element, options) { + function ScrollSpy(element, options) { var process = $.proxy(this.process, this) , $element = $(element).is('body') ? $(window) : $(element) , href this.options = $.extend({}, $.fn.scrollspy.defaults, options) - this.$scrollElement = $element.on('scroll.scroll.data-api', process) + this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process) this.selector = (this.options.target || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 || '') + ' .nav li > a' @@ -121,7 +121,7 @@ /* SCROLLSPY PLUGIN DEFINITION * =========================== */ - $.fn.scrollspy = function ( option ) { + $.fn.scrollspy = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('scrollspy') @@ -141,7 +141,7 @@ /* SCROLLSPY DATA-API * ================== */ - $(function () { + $(window).on('load', function () { $('[data-spy="scroll"]').each(function () { var $spy = $(this) $spy.scrollspy($spy.data()) diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js index d87f35099a..dfcc844125 100644 --- a/js/bootstrap-tab.js +++ b/js/bootstrap-tab.js @@ -26,7 +26,7 @@ /* TAB CLASS DEFINITION * ==================== */ - var Tab = function ( element ) { + var Tab = function (element) { this.element = $(element) } diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js index f9447410ec..1e681627ad 100644 --- a/js/bootstrap-tooltip.js +++ b/js/bootstrap-tooltip.js @@ -176,7 +176,7 @@ $.support.transition && this.$tip.hasClass('fade') ? removeWithAnimation() : $tip.remove() - + return this } diff --git a/js/tests/index.html b/js/tests/index.html index 2f8f71b12e..976ca16872 100644 --- a/js/tests/index.html +++ b/js/tests/index.html @@ -27,6 +27,7 @@ + @@ -41,6 +42,7 @@ +
                                                                    diff --git a/js/tests/unit/bootstrap-affix.js b/js/tests/unit/bootstrap-affix.js new file mode 100644 index 0000000000..2d4419def4 --- /dev/null +++ b/js/tests/unit/bootstrap-affix.js @@ -0,0 +1,25 @@ +$(function () { + + module("bootstrap-affix") + + test("should be defined on jquery object", function () { + ok($(document.body).affix, 'affix method is defined') + }) + + test("should return element", function () { + ok($(document.body).affix()[0] == document.body, 'document.body returned') + }) + + test("should exit early if element is not visible", function () { + var $affix = $('
                                                                    ').affix() + $affix.data('affix').checkPosition() + ok(!$affix.hasClass('affix'), 'affix class was not added') + }) + + test("should add affix class if scrolled to correct position", function () { + var $affix = $('
                                                                    ').appendTo('body').affix() + $('body').trigger('scroll') + ok($affix.hasClass('affix'), 'element has class affix') + }) + +}) \ No newline at end of file diff --git a/less/utilities.less b/less/utilities.less index 9d3a405b1c..b020e1c1b0 100644 --- a/less/utilities.less +++ b/less/utilities.less @@ -24,3 +24,7 @@ .invisible { visibility: hidden; } + +.affix { + position: fixed; +} \ No newline at end of file From 76cfe1700248cd3c7086333b67050f418a897a03 Mon Sep 17 00:00:00 2001 From: Aleksey V Zapparov Date: Mon, 23 Jul 2012 20:55:27 +0200 Subject: [PATCH 231/422] Fix transition end name for opera 11+12 Fix transition end name for Opera 11 and Opera 12. Should fix issues: #3896, #3897, #4157, #4158 --- js/bootstrap-transition.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js index 2f15dd0093..0c37ebb187 100644 --- a/js/bootstrap-transition.js +++ b/js/bootstrap-transition.js @@ -36,7 +36,7 @@ , transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd' , 'MozTransition' : 'transitionend' - , 'OTransition' : 'otransitionend' + , 'OTransition' : 'oTransitionEnd otransitionend' , 'msTransition' : 'MSTransitionEnd' , 'transition' : 'transitionend' } From b05fc00d591d0d24f72cde6fc656fd021a52c82c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jul 2012 12:51:36 -0700 Subject: [PATCH 232/422] fixes #4148, readme typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 827019e9df..f3b2bf5632 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ Versioning For transparency and insight into our release cycle, and for striving to maintain backward compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible. -Releases will be numbered with the follow format: +Releases will be numbered with the following format: `..` From 5b8838aeace0bf725438be84a7396d988749d62c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jul 2012 12:51:48 -0700 Subject: [PATCH 233/422] more alignment fixes for customize page --- docs/assets/css/docs.css | 2 ++ docs/customize.html | 8 +++----- docs/templates/pages/customize.mustache | 8 +++----- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index e4dd2e966d..8e32d186be 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -407,6 +407,8 @@ hr.soften { /* Custom, larger checkbox labels */ .download .checkbox { padding: 6px 10px 6px 25px; + font-size: 13px; + line-height: 18px; color: #555; background-color: #f9f9f9; -webkit-border-radius: 3px; diff --git a/docs/customize.html b/docs/customize.html index 251da8691f..160b02c4b6 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -134,8 +134,6 @@ -
                                                                    -

                                                                    JS Components

                                                                    @@ -168,7 +166,7 @@
                                                                    -
                                                                    +
                                                                    -
                                                                    +
                                                                    -
                                                                    +

                                                                    Heads up!

                                                                    All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.

                                                                    diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache index 8d14be78c0..1e56eb3ba0 100644 --- a/docs/templates/pages/customize.mustache +++ b/docs/templates/pages/customize.mustache @@ -63,8 +63,6 @@ -
                                                                    -

                                                                    {{_i}}JS Components{{/i}}

                                                                    @@ -97,7 +95,7 @@
                                                                    -
                                                                    +
                                                                    -
                                                                    +
                                                                    -
                                                                    +

                                                                    {{_i}}Heads up!{{/i}}

                                                                    {{_i}}All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.{{/i}}

                                                                    From 5247b15411a29f98832e38957f57a1e03e7065ae Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 23 Jul 2012 18:12:23 -0700 Subject: [PATCH 234/422] following #4148 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 827019e9df..f3b2bf5632 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ Versioning For transparency and insight into our release cycle, and for striving to maintain backward compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible. -Releases will be numbered with the follow format: +Releases will be numbered with the following format: `..` From 614d52bd7f86591a0b0ab09e1c16ee888610d8a3 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 23 Jul 2012 18:17:43 -0700 Subject: [PATCH 235/422] delete this test for now - as affix is still heavily underdevelopment --- js/bootstrap-affix.js | 2 +- js/tests/unit/bootstrap-affix.js | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/js/bootstrap-affix.js b/js/bootstrap-affix.js index a1cd10933f..7563029b14 100644 --- a/js/bootstrap-affix.js +++ b/js/bootstrap-affix.js @@ -88,7 +88,7 @@ $('[data-spy="affix"]').each(function () { var $spy = $(this) , data = $spy.data() - + data.offset = data.offset || {} data.offsetX && (data.offset.x = data.offsetX) diff --git a/js/tests/unit/bootstrap-affix.js b/js/tests/unit/bootstrap-affix.js index 2d4419def4..bc25df9917 100644 --- a/js/tests/unit/bootstrap-affix.js +++ b/js/tests/unit/bootstrap-affix.js @@ -16,10 +16,4 @@ $(function () { ok(!$affix.hasClass('affix'), 'affix class was not added') }) - test("should add affix class if scrolled to correct position", function () { - var $affix = $('
                                                                    ').appendTo('body').affix() - $('body').trigger('scroll') - ok($affix.hasClass('affix'), 'element has class affix') - }) - }) \ No newline at end of file From 0dda2c4659c6e0407b5b9fda6618ab5c8c12a897 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jul 2012 22:36:08 -0700 Subject: [PATCH 236/422] make docs scroll over jumbotrons, but only for 980px up --- docs/assets/css/docs.css | 32 + docs/base-css.html | 2324 +++++++-------- docs/components.html | 2628 ++++++++-------- docs/customize.html | 691 ++--- docs/getting-started.html | 269 +- docs/index.html | 138 +- docs/javascript.html | 2362 ++++++++------- docs/scaffolding.html | 610 ++-- docs/templates/pages/base-css.mustache | 2348 +++++++-------- docs/templates/pages/components.mustache | 2646 ++++++++--------- docs/templates/pages/customize.mustache | 663 +++-- docs/templates/pages/getting-started.mustache | 275 +- docs/templates/pages/index.mustache | 140 +- docs/templates/pages/javascript.mustache | 2390 ++++++++------- docs/templates/pages/scaffolding.mustache | 624 ++-- 15 files changed, 9100 insertions(+), 9040 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 8e32d186be..95495456cb 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -940,3 +940,35 @@ form.bs-docs-example { } } + + +@media (min-width: 979px) { + .masthead, + .subhead { + position: fixed; + top: 40px; + right: 0; + left: 0; + } + .masthead { + height: 400px; + } + .subhead { + height: 120px; /* +80px pdding */ + } + .bs-docs-canvas { + position: absolute; + width: 100%; + z-index: 10; + background-color: #fff; + -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.5); + -moz-box-shadow: 0 1px 5px rgba(0,0,0,.5); + box-shadow: 0 1px 5px rgba(0,0,0,.5); + } + .masthead + .bs-docs-canvas { + top: 550px; + } + .subhead + .bs-docs-canvas { + top: 240px; + } +} diff --git a/docs/base-css.html b/docs/base-css.html index 8713a1b258..5ad0dfeaf1 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -78,128 +78,130 @@
                                                                    -
                                                                    +
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + +
                                                                    +
                                                                    - -
                                                                    -
                                                                    -

                                                                    Typography Headings, paragraphs, lists, and other inline type elements

                                                                    -
                                                                    + +
                                                                    +
                                                                    +

                                                                    Typography Headings, paragraphs, lists, and other inline type elements

                                                                    +
                                                                    -

                                                                    Headings

                                                                    -

                                                                    All HTML headings, <h1> through <h6> are available.

                                                                    -
                                                                    -

                                                                    h1. Heading 1

                                                                    -

                                                                    h2. Heading 2

                                                                    -

                                                                    h3. Heading 3

                                                                    -

                                                                    h4. Heading 4

                                                                    -
                                                                    h5. Heading 5
                                                                    -
                                                                    h6. Heading 6
                                                                    -
                                                                    +

                                                                    Headings

                                                                    +

                                                                    All HTML headings, <h1> through <h6> are available.

                                                                    +
                                                                    +

                                                                    h1. Heading 1

                                                                    +

                                                                    h2. Heading 2

                                                                    +

                                                                    h3. Heading 3

                                                                    +

                                                                    h4. Heading 4

                                                                    +
                                                                    h5. Heading 5
                                                                    +
                                                                    h6. Heading 6
                                                                    +
                                                                    -

                                                                    Body copy

                                                                    -

                                                                    Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).

                                                                    -
                                                                    -

                                                                    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

                                                                    -

                                                                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

                                                                    -

                                                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

                                                                    -
                                                                    - 
                                                                    <p>...</p>
                                                                    +

                                                                    Body copy

                                                                    +

                                                                    Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).

                                                                    +
                                                                    +

                                                                    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

                                                                    +

                                                                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

                                                                    +

                                                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

                                                                    +
                                                                    + 
                                                                    <p>...</p>
                                                                    -

                                                                    Lead body copy

                                                                    -

                                                                    Make a paragraph stand out by adding .lead.

                                                                    -
                                                                    -

                                                                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

                                                                    -
                                                                    - 
                                                                    <p class="lead">...</p>
                                                                    +

                                                                    Lead body copy

                                                                    +

                                                                    Make a paragraph stand out by adding .lead.

                                                                    +
                                                                    +

                                                                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

                                                                    +
                                                                    + 
                                                                    <p class="lead">...</p>
                                                                    -

                                                                    Built with Less

                                                                    -

                                                                    The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

                                                                    +

                                                                    Built with Less

                                                                    +

                                                                    The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

                                                                    -
                                                                    +
                                                                    -

                                                                    Emphasis

                                                                    -

                                                                    Make use of HTML's default emphasis tags, <strong> and <em>.

                                                                    +

                                                                    Emphasis

                                                                    +

                                                                    Make use of HTML's default emphasis tags, <strong> and <em>.

                                                                    -

                                                                    <strong>

                                                                    -

                                                                    For emphasizing a snippet of text with important

                                                                    -
                                                                    -

                                                                    The following snippet of text is rendered as bold text.

                                                                    -
                                                                    - 
                                                                    <strong>rendered as bold text</strong>
                                                                    +

                                                                    <strong>

                                                                    +

                                                                    For emphasizing a snippet of text with important

                                                                    +
                                                                    +

                                                                    The following snippet of text is rendered as bold text.

                                                                    +
                                                                    + 
                                                                    <strong>rendered as bold text</strong>
                                                                    -

                                                                    <em>

                                                                    -

                                                                    For emphasizing a snippet of text with stress

                                                                    -
                                                                    -

                                                                    The following snippet of text is rendered as italicized text.

                                                                    -
                                                                    - 
                                                                    <em>rendered as italicized text</em>
                                                                    +

                                                                    <em>

                                                                    +

                                                                    For emphasizing a snippet of text with stress

                                                                    +
                                                                    +

                                                                    The following snippet of text is rendered as italicized text.

                                                                    +
                                                                    + 
                                                                    <em>rendered as italicized text</em>
                                                                    -

                                                                    Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

                                                                    +

                                                                    Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

                                                                    -
                                                                    +
                                                                    -

                                                                    Abbreviations

                                                                    -

                                                                    Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

                                                                    +

                                                                    Abbreviations

                                                                    +

                                                                    Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

                                                                    -

                                                                    <abbr>

                                                                    -

                                                                    For expanded text on long hover of an abbreviation, include the title attribute.

                                                                    -
                                                                    -

                                                                    An abbreviation of the word attribute is attr.

                                                                    -
                                                                    - 
                                                                    <abbr title="attribute">attr</abbr>
                                                                    +

                                                                    <abbr>

                                                                    +

                                                                    For expanded text on long hover of an abbreviation, include the title attribute.

                                                                    +
                                                                    +

                                                                    An abbreviation of the word attribute is attr.

                                                                    +
                                                                    + 
                                                                    <abbr title="attribute">attr</abbr>
                                                                    -

                                                                    <abbr class="initialism">

                                                                    -

                                                                    Add .initialism to an abbreviation for a slightly smaller font-size.

                                                                    -
                                                                    -

                                                                    HTML is the best thing since sliced bread.

                                                                    -
                                                                    - 
                                                                    <abbr title="attribute" class="initialism">attr</abbr>
                                                                    +

                                                                    <abbr class="initialism">

                                                                    +

                                                                    Add .initialism to an abbreviation for a slightly smaller font-size.

                                                                    +
                                                                    +

                                                                    HTML is the best thing since sliced bread.

                                                                    +
                                                                    + 
                                                                    <abbr title="attribute" class="initialism">attr</abbr>
                                                                    -
                                                                    +
                                                                    -

                                                                    Addresses

                                                                    -

                                                                    Present contact information for the nearest ancestor or the entire body of work.

                                                                    +

                                                                    Addresses

                                                                    +

                                                                    Present contact information for the nearest ancestor or the entire body of work.

                                                                    -

                                                                    <address>

                                                                    -

                                                                    Preserve formatting by ending all lines with <br>.

                                                                    -
                                                                    -
                                                                    - Twitter, Inc.
                                                                    - 795 Folsom Ave, Suite 600
                                                                    - San Francisco, CA 94107
                                                                    - P: (123) 456-7890 -
                                                                    -
                                                                    - Full Name
                                                                    - first.last@gmail.com -
                                                                    -
                                                                    +

                                                                    <address>

                                                                    +

                                                                    Preserve formatting by ending all lines with <br>.

                                                                    +
                                                                    +
                                                                    + Twitter, Inc.
                                                                    + 795 Folsom Ave, Suite 600
                                                                    + San Francisco, CA 94107
                                                                    + P: (123) 456-7890 +
                                                                    +
                                                                    + Full Name
                                                                    + first.last@gmail.com +
                                                                    + 
                                                                     <address>
   <strong>Twitter, Inc.</strong><br>
@@ -215,36 +217,36 @@
                                                                    -
                                                                    +
                                                                    -

                                                                    Blockquotes

                                                                    -

                                                                    For quoting blocks of content from another source within your document.

                                                                    +

                                                                    Blockquotes

                                                                    +

                                                                    For quoting blocks of content from another source within your document.

                                                                    -

                                                                    Default blockqoute

                                                                    -

                                                                    Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

                                                                    -
                                                                    -
                                                                    -

                                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                                    -
                                                                    -
                                                                    +

                                                                    Default blockqoute

                                                                    +

                                                                    Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

                                                                    +
                                                                    +
                                                                    +

                                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                                    +
                                                                    + 
                                                                     <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
                                                                    -

                                                                    Blockquote options

                                                                    -

                                                                    Style and content changes for simple variations on a standard blockquote.

                                                                    +

                                                                    Blockquote options

                                                                    +

                                                                    Style and content changes for simple variations on a standard blockquote.

                                                                    -

                                                                    Naming a source

                                                                    -

                                                                    Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

                                                                    -
                                                                    -
                                                                    -

                                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                                    - Someone famous in Source Title -
                                                                    -
                                                                    +

                                                                    Naming a source

                                                                    +

                                                                    Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

                                                                    +
                                                                    +
                                                                    +

                                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                                    + Someone famous in Source Title +
                                                                    + 
                                                                     <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -252,14 +254,14 @@
 </blockquote>
                                                                    -

                                                                    Alternate displays

                                                                    -

                                                                    Use .pull-right for a floated, right-aligned blockquote.

                                                                    -
                                                                    -
                                                                    -

                                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                                    - Someone famous in Source Title -
                                                                    -
                                                                    +

                                                                    Alternate displays

                                                                    +

                                                                    Use .pull-right for a floated, right-aligned blockquote.

                                                                    +
                                                                    +
                                                                    +

                                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                                    + Someone famous in Source Title +
                                                                    + 
                                                                     <blockquote class="pull-right">
   ...
@@ -267,16 +269,63 @@
                                                                    -
                                                                    +
                                                                    - -

                                                                    Lists

                                                                    + +

                                                                    Lists

                                                                    -

                                                                    Unordered

                                                                    -

                                                                    A list of items in which the order does not explicitly matter.

                                                                    +

                                                                    Unordered

                                                                    +

                                                                    A list of items in which the order does not explicitly matter.

                                                                    +
                                                                    +
                                                                      +
                                                                    • Lorem ipsum dolor sit amet
                                                                      • +
                                                                    • Consectetur adipiscing elit
                                                                      • +
                                                                    • Integer molestie lorem at massa
                                                                      • +
                                                                    • Facilisis in pretium nisl aliquet
                                                                      • +
                                                                    • Nulla volutpat aliquam velit +
                                                                        +
                                                                      • Phasellus iaculis neque
                                                                        • +
                                                                      • Purus sodales ultricies
                                                                        • +
                                                                      • Vestibulum laoreet porttitor sem
                                                                        • +
                                                                      • Ac tristique libero volutpat at
                                                                        • +
                                                                      +
                                                                      • +
                                                                    • Faucibus porta lacus fringilla vel
                                                                      • +
                                                                    • Aenean sit amet erat nunc
                                                                      • +
                                                                    • Eget porttitor lorem
                                                                      • +
                                                                    +
                                                                    +
                                                                    +<ul>
+  <li>...</li>
+</ul>
+
                                                                    + +

                                                                    Ordered

                                                                    +

                                                                    A list of items in which the order does explicitly matter.

                                                                    +
                                                                    +
                                                                      +
                                                                    1. Lorem ipsum dolor sit amet
                                                                      2. +
                                                                    2. Consectetur adipiscing elit
                                                                      3. +
                                                                    3. Integer molestie lorem at massa
                                                                      4. +
                                                                    4. Facilisis in pretium nisl aliquet
                                                                      5. +
                                                                    5. Nulla volutpat aliquam velit
                                                                      6. +
                                                                    6. Faucibus porta lacus fringilla vel
                                                                      7. +
                                                                    7. Aenean sit amet erat nunc
                                                                      8. +
                                                                    8. Eget porttitor lorem
                                                                      9. +
                                                                    +
                                                                    +
                                                                    +<ol>
+  <li>...</li>
+</ol>
+
                                                                    + +

                                                                    Unstyled

                                                                    +

                                                                    A list of items with no list-style or additional left padding.

                                                                    -
                                                                      +
                                                                      • Lorem ipsum dolor sit amet
                                                                      • Consectetur adipiscing elit
                                                                      • Integer molestie lorem at massa
                                                                        • @@ -295,71 +344,24 @@ 
                                                                    -<ul>
-  <li>...</li>
-</ul>
-
                                                                    - -

                                                                    Ordered

                                                                    -

                                                                    A list of items in which the order does explicitly matter.

                                                                    -
                                                                    -
                                                                      -
                                                                    1. Lorem ipsum dolor sit amet
                                                                      2. -
                                                                    2. Consectetur adipiscing elit
                                                                      3. -
                                                                    3. Integer molestie lorem at massa
                                                                      4. -
                                                                    4. Facilisis in pretium nisl aliquet
                                                                      5. -
                                                                    5. Nulla volutpat aliquam velit
                                                                      6. -
                                                                    6. Faucibus porta lacus fringilla vel
                                                                      7. -
                                                                    7. Aenean sit amet erat nunc
                                                                      8. -
                                                                    8. Eget porttitor lorem
                                                                      9. -
                                                                    -
                                                                    -
                                                                    -<ol>
-  <li>...</li>
-</ol>
-
                                                                    - -

                                                                    Unstyled

                                                                    -

                                                                    A list of items with no list-style or additional left padding.

                                                                    -
                                                                    -
                                                                      -
                                                                    • Lorem ipsum dolor sit amet
                                                                      • -
                                                                    • Consectetur adipiscing elit
                                                                      • -
                                                                    • Integer molestie lorem at massa
                                                                      • -
                                                                    • Facilisis in pretium nisl aliquet
                                                                      • -
                                                                    • Nulla volutpat aliquam velit -
                                                                        -
                                                                      • Phasellus iaculis neque
                                                                        • -
                                                                      • Purus sodales ultricies
                                                                        • -
                                                                      • Vestibulum laoreet porttitor sem
                                                                        • -
                                                                      • Ac tristique libero volutpat at
                                                                        • -
                                                                      -
                                                                      • -
                                                                    • Faucibus porta lacus fringilla vel
                                                                      • -
                                                                    • Aenean sit amet erat nunc
                                                                      • -
                                                                    • Eget porttitor lorem
                                                                      • -
                                                                    -
                                                                    -
                                                                     <ul class="unstyled">
   <li>...</li>
 </ul>
                                                                    -

                                                                    Description

                                                                    -

                                                                    A list of terms with their associated descriptions.

                                                                    -
                                                                    -
                                                                    -
                                                                    Description lists
                                                                    -
                                                                    A description list is perfect for defining terms.
                                                                    -
                                                                    Euismod
                                                                    -
                                                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                                                    -
                                                                    Donec id elit non mi porta gravida at eget metus.
                                                                    -
                                                                    Malesuada porta
                                                                    -
                                                                    Etiam porta sem malesuada magna mollis euismod.
                                                                    -
                                                                    -
                                                                    +

                                                                    Description

                                                                    +

                                                                    A list of terms with their associated descriptions.

                                                                    +
                                                                    +
                                                                    +
                                                                    Description lists
                                                                    +
                                                                    A description list is perfect for defining terms.
                                                                    +
                                                                    Euismod
                                                                    +
                                                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                                                    +
                                                                    Donec id elit non mi porta gravida at eget metus.
                                                                    +
                                                                    Malesuada porta
                                                                    +
                                                                    Etiam porta sem malesuada magna mollis euismod.
                                                                    +
                                                                    + 
                                                                     <dl>
   <dt>...</dt>
@@ -367,50 +369,50 @@
 </dl>
                                                                    -

                                                                    Horizontal description

                                                                    -

                                                                    Make terms and descriptions in <dl> line up side-by-side.

                                                                    -
                                                                    -
                                                                    -
                                                                    Description lists
                                                                    -
                                                                    A description list is perfect for defining terms.
                                                                    -
                                                                    Euismod
                                                                    -
                                                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                                                    -
                                                                    Donec id elit non mi porta gravida at eget metus.
                                                                    -
                                                                    Malesuada porta
                                                                    -
                                                                    Etiam porta sem malesuada magna mollis euismod.
                                                                    -
                                                                    Felis euismod semper eget lacinia
                                                                    -
                                                                    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                                                                    -
                                                                    -
                                                                    +

                                                                    Horizontal description

                                                                    +

                                                                    Make terms and descriptions in <dl> line up side-by-side.

                                                                    +
                                                                    +
                                                                    +
                                                                    Description lists
                                                                    +
                                                                    A description list is perfect for defining terms.
                                                                    +
                                                                    Euismod
                                                                    +
                                                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                                                    +
                                                                    Donec id elit non mi porta gravida at eget metus.
                                                                    +
                                                                    Malesuada porta
                                                                    +
                                                                    Etiam porta sem malesuada magna mollis euismod.
                                                                    +
                                                                    Felis euismod semper eget lacinia
                                                                    +
                                                                    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                                                                    +
                                                                    + 
                                                                     <dl class="dl-horizontal">
   <dt>...</dt>
   <dd>...</dd>
 </dl>
                                                                    -

                                                                    - Heads up! - Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout. -

                                                                    -
                                                                    +

                                                                    + Heads up! + Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout. +

                                                                    +
                                                                    - -
                                                                    -
                                                                    -

                                                                    Code Inline and block code snippets

                                                                    -
                                                                    + +
                                                                    +
                                                                    +

                                                                    Code Inline and block code snippets

                                                                    +
                                                                    -

                                                                    Inline

                                                                    -

                                                                    Wrap inline snippets of code with <code>.

                                                                    +

                                                                    Inline

                                                                    +

                                                                    Wrap inline snippets of code with <code>.

                                                                     For example, <code>section</code> should be wrapped as inline.
                                                                    -

                                                                    Basic block

                                                                    -

                                                                    Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

                                                                    +

                                                                    Basic block

                                                                    +

                                                                    Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

                                                                     <p>Sample text here...</p>
                                                                    @@ -419,53 +421,53 @@ For example, <code>section</code> should be wrapped as inline. &lt;p&gt;Sample text here...&lt;/p&gt; </pre> -

                                                                    Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

                                                                    -

                                                                    You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

                                                                    -
                                                                    +

                                                                    Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

                                                                    +

                                                                    You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

                                                                    +
                                                                    - -
                                                                    -
                                                                    -

                                                                    Tables For, you guessed it, tabular data

                                                                    -
                                                                    + +
                                                                    +
                                                                    +

                                                                    Tables For, you guessed it, tabular data

                                                                    +
                                                                    -

                                                                    Default styles

                                                                    -

                                                                    For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

                                                                    -
                                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                                    #First NameLast NameUsername
                                                                    1MarkOtto@mdo
                                                                    2JacobThornton@fat
                                                                    3Larrythe Bird@twitter
                                                                    -
                                                                    +

                                                                    Default styles

                                                                    +

                                                                    For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

                                                                    +
                                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                                    #First NameLast NameUsername
                                                                    1MarkOtto@mdo
                                                                    2JacobThornton@fat
                                                                    3Larrythe Bird@twitter
                                                                    + 
                                                                     <table class="table">
   …
@@ -473,168 +475,168 @@ For example, <code>section</code> should be wrapped as inline.
                                                                    -
                                                                    +
                                                                    -

                                                                    Optional classes

                                                                    -

                                                                    Add any of the follow classes to the .table base class.

                                                                    +

                                                                    Optional classes

                                                                    +

                                                                    Add any of the follow classes to the .table base class.

                                                                    -

                                                                    .table-striped

                                                                    -

                                                                    Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

                                                                    -
                                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                                    #First NameLast NameUsername
                                                                    1MarkOtto@mdo
                                                                    2JacobThornton@fat
                                                                    3Larrythe Bird@twitter
                                                                    -
                                                                    +

                                                                    .table-striped

                                                                    +

                                                                    Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

                                                                    +
                                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                                    #First NameLast NameUsername
                                                                    1MarkOtto@mdo
                                                                    2JacobThornton@fat
                                                                    3Larrythe Bird@twitter
                                                                    + 
                                                                     <table class="table table-striped">
   …
 </table>
                                                                    -

                                                                    .table-bordered

                                                                    -

                                                                    Add borders and rounded corners to the table.

                                                                    -
                                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                                    #First NameLast NameUsername
                                                                    1MarkOtto@mdo
                                                                    MarkOtto@TwBootstrap
                                                                    2JacobThornton@fat
                                                                    3Larry the Bird@twitter
                                                                    -
                                                                    +

                                                                    .table-bordered

                                                                    +

                                                                    Add borders and rounded corners to the table.

                                                                    +
                                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                                    #First NameLast NameUsername
                                                                    1MarkOtto@mdo
                                                                    MarkOtto@TwBootstrap
                                                                    2JacobThornton@fat
                                                                    3Larry the Bird@twitter
                                                                    + 
                                                                     <table class="table table-bordered">
   …
 </table>
                                                                    -

                                                                    .table-hover

                                                                    -

                                                                    Enable a hover state on table rows within a <tbody>.

                                                                    -
                                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                                    #First NameLast NameUsername
                                                                    1MarkOtto@mdo
                                                                    2JacobThornton@fat
                                                                    3Larry the Bird@twitter
                                                                    -
                                                                    +

                                                                    .table-hover

                                                                    +

                                                                    Enable a hover state on table rows within a <tbody>.

                                                                    +
                                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                                    #First NameLast NameUsername
                                                                    1MarkOtto@mdo
                                                                    2JacobThornton@fat
                                                                    3Larry the Bird@twitter
                                                                    + 
                                                                     <table class="table table-hover">
   …
 </table>
                                                                    -

                                                                    .table-condensed

                                                                    -

                                                                    Makes tables more compact by cutting cell padding in half.

                                                                    -
                                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                                    #First NameLast NameUsername
                                                                    1MarkOtto@mdo
                                                                    2JacobThornton@fat
                                                                    3Larry the Bird@twitter
                                                                    -
                                                                    +

                                                                    .table-condensed

                                                                    +

                                                                    Makes tables more compact by cutting cell padding in half.

                                                                    +
                                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                                    #First NameLast NameUsername
                                                                    1MarkOtto@mdo
                                                                    2JacobThornton@fat
                                                                    3Larry the Bird@twitter
                                                                    + 
                                                                     <table class="table table-condensed">
   …
@@ -642,75 +644,75 @@ For example, <code>section</code> should be wrapped as inline.
                                                                    -
                                                                    +
                                                                    -

                                                                    Optional row classes

                                                                    -

                                                                    Use contextual classes to color table rows.

                                                                    - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                                    ClassDescription
                                                                    - .success - Indicates a successful or positive action.
                                                                    - .error - Indicates a dangerous or potentially negative action.
                                                                    - .info - Used as an alternative to the default styles.
                                                                    -
                                                                    - +

                                                                    Optional row classes

                                                                    +

                                                                    Use contextual classes to color table rows.

                                                                    +
                                                                    + + + + - - - - + + - - - - - + + + - - - - - + + + - - - - - + + +
                                                                    #ProductPayment TakenStatusClassDescription
                                                                    1TB - Monthly01/04/2012Approved
                                                                    + .success + Indicates a successful or positive action.
                                                                    2TB - Monthly02/04/2012Declined
                                                                    + .error + Indicates a dangerous or potentially negative action.
                                                                    3TB - Monthly03/04/2012Pending
                                                                    + .info + Used as an alternative to the default styles.
                                                                    -
                                                                    +
                                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                                    #ProductPayment TakenStatus
                                                                    1TB - Monthly01/04/2012Approved
                                                                    2TB - Monthly02/04/2012Declined
                                                                    3TB - Monthly03/04/2012Pending
                                                                    + 
                                                                     ...
   <tr class="success">
@@ -723,82 +725,82 @@ For example, <code>section</code> should be wrapped as inline.
                                                                    -
                                                                    +
                                                                    -

                                                                    Supported table markup

                                                                    -

                                                                    List of supported table HTML elements and how they should be used.

                                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                                    TagDescription
                                                                    - <table> - - Wrapping element for displaying data in a tabular format -
                                                                    - <thead> - - Container element for table header rows (<tr>) to label table columns -
                                                                    - <tbody> - - Container element for table rows (<tr>) in the body of the table -
                                                                    - <tr> - - Container element for a set of table cells (<td> or <th>) that appears on a single row -
                                                                    - <td> - - Default table cell -
                                                                    - <th> - - Special table cell for column (or row, depending on scope and placement) labels
                                                                    - Must be used within a <thead> -
                                                                    - <caption> - - Description or summary of what the table holds, especially useful for screen readers -
                                                                    +

                                                                    Supported table markup

                                                                    +

                                                                    List of supported table HTML elements and how they should be used.

                                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                                    TagDescription
                                                                    + <table> + + Wrapping element for displaying data in a tabular format +
                                                                    + <thead> + + Container element for table header rows (<tr>) to label table columns +
                                                                    + <tbody> + + Container element for table rows (<tr>) in the body of the table +
                                                                    + <tr> + + Container element for a set of table cells (<td> or <th>) that appears on a single row +
                                                                    + <td> + + Default table cell +
                                                                    + <th> + + Special table cell for column (or row, depending on scope and placement) labels
                                                                    + Must be used within a <thead> +
                                                                    + <caption> + + Description or summary of what the table holds, especially useful for screen readers + 
                                                                     <table>
   <thead>
@@ -816,29 +818,29 @@ For example, <code>section</code> should be wrapped as inline.
 </table>
                                                                    -
                                                                    +
                                                                    - -
                                                                    -
                                                                    -

                                                                    Forms

                                                                    -
                                                                    + +
                                                                    +
                                                                    +

                                                                    Forms

                                                                    +
                                                                    -

                                                                    Default styles

                                                                    -

                                                                    Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

                                                                    -
                                                                    - Legend - - -

                                                                    Example block-level help text here.

                                                                    - - -
                                                                    +

                                                                    Default styles

                                                                    +

                                                                    Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

                                                                    +
                                                                    + Legend + + +

                                                                    Example block-level help text here.

                                                                    + + + 
                                                                     <form class="well">
   <label>Label name</label>
@@ -852,18 +854,18 @@ For example, <code>section</code> should be wrapped as inline.
                                                                    -
                                                                    +
                                                                    -

                                                                    Optional layouts

                                                                    -

                                                                    Included with Bootstrap are three optional form layouts for common use cases.

                                                                    +

                                                                    Optional layouts

                                                                    +

                                                                    Included with Bootstrap are three optional form layouts for common use cases.

                                                                    -

                                                                    Search form

                                                                    -

                                                                    Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

                                                                    -
                                                                    - - -
                                                                    +

                                                                    Search form

                                                                    +

                                                                    Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

                                                                    +
                                                                    + + + 
                                                                     <form class="form-search">
   <input type="text" class="input-medium search-query">
@@ -871,16 +873,16 @@ For example, <code>section</code> should be wrapped as inline.
 </form>
                                                                    -

                                                                    Inline form

                                                                    -

                                                                    Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

                                                                    -
                                                                    - - - - -
                                                                    +

                                                                    Inline form

                                                                    +

                                                                    Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

                                                                    +
                                                                    + + + + + 
                                                                     <form class="form-inline">
   <input type="text" class="input-small" placeholder="Email">
@@ -892,37 +894,37 @@ For example, <code>section</code> should be wrapped as inline.
 </form>
                                                                    -

                                                                    Horizontal form

                                                                    -

                                                                    Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

                                                                    -
                                                                      -
                                                                    • Add .form-horizontal to the form
                                                                      • -
                                                                    • Wrap labels and controls in .control-group
                                                                      • -
                                                                    • Add .control-label to the label
                                                                      • -
                                                                    • Wrap any associated controls in .controls for proper alignment
                                                                      • -
                                                                    -
                                                                    - Legend -
                                                                    - -
                                                                    - +

                                                                    Horizontal form

                                                                    +

                                                                    Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

                                                                    +
                                                                      +
                                                                    • Add .form-horizontal to the form
                                                                      • +
                                                                    • Wrap labels and controls in .control-group
                                                                      • +
                                                                    • Add .control-label to the label
                                                                      • +
                                                                    • Wrap any associated controls in .controls for proper alignment
                                                                      • +
                                                                    + + Legend +
                                                                    + +
                                                                    + +
                                                                    -
                                                                    -
                                                                    - -
                                                                    - +
                                                                    + +
                                                                    + +
                                                                    -
                                                                    -
                                                                    -
                                                                    - - +
                                                                    +
                                                                    + + +
                                                                    -
                                                                    - + 
                                                                     <form class="form-horizontal">
   <div class="control-group">
@@ -949,49 +951,49 @@ For example, <code>section</code> should be wrapped as inline.
                                                                    -
                                                                    +
                                                                    -

                                                                    Supported form controls

                                                                    -

                                                                    Examples of standard form controls supported in an example form layout.

                                                                    +

                                                                    Supported form controls

                                                                    +

                                                                    Examples of standard form controls supported in an example form layout.

                                                                    -

                                                                    Inputs

                                                                    -

                                                                    Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

                                                                    -

                                                                    Requires the use of a specified type at all times.

                                                                    -
                                                                    - -
                                                                    +

                                                                    Inputs

                                                                    +

                                                                    Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

                                                                    +

                                                                    Requires the use of a specified type at all times.

                                                                    +
                                                                    + + 
                                                                     <input type="text" placeholder="Text input">
                                                                    -

                                                                    Textarea

                                                                    -

                                                                    Form control which supports multiple lines of text. Change row attribute as necessary.

                                                                    -
                                                                    - -
                                                                    +

                                                                    Textarea

                                                                    +

                                                                    Form control which supports multiple lines of text. Change row attribute as necessary.

                                                                    +
                                                                    + + 
                                                                     <textarea id="textarea" rows="3"></textarea>
                                                                    -

                                                                    Checkboxes and radios

                                                                    -

                                                                    Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

                                                                    -

                                                                    Default (stacked)

                                                                    -
                                                                    - -
                                                                    - - -
                                                                    +

                                                                    Checkboxes and radios

                                                                    +

                                                                    Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

                                                                    +

                                                                    Default (stacked)

                                                                    +
                                                                    + +
                                                                    + + + 
                                                                     <label class="checkbox">
   <input type="checkbox" value="">
@@ -1008,19 +1010,19 @@ For example, <code>section</code> should be wrapped as inline.
 </label>
                                                                    -

                                                                    Inline checkboxes

                                                                    -

                                                                    Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

                                                                    -
                                                                    - - - -
                                                                    +

                                                                    Inline checkboxes

                                                                    +

                                                                    Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

                                                                    +
                                                                    + + + + 
                                                                     <label class="checkbox inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -1033,25 +1035,25 @@ For example, <code>section</code> should be wrapped as inline.
 </label>
                                                                    -

                                                                    Selects

                                                                    -

                                                                    Use the default option or specify a multiple="multiple" to show multiple options at once.

                                                                    -
                                                                    - -
                                                                    - -
                                                                    +

                                                                    Selects

                                                                    +

                                                                    Use the default option or specify a multiple="multiple" to show multiple options at once.

                                                                    +
                                                                    + +
                                                                    + + 
                                                                     <select>
   <option>something</option>
@@ -1071,28 +1073,28 @@ For example, <code>section</code> should be wrapped as inline.
                                                                    -
                                                                    +
                                                                    -

                                                                    Extending form controls

                                                                    -

                                                                    Adding on top of existing browser controls, Bootstrap includes other useful form components.

                                                                    +

                                                                    Extending form controls

                                                                    +

                                                                    Adding on top of existing browser controls, Bootstrap includes other useful form components.

                                                                    -

                                                                    Prepended and appended inputs

                                                                    -

                                                                    Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

                                                                    +

                                                                    Prepended and appended inputs

                                                                    +

                                                                    Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

                                                                    -

                                                                    Default options

                                                                    -

                                                                    Wrap a .add-on and an input with one of two classes to prepend or append text to an input.

                                                                    -
                                                                    -
                                                                    - @ - -
                                                                    -
                                                                    -
                                                                    - - .00 -
                                                                    -
                                                                    +

                                                                    Default options

                                                                    +

                                                                    Wrap a .add-on and an input with one of two classes to prepend or append text to an input.

                                                                    +
                                                                    +
                                                                    + @ + +
                                                                    +
                                                                    +
                                                                    + + .00 +
                                                                    + 
                                                                     <div class="input-prepend">
   <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
@@ -1102,35 +1104,35 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
                                                                    -

                                                                    Combined

                                                                    -

                                                                    Use both classes and two instances of .add-on to prepend and append an input.

                                                                    -
                                                                    -
                                                                    - $ - - .00 -
                                                                    -
                                                                    +

                                                                    Combined

                                                                    +

                                                                    Use both classes and two instances of .add-on to prepend and append an input.

                                                                    +
                                                                    +
                                                                    + $ + + .00 +
                                                                    + 
                                                                     <div class="input-prepend input-append">
   <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
 </div>
                                                                    -

                                                                    Buttons instead of text

                                                                    -

                                                                    Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

                                                                    -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    +

                                                                    Buttons instead of text

                                                                    +

                                                                    Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

                                                                    +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    +
                                                                    + + + +
                                                                    + 
                                                                     <div class="input-append">
   <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
@@ -1141,17 +1143,17 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
                                                                    -

                                                                    Search form

                                                                    -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    +

                                                                    Search form

                                                                    +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    + 
                                                                     <form class="form-search">
   <input type="text" class="span2 search-query">
@@ -1159,20 +1161,20 @@ For example, <code>section</code> should be wrapped as inline.
 </form>
                                                                    -

                                                                    Control sizing

                                                                    -

                                                                    Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

                                                                    +

                                                                    Control sizing

                                                                    +

                                                                    Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

                                                                    -

                                                                    Relative sizing

                                                                    -
                                                                    -
                                                                    - - - - - - -
                                                                    -
                                                                    +

                                                                    Relative sizing

                                                                    +
                                                                    +
                                                                    + + + + + + +
                                                                    + 
                                                                     <input class="input-mini" type="text">
 <input class="input-small" type="text">
@@ -1181,68 +1183,68 @@ For example, <code>section</code> should be wrapped as inline.
 <input class="input-xlarge" type="text">
 <input class="input-xxlarge" type="text">
                                                                    -

                                                                    - Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. -

                                                                    +

                                                                    + Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

                                                                    -

                                                                    Grid sizing

                                                                    -

                                                                    Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

                                                                    -
                                                                    -
                                                                    - - - - - - -
                                                                    -
                                                                    +

                                                                    Grid sizing

                                                                    +

                                                                    Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

                                                                    +
                                                                    +
                                                                    + + + + + + +
                                                                    + 
                                                                     <input class="span1" type="text">
 <input class="span2" type="text">
 <input class="span3" type="text">
                                                                    -

                                                                    For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    +

                                                                    For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

                                                                    +
                                                                    +
                                                                    + +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    + 
                                                                     <div class="controls controls-row">
   <input class="span4" type="text" placeholder=".span4">
@@ -1250,23 +1252,23 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
                                                                    -

                                                                    Uneditable inputs

                                                                    -

                                                                    Present data in a form that's not editable without using actual form markup.

                                                                    -
                                                                    - Some value here -
                                                                    +

                                                                    Uneditable inputs

                                                                    +

                                                                    Present data in a form that's not editable without using actual form markup.

                                                                    +
                                                                    + Some value here + 
                                                                       <span class="input-xlarge uneditable-input">Some value here</span>
                                                                    -

                                                                    Form actions

                                                                    -

                                                                    End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

                                                                    -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    +

                                                                    Form actions

                                                                    +

                                                                    End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

                                                                    +
                                                                    +
                                                                    + + +
                                                                    + 
                                                                     <div class="form-actions">
   <button type="submit" class="btn btn-primary">Save changes</button>
@@ -1274,76 +1276,76 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
                                                                    -

                                                                    Help text

                                                                    -

                                                                    Inline and block level support for help text that appears around form controls.

                                                                    -

                                                                    Inline help

                                                                    -
                                                                    - Inline help text -
                                                                    +

                                                                    Help text

                                                                    +

                                                                    Inline and block level support for help text that appears around form controls.

                                                                    +

                                                                    Inline help

                                                                    +
                                                                    + Inline help text + 
                                                                     <span class="help-inline">Inline help text</span>
                                                                    -

                                                                    Block help

                                                                    -
                                                                    - - A longer block of help text that breaks onto a new line and may extend beyond one line. -
                                                                    +

                                                                    Block help

                                                                    +
                                                                    + + A longer block of help text that breaks onto a new line and may extend beyond one line. + 
                                                                     <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
                                                                    -
                                                                    +
                                                                    -

                                                                    Form control states

                                                                    -

                                                                    Provide feedback to users or visitors with basic feedback states on form controls and labels.

                                                                    +

                                                                    Form control states

                                                                    +

                                                                    Provide feedback to users or visitors with basic feedback states on form controls and labels.

                                                                    -

                                                                    Input focus

                                                                    -

                                                                    We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

                                                                    -
                                                                    - -
                                                                    -
                                                                    -<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
-
                                                                    +

                                                                    Input focus

                                                                    +

                                                                    We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

                                                                    +
                                                                    + +
                                                                    + 
                                                                    +  <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+
                                                                    -

                                                                    Disabled inputs

                                                                    -

                                                                    Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

                                                                    -
                                                                    - -
                                                                    +

                                                                    Disabled inputs

                                                                    +

                                                                    Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

                                                                    +
                                                                    + + 
                                                                     <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
                                                                    -

                                                                    Validation states

                                                                    -

                                                                    Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.

                                                                    +

                                                                    Validation states

                                                                    +

                                                                    Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.

                                                                    -
                                                                    -
                                                                    - -
                                                                    - - Something may have gone wrong + +
                                                                    + +
                                                                    + + Something may have gone wrong +
                                                                    -
                                                                    -
                                                                    - -
                                                                    - - Please correct the error +
                                                                    + +
                                                                    + + Please correct the error +
                                                                    -
                                                                    -
                                                                    - -
                                                                    - - Woohoo! +
                                                                    + +
                                                                    + + Woohoo! +
                                                                    -
                                                                    - + 
                                                                     <div class="control-group warning">
   <label class="control-label" for="inputWarning">Input with warning</label>
@@ -1368,138 +1370,138 @@ For example, <code>section</code> should be wrapped as inline.
 </div>
                                                                    -
                                                                    +
                                                                    - -
                                                                    -
                                                                    -

                                                                    Buttons

                                                                    -
                                                                    + +
                                                                    +
                                                                    +

                                                                    Buttons

                                                                    +
                                                                    -

                                                                    Default buttons

                                                                    -

                                                                    Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

                                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                                    Buttonclass=""Description
                                                                    btnStandard gray button with gradient
                                                                    btn btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons
                                                                    btn btn-infoUsed as an alternative to the default styles
                                                                    btn btn-successIndicates a successful or positive action
                                                                    btn btn-warningIndicates caution should be taken with this action
                                                                    btn btn-dangerIndicates a dangerous or potentially negative action
                                                                    btn btn-inverseAlternate dark gray button, not tied to a semantic action or use
                                                                    btn btn-linkDeemphasize a button by making it look like a link while maintaining button behavior
                                                                    +

                                                                    Default buttons

                                                                    +

                                                                    Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

                                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                                    Buttonclass=""Description
                                                                    btnStandard gray button with gradient
                                                                    btn btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons
                                                                    btn btn-infoUsed as an alternative to the default styles
                                                                    btn btn-successIndicates a successful or positive action
                                                                    btn btn-warningIndicates caution should be taken with this action
                                                                    btn btn-dangerIndicates a dangerous or potentially negative action
                                                                    btn btn-inverseAlternate dark gray button, not tied to a semantic action or use
                                                                    btn btn-linkDeemphasize a button by making it look like a link while maintaining button behavior
                                                                    -

                                                                    Cross browser compatibility

                                                                    -

                                                                    IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

                                                                    +

                                                                    Cross browser compatibility

                                                                    +

                                                                    IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

                                                                    -
                                                                    +
                                                                    -

                                                                    Button sizes

                                                                    -

                                                                    Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

                                                                    -

                                                                    - - -

                                                                    -

                                                                    - - -

                                                                    -

                                                                    - - -

                                                                    +

                                                                    Button sizes

                                                                    +

                                                                    Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

                                                                    +

                                                                    + + +

                                                                    +

                                                                    + + +

                                                                    +

                                                                    + + +

                                                                    -
                                                                    +
                                                                    -

                                                                    Disabled state

                                                                    -

                                                                    Make buttons look unclickable by fading them back 50%.

                                                                    +

                                                                    Disabled state

                                                                    +

                                                                    Make buttons look unclickable by fading them back 50%.

                                                                    -

                                                                    Anchor element

                                                                    -

                                                                    Add the .disabled class to <a> buttons.

                                                                    -

                                                                    - Primary link - Link -

                                                                    +

                                                                    Anchor element

                                                                    +

                                                                    Add the .disabled class to <a> buttons.

                                                                    +

                                                                    + Primary link + Link + 

                                                                     <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
 <a href="#" class="btn btn-large disabled">Link</a>
                                                                    -

                                                                    - Heads up! - We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. -

                                                                    +

                                                                    + Heads up! + We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. +

                                                                    -

                                                                    Button element

                                                                    -

                                                                    Add the disabled attribute to <button> buttons.

                                                                    -

                                                                    - - -

                                                                    +

                                                                    Button element

                                                                    +

                                                                    Add the disabled attribute to <button> buttons.

                                                                    +

                                                                    + + + 

                                                                     <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
 <button type="button" class="btn btn-large" disabled>Button</button>
                                                                    -
                                                                    +
                                                                    -

                                                                    One class, multiple tags

                                                                    -

                                                                    Use the .btn class on an <a>, <button>, or <input> element.

                                                                    -
                                                                    - Link - - - -
                                                                    +

                                                                    One class, multiple tags

                                                                    +

                                                                    Use the .btn class on an <a>, <button>, or <input> element.

                                                                    +
                                                                    + Link + + + + 
                                                                     <a class="btn" href="">Link</a>
 <button class="btn" type="submit">
@@ -1510,248 +1512,250 @@ For example, <code>section</code> should be wrapped as inline.
 <input class="btn" type="submit"
          value="Submit">
                                                                    -

                                                                    As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

                                                                    +

                                                                    As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

                                                                    -
                                                                    +
                                                                    - -
                                                                    -
                                                                    -

                                                                    Icons Graciously provided by Glyphicons

                                                                    -
                                                                    + +
                                                                    +
                                                                    +

                                                                    Icons Graciously provided by Glyphicons

                                                                    +
                                                                    -

                                                                    Icon glyphs

                                                                    -

                                                                    140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

                                                                    -
                                                                      -
                                                                    • icon-glass
                                                                      • -
                                                                    • icon-music
                                                                      • -
                                                                    • icon-search
                                                                      • -
                                                                    • icon-envelope
                                                                      • -
                                                                    • icon-heart
                                                                      • -
                                                                    • icon-star
                                                                      • -
                                                                    • icon-star-empty
                                                                      • -
                                                                    • icon-user
                                                                      • -
                                                                    • icon-film
                                                                      • -
                                                                    • icon-th-large
                                                                      • -
                                                                    • icon-th
                                                                      • -
                                                                    • icon-th-list
                                                                      • -
                                                                    • icon-ok
                                                                      • -
                                                                    • icon-remove
                                                                      • -
                                                                    • icon-zoom-in
                                                                      • -
                                                                    • icon-zoom-out
                                                                      • -
                                                                    • icon-off
                                                                      • -
                                                                    • icon-signal
                                                                      • -
                                                                    • icon-cog
                                                                      • -
                                                                    • icon-trash
                                                                      • -
                                                                    • icon-home
                                                                      • -
                                                                    • icon-file
                                                                      • -
                                                                    • icon-time
                                                                      • -
                                                                    • icon-road
                                                                      • -
                                                                    • icon-download-alt
                                                                      • -
                                                                    • icon-download
                                                                      • -
                                                                    • icon-upload
                                                                      • -
                                                                    • icon-inbox
                                                                      • +

                                                                      Icon glyphs

                                                                      +

                                                                      140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

                                                                      +
                                                                        +
                                                                      • icon-glass
                                                                        • +
                                                                      • icon-music
                                                                        • +
                                                                      • icon-search
                                                                        • +
                                                                      • icon-envelope
                                                                        • +
                                                                      • icon-heart
                                                                        • +
                                                                      • icon-star
                                                                        • +
                                                                      • icon-star-empty
                                                                        • +
                                                                      • icon-user
                                                                        • +
                                                                      • icon-film
                                                                        • +
                                                                      • icon-th-large
                                                                        • +
                                                                      • icon-th
                                                                        • +
                                                                      • icon-th-list
                                                                        • +
                                                                      • icon-ok
                                                                        • +
                                                                      • icon-remove
                                                                        • +
                                                                      • icon-zoom-in
                                                                        • +
                                                                      • icon-zoom-out
                                                                        • +
                                                                      • icon-off
                                                                        • +
                                                                      • icon-signal
                                                                        • +
                                                                      • icon-cog
                                                                        • +
                                                                      • icon-trash
                                                                        • +
                                                                      • icon-home
                                                                        • +
                                                                      • icon-file
                                                                        • +
                                                                      • icon-time
                                                                        • +
                                                                      • icon-road
                                                                        • +
                                                                      • icon-download-alt
                                                                        • +
                                                                      • icon-download
                                                                        • +
                                                                      • icon-upload
                                                                        • +
                                                                      • icon-inbox
                                                                        • -
                                                                      • icon-play-circle
                                                                        • -
                                                                      • icon-repeat
                                                                        • -
                                                                      • icon-refresh
                                                                        • -
                                                                      • icon-list-alt
                                                                        • -
                                                                      • icon-lock
                                                                        • -
                                                                      • icon-flag
                                                                        • -
                                                                      • icon-headphones
                                                                        • -
                                                                      • icon-volume-off
                                                                        • -
                                                                      • icon-volume-down
                                                                        • -
                                                                      • icon-volume-up
                                                                        • -
                                                                      • icon-qrcode
                                                                        • -
                                                                      • icon-barcode
                                                                        • -
                                                                      • icon-tag
                                                                        • -
                                                                      • icon-tags
                                                                        • -
                                                                      • icon-book
                                                                        • -
                                                                      • icon-bookmark
                                                                        • -
                                                                      • icon-print
                                                                        • -
                                                                      • icon-camera
                                                                        • -
                                                                      • icon-font
                                                                        • -
                                                                      • icon-bold
                                                                        • -
                                                                      • icon-italic
                                                                        • -
                                                                      • icon-text-height
                                                                        • -
                                                                      • icon-text-width
                                                                        • -
                                                                      • icon-align-left
                                                                        • -
                                                                      • icon-align-center
                                                                        • -
                                                                      • icon-align-right
                                                                        • -
                                                                      • icon-align-justify
                                                                        • -
                                                                      • icon-list
                                                                        • +
                                                                      • icon-play-circle
                                                                        • +
                                                                      • icon-repeat
                                                                        • +
                                                                      • icon-refresh
                                                                        • +
                                                                      • icon-list-alt
                                                                        • +
                                                                      • icon-lock
                                                                        • +
                                                                      • icon-flag
                                                                        • +
                                                                      • icon-headphones
                                                                        • +
                                                                      • icon-volume-off
                                                                        • +
                                                                      • icon-volume-down
                                                                        • +
                                                                      • icon-volume-up
                                                                        • +
                                                                      • icon-qrcode
                                                                        • +
                                                                      • icon-barcode
                                                                        • +
                                                                      • icon-tag
                                                                        • +
                                                                      • icon-tags
                                                                        • +
                                                                      • icon-book
                                                                        • +
                                                                      • icon-bookmark
                                                                        • +
                                                                      • icon-print
                                                                        • +
                                                                      • icon-camera
                                                                        • +
                                                                      • icon-font
                                                                        • +
                                                                      • icon-bold
                                                                        • +
                                                                      • icon-italic
                                                                        • +
                                                                      • icon-text-height
                                                                        • +
                                                                      • icon-text-width
                                                                        • +
                                                                      • icon-align-left
                                                                        • +
                                                                      • icon-align-center
                                                                        • +
                                                                      • icon-align-right
                                                                        • +
                                                                      • icon-align-justify
                                                                        • +
                                                                      • icon-list
                                                                        • -
                                                                      • icon-indent-left
                                                                        • -
                                                                      • icon-indent-right
                                                                        • -
                                                                      • icon-facetime-video
                                                                        • -
                                                                      • icon-picture
                                                                        • -
                                                                      • icon-pencil
                                                                        • -
                                                                      • icon-map-marker
                                                                        • -
                                                                      • icon-adjust
                                                                        • -
                                                                      • icon-tint
                                                                        • -
                                                                      • icon-edit
                                                                        • -
                                                                      • icon-share
                                                                        • -
                                                                      • icon-check
                                                                        • -
                                                                      • icon-move
                                                                        • -
                                                                      • icon-step-backward
                                                                        • -
                                                                      • icon-fast-backward
                                                                        • -
                                                                      • icon-backward
                                                                        • -
                                                                      • icon-play
                                                                        • -
                                                                      • icon-pause
                                                                        • -
                                                                      • icon-stop
                                                                        • -
                                                                      • icon-forward
                                                                        • -
                                                                      • icon-fast-forward
                                                                        • -
                                                                      • icon-step-forward
                                                                        • -
                                                                      • icon-eject
                                                                        • -
                                                                      • icon-chevron-left
                                                                        • -
                                                                      • icon-chevron-right
                                                                        • -
                                                                      • icon-plus-sign
                                                                        • -
                                                                      • icon-minus-sign
                                                                        • -
                                                                      • icon-remove-sign
                                                                        • -
                                                                      • icon-ok-sign
                                                                        • +
                                                                      • icon-indent-left
                                                                        • +
                                                                      • icon-indent-right
                                                                        • +
                                                                      • icon-facetime-video
                                                                        • +
                                                                      • icon-picture
                                                                        • +
                                                                      • icon-pencil
                                                                        • +
                                                                      • icon-map-marker
                                                                        • +
                                                                      • icon-adjust
                                                                        • +
                                                                      • icon-tint
                                                                        • +
                                                                      • icon-edit
                                                                        • +
                                                                      • icon-share
                                                                        • +
                                                                      • icon-check
                                                                        • +
                                                                      • icon-move
                                                                        • +
                                                                      • icon-step-backward
                                                                        • +
                                                                      • icon-fast-backward
                                                                        • +
                                                                      • icon-backward
                                                                        • +
                                                                      • icon-play
                                                                        • +
                                                                      • icon-pause
                                                                        • +
                                                                      • icon-stop
                                                                        • +
                                                                      • icon-forward
                                                                        • +
                                                                      • icon-fast-forward
                                                                        • +
                                                                      • icon-step-forward
                                                                        • +
                                                                      • icon-eject
                                                                        • +
                                                                      • icon-chevron-left
                                                                        • +
                                                                      • icon-chevron-right
                                                                        • +
                                                                      • icon-plus-sign
                                                                        • +
                                                                      • icon-minus-sign
                                                                        • +
                                                                      • icon-remove-sign
                                                                        • +
                                                                      • icon-ok-sign
                                                                        • -
                                                                      • icon-question-sign
                                                                        • -
                                                                      • icon-info-sign
                                                                        • -
                                                                      • icon-screenshot
                                                                        • -
                                                                      • icon-remove-circle
                                                                        • -
                                                                      • icon-ok-circle
                                                                        • -
                                                                      • icon-ban-circle
                                                                        • -
                                                                      • icon-arrow-left
                                                                        • -
                                                                      • icon-arrow-right
                                                                        • -
                                                                      • icon-arrow-up
                                                                        • -
                                                                      • icon-arrow-down
                                                                        • -
                                                                      • icon-share-alt
                                                                        • -
                                                                      • icon-resize-full
                                                                        • -
                                                                      • icon-resize-small
                                                                        • -
                                                                      • icon-plus
                                                                        • -
                                                                      • icon-minus
                                                                        • -
                                                                      • icon-asterisk
                                                                        • -
                                                                      • icon-exclamation-sign
                                                                        • -
                                                                      • icon-gift
                                                                        • -
                                                                      • icon-leaf
                                                                        • -
                                                                      • icon-fire
                                                                        • -
                                                                      • icon-eye-open
                                                                        • -
                                                                      • icon-eye-close
                                                                        • -
                                                                      • icon-warning-sign
                                                                        • -
                                                                      • icon-plane
                                                                        • -
                                                                      • icon-calendar
                                                                        • -
                                                                      • icon-random
                                                                        • -
                                                                      • icon-comment
                                                                        • -
                                                                      • icon-magnet
                                                                        • +
                                                                      • icon-question-sign
                                                                        • +
                                                                      • icon-info-sign
                                                                        • +
                                                                      • icon-screenshot
                                                                        • +
                                                                      • icon-remove-circle
                                                                        • +
                                                                      • icon-ok-circle
                                                                        • +
                                                                      • icon-ban-circle
                                                                        • +
                                                                      • icon-arrow-left
                                                                        • +
                                                                      • icon-arrow-right
                                                                        • +
                                                                      • icon-arrow-up
                                                                        • +
                                                                      • icon-arrow-down
                                                                        • +
                                                                      • icon-share-alt
                                                                        • +
                                                                      • icon-resize-full
                                                                        • +
                                                                      • icon-resize-small
                                                                        • +
                                                                      • icon-plus
                                                                        • +
                                                                      • icon-minus
                                                                        • +
                                                                      • icon-asterisk
                                                                        • +
                                                                      • icon-exclamation-sign
                                                                        • +
                                                                      • icon-gift
                                                                        • +
                                                                      • icon-leaf
                                                                        • +
                                                                      • icon-fire
                                                                        • +
                                                                      • icon-eye-open
                                                                        • +
                                                                      • icon-eye-close
                                                                        • +
                                                                      • icon-warning-sign
                                                                        • +
                                                                      • icon-plane
                                                                        • +
                                                                      • icon-calendar
                                                                        • +
                                                                      • icon-random
                                                                        • +
                                                                      • icon-comment
                                                                        • +
                                                                      • icon-magnet
                                                                        • -
                                                                      • icon-chevron-up
                                                                        • -
                                                                      • icon-chevron-down
                                                                        • -
                                                                      • icon-retweet
                                                                        • -
                                                                      • icon-shopping-cart
                                                                        • -
                                                                      • icon-folder-close
                                                                        • -
                                                                      • icon-folder-open
                                                                        • -
                                                                      • icon-resize-vertical
                                                                        • -
                                                                      • icon-resize-horizontal
                                                                        • -
                                                                      • icon-hdd
                                                                        • -
                                                                      • icon-bullhorn
                                                                        • -
                                                                      • icon-bell
                                                                        • -
                                                                      • icon-certificate
                                                                        • -
                                                                      • icon-thumbs-up
                                                                        • -
                                                                      • icon-thumbs-down
                                                                        • -
                                                                      • icon-hand-right
                                                                        • -
                                                                      • icon-hand-left
                                                                        • -
                                                                      • icon-hand-up
                                                                        • -
                                                                      • icon-hand-down
                                                                        • -
                                                                      • icon-circle-arrow-right
                                                                        • -
                                                                      • icon-circle-arrow-left
                                                                        • -
                                                                      • icon-circle-arrow-up
                                                                        • -
                                                                      • icon-circle-arrow-down
                                                                        • -
                                                                      • icon-globe
                                                                        • -
                                                                      • icon-wrench
                                                                        • -
                                                                      • icon-tasks
                                                                        • -
                                                                      • icon-filter
                                                                        • -
                                                                      • icon-briefcase
                                                                        • -
                                                                      • icon-fullscreen
                                                                        • -
                                                                      +
                                                                    • icon-chevron-up
                                                                      • +
                                                                    • icon-chevron-down
                                                                      • +
                                                                    • icon-retweet
                                                                      • +
                                                                    • icon-shopping-cart
                                                                      • +
                                                                    • icon-folder-close
                                                                      • +
                                                                    • icon-folder-open
                                                                      • +
                                                                    • icon-resize-vertical
                                                                      • +
                                                                    • icon-resize-horizontal
                                                                      • +
                                                                    • icon-hdd
                                                                      • +
                                                                    • icon-bullhorn
                                                                      • +
                                                                    • icon-bell
                                                                      • +
                                                                    • icon-certificate
                                                                      • +
                                                                    • icon-thumbs-up
                                                                      • +
                                                                    • icon-thumbs-down
                                                                      • +
                                                                    • icon-hand-right
                                                                      • +
                                                                    • icon-hand-left
                                                                      • +
                                                                    • icon-hand-up
                                                                      • +
                                                                    • icon-hand-down
                                                                      • +
                                                                    • icon-circle-arrow-right
                                                                      • +
                                                                    • icon-circle-arrow-left
                                                                      • +
                                                                    • icon-circle-arrow-up
                                                                      • +
                                                                    • icon-circle-arrow-down
                                                                      • +
                                                                    • icon-globe
                                                                      • +
                                                                    • icon-wrench
                                                                      • +
                                                                    • icon-tasks
                                                                      • +
                                                                    • icon-filter
                                                                      • +
                                                                    • icon-briefcase
                                                                      • +
                                                                    • icon-fullscreen
                                                                      • +
                                                                    -

                                                                    Glyphicons attribution

                                                                    -

                                                                    Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

                                                                    +

                                                                    Glyphicons attribution

                                                                    +

                                                                    Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

                                                                    -
                                                                    +
                                                                    -

                                                                    How to use

                                                                    -

                                                                    All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

                                                                    +

                                                                    How to use

                                                                    +

                                                                    All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

                                                                     <i class="icon-search"></i>
                                                                    -

                                                                    There are also styles available for inverted (white) icons, made ready with one extra class:

                                                                    +

                                                                    There are also styles available for inverted (white) icons, made ready with one extra class:

                                                                     <i class="icon-search icon-white"></i>
                                                                    -

                                                                    - Heads up! - When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing. -

                                                                    +

                                                                    + Heads up! + When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing. +

                                                                    -
                                                                    +
                                                                    -

                                                                    Icon examples

                                                                    -

                                                                    Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

                                                                    +

                                                                    Icon examples

                                                                    +

                                                                    Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

                                                                    -

                                                                    Buttons

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    - User - - -
                                                                    -
                                                                    -
                                                                    - -

                                                                    Navigation

                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -

                                                                    Form fields

                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - +

                                                                    Buttons

                                                                    +
                                                                    +
                                                                    +
                                                                    + + + + +
                                                                    +
                                                                    + User + +
                                                                    - -
                                                                    +

                                                                    Navigation

                                                                    +
                                                                    +
                                                                    + +
                                                                    +
                                                                    + +

                                                                    Form fields

                                                                    +
                                                                    +
                                                                    + +
                                                                    +
                                                                    + +
                                                                    +
                                                                    +
                                                                    +
                                                                    + +
                                                                    +
                                                                    +
                                                                    diff --git a/docs/components.html b/docs/components.html index 11a23efb61..d95d359737 100644 --- a/docs/components.html +++ b/docs/components.html @@ -78,53 +78,54 @@
                                                                    -
                                                                    +
                                                                    +
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    + +
                                                                    +
                                                                    + +
                                                                    +
                                                                    - - +

                                                                    Aligning the menus

                                                                    +

                                                                    ...

                                                                    + - -
                                                                    -
                                                                    -

                                                                    Button groups

                                                                    -
                                                                    - -

                                                                    Examples

                                                                    -

                                                                    Two basic options, along with two more specific variations.

                                                                    - -

                                                                    Single button group

                                                                    -

                                                                    Wrap a series of buttons with .btn in .btn-group.

                                                                    -
                                                                    -
                                                                    - - - + +
                                                                    +
                                                                    +

                                                                    Button groups

                                                                    +
                                                                    + +

                                                                    Examples

                                                                    +

                                                                    Two basic options, along with two more specific variations.

                                                                    + +

                                                                    Single button group

                                                                    +

                                                                    Wrap a series of buttons with .btn in .btn-group.

                                                                    +
                                                                    +
                                                                    + + + +
                                                                    - 
                                                                     <div class="btn-group">
   <button class="btn">1</button>
@@ -196,26 +197,26 @@
 </div>
                                                                    -

                                                                    Multiple button groups

                                                                    -

                                                                    Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    - +

                                                                    Multiple button groups

                                                                    +

                                                                    Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

                                                                    +
                                                                    +
                                                                    +
                                                                    + + + + +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    + +
                                                                    - 
                                                                     <div class="btn-toolbar">
   <div class="btn-group">
@@ -224,16 +225,16 @@
 </div>
                                                                    -

                                                                    Vertical button groups

                                                                    -

                                                                    Make a set of buttons appear vertically stacked rather than horizontally.

                                                                    -
                                                                    -
                                                                    - - - - +

                                                                    Vertical button groups

                                                                    +

                                                                    Make a set of buttons appear vertically stacked rather than horizontally.

                                                                    +
                                                                    +
                                                                    + + + + +
                                                                    - 
                                                                     <div class="btn-group btn-group-vertical">
   ...
@@ -241,102 +242,102 @@
                                                                    -
                                                                    +
                                                                    -

                                                                    Checkbox and radio flavors

                                                                    -

                                                                    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 the Javascript docs for that.

                                                                    +

                                                                    Checkbox and radio flavors

                                                                    +

                                                                    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 the Javascript docs for that.

                                                                    -

                                                                    Dropdowns in button groups

                                                                    -

                                                                    Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

                                                                    -
                                                                    +

                                                                    Dropdowns in button groups

                                                                    +

                                                                    Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

                                                                    + - -
                                                                    -
                                                                    -

                                                                    Button dropdown menus

                                                                    -
                                                                    + +
                                                                    +
                                                                    +

                                                                    Button dropdown menus

                                                                    +
                                                                    -

                                                                    Overview and examples

                                                                    -

                                                                    Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

                                                                    -
                                                                    -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    +

                                                                    Overview and examples

                                                                    +

                                                                    Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

                                                                    +
                                                                    +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + 
                                                                     <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -349,134 +350,134 @@
 </div>
                                                                    -

                                                                    Works with all button sizes

                                                                    -

                                                                    Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.

                                                                    -
                                                                    -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    +

                                                                    Works with all button sizes

                                                                    +

                                                                    Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.

                                                                    +
                                                                    +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    + + +
                                                                    +
                                                                    +
                                                                    -

                                                                    Requires javascript

                                                                    -

                                                                    Button dropdowns require the Bootstrap dropdown plugin to function.

                                                                    -

                                                                    In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

                                                                    +

                                                                    Requires javascript

                                                                    +

                                                                    Button dropdowns require the Bootstrap dropdown plugin to function.

                                                                    +

                                                                    In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

                                                                    -
                                                                    +
                                                                    -

                                                                    Split button dropdowns

                                                                    -

                                                                    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    +

                                                                    Split button dropdowns

                                                                    +

                                                                    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

                                                                    +
                                                                    +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    + 
                                                                     <div class="btn-group">
   <button class="btn">Action</button>
@@ -489,49 +490,49 @@
 </div>
                                                                    -

                                                                    Sizes

                                                                    -

                                                                    Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    +

                                                                    Sizes

                                                                    +

                                                                    Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

                                                                    +
                                                                    +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    + 
                                                                     <div class="btn-group">
   <button class="btn btn-mini">Action</button>
@@ -544,34 +545,34 @@
 </div>
                                                                    -

                                                                    Dropup menus

                                                                    -

                                                                    Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    - - - -
                                                                    +

                                                                    Dropup menus

                                                                    +

                                                                    Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

                                                                    +
                                                                    +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    + + + +
                                                                    +
                                                                    - 
                                                                     <div class="btn-group dropup">
   <button class="btn">Dropup</button>
@@ -584,29 +585,29 @@
 </div>
                                                                    -
                                                                    +
                                                                    - - - - - - - -
                                                                    -
                                                                    -

                                                                    Pagination Two options for paging through content

                                                                    -
                                                                    - -

                                                                    Standard pagination

                                                                    -

                                                                    Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

                                                                    -
                                                                    - 
                                                                     <div class="pagination">
   <ul>
@@ -1345,26 +1346,26 @@
                                                                    -
                                                                    +
                                                                    -

                                                                    Options

                                                                    +

                                                                    Options

                                                                    -

                                                                    Disabled and active states

                                                                    -

                                                                    Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

                                                                    -
                                                                    - 
                                                                     <div class="pagination ">
   <ul>
@@ -1375,39 +1376,39 @@
 </div>
                                                                    -

                                                                    Alignment

                                                                    -

                                                                    Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

                                                                    -
                                                                    - 
                                                                     <div class="pagination pagination-centered">
   ...
 </div>
                                                                    -
                                                                    - 
                                                                     <div class="pagination pagination-right">
   ...
@@ -1415,20 +1416,20 @@
                                                                    -
                                                                    +
                                                                    -

                                                                    Pager

                                                                    -

                                                                    Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

                                                                    +

                                                                    Pager

                                                                    +

                                                                    Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

                                                                    -

                                                                    Default example

                                                                    -

                                                                    By default, the pager centers links.

                                                                    -
                                                                    - -
                                                                    +

                                                                    Default example

                                                                    +

                                                                    By default, the pager centers links.

                                                                    +
                                                                    + + 
                                                                     <ul class="pager">
   <li><a href="#">Previous</a></li>
@@ -1436,14 +1437,14 @@
 </ul>
                                                                    -

                                                                    Aligned links

                                                                    -

                                                                    Alternatively, you can align each link to the sides:

                                                                    -
                                                                    - -
                                                                    +

                                                                    Aligned links

                                                                    +

                                                                    Alternatively, you can align each link to the sides:

                                                                    +
                                                                    + + 
                                                                     <ul class="pager">
   <li class="previous">
@@ -1455,14 +1456,14 @@
 </ul>
                                                                    -

                                                                    Optional disabled state

                                                                    -

                                                                    Pager links also use the general .disabled utility class from the pagination.

                                                                    -
                                                                    - -
                                                                    +

                                                                    Optional disabled state

                                                                    +

                                                                    Pager links also use the general .disabled utility class from the pagination.

                                                                    +
                                                                    + + 
                                                                     <ul class="pager">
   <li class="previous disabled">
@@ -1472,175 +1473,175 @@
 </ul>
                                                                    -
                                                                    + - -
                                                                    -
                                                                    -

                                                                    Labels and badges

                                                                    -
                                                                    -

                                                                    Labels

                                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                                    LabelsMarkup
                                                                    - Default - - <span class="label">Default</span> -
                                                                    - Success - - <span class="label label-success">Success</span> -
                                                                    - Warning - - <span class="label label-warning">Warning</span> -
                                                                    - Important - - <span class="label label-important">Important</span> -
                                                                    - Info - - <span class="label label-info">Info</span> -
                                                                    - Inverse - - <span class="label label-inverse">Inverse</span> -
                                                                    - -

                                                                    Badges

                                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                                    NameExampleMarkup
                                                                    - Default - - 1 - - <span class="badge">1</span> -
                                                                    - Success - - 2 - - <span class="badge badge-success">2</span> -
                                                                    - Warning - - 4 - - <span class="badge badge-warning">4</span> -
                                                                    - Important - - 6 - - <span class="badge badge-important">6</span> -
                                                                    - Info - - 8 - - <span class="badge badge-info">8</span> -
                                                                    - Inverse - - 10 - - <span class="badge badge-inverse">10</span> -
                                                                    - -
                                                                    - - - - -
                                                                    -
                                                                    -

                                                                    Typographic components

                                                                    -
                                                                    - -

                                                                    Hero unit

                                                                    -

                                                                    A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

                                                                    -
                                                                    -
                                                                    -

                                                                    Hello, world!

                                                                    -

                                                                    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

                                                                    -

                                                                    Learn more

                                                                    + +
                                                                    +
                                                                    +

                                                                    Labels and badges

                                                                    +
                                                                    +

                                                                    Labels

                                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                                    LabelsMarkup
                                                                    + Default + + <span class="label">Default</span> +
                                                                    + Success + + <span class="label label-success">Success</span> +
                                                                    + Warning + + <span class="label label-warning">Warning</span> +
                                                                    + Important + + <span class="label label-important">Important</span> +
                                                                    + Info + + <span class="label label-info">Info</span> +
                                                                    + Inverse + + <span class="label label-inverse">Inverse</span> +
                                                                    + +

                                                                    Badges

                                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                                    NameExampleMarkup
                                                                    + Default + + 1 + + <span class="badge">1</span> +
                                                                    + Success + + 2 + + <span class="badge badge-success">2</span> +
                                                                    + Warning + + 4 + + <span class="badge badge-warning">4</span> +
                                                                    + Important + + 6 + + <span class="badge badge-important">6</span> +
                                                                    + Info + + 8 + + <span class="badge badge-info">8</span> +
                                                                    + Inverse + + 10 + + <span class="badge badge-inverse">10</span> +
                                                                    + +
                                                                    + + + + +
                                                                    +
                                                                    +

                                                                    Typographic components

                                                                    +
                                                                    + +

                                                                    Hero unit

                                                                    +

                                                                    A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

                                                                    +
                                                                    +
                                                                    +

                                                                    Hello, world!

                                                                    +

                                                                    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

                                                                    +

                                                                    Learn more

                                                                    +
                                                                    - 
                                                                     <div class="hero-unit">
   <h1>Heading</h1>
@@ -1653,105 +1654,105 @@
 </div>
                                                                    -

                                                                    Page header

                                                                    -

                                                                    A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

                                                                    -
                                                                    -
                                                                    -

                                                                    Example page header Subtext for header

                                                                    +

                                                                    Page header

                                                                    +

                                                                    A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

                                                                    +
                                                                    +
                                                                    +

                                                                    Example page header Subtext for header

                                                                    +
                                                                    - 
                                                                     <div class="page-header">
   <h1>Example page header</h1>
 </div>
                                                                    -
                                                                    + - -
                                                                    -
                                                                    -

                                                                    Thumbnails Grids of images, videos, text, and more

                                                                    -
                                                                    + +
                                                                    +
                                                                    +

                                                                    Thumbnails Grids of images, videos, text, and more

                                                                    +
                                                                    -

                                                                    Default thumbnails

                                                                    -

                                                                    By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

                                                                    -
                                                                    - -
                                                                    +

                                                                    Default thumbnails

                                                                    +

                                                                    By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

                                                                    +
                                                                    + +
                                                                    -

                                                                    Highly customizable

                                                                    -

                                                                    With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

                                                                    -
                                                                    -
                                                                      -
                                                                    • -
                                                                      - -
                                                                      -

                                                                      Thumbnail label

                                                                      -

                                                                      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                                      -

                                                                      Action Action

                                                                      +

                                                                      Highly customizable

                                                                      +

                                                                      With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

                                                                      +
                                                                      +
                                                                        +
                                                                      • +
                                                                        + +
                                                                        +

                                                                        Thumbnail label

                                                                        +

                                                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                                        +

                                                                        Action Action

                                                                        +
                                                                        -
                                                                      -
                                                                      • -
                                                                    • -
                                                                      - -
                                                                      -

                                                                      Thumbnail label

                                                                      -

                                                                      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                                      -

                                                                      Action Action

                                                                      +
                                                                      • +
                                                                    • +
                                                                      + +
                                                                      +

                                                                      Thumbnail label

                                                                      +

                                                                      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                                      +

                                                                      Action Action

                                                                      +
                                                                      -
                                                                    - -
                                                                  • -
                                                                    - -
                                                                    -

                                                                    Thumbnail label

                                                                    -

                                                                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                                    -

                                                                    Action Action

                                                                    +
                                                                    • +
                                                                  • +
                                                                    + +
                                                                    +

                                                                    Thumbnail label

                                                                    +

                                                                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                                    +

                                                                    Action Action

                                                                    +
                                                                    -
                                                                    • - -
                                                                  -
                                                                + +
                                                              +
                                                            -

                                                            Why use thumbnails

                                                            -

                                                            Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

                                                            +

                                                            Why use thumbnails

                                                            +

                                                            Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

                                                            -

                                                            Simple, flexible markup

                                                            -

                                                            Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

                                                            +

                                                            Simple, flexible markup

                                                            +

                                                            Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

                                                            -

                                                            Uses grid column sizes

                                                            -

                                                            Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

                                                            +

                                                            Uses grid column sizes

                                                            +

                                                            Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

                                                            -

                                                            Markup

                                                            -

                                                            As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

                                                            +

                                                            Markup

                                                            +

                                                            As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

                                                             <ul class="thumbnails">
   <li class="span4">
@@ -1762,7 +1763,7 @@
   ...
 </ul>
                                                            -

                                                            For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

                                                            +

                                                            For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

                                                             <ul class="thumbnails">
   <li class="span4">
@@ -1776,55 +1777,55 @@
 </ul>
                                                            -

                                                            More examples

                                                            -

                                                            Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

                                                            - +

                                                            More examples

                                                            +

                                                            Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

                                                            + - + - -
                                                            -
                                                            -

                                                            Alerts Styles for success, warning, and error messages

                                                            -
                                                            - -

                                                            Default alert

                                                            -

                                                            Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

                                                            -
                                                            -
                                                            - - Warning! Best check yo self, you're not looking too good. + +
                                                            +
                                                            +

                                                            Alerts Styles for success, warning, and error messages

                                                            +
                                                            + +

                                                            Default alert

                                                            +

                                                            Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

                                                            +
                                                            +
                                                            + + Warning! Best check yo self, you're not looking too good. +
                                                            - 
                                                             <div class="alert">
   <button type="button" class="close" data-dismiss="alert">×</button>
@@ -1832,32 +1833,28 @@
 </div>
                                                            -

                                                            Dismiss buttons

                                                            -

                                                            Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

                                                            -
                                                            -<a href="#" class="close" data-dismiss="alert">×</button>
-
                                                            -

                                                            Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

                                                            -
                                                            -<button type="button" class="close" data-dismiss="alert">×</button>
-
                                                            +

                                                            Dismiss buttons

                                                            +

                                                            Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

                                                            + 
                                                            <a href="#" class="close" data-dismiss="alert">×</button>
                                                            +

                                                            Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

                                                            + 
                                                            <button type="button" class="close" data-dismiss="alert">×</button>
                                                            -

                                                            Dismiss alerts via javascript

                                                            -

                                                            Use the alerts jQuery plugin for quick and easy dismissal of alerts.

                                                            +

                                                            Dismiss alerts via javascript

                                                            +

                                                            Use the alerts jQuery plugin for quick and easy dismissal of alerts.

                                                            -
                                                            +
                                                            -

                                                            Options

                                                            -

                                                            For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

                                                            -
                                                            -
                                                            - -

                                                            Warning!

                                                            -

                                                            Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

                                                            +

                                                            Options

                                                            +

                                                            For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

                                                            +
                                                            +
                                                            + +

                                                            Warning!

                                                            +

                                                            Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

                                                            +
                                                            - 
                                                             <div class="alert alert-block">
   <a class="close" data-dismiss="alert" href="#">&times;</a>
@@ -1867,97 +1864,97 @@
                                                            -
                                                            +
                                                            -

                                                            Contextual alternatives

                                                            -

                                                            Add optional classes to change an alert's connotation.

                                                            +

                                                            Contextual alternatives

                                                            +

                                                            Add optional classes to change an alert's connotation.

                                                            -

                                                            Error or danger

                                                            -
                                                            -
                                                            - - Oh snap! Change a few things up and try submitting again. +

                                                            Error or danger

                                                            +
                                                            +
                                                            + + Oh snap! Change a few things up and try submitting again. +
                                                            - 
                                                             <div class="alert alert-error">
   ...
 </div>
                                                            -

                                                            Success

                                                            -
                                                            -
                                                            - - Well done! You successfully read this important alert message. +

                                                            Success

                                                            +
                                                            +
                                                            + + Well done! You successfully read this important alert message. +
                                                            - 
                                                             <div class="alert alert-success">
   ...
 </div>
                                                            -

                                                            Information

                                                            -
                                                            -
                                                            - - Heads up! This alert needs your attention, but it's not super important. +

                                                            Information

                                                            +
                                                            +
                                                            + + Heads up! This alert needs your attention, but it's not super important. +
                                                            - 
                                                             <div class="alert alert-info">
   ...
 </div>
                                                            -
                                                            + - -
                                                            -
                                                            -

                                                            Progress bars For loading, redirecting, or action status

                                                            -
                                                            - -

                                                            Examples and markup

                                                            - -

                                                            Basic

                                                            -

                                                            Default progress bar with a vertical gradient.

                                                            -
                                                            -
                                                            -
                                                            + +
                                                            +
                                                            +

                                                            Progress bars For loading, redirecting, or action status

                                                            +
                                                            + +

                                                            Examples and markup

                                                            + +

                                                            Basic

                                                            +

                                                            Default progress bar with a vertical gradient.

                                                            +
                                                            +
                                                            +
                                                            +
                                                            - 
                                                             <div class="progress">
   <div class="bar" style="width: 60%;"></div>
 </div>
                                                            -

                                                            Striped

                                                            -

                                                            Uses a gradient to create a striped effect. Not available in IE7-8.

                                                            -
                                                            -
                                                            -
                                                            +

                                                            Striped

                                                            +

                                                            Uses a gradient to create a striped effect. Not available in IE7-8.

                                                            +
                                                            +
                                                            +
                                                            +
                                                            - 
                                                             <div class="progress progress-striped">
   <div class="bar" style="width: 20%;"></div>
 </div>
                                                            -

                                                            Animated

                                                            -

                                                            Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

                                                            -
                                                            -
                                                            -
                                                            +

                                                            Animated

                                                            +

                                                            Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

                                                            +
                                                            +
                                                            +
                                                            +
                                                            - 
                                                             <div class="progress progress-striped active">
   <div class="bar" style="width: 40%;"></div>
@@ -1965,27 +1962,27 @@
                                                            -
                                                            +
                                                            -

                                                            Options

                                                            +

                                                            Options

                                                            -

                                                            Additional colors

                                                            -

                                                            Progress bars use some of the same button and alert classes for consistent styles.

                                                            -
                                                            -
                                                            -
                                                            +

                                                            Additional colors

                                                            +

                                                            Progress bars use some of the same button and alert classes for consistent styles.

                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - 
                                                             <div class="progress progress-info">
   <div class="bar" style="width: 20%"></div>
@@ -2001,22 +1998,22 @@
 </div>
                                                            -

                                                            Striped bars

                                                            -

                                                            Similar to the solid colors, we have varied striped progress bars.

                                                            -
                                                            -
                                                            -
                                                            +

                                                            Striped bars

                                                            +

                                                            Similar to the solid colors, we have varied striped progress bars.

                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - 
                                                             <div class="progress progress-info progress-striped">
   <div class="bar" style="width: 20%"></div>
@@ -2033,74 +2030,75 @@
                                                            -
                                                            +
                                                            -

                                                            Browser support

                                                            -

                                                            Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

                                                            -

                                                            Opera and IE do not support animations at this time.

                                                            +

                                                            Browser support

                                                            +

                                                            Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

                                                            +

                                                            Opera and IE do not support animations at this time.

                                                            -
                                                            + - -
                                                            -
                                                            -

                                                            Miscellaneous Lightweight utility components

                                                            -
                                                            - -

                                                            Wells

                                                            -

                                                            Use the well as a simple effect on an element to give it an inset effect.

                                                            -
                                                            -
                                                            - Look, I'm in a well! + +
                                                            +
                                                            +

                                                            Miscellaneous Lightweight utility components

                                                            +
                                                            + +

                                                            Wells

                                                            +

                                                            Use the well as a simple effect on an element to give it an inset effect.

                                                            +
                                                            +
                                                            + Look, I'm in a well! +
                                                            - 
                                                             <div class="well">
   ...
 </div>
                                                            -

                                                            Optional classes

                                                            -

                                                            Control padding and rounded corners with two optional modifier classes.

                                                            -
                                                            -
                                                            - Look, I'm in a well! +

                                                            Optional classes

                                                            +

                                                            Control padding and rounded corners with two optional modifier classes.

                                                            +
                                                            +
                                                            + Look, I'm in a well! +
                                                            - 
                                                             <div class="well well-large">
   ...
 </div>
                                                            -
                                                            -
                                                            - Look, I'm in a well! +
                                                            +
                                                            + Look, I'm in a well! +
                                                            - 
                                                             <div class="well well-small">
   ...
 </div>
                                                            -

                                                            Close icon

                                                            -

                                                            Use the generic close icon for dismissing content like modals and alerts.

                                                            -
                                                            -

                                                            -
                                                            -
                                                            <button class="close">&times;</button>
                                                            -

                                                            iOS devices require an href="#" for click events if you rather use an anchor.

                                                            -
                                                            <a class="close" href="#">&times;</a>
                                                            -

                                                            Helper classes

                                                            -

                                                            Simple, focused classes for small display or behavior tweaks.

                                                            +

                                                            Close icon

                                                            +

                                                            Use the generic close icon for dismissing content like modals and alerts.

                                                            +
                                                            +

                                                            +
                                                            + 
                                                            <button class="close">&times;</button>
                                                            +

                                                            iOS devices require an href="#" for click events if you rather use an anchor.

                                                            + 
                                                            <a class="close" href="#">&times;</a>
                                                            -

                                                            .pull-left

                                                            -

                                                            Float an element left

                                                            +

                                                            Helper classes

                                                            +

                                                            Simple, focused classes for small display or behavior tweaks.

                                                            + +

                                                            .pull-left

                                                            +

                                                            Float an element left

                                                             class="pull-left"
                                                            @@ -2110,8 +2108,8 @@ class="pull-left" } -

                                                            .pull-right

                                                            -

                                                            Float an element right

                                                            +

                                                            .pull-right

                                                            +

                                                            Float an element right

                                                             class="pull-right"
                                                            @@ -2121,8 +2119,8 @@ class="pull-right" } -

                                                            .muted

                                                            -

                                                            Change an element's color to #999

                                                            +

                                                            .muted

                                                            +

                                                            Change an element's color to #999

                                                             class="muted"
                                                            @@ -2132,8 +2130,8 @@ class="muted" } -

                                                            .clearfix

                                                            -

                                                            Clear the float on any element

                                                            +

                                                            .clearfix

                                                            +

                                                            Clear the float on any element

                                                             class="clearfix"
                                                            @@ -2151,11 +2149,13 @@ class="clearfix" } -
                                                            + +
                                                        +
                                                    diff --git a/docs/customize.html b/docs/customize.html index 160b02c4b6..72f2d81b19 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -74,357 +74,360 @@

                                                    Customize and download

                                                    -

                                                    Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.

                                                    +

                                                    Download Bootstrap or customize variables, components, javascript plugins, and more.

                                                    -
                                                    +
                                                    + +
                                                    + + +
                                                    +
                                                    + +
                                                    +
                                                    - -
                                                    -
                                                    - + + +
                                                    +
                                                    +
                                                    + Toggle all +

                                                    + 1. Choose components +

                                                    +
                                                    +
                                                    +
                                                    +

                                                    Scaffolding

                                                    + + + + +

                                                    Base CSS

                                                    + + + + + + + +
                                                    +
                                                    +

                                                    Components

                                                    + + + + + + + + + + +

                                                    JS Components

                                                    + + + + + + +
                                                    +
                                                    +

                                                    Miscellaneous

                                                    + + + + +

                                                    Responsive

                                                    + + + + + +
                                                    +
                                                    +
                                                    + +
                                                    +
                                                    + Toggle all +

                                                    + 2. Select jQuery plugins +

                                                    +
                                                    +
                                                    +
                                                    + + + + + + +
                                                    +
                                                    + + + + + + +
                                                    +
                                                    +

                                                    Heads up!

                                                    +

                                                    All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.

                                                    +
                                                    +
                                                    +
                                                    + + +
                                                    +
                                                    + Reset to defaults +

                                                    + 3. Customize variables +

                                                    +
                                                    +
                                                    +
                                                    +

                                                    Scaffolding

                                                    + + + + + +

                                                    Links

                                                    + + + + +

                                                    Colors

                                                    + + + + + + + + + + + + + + + +

                                                    Sprites

                                                    + + + + + +
                                                    +
                                                    +

                                                    Grid system

                                                    + + + + + + + + + + + + + + + +

                                                    Typography

                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    +
                                                    +

                                                    Tables

                                                    + + + + + + + + + +

                                                    Navbar

                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

                                                    Dropdowns

                                                    + + + + + + + + + + +
                                                    +
                                                    +

                                                    Forms

                                                    + + + + + + + + + + + + + + + + + + +

                                                    Form states & alerts

                                                    + + + + + + + + + + + + + + + + +
                                                    +
                                                    +
                                                    + +
                                                    +
                                                    +

                                                    + 4. Download +

                                                    +
                                                    +
                                                    + Customize and Download +

                                                    What's included?

                                                    +

                                                    Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

                                                    +
                                                    +
                                                    +
                                                    + + + +
                                                    -
                                                    - - - -
                                                    -
                                                    -
                                                    - Toggle all -

                                                    - 1. Choose components -

                                                    -
                                                    -
                                                    -
                                                    -

                                                    Scaffolding

                                                    - - - - -

                                                    Base CSS

                                                    - - - - - - - -
                                                    -
                                                    -

                                                    Components

                                                    - - - - - - - - - - -

                                                    JS Components

                                                    - - - - - - -
                                                    -
                                                    -

                                                    Miscellaneous

                                                    - - - - -

                                                    Responsive

                                                    - - - - - -
                                                    -
                                                    -
                                                    - -
                                                    -
                                                    - Toggle all -

                                                    - 2. Select jQuery plugins -

                                                    -
                                                    -
                                                    -
                                                    - - - - - - -
                                                    -
                                                    - - - - - - -
                                                    -
                                                    -

                                                    Heads up!

                                                    -

                                                    All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.

                                                    -
                                                    -
                                                    -
                                                    - - -
                                                    -
                                                    - Reset to defaults -

                                                    - 3. Customize variables -

                                                    -
                                                    -
                                                    -
                                                    -

                                                    Scaffolding

                                                    - - - - - -

                                                    Links

                                                    - - - - -

                                                    Colors

                                                    - - - - - - - - - - - - - - - -

                                                    Sprites

                                                    - - - - - -
                                                    -
                                                    -

                                                    Grid system

                                                    - - - - - - - - - - - - - - - -

                                                    Typography

                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    -
                                                    -

                                                    Tables

                                                    - - - - - - - - - -

                                                    Navbar

                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

                                                    Dropdowns

                                                    - - - - - - - - - - -
                                                    -
                                                    -

                                                    Forms

                                                    - - - - - - - - - - - - - - - - - - -

                                                    Form states & alerts

                                                    - - - - - - - - - - - - - - - - -
                                                    -
                                                    -
                                                    - -
                                                    -
                                                    -

                                                    - 4. Download -

                                                    -
                                                    -
                                                    - Customize and Download -

                                                    What's included?

                                                    -

                                                    Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

                                                    -
                                                    -
                                                    -
                                                    - - - -
                                                    diff --git a/docs/getting-started.html b/docs/getting-started.html index d2d261fd1e..4f353603af 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -78,55 +78,58 @@
                                                    -
                                                    +
                                                    +
                                                    -
                                                    -
                                                    - -
                                                    -
                                                    + +
                                                    +
                                                    + +
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    1. Download

                                                    -
                                                    -

                                                    Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.

                                                    - -
                                                    -
                                                    -

                                                    Download compiled

                                                    -

                                                    Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

                                                    -

                                                    Download Bootstrap

                                                    + +
                                                    +
                                                    +

                                                    1. Download

                                                    -
                                                    -

                                                    Download source

                                                    -

                                                    Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.

                                                    -

                                                    Download Bootstrap source

                                                    +

                                                    Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.

                                                    + +
                                                    +
                                                    +

                                                    Download compiled

                                                    +

                                                    Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

                                                    +

                                                    Download Bootstrap

                                                    +
                                                    +
                                                    +

                                                    Download source

                                                    +

                                                    Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.

                                                    +

                                                    Download Bootstrap source

                                                    +
                                                    -
                                                    -
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    2. File structure

                                                    -
                                                    -

                                                    Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:

                                                    + +
                                                    +
                                                    +

                                                    2. File structure

                                                    +
                                                    +

                                                    Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:

                                                       bootstrap/
   ├── css/
@@ -140,67 +143,67 @@
   │   ├── glyphicons-halflings-white.png
   └── README.md
                                                    -

                                                    This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.

                                                    -
                                                    +

                                                    This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.

                                                    +
                                                    - -
                                                    -
                                                    -

                                                    3. What's included

                                                    -
                                                    -

                                                    Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.

                                                    + +
                                                    +
                                                    +

                                                    3. What's included

                                                    +
                                                    +

                                                    Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.

                                                    -

                                                    Scaffolding

                                                    -

                                                    Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

                                                    +

                                                    Scaffolding

                                                    +

                                                    Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

                                                    -

                                                    Base CSS

                                                    -

                                                    Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

                                                    +

                                                    Base CSS

                                                    +

                                                    Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

                                                    -

                                                    Components

                                                    -

                                                    Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

                                                    +

                                                    Components

                                                    +

                                                    Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

                                                    -

                                                    Javascript plugins

                                                    -

                                                    Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.

                                                    +

                                                    Javascript plugins

                                                    +

                                                    Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.

                                                    -
                                                    +
                                                    -

                                                    List of components

                                                    -

                                                    Together, the Components and Javascript plugins sections provide the following interface elements:

                                                    -
                                                      -
                                                    • Button groups
                                                      • -
                                                    • Button dropdowns
                                                      • -
                                                    • Navigational tabs, pills, and lists
                                                      • -
                                                    • Navbar
                                                      • -
                                                    • Labels
                                                      • -
                                                    • Badges
                                                      • -
                                                    • Page headers and hero unit
                                                      • -
                                                    • Thumbnails
                                                      • -
                                                    • Alerts
                                                      • -
                                                    • Progress bars
                                                      • -
                                                    • Modals
                                                      • -
                                                    • Dropdowns
                                                      • -
                                                    • Tooltips
                                                      • -
                                                    • Popovers
                                                      • -
                                                    • Accordion
                                                      • -
                                                    • Carousel
                                                      • -
                                                    • Typeahead
                                                      • -
                                                    -

                                                    In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.

                                                    -
                                                    +

                                                    List of components

                                                    +

                                                    Together, the Components and Javascript plugins sections provide the following interface elements:

                                                    +
                                                      +
                                                    • Button groups
                                                      • +
                                                    • Button dropdowns
                                                      • +
                                                    • Navigational tabs, pills, and lists
                                                      • +
                                                    • Navbar
                                                      • +
                                                    • Labels
                                                      • +
                                                    • Badges
                                                      • +
                                                    • Page headers and hero unit
                                                      • +
                                                    • Thumbnails
                                                      • +
                                                    • Alerts
                                                      • +
                                                    • Progress bars
                                                      • +
                                                    • Modals
                                                      • +
                                                    • Dropdowns
                                                      • +
                                                    • Tooltips
                                                      • +
                                                    • Popovers
                                                      • +
                                                    • Accordion
                                                      • +
                                                    • Carousel
                                                      • +
                                                    • Typeahead
                                                      • +
                                                    +

                                                    In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.

                                                    +
                                                    - -
                                                    -
                                                    -

                                                    4. Basic HTML template

                                                    -
                                                    -

                                                    With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.

                                                    -

                                                    Now, here's a look at a typical HTML file:

                                                    + +
                                                    +
                                                    +

                                                    4. Basic HTML template

                                                    +
                                                    +

                                                    With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.

                                                    +

                                                    Now, here's a look at a typical HTML file:

                                                     <html>
   <head>
@@ -211,7 +214,7 @@
   </body>
 </html>
                                                    -

                                                    To make this a Bootstrapped template, just include the appropriate CSS and JS files:

                                                    +

                                                    To make this a Bootstrapped template, just include the appropriate CSS and JS files:

                                                     <html>
   <head>
@@ -225,61 +228,63 @@
   </body>
 </html>
                                                    -

                                                    And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.

                                                    -
                                                    +

                                                    And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.

                                                    +
                                                    - -
                                                    -
                                                    -

                                                    5. Examples

                                                    -
                                                    -

                                                    Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.

                                                    -
                                                      -
                                                    • - - - -

                                                      Basic marketing site

                                                      -

                                                      Featuring a hero unit for a primary message and three supporting elements.

                                                      -
                                                      • -
                                                    • - - - -

                                                      Fluid layout

                                                      -

                                                      Uses our new responsive, fluid grid system to create a seamless liquid layout.

                                                      -
                                                      • -
                                                    • - - - -

                                                      Starter template

                                                      -

                                                      A barebones HTML document with all the Bootstrap CSS and javascript included.

                                                      -
                                                      • -
                                                    -
                                                    + +
                                                    +
                                                    +

                                                    5. Examples

                                                    +
                                                    +

                                                    Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.

                                                    +
                                                      +
                                                    • + + + +

                                                      Basic marketing site

                                                      +

                                                      Featuring a hero unit for a primary message and three supporting elements.

                                                      +
                                                      • +
                                                    • + + + +

                                                      Fluid layout

                                                      +

                                                      Uses our new responsive, fluid grid system to create a seamless liquid layout.

                                                      +
                                                      • +
                                                    • + + + +

                                                      Starter template

                                                      +

                                                      A barebones HTML document with all the Bootstrap CSS and javascript included.

                                                      +
                                                      • +
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    What next?

                                                    -
                                                    -

                                                    Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

                                                    - Visit the Bootstrap docs - Customize Bootstrap -
                                                    + +
                                                    +
                                                    +

                                                    What next?

                                                    +
                                                    +

                                                    Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

                                                    + Visit the Bootstrap docs + Customize Bootstrap +
                                                    +
                                                    +
                                                    diff --git a/docs/index.html b/docs/index.html index 92e9075c9d..11f5ab6e64 100644 --- a/docs/index.html +++ b/docs/index.html @@ -82,80 +82,84 @@
                                                    -
                                                    -
                                                    - -
                                                    -
                                                    +
                                                    -
                                                    - -
                                                    - -

                                                    Introducing Bootstrap.

                                                    -

                                                    Need reasons to love Bootstrap? Look no further.

                                                    - -
                                                    -
                                                    - -

                                                    By nerds, for nerds.

                                                    -

                                                    Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

                                                    -
                                                    -
                                                    - -

                                                    Made for everyone.

                                                    -

                                                    Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

                                                    -
                                                    -
                                                    - -

                                                    Packed with features.

                                                    -

                                                    A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

                                                    -
                                                    -
                                                    - -
                                                    - -

                                                    Built with Bootstrap.

                                                    -

                                                    For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.

                                                    -
                                                    -
                                                    -
                                                    +
                                                    + +
                                                    + +

                                                    Introducing Bootstrap.

                                                    +

                                                    Need reasons to love Bootstrap? Look no further.

                                                    + +
                                                    +
                                                    + +

                                                    By nerds, for nerds.

                                                    +

                                                    Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

                                                    +
                                                    +
                                                    + +

                                                    Made for everyone.

                                                    +

                                                    Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

                                                    +
                                                    +
                                                    + +

                                                    Packed with features.

                                                    +

                                                    A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

                                                    +
                                                    +
                                                    + +
                                                    + +

                                                    Built with Bootstrap.

                                                    +

                                                    For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.

                                                    +
                                                    + +
                                                    + +
                                                    + +
                                                    diff --git a/docs/javascript.html b/docs/javascript.html index 70355957c6..2e51ba527d 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -78,104 +78,105 @@
                                                    -
                                                    +
                                                    +
                                                    - -
                                                    -
                                                    - -
                                                    -
                                                    - - - - -
                                                    -
                                                    -

                                                    Javascript in Bootstrap

                                                    -
                                                    - -

                                                    Individual or compiled

                                                    -

                                                    If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.

                                                    - -

                                                    Data attributes

                                                    -

                                                    ...

                                                    - -

                                                    Programmatic API

                                                    -

                                                    ...

                                                    - - - -
                                                    - - - - -
                                                    -
                                                    -

                                                    Transitions bootstrap-transition.js

                                                    -
                                                    -

                                                    About transitions

                                                    -

                                                    For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.

                                                    -

                                                    Use cases

                                                    -

                                                    A few examples of the transition plugin:

                                                    -
                                                    +
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    Modals bootstrap-modal.js

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    Javascript in Bootstrap

                                                    +
                                                    + +

                                                    Individual or compiled

                                                    +

                                                    If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.

                                                    + +

                                                    Data attributes

                                                    +

                                                    ...

                                                    + +

                                                    Programmatic API

                                                    +

                                                    ...

                                                    -

                                                    Examples

                                                    -

                                                    Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

                                                    -

                                                    Static example

                                                    -

                                                    A rendered modal with header, body, and set of actions in the footer.

                                                    -
                                                    -
                                                    -
                                                    - -

                                                    Modal header

                                                    -
                                                    -
                                                    -

                                                    One fine body…

                                                    -
                                                    -
                                                    - Close - Save changes +
                                                    + + + + +
                                                    +
                                                    +

                                                    Transitions bootstrap-transition.js

                                                    +
                                                    +

                                                    About transitions

                                                    +

                                                    For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.

                                                    +

                                                    Use cases

                                                    +

                                                    A few examples of the transition plugin:

                                                    +
                                                      +
                                                    • Sliding or fading in modals
                                                      • +
                                                    • Fading out tabs
                                                      • +
                                                    • Fading out alerts
                                                      • +
                                                    • Sliding carousel panes
                                                      • +
                                                    + +
                                                    + + + + +
                                                    +
                                                    +

                                                    Modals bootstrap-modal.js

                                                    +
                                                    + + +

                                                    Examples

                                                    +

                                                    Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

                                                    + +

                                                    Static example

                                                    +

                                                    A rendered modal with header, body, and set of actions in the footer.

                                                    +
                                                    +
                                                    +
                                                    + +

                                                    Modal header

                                                    +
                                                    +
                                                    +

                                                    One fine body…

                                                    +
                                                    +
                                                    + Close + Save changes +
                                                    - 
                                                     <div class="modal hide fade">
   <div class="modal-header">
@@ -192,43 +193,43 @@
 </div>
                                                    -

                                                    Live demo

                                                    -

                                                    Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.

                                                    - -
                                                    +
                                                    diff --git a/docs/scaffolding.html b/docs/scaffolding.html index e43b4db30f..dca452fd13 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -78,35 +78,35 @@
                                                    +
                                                    -
                                                    +
                                                    - - -
                                                    -
                                                    - -
                                                    -
                                                    + +
                                                    +
                                                    + +
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    Global styles for CSS reset, typography, and links

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    Global styles for CSS reset, typography, and links

                                                    +
                                                    -

                                                    Requires HTML5 doctype

                                                    -

                                                    Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

                                                    +

                                                    Requires HTML5 doctype

                                                    +

                                                    Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

                                                     <!DOCTYPE html>
 <html lang="en">
@@ -114,84 +114,84 @@
 </html>
                                                    -

                                                    Typography and links

                                                    -

                                                    Bootstrap sets basic global display, typography, and link styles. Specifically, we:

                                                    -
                                                      -
                                                    • Remove margin on the body
                                                      • -
                                                    • Set background-color: white; on the body
                                                      • -
                                                    • Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base
                                                      • -
                                                    • Set the global link color via @linkColor and apply link underlines only on :hover
                                                      • -
                                                    -

                                                    These styles can be found within scaffolding.less.

                                                    +

                                                    Typography and links

                                                    +

                                                    Bootstrap sets basic global display, typography, and link styles. Specifically, we:

                                                    +
                                                      +
                                                    • Remove margin on the body
                                                      • +
                                                    • Set background-color: white; on the body
                                                      • +
                                                    • Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base
                                                      • +
                                                    • Set the global link color via @linkColor and apply link underlines only on :hover
                                                      • +
                                                    +

                                                    These styles can be found within scaffolding.less.

                                                    -

                                                    Reset via Normalize

                                                    -

                                                    With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

                                                    +

                                                    Reset via Normalize

                                                    +

                                                    With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

                                                    -
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    Default grid system 12 columns with a responsive twist

                                                    -
                                                    - -

                                                    Live grid example

                                                    -

                                                    The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

                                                    -
                                                    -
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    + +
                                                    +
                                                    +

                                                    Default grid system 12 columns with a responsive twist

                                                    -
                                                    -
                                                    2
                                                    -
                                                    3
                                                    -
                                                    4
                                                    -
                                                    -
                                                    -
                                                    4
                                                    -
                                                    5
                                                    -
                                                    -
                                                    -
                                                    9
                                                    -
                                                    -
                                                    -

                                                    Basic grid HTML

                                                    -

                                                    For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

                                                    +

                                                    Live grid example

                                                    +

                                                    The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

                                                    +
                                                    +
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    +
                                                    +
                                                    2
                                                    +
                                                    3
                                                    +
                                                    4
                                                    +
                                                    +
                                                    +
                                                    4
                                                    +
                                                    5
                                                    +
                                                    +
                                                    +
                                                    9
                                                    +
                                                    +
                                                    + +

                                                    Basic grid HTML

                                                    +

                                                    For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

                                                     <div class="row">
   <div class="span4">...</div>
   <div class="span8">...</div>
 </div>
                                                    -

                                                    Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

                                                    +

                                                    Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

                                                    -

                                                    Offsetting columns

                                                    -

                                                    Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

                                                    -
                                                    -
                                                    -
                                                    4
                                                    -
                                                    3 offset 2
                                                    -
                                                    -
                                                    -
                                                    3 offset 1
                                                    -
                                                    3 offset 2
                                                    -
                                                    -
                                                    -
                                                    6 offset 3
                                                    -
                                                    -
                                                    +

                                                    Offsetting columns

                                                    +

                                                    Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

                                                    +
                                                    +
                                                    +
                                                    4
                                                    +
                                                    3 offset 2
                                                    +
                                                    +
                                                    +
                                                    3 offset 1
                                                    +
                                                    3 offset 2
                                                    +
                                                    +
                                                    +
                                                    6 offset 3
                                                    +
                                                    + 
                                                     <div class="row">
   <div class="span4">...</div>
@@ -199,7 +199,7 @@
 </div>
                                                    -

                                                    Nesting columns

                                                    +

                                                    Nesting columns

                                                    To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

                                                    Example

                                                    Here two nested .span4 columns are placed within a .span8.

                                                    @@ -227,54 +227,54 @@ </div> </div> -
                                                    + - -
                                                    -
                                                    -

                                                    Fluid grid system 12 responsive, percent-based columns

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    Fluid grid system 12 responsive, percent-based columns

                                                    +
                                                    -

                                                    Live fluid grid example

                                                    -

                                                    The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

                                                    -
                                                    -
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    -
                                                    1
                                                    +

                                                    Live fluid grid example

                                                    +

                                                    The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

                                                    +
                                                    +
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    1
                                                    +
                                                    +
                                                    +
                                                    4
                                                    +
                                                    4
                                                    +
                                                    4
                                                    +
                                                    +
                                                    +
                                                    4
                                                    +
                                                    8
                                                    +
                                                    +
                                                    +
                                                    6
                                                    +
                                                    6
                                                    +
                                                    +
                                                    +
                                                    12
                                                    +
                                                    -
                                                    -
                                                    4
                                                    -
                                                    4
                                                    -
                                                    4
                                                    -
                                                    -
                                                    -
                                                    4
                                                    -
                                                    8
                                                    -
                                                    -
                                                    -
                                                    6
                                                    -
                                                    6
                                                    -
                                                    -
                                                    -
                                                    12
                                                    -
                                                    -
                                                    -

                                                    Basic fluid grid HTML

                                                    -

                                                    Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

                                                    +

                                                    Basic fluid grid HTML

                                                    +

                                                    Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

                                                     <div class="row-fluid">
   <div class="span4">...</div>
@@ -282,21 +282,21 @@
 </div>
                                                    -

                                                    Fluid offsetting

                                                    -

                                                    Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

                                                    -
                                                    -
                                                    -
                                                    4
                                                    -
                                                    4 offset 4
                                                    -
                                                    -
                                                    -
                                                    3 offset 3
                                                    -
                                                    3 offset 3
                                                    -
                                                    -
                                                    -
                                                    6 offset 6
                                                    -
                                                    -
                                                    +

                                                    Fluid offsetting

                                                    +

                                                    Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

                                                    +
                                                    +
                                                    +
                                                    4
                                                    +
                                                    4 offset 4
                                                    +
                                                    +
                                                    +
                                                    3 offset 3
                                                    +
                                                    3 offset 3
                                                    +
                                                    +
                                                    +
                                                    6 offset 6
                                                    +
                                                    + 
                                                     <div class="row-fluid">
   <div class="span4">...</div>
@@ -304,21 +304,21 @@
 </div>
                                                    -

                                                    Fluid nesting

                                                    -

                                                    Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.

                                                    -
                                                    -
                                                    - Fluid 12 -
                                                    -
                                                    - Fluid 6 -
                                                    -
                                                    - Fluid 6 +

                                                    Fluid nesting

                                                    +

                                                    Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.

                                                    +
                                                    +
                                                    + Fluid 12 +
                                                    +
                                                    + Fluid 6 +
                                                    +
                                                    + Fluid 6 +
                                                    - 
                                                     <div class="row-fluid">
   <div class="span12">
@@ -331,23 +331,23 @@
 </div>
                                                    -
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    Layouts Basic templates to create webpages

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    Layouts Basic templates to create webpages

                                                    +
                                                    -

                                                    Fixed layout

                                                    -

                                                    Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.

                                                    -
                                                    -
                                                    -
                                                    +

                                                    Fixed layout

                                                    +

                                                    Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.

                                                    +
                                                    +
                                                    + 
                                                     <body>
   <div class="container">
@@ -356,12 +356,12 @@
 </body>
                                                    -

                                                    Fluid layout

                                                    -

                                                    Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

                                                    -
                                                    -
                                                    -
                                                    -
                                                    +

                                                    Fluid layout

                                                    +

                                                    Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

                                                    +
                                                    +
                                                    +
                                                    + 
                                                     <div class="container-fluid">
   <div class="row-fluid">
@@ -374,78 +374,78 @@
   </div>
 </div>
                                                    -
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    Responsive design Media queries for various devices and resolutions

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    Responsive design Media queries for various devices and resolutions

                                                    +
                                                    -

                                                    Enabling responsive features

                                                    -

                                                    Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

                                                    +

                                                    Enabling responsive features

                                                    +

                                                    Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.

                                                     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
                                                    -

                                                    Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.

                                                    +

                                                    Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.

                                                    -

                                                    About responsive Bootstrap

                                                    - Responsive devices -

                                                    Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

                                                    -
                                                      -
                                                    • Modify the width of column in our grid
                                                      • -
                                                    • Stack elements instead of float wherever necessary
                                                      • -
                                                    • Resize headings and text to be more appropriate for devices
                                                      • -
                                                    -

                                                    Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

                                                    +

                                                    About responsive Bootstrap

                                                    + Responsive devices +

                                                    Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

                                                    +
                                                      +
                                                    • Modify the width of column in our grid
                                                      • +
                                                    • Stack elements instead of float wherever necessary
                                                      • +
                                                    • Resize headings and text to be more appropriate for devices
                                                      • +
                                                    +

                                                    Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

                                                    -

                                                    Supported devices

                                                    -

                                                    Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    LabelLayout widthColumn widthGutter width
                                                    Phones480px and belowFluid columns, no fixed widths
                                                    Phones to tablets767px and belowFluid columns, no fixed widths
                                                    Portrait tablets768px and above42px20px
                                                    Default980px and up60px20px
                                                    Large display1200px and up70px30px
                                                    +

                                                    Supported devices

                                                    +

                                                    Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    LabelLayout widthColumn widthGutter width
                                                    Phones480px and belowFluid columns, no fixed widths
                                                    Phones to tablets767px and belowFluid columns, no fixed widths
                                                    Portrait tablets768px and above42px20px
                                                    Default980px and up60px20px
                                                    Large display1200px and up70px30px
                                                     /* Landscape phones and down */
 @media (max-width: 480px) { ... }
@@ -461,82 +461,84 @@
                                                    -

                                                    Responsive utility classes

                                                    -

                                                    For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
                                                    .visible-phoneVisible
                                                    .visible-tabletVisible
                                                    .visible-desktopVisible
                                                    .hidden-phoneVisibleVisible
                                                    .hidden-tabletVisibleVisible
                                                    .hidden-desktopVisibleVisible
                                                    +

                                                    Responsive utility classes

                                                    +

                                                    For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
                                                    .visible-phoneVisible
                                                    .visible-tabletVisible
                                                    .visible-desktopVisible
                                                    .hidden-phoneVisibleVisible
                                                    .hidden-tabletVisibleVisible
                                                    .hidden-desktopVisibleVisible
                                                    -

                                                    When to use

                                                    -

                                                    Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

                                                    +

                                                    When to use

                                                    +

                                                    Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

                                                    -

                                                    Responsive utilities test case

                                                    -

                                                    Resize your browser or load on different devices to test the above classes.

                                                    -

                                                    Visible on...

                                                    -

                                                    Green checkmarks indicate that class is visible in your current viewport.

                                                    -
                                                      -
                                                    • Phone✔ Phone
                                                      • -
                                                    • Tablet✔ Tablet
                                                      • -
                                                    • Desktop✔ Desktop
                                                      • -
                                                    -

                                                    Hidden on...

                                                    -

                                                    Here, green checkmarks indicate that class is hidden in your current viewport.

                                                    -
                                                      -
                                                    • Phone✔ Phone
                                                      • -
                                                    • Tablet✔ Tablet
                                                      • -
                                                    • Desktop✔ Desktop
                                                      • -
                                                    +

                                                    Responsive utilities test case

                                                    +

                                                    Resize your browser or load on different devices to test the above classes.

                                                    +

                                                    Visible on...

                                                    +

                                                    Green checkmarks indicate that class is visible in your current viewport.

                                                    +
                                                      +
                                                    • Phone✔ Phone
                                                      • +
                                                    • Tablet✔ Tablet
                                                      • +
                                                    • Desktop✔ Desktop
                                                      • +
                                                    +

                                                    Hidden on...

                                                    +

                                                    Here, green checkmarks indicate that class is hidden in your current viewport.

                                                    +
                                                      +
                                                    • Phone✔ Phone
                                                      • +
                                                    • Tablet✔ Tablet
                                                      • +
                                                    • Desktop✔ Desktop
                                                      • +
                                                    -
                                                    +
                                                    +
                                                    +
                                                    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 4819745913..34bd544745 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -7,135 +7,137 @@
                                                    -
                                                    +
                                                    - -
                                                    -
                                                    - -
                                                    -
                                                    +
                                                    + + +
                                                    +
                                                    + +
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    {{_i}}Typography Headings, paragraphs, lists, and other inline type elements{{/i}}

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    {{_i}}Typography Headings, paragraphs, lists, and other inline type elements{{/i}}

                                                    +
                                                    - {{! Headings }} -

                                                    {{_i}}Headings{{/i}}

                                                    -

                                                    {{_i}}All HTML headings, <h1> through <h6> are available.{{/i}}

                                                    -
                                                    -

                                                    h1. {{_i}}Heading 1{{/i}}

                                                    -

                                                    h2. {{_i}}Heading 2{{/i}}

                                                    -

                                                    h3. {{_i}}Heading 3{{/i}}

                                                    -

                                                    h4. {{_i}}Heading 4{{/i}}

                                                    -
                                                    h5. {{_i}}Heading 5{{/i}}
                                                    -
                                                    h6. {{_i}}Heading 6{{/i}}
                                                    -
                                                    + {{! Headings }} +

                                                    {{_i}}Headings{{/i}}

                                                    +

                                                    {{_i}}All HTML headings, <h1> through <h6> are available.{{/i}}

                                                    +
                                                    +

                                                    h1. {{_i}}Heading 1{{/i}}

                                                    +

                                                    h2. {{_i}}Heading 2{{/i}}

                                                    +

                                                    h3. {{_i}}Heading 3{{/i}}

                                                    +

                                                    h4. {{_i}}Heading 4{{/i}}

                                                    +
                                                    h5. {{_i}}Heading 5{{/i}}
                                                    +
                                                    h6. {{_i}}Heading 6{{/i}}
                                                    +
                                                    - {{! Body copy }} -

                                                    {{_i}}Body copy{{/i}}

                                                    -

                                                    {{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}

                                                    -
                                                    -

                                                    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

                                                    -

                                                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

                                                    -

                                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

                                                    -
                                                    - 
                                                    <p>...</p>
                                                    + {{! Body copy }} +

                                                    {{_i}}Body copy{{/i}}

                                                    +

                                                    {{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}

                                                    +
                                                    +

                                                    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

                                                    +

                                                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

                                                    +

                                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

                                                    +
                                                    + 
                                                    <p>...</p>
                                                    - {{! Body copy .lead }} -

                                                    {{_i}}Lead body copy{{/i}}

                                                    -

                                                    {{_i}}Make a paragraph stand out by adding .lead.{{/i}}

                                                    -
                                                    -

                                                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

                                                    -
                                                    - 
                                                    <p class="lead">...</p>
                                                    + {{! Body copy .lead }} +

                                                    {{_i}}Lead body copy{{/i}}

                                                    +

                                                    {{_i}}Make a paragraph stand out by adding .lead.{{/i}}

                                                    +
                                                    +

                                                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

                                                    +
                                                    + 
                                                    <p class="lead">...</p>
                                                    - {{! Using LESS }} -

                                                    {{_i}}Built with Less{{/i}}

                                                    -

                                                    {{_i}}The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}

                                                    + {{! Using LESS }} +

                                                    {{_i}}Built with Less{{/i}}

                                                    +

                                                    {{_i}}The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}

                                                    -
                                                    +
                                                    - {{! Emphasis }} -

                                                    {{_i}}Emphasis{{/i}}

                                                    -

                                                    {{_i}}Make use of HTML's default emphasis tags, <strong> and <em>.{{/i}}

                                                    + {{! Emphasis }} +

                                                    {{_i}}Emphasis{{/i}}

                                                    +

                                                    {{_i}}Make use of HTML's default emphasis tags, <strong> and <em>.{{/i}}

                                                    -

                                                    <strong>

                                                    -

                                                    {{_i}}For emphasizing a snippet of text with important{{/i}}

                                                    -
                                                    -

                                                    The following snippet of text is rendered as bold text.

                                                    -
                                                    - 
                                                    <strong>rendered as bold text</strong>
                                                    +

                                                    <strong>

                                                    +

                                                    {{_i}}For emphasizing a snippet of text with important{{/i}}

                                                    +
                                                    +

                                                    The following snippet of text is rendered as bold text.

                                                    +
                                                    + 
                                                    <strong>rendered as bold text</strong>
                                                    -

                                                    <em>

                                                    -

                                                    {{_i}}For emphasizing a snippet of text with stress{{/i}}

                                                    -
                                                    -

                                                    The following snippet of text is rendered as italicized text.

                                                    -
                                                    - 
                                                    <em>rendered as italicized text</em>
                                                    +

                                                    <em>

                                                    +

                                                    {{_i}}For emphasizing a snippet of text with stress{{/i}}

                                                    +
                                                    +

                                                    The following snippet of text is rendered as italicized text.

                                                    +
                                                    + 
                                                    <em>rendered as italicized text</em>
                                                    -

                                                    {{_i}}Heads up!{{/i}} {{_i}}Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.{{/i}}

                                                    +

                                                    {{_i}}Heads up!{{/i}} {{_i}}Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.{{/i}}

                                                    -
                                                    +
                                                    - {{! Abbreviations }} -

                                                    {{_i}}Abbreviations{{/i}}

                                                    -

                                                    {{_i}}Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}

                                                    + {{! Abbreviations }} +

                                                    {{_i}}Abbreviations{{/i}}

                                                    +

                                                    {{_i}}Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}

                                                    -

                                                    <abbr>

                                                    -

                                                    {{_i}}For expanded text on long hover of an abbreviation, include the title attribute.{{/i}}

                                                    -
                                                    -

                                                    {{_i}}An abbreviation of the word attribute is attr.{{/i}}

                                                    -
                                                    - 
                                                    <abbr title="attribute">attr</abbr>
                                                    +

                                                    <abbr>

                                                    +

                                                    {{_i}}For expanded text on long hover of an abbreviation, include the title attribute.{{/i}}

                                                    +
                                                    +

                                                    {{_i}}An abbreviation of the word attribute is attr.{{/i}}

                                                    +
                                                    + 
                                                    <abbr title="attribute">attr</abbr>
                                                    -

                                                    <abbr class="initialism">

                                                    -

                                                    {{_i}}Add .initialism to an abbreviation for a slightly smaller font-size.{{/i}}

                                                    -
                                                    -

                                                    {{_i}}HTML is the best thing since sliced bread.{{/i}}

                                                    -
                                                    - 
                                                    <abbr title="attribute" class="initialism">attr</abbr>
                                                    +

                                                    <abbr class="initialism">

                                                    +

                                                    {{_i}}Add .initialism to an abbreviation for a slightly smaller font-size.{{/i}}

                                                    +
                                                    +

                                                    {{_i}}HTML is the best thing since sliced bread.{{/i}}

                                                    +
                                                    + 
                                                    <abbr title="attribute" class="initialism">attr</abbr>
                                                    -
                                                    +
                                                    - {{! Addresses }} -

                                                    {{_i}}Addresses{{/i}}

                                                    -

                                                    {{_i}}Present contact information for the nearest ancestor or the entire body of work.{{/i}}

                                                    + {{! Addresses }} +

                                                    {{_i}}Addresses{{/i}}

                                                    +

                                                    {{_i}}Present contact information for the nearest ancestor or the entire body of work.{{/i}}

                                                    -

                                                    <address>

                                                    -

                                                    {{_i}}Preserve formatting by ending all lines with <br>.{{/i}}

                                                    -
                                                    -
                                                    - Twitter, Inc.
                                                    - 795 Folsom Ave, Suite 600
                                                    - San Francisco, CA 94107
                                                    - P: (123) 456-7890 -
                                                    -
                                                    - {{_i}}Full Name{{/i}}
                                                    - {{_i}}first.last@gmail.com{{/i}} -
                                                    -
                                                    +

                                                    <address>

                                                    +

                                                    {{_i}}Preserve formatting by ending all lines with <br>.{{/i}}

                                                    +
                                                    +
                                                    + Twitter, Inc.
                                                    + 795 Folsom Ave, Suite 600
                                                    + San Francisco, CA 94107
                                                    + P: (123) 456-7890 +
                                                    +
                                                    + {{_i}}Full Name{{/i}}
                                                    + {{_i}}first.last@gmail.com{{/i}} +
                                                    + 
                                                     <address>
   <strong>Twitter, Inc.</strong><br>
@@ -151,37 +153,37 @@
                                                    -
                                                    +
                                                    - {{! Blockquotes }} -

                                                    {{_i}}Blockquotes{{/i}}

                                                    -

                                                    {{_i}}For quoting blocks of content from another source within your document.{{/i}}

                                                    + {{! Blockquotes }} +

                                                    {{_i}}Blockquotes{{/i}}

                                                    +

                                                    {{_i}}For quoting blocks of content from another source within your document.{{/i}}

                                                    -

                                                    {{_i}}Default blockqoute{{/i}}

                                                    -

                                                    {{_i}}Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}

                                                    -
                                                    -
                                                    -

                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                    -
                                                    -
                                                    +

                                                    {{_i}}Default blockqoute{{/i}}

                                                    +

                                                    {{_i}}Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}

                                                    +
                                                    +
                                                    +

                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                    +
                                                    + 
                                                     <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
                                                    -

                                                    {{_i}}Blockquote options{{/i}}

                                                    -

                                                    {{_i}}Style and content changes for simple variations on a standard blockquote.{{/i}}

                                                    +

                                                    {{_i}}Blockquote options{{/i}}

                                                    +

                                                    {{_i}}Style and content changes for simple variations on a standard blockquote.{{/i}}

                                                    -

                                                    {{_i}}Naming a source{{/i}}

                                                    -

                                                    {{_i}}Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.{{/i}}

                                                    -
                                                    -
                                                    -

                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                    - {{_i}}Someone famous in Source Title{{/i}} -
                                                    -
                                                    +

                                                    {{_i}}Naming a source{{/i}}

                                                    +

                                                    {{_i}}Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.{{/i}}

                                                    +
                                                    +
                                                    +

                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                    + {{_i}}Someone famous in Source Title{{/i}} +
                                                    + 
                                                     <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -189,14 +191,14 @@
 </blockquote>
                                                    -

                                                    {{_i}}Alternate displays{{/i}}

                                                    -

                                                    {{_i}}Use .pull-right for a floated, right-aligned blockquote.{{/i}}

                                                    -
                                                    -
                                                    -

                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                    - {{_i}}Someone famous in Source Title{{/i}} -
                                                    -
                                                    +

                                                    {{_i}}Alternate displays{{/i}}

                                                    +

                                                    {{_i}}Use .pull-right for a floated, right-aligned blockquote.{{/i}}

                                                    +
                                                    +
                                                    +

                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                                                    + {{_i}}Someone famous in Source Title{{/i}} +
                                                    + 
                                                     <blockquote class="pull-right">
   ...
@@ -204,16 +206,63 @@
                                                    -
                                                    +
                                                    - -

                                                    {{_i}}Lists{{/i}}

                                                    + +

                                                    {{_i}}Lists{{/i}}

                                                    -

                                                    {{_i}}Unordered{{/i}}

                                                    -

                                                    {{_i}}A list of items in which the order does not explicitly matter.{{/i}}

                                                    +

                                                    {{_i}}Unordered{{/i}}

                                                    +

                                                    {{_i}}A list of items in which the order does not explicitly matter.{{/i}}

                                                    +
                                                    +
                                                      +
                                                    • Lorem ipsum dolor sit amet
                                                      • +
                                                    • Consectetur adipiscing elit
                                                      • +
                                                    • Integer molestie lorem at massa
                                                      • +
                                                    • Facilisis in pretium nisl aliquet
                                                      • +
                                                    • Nulla volutpat aliquam velit +
                                                        +
                                                      • Phasellus iaculis neque
                                                        • +
                                                      • Purus sodales ultricies
                                                        • +
                                                      • Vestibulum laoreet porttitor sem
                                                        • +
                                                      • Ac tristique libero volutpat at
                                                        • +
                                                      +
                                                      • +
                                                    • Faucibus porta lacus fringilla vel
                                                      • +
                                                    • Aenean sit amet erat nunc
                                                      • +
                                                    • Eget porttitor lorem
                                                      • +
                                                    +
                                                    +
                                                    +<ul>
+  <li>...</li>
+</ul>
+
                                                    + +

                                                    {{_i}}Ordered{{/i}}

                                                    +

                                                    {{_i}}A list of items in which the order does explicitly matter.{{/i}}

                                                    +
                                                    +
                                                      +
                                                    1. Lorem ipsum dolor sit amet
                                                      2. +
                                                    2. Consectetur adipiscing elit
                                                      3. +
                                                    3. Integer molestie lorem at massa
                                                      4. +
                                                    4. Facilisis in pretium nisl aliquet
                                                      5. +
                                                    5. Nulla volutpat aliquam velit
                                                      6. +
                                                    6. Faucibus porta lacus fringilla vel
                                                      7. +
                                                    7. Aenean sit amet erat nunc
                                                      8. +
                                                    8. Eget porttitor lorem
                                                      9. +
                                                    +
                                                    +
                                                    +<ol>
+  <li>...</li>
+</ol>
+
                                                    + +

                                                    {{_i}}Unstyled{{/i}}

                                                    +

                                                    {{_i}}A list of items with no list-style or additional left padding.{{/i}}

                                                    -
                                                      +
                                                      • Lorem ipsum dolor sit amet
                                                      • Consectetur adipiscing elit
                                                      • Integer molestie lorem at massa
                                                        • @@ -232,71 +281,24 @@ 
                                                    -<ul>
-  <li>...</li>
-</ul>
-
                                                    - -

                                                    {{_i}}Ordered{{/i}}

                                                    -

                                                    {{_i}}A list of items in which the order does explicitly matter.{{/i}}

                                                    -
                                                    -
                                                      -
                                                    1. Lorem ipsum dolor sit amet
                                                      2. -
                                                    2. Consectetur adipiscing elit
                                                      3. -
                                                    3. Integer molestie lorem at massa
                                                      4. -
                                                    4. Facilisis in pretium nisl aliquet
                                                      5. -
                                                    5. Nulla volutpat aliquam velit
                                                      6. -
                                                    6. Faucibus porta lacus fringilla vel
                                                      7. -
                                                    7. Aenean sit amet erat nunc
                                                      8. -
                                                    8. Eget porttitor lorem
                                                      9. -
                                                    -
                                                    -
                                                    -<ol>
-  <li>...</li>
-</ol>
-
                                                    - -

                                                    {{_i}}Unstyled{{/i}}

                                                    -

                                                    {{_i}}A list of items with no list-style or additional left padding.{{/i}}

                                                    -
                                                    -
                                                      -
                                                    • Lorem ipsum dolor sit amet
                                                      • -
                                                    • Consectetur adipiscing elit
                                                      • -
                                                    • Integer molestie lorem at massa
                                                      • -
                                                    • Facilisis in pretium nisl aliquet
                                                      • -
                                                    • Nulla volutpat aliquam velit -
                                                        -
                                                      • Phasellus iaculis neque
                                                        • -
                                                      • Purus sodales ultricies
                                                        • -
                                                      • Vestibulum laoreet porttitor sem
                                                        • -
                                                      • Ac tristique libero volutpat at
                                                        • -
                                                      -
                                                      • -
                                                    • Faucibus porta lacus fringilla vel
                                                      • -
                                                    • Aenean sit amet erat nunc
                                                      • -
                                                    • Eget porttitor lorem
                                                      • -
                                                    -
                                                    -
                                                     <ul class="unstyled">
   <li>...</li>
 </ul>
                                                    -

                                                    {{_i}}Description{{/i}}

                                                    -

                                                    {{_i}}A list of terms with their associated descriptions.{{/i}}

                                                    -
                                                    -
                                                    -
                                                    {{_i}}Description lists{{/i}}
                                                    -
                                                    {{_i}}A description list is perfect for defining terms.{{/i}}
                                                    -
                                                    Euismod
                                                    -
                                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                                    -
                                                    Donec id elit non mi porta gravida at eget metus.
                                                    -
                                                    Malesuada porta
                                                    -
                                                    Etiam porta sem malesuada magna mollis euismod.
                                                    -
                                                    -
                                                    +

                                                    {{_i}}Description{{/i}}

                                                    +

                                                    {{_i}}A list of terms with their associated descriptions.{{/i}}

                                                    +
                                                    +
                                                    +
                                                    {{_i}}Description lists{{/i}}
                                                    +
                                                    {{_i}}A description list is perfect for defining terms.{{/i}}
                                                    +
                                                    Euismod
                                                    +
                                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                                    +
                                                    Donec id elit non mi porta gravida at eget metus.
                                                    +
                                                    Malesuada porta
                                                    +
                                                    Etiam porta sem malesuada magna mollis euismod.
                                                    +
                                                    + 
                                                     <dl>
   <dt>...</dt>
@@ -304,50 +306,50 @@
 </dl>
                                                    -

                                                    {{_i}}Horizontal description{{/i}}

                                                    -

                                                    {{_i}}Make terms and descriptions in <dl> line up side-by-side.{{/i}}

                                                    -
                                                    -
                                                    -
                                                    {{_i}}Description lists{{/i}}
                                                    -
                                                    {{_i}}A description list is perfect for defining terms.{{/i}}
                                                    -
                                                    Euismod
                                                    -
                                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                                    -
                                                    Donec id elit non mi porta gravida at eget metus.
                                                    -
                                                    Malesuada porta
                                                    -
                                                    Etiam porta sem malesuada magna mollis euismod.
                                                    -
                                                    Felis euismod semper eget lacinia
                                                    -
                                                    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                                                    -
                                                    -
                                                    +

                                                    {{_i}}Horizontal description{{/i}}

                                                    +

                                                    {{_i}}Make terms and descriptions in <dl> line up side-by-side.{{/i}}

                                                    +
                                                    +
                                                    +
                                                    {{_i}}Description lists{{/i}}
                                                    +
                                                    {{_i}}A description list is perfect for defining terms.{{/i}}
                                                    +
                                                    Euismod
                                                    +
                                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                                                    +
                                                    Donec id elit non mi porta gravida at eget metus.
                                                    +
                                                    Malesuada porta
                                                    +
                                                    Etiam porta sem malesuada magna mollis euismod.
                                                    +
                                                    Felis euismod semper eget lacinia
                                                    +
                                                    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                                                    +
                                                    + 
                                                     <dl class="dl-horizontal">
   <dt>...</dt>
   <dd>...</dd>
 </dl>
                                                    -

                                                    - {{_i}}Heads up!{{/i}} - {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.{{/i}} -

                                                    -
                                                    +

                                                    + {{_i}}Heads up!{{/i}} + {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.{{/i}} +

                                                    +
                                                    - -
                                                    -
                                                    -

                                                    {{_i}}Code{{/i}} {{_i}}Inline and block code snippets{{/i}}

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    {{_i}}Code{{/i}} {{_i}}Inline and block code snippets{{/i}}

                                                    +
                                                    -

                                                    Inline

                                                    -

                                                    Wrap inline snippets of code with <code>.

                                                    +

                                                    Inline

                                                    +

                                                    Wrap inline snippets of code with <code>.

                                                     {{_i}}For example, <code>section</code> should be wrapped as inline.{{/i}}
                                                    -

                                                    Basic block

                                                    -

                                                    {{_i}}Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}

                                                    +

                                                    Basic block

                                                    +

                                                    {{_i}}Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}

                                                     <p>{{_i}}Sample text here...{{/i}}</p>
                                                    @@ -356,53 +358,53 @@ &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt; </pre> -

                                                    {{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

                                                    -

                                                    {{_i}}You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}

                                                    -
                                                    +

                                                    {{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

                                                    +

                                                    {{_i}}You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}

                                                    +
                                                    - -
                                                    -
                                                    -

                                                    {{_i}}Tables For, you guessed it, tabular data{{/i}}

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    {{_i}}Tables For, you guessed it, tabular data{{/i}}

                                                    +
                                                    -

                                                    {{_i}}Default styles{{/i}}

                                                    -

                                                    {{_i}}For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.{{/i}}

                                                    -
                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
                                                    1MarkOtto@mdo
                                                    2JacobThornton@fat
                                                    3Larrythe Bird@twitter
                                                    -
                                                    {{! /example }} +

                                                    {{_i}}Default styles{{/i}}

                                                    +

                                                    {{_i}}For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.{{/i}}

                                                    +
                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
                                                    1MarkOtto@mdo
                                                    2JacobThornton@fat
                                                    3Larrythe Bird@twitter
                                                    +
                                                    {{! /example }} 
                                                     <table class="table">
   …
@@ -410,168 +412,168 @@
                                                    -
                                                    +
                                                    -

                                                    {{_i}}Optional classes{{/i}}

                                                    -

                                                    {{_i}}Add any of the follow classes to the .table base class.{{/i}}

                                                    +

                                                    {{_i}}Optional classes{{/i}}

                                                    +

                                                    {{_i}}Add any of the follow classes to the .table base class.{{/i}}

                                                    -

                                                    {{_i}}.table-striped{{/i}}

                                                    -

                                                    {{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}

                                                    -
                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
                                                    1MarkOtto@mdo
                                                    2JacobThornton@fat
                                                    3Larrythe Bird@twitter
                                                    -
                                                    {{! /example }} +

                                                    {{_i}}.table-striped{{/i}}

                                                    +

                                                    {{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}

                                                    +
                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
                                                    1MarkOtto@mdo
                                                    2JacobThornton@fat
                                                    3Larrythe Bird@twitter
                                                    +
                                                    {{! /example }} 
                                                     <table class="table table-striped">
   …
 </table>
                                                    -

                                                    {{_i}}.table-bordered{{/i}}

                                                    -

                                                    {{_i}}Add borders and rounded corners to the table.{{/i}}

                                                    -
                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
                                                    1MarkOtto@mdo
                                                    MarkOtto@TwBootstrap
                                                    2JacobThornton@fat
                                                    3Larry the Bird@twitter
                                                    -
                                                    {{! /example }} +

                                                    {{_i}}.table-bordered{{/i}}

                                                    +

                                                    {{_i}}Add borders and rounded corners to the table.{{/i}}

                                                    +
                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
                                                    1MarkOtto@mdo
                                                    MarkOtto@TwBootstrap
                                                    2JacobThornton@fat
                                                    3Larry the Bird@twitter
                                                    +
                                                    {{! /example }} 
                                                     <table class="table table-bordered">
   …
 </table>
                                                    -

                                                    {{_i}}.table-hover{{/i}}

                                                    -

                                                    {{_i}}Enable a hover state on table rows within a <tbody>.{{/i}}

                                                    -
                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
                                                    1MarkOtto@mdo
                                                    2JacobThornton@fat
                                                    3Larry the Bird@twitter
                                                    -
                                                    {{! /example }} +

                                                    {{_i}}.table-hover{{/i}}

                                                    +

                                                    {{_i}}Enable a hover state on table rows within a <tbody>.{{/i}}

                                                    +
                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
                                                    1MarkOtto@mdo
                                                    2JacobThornton@fat
                                                    3Larry the Bird@twitter
                                                    +
                                                    {{! /example }} 
                                                     <table class="table table-hover">
   …
 </table>
                                                    -

                                                    {{_i}}.table-condensed{{/i}}

                                                    -

                                                    {{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}

                                                    -
                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
                                                    1MarkOtto@mdo
                                                    2JacobThornton@fat
                                                    3Larry the Bird@twitter
                                                    -
                                                    {{! /example }} +

                                                    {{_i}}.table-condensed{{/i}}

                                                    +

                                                    {{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}

                                                    +
                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
                                                    1MarkOtto@mdo
                                                    2JacobThornton@fat
                                                    3Larry the Bird@twitter
                                                    +
                                                    {{! /example }} 
                                                     <table class="table table-condensed">
   …
@@ -579,75 +581,75 @@
                                                    -
                                                    +
                                                    -

                                                    {{_i}}Optional row classes{{/i}}

                                                    -

                                                    {{_i}}Use contextual classes to color table rows.{{/i}}

                                                    - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    {{_i}}Class{{/i}}{{_i}}Description{{/i}}
                                                    - .success - {{_i}}Indicates a successful or positive action.{{/i}}
                                                    - .error - {{_i}}Indicates a dangerous or potentially negative action.{{/i}}
                                                    - .info - {{_i}}Used as an alternative to the default styles.{{/i}}
                                                    -
                                                    - +

                                                    {{_i}}Optional row classes{{/i}}

                                                    +

                                                    {{_i}}Use contextual classes to color table rows.{{/i}}

                                                    +
                                                    + + + + - - - - + + - - - - - + + + - - - - - + + + - - - - - + + +
                                                    #{{_i}}Product{{/i}}{{_i}}Payment Taken{{/i}}{{_i}}Status{{/i}}{{_i}}Class{{/i}}{{_i}}Description{{/i}}
                                                    1TB - Monthly01/04/2012Approved
                                                    + .success + {{_i}}Indicates a successful or positive action.{{/i}}
                                                    2TB - Monthly02/04/2012Declined
                                                    + .error + {{_i}}Indicates a dangerous or potentially negative action.{{/i}}
                                                    3TB - Monthly03/04/2012Pending
                                                    + .info + {{_i}}Used as an alternative to the default styles.{{/i}}
                                                    -
                                                    {{! /example }} +
                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    #{{_i}}Product{{/i}}{{_i}}Payment Taken{{/i}}{{_i}}Status{{/i}}
                                                    1TB - Monthly01/04/2012Approved
                                                    2TB - Monthly02/04/2012Declined
                                                    3TB - Monthly03/04/2012Pending
                                                    +
                                                    {{! /example }} 
                                                     ...
   <tr class="success">
@@ -660,82 +662,82 @@
                                                    -
                                                    +
                                                    -

                                                    {{_i}}Supported table markup{{/i}}

                                                    -

                                                    {{_i}}List of supported table HTML elements and how they should be used.{{/i}}

                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    {{_i}}Tag{{/i}}{{_i}}Description{{/i}}
                                                    - <table> - - {{_i}}Wrapping element for displaying data in a tabular format{{/i}} -
                                                    - <thead> - - {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}} -
                                                    - <tbody> - - {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}} -
                                                    - <tr> - - {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}} -
                                                    - <td> - - {{_i}}Default table cell{{/i}} -
                                                    - <th> - - {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
                                                    - {{_i}}Must be used within a <thead>{{/i}} -
                                                    - <caption> - - {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} -
                                                    +

                                                    {{_i}}Supported table markup{{/i}}

                                                    +

                                                    {{_i}}List of supported table HTML elements and how they should be used.{{/i}}

                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    {{_i}}Tag{{/i}}{{_i}}Description{{/i}}
                                                    + <table> + + {{_i}}Wrapping element for displaying data in a tabular format{{/i}} +
                                                    + <thead> + + {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}} +
                                                    + <tbody> + + {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}} +
                                                    + <tr> + + {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}} +
                                                    + <td> + + {{_i}}Default table cell{{/i}} +
                                                    + <th> + + {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
                                                    + {{_i}}Must be used within a <thead>{{/i}} +
                                                    + <caption> + + {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} + 
                                                     <table>
   <thead>
@@ -753,29 +755,29 @@
 </table>
                                                    -
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    {{_i}}Forms{{/i}}

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    {{_i}}Forms{{/i}}

                                                    +
                                                    -

                                                    {{_i}}Default styles{{/i}}

                                                    -

                                                    {{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

                                                    -
                                                    - Legend - - -

                                                    {{_i}}Example block-level help text here.{{/i}}

                                                    - - -
                                                    {{! /example }} +

                                                    {{_i}}Default styles{{/i}}

                                                    +

                                                    {{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

                                                    +
                                                    + Legend + + +

                                                    {{_i}}Example block-level help text here.{{/i}}

                                                    + + +
                                                    {{! /example }} 
                                                     <form class="well">
   <label>{{_i}}Label name{{/i}}</label>
@@ -789,18 +791,18 @@
                                                    -
                                                    +
                                                    -

                                                    {{_i}}Optional layouts{{/i}}

                                                    -

                                                    {{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}

                                                    +

                                                    {{_i}}Optional layouts{{/i}}

                                                    +

                                                    {{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}

                                                    -

                                                    {{_i}}Search form{{/i}}

                                                    -

                                                    {{_i}}Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.{{/i}}

                                                    -
                                                    - - -
                                                    {{! /example }} +

                                                    {{_i}}Search form{{/i}}

                                                    +

                                                    {{_i}}Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.{{/i}}

                                                    +
                                                    + + +
                                                    {{! /example }} 
                                                     <form class="form-search">
   <input type="text" class="input-medium search-query">
@@ -808,16 +810,16 @@
 </form>
                                                    -

                                                    {{_i}}Inline form{{/i}}

                                                    -

                                                    {{_i}}Add .form-inline for left-aligned labels and inline-block controls for a compact layout.{{/i}}

                                                    -
                                                    - - - - -
                                                    {{! /example }} +

                                                    {{_i}}Inline form{{/i}}

                                                    +

                                                    {{_i}}Add .form-inline for left-aligned labels and inline-block controls for a compact layout.{{/i}}

                                                    +
                                                    + + + + +
                                                    {{! /example }} 
                                                     <form class="form-inline">
   <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
@@ -829,37 +831,37 @@
 </form>
                                                    -

                                                    {{_i}}Horizontal form{{/i}}

                                                    -

                                                    {{_i}}Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:{{/i}}

                                                    -
                                                      -
                                                    • {{_i}}Add .form-horizontal to the form{{/i}}
                                                      • -
                                                    • {{_i}}Wrap labels and controls in .control-group{{/i}}
                                                      • -
                                                    • {{_i}}Add .control-label to the label{{/i}}
                                                      • -
                                                    • {{_i}}Wrap any associated controls in .controls for proper alignment{{/i}}
                                                      • -
                                                    -
                                                    - Legend -
                                                    - -
                                                    - +

                                                    {{_i}}Horizontal form{{/i}}

                                                    +

                                                    {{_i}}Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:{{/i}}

                                                    +
                                                      +
                                                    • {{_i}}Add .form-horizontal to the form{{/i}}
                                                      • +
                                                    • {{_i}}Wrap labels and controls in .control-group{{/i}}
                                                      • +
                                                    • {{_i}}Add .control-label to the label{{/i}}
                                                      • +
                                                    • {{_i}}Wrap any associated controls in .controls for proper alignment{{/i}}
                                                      • +
                                                    + + Legend +
                                                    + +
                                                    + +
                                                    -
                                                    -
                                                    - -
                                                    - +
                                                    + +
                                                    + +
                                                    -
                                                    -
                                                    -
                                                    - - +
                                                    +
                                                    + + +
                                                    -
                                                    - + 
                                                     <form class="form-horizontal">
   <div class="control-group">
@@ -886,49 +888,49 @@
                                                    -
                                                    +
                                                    -

                                                    {{_i}}Supported form controls{{/i}}

                                                    -

                                                    {{_i}}Examples of standard form controls supported in an example form layout.{{/i}}

                                                    +

                                                    {{_i}}Supported form controls{{/i}}

                                                    +

                                                    {{_i}}Examples of standard form controls supported in an example form layout.{{/i}}

                                                    -

                                                    {{_i}}Inputs{{/i}}

                                                    -

                                                    {{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}

                                                    -

                                                    {{_i}}Requires the use of a specified type at all times.{{/i}}

                                                    -
                                                    - -
                                                    +

                                                    {{_i}}Inputs{{/i}}

                                                    +

                                                    {{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}

                                                    +

                                                    {{_i}}Requires the use of a specified type at all times.{{/i}}

                                                    +
                                                    + + 
                                                     <input type="text" placeholder="Text input">
                                                    -

                                                    {{_i}}Textarea{{/i}}

                                                    -

                                                    {{_i}}Form control which supports multiple lines of text. Change row attribute as necessary.{{/i}}

                                                    -
                                                    - -
                                                    +

                                                    {{_i}}Textarea{{/i}}

                                                    +

                                                    {{_i}}Form control which supports multiple lines of text. Change row attribute as necessary.{{/i}}

                                                    +
                                                    + + 
                                                     <textarea id="textarea" rows="3"></textarea>
                                                    -

                                                    {{_i}}Checkboxes and radios{{/i}}

                                                    -

                                                    {{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}

                                                    -

                                                    {{_i}}Default (stacked){{/i}}

                                                    -
                                                    - -
                                                    - - -
                                                    +

                                                    {{_i}}Checkboxes and radios{{/i}}

                                                    +

                                                    {{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}

                                                    +

                                                    {{_i}}Default (stacked){{/i}}

                                                    +
                                                    + +
                                                    + + + 
                                                     <label class="checkbox">
   <input type="checkbox" value="">
@@ -945,19 +947,19 @@
 </label>
                                                    -

                                                    {{_i}}Inline checkboxes{{/i}}

                                                    -

                                                    {{_i}}Add the .inline class to a series of checkboxes or radios for controls appear on the same line.{{/i}}

                                                    -
                                                    - - - -
                                                    +

                                                    {{_i}}Inline checkboxes{{/i}}

                                                    +

                                                    {{_i}}Add the .inline class to a series of checkboxes or radios for controls appear on the same line.{{/i}}

                                                    +
                                                    + + + + 
                                                     <label class="checkbox inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -970,25 +972,25 @@
 </label>
                                                    -

                                                    {{_i}}Selects{{/i}}

                                                    -

                                                    {{_i}}Use the default option or specify a multiple="multiple" to show multiple options at once.{{/i}}

                                                    -
                                                    - -
                                                    - -
                                                    +

                                                    {{_i}}Selects{{/i}}

                                                    +

                                                    {{_i}}Use the default option or specify a multiple="multiple" to show multiple options at once.{{/i}}

                                                    +
                                                    + +
                                                    + + 
                                                     <select>
   <option>something</option>
@@ -1008,28 +1010,28 @@
                                                    -
                                                    +
                                                    -

                                                    {{_i}}Extending form controls{{/i}}

                                                    -

                                                    {{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}

                                                    +

                                                    {{_i}}Extending form controls{{/i}}

                                                    +

                                                    {{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}

                                                    -

                                                    {{_i}}Prepended and appended inputs{{/i}}

                                                    -

                                                    {{_i}}Add text or buttons before or after any text-based input. Do note that select elements are not supported here.{{/i}}

                                                    +

                                                    {{_i}}Prepended and appended inputs{{/i}}

                                                    +

                                                    {{_i}}Add text or buttons before or after any text-based input. Do note that select elements are not supported here.{{/i}}

                                                    -

                                                    {{_i}}Default options{{/i}}

                                                    -

                                                    {{_i}}Wrap a .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

                                                    -
                                                    -
                                                    - @ - -
                                                    -
                                                    -
                                                    - - .00 -
                                                    -
                                                    +

                                                    {{_i}}Default options{{/i}}

                                                    +

                                                    {{_i}}Wrap a .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

                                                    +
                                                    +
                                                    + @ + +
                                                    +
                                                    +
                                                    + + .00 +
                                                    + 
                                                     <div class="input-prepend">
   <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
@@ -1039,35 +1041,35 @@
 </div>
                                                    -

                                                    {{_i}}Combined{{/i}}

                                                    -

                                                    {{_i}}Use both classes and two instances of .add-on to prepend and append an input.{{/i}}

                                                    -
                                                    -
                                                    - $ - - .00 -
                                                    -
                                                    +

                                                    {{_i}}Combined{{/i}}

                                                    +

                                                    {{_i}}Use both classes and two instances of .add-on to prepend and append an input.{{/i}}

                                                    +
                                                    +
                                                    + $ + + .00 +
                                                    + 
                                                     <div class="input-prepend input-append">
   <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
 </div>
                                                    -

                                                    {{_i}}Buttons instead of text{{/i}}

                                                    -

                                                    {{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

                                                    -
                                                    -
                                                    - - -
                                                    -
                                                    -
                                                    - - - -
                                                    -
                                                    +

                                                    {{_i}}Buttons instead of text{{/i}}

                                                    +

                                                    {{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

                                                    +
                                                    +
                                                    + + +
                                                    +
                                                    +
                                                    + + + +
                                                    + 
                                                     <div class="input-append">
   <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
@@ -1078,17 +1080,17 @@
 </div>
                                                    -

                                                    {{_i}}Search form{{/i}}

                                                    -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    {{! /example }} +

                                                    {{_i}}Search form{{/i}}

                                                    +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    +
                                                    {{! /example }} 
                                                     <form class="form-search">
   <input type="text" class="span2 search-query">
@@ -1096,20 +1098,20 @@
 </form>
                                                    -

                                                    {{_i}}Control sizing{{/i}}

                                                    -

                                                    {{_i}}Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.{{/i}}

                                                    +

                                                    {{_i}}Control sizing{{/i}}

                                                    +

                                                    {{_i}}Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.{{/i}}

                                                    -

                                                    {{_i}}Relative sizing{{/i}}

                                                    -
                                                    -
                                                    - - - - - - -
                                                    -
                                                    +

                                                    {{_i}}Relative sizing{{/i}}

                                                    +
                                                    +
                                                    + + + + + + +
                                                    + 
                                                     <input class="input-mini" type="text">
 <input class="input-small" type="text">
@@ -1118,68 +1120,68 @@
 <input class="input-xlarge" type="text">
 <input class="input-xxlarge" type="text">
                                                    -

                                                    - {{_i}}Heads up!{{/i}} In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. -

                                                    +

                                                    + {{_i}}Heads up!{{/i}} In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

                                                    -

                                                    {{_i}}Grid sizing{{/i}}

                                                    -

                                                    {{_i}}Use .span1 to .span12 for inputs that match the same sizes of the grid columns.{{/i}}

                                                    -
                                                    -
                                                    - - - - - - -
                                                    -
                                                    +

                                                    {{_i}}Grid sizing{{/i}}

                                                    +

                                                    {{_i}}Use .span1 to .span12 for inputs that match the same sizes of the grid columns.{{/i}}

                                                    +
                                                    +
                                                    + + + + + + +
                                                    + 
                                                     <input class="span1" type="text">
 <input class="span2" type="text">
 <input class="span3" type="text">
                                                    -

                                                    {{_i}}For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}

                                                    -
                                                    -
                                                    - -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    +

                                                    {{_i}}For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}

                                                    +
                                                    +
                                                    + +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    + 
                                                     <div class="controls controls-row">
   <input class="span4" type="text" placeholder=".span4">
@@ -1187,23 +1189,23 @@
 </div>
                                                    -

                                                    {{_i}}Uneditable inputs{{/i}}

                                                    -

                                                    {{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}

                                                    -
                                                    - Some value here -
                                                    +

                                                    {{_i}}Uneditable inputs{{/i}}

                                                    +

                                                    {{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}

                                                    +
                                                    + Some value here + 
                                                       <span class="input-xlarge uneditable-input">Some value here</span>
                                                    -

                                                    {{_i}}Form actions{{/i}}

                                                    -

                                                    {{_i}}End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.{{/i}}

                                                    -
                                                    -
                                                    - - -
                                                    -
                                                    +

                                                    {{_i}}Form actions{{/i}}

                                                    +

                                                    {{_i}}End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.{{/i}}

                                                    +
                                                    +
                                                    + + +
                                                    + 
                                                     <div class="form-actions">
   <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
@@ -1211,76 +1213,76 @@
 </div>
                                                    -

                                                    {{_i}}Help text{{/i}}

                                                    -

                                                    {{_i}}Inline and block level support for help text that appears around form controls.{{/i}}

                                                    -

                                                    {{_i}}Inline help{{/i}}

                                                    -
                                                    - Inline help text -
                                                    +

                                                    {{_i}}Help text{{/i}}

                                                    +

                                                    {{_i}}Inline and block level support for help text that appears around form controls.{{/i}}

                                                    +

                                                    {{_i}}Inline help{{/i}}

                                                    +
                                                    + Inline help text + 
                                                     <span class="help-inline">Inline help text</span>
                                                    -

                                                    {{_i}}Block help{{/i}}

                                                    -
                                                    - - A longer block of help text that breaks onto a new line and may extend beyond one line. -
                                                    +

                                                    {{_i}}Block help{{/i}}

                                                    +
                                                    + + A longer block of help text that breaks onto a new line and may extend beyond one line. + 
                                                     <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
                                                    -
                                                    +
                                                    -

                                                    {{_i}}Form control states{{/i}}

                                                    -

                                                    {{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}

                                                    +

                                                    {{_i}}Form control states{{/i}}

                                                    +

                                                    {{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}

                                                    -

                                                    {{_i}}Input focus{{/i}}

                                                    -

                                                    {{_i}}We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.{{/i}}

                                                    -
                                                    - -
                                                    -
                                                    -<input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
-
                                                    +

                                                    {{_i}}Input focus{{/i}}

                                                    +

                                                    {{_i}}We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.{{/i}}

                                                    +
                                                    + +
                                                    + 
                                                    +  <input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
+
                                                    -

                                                    {{_i}}Disabled inputs{{/i}}

                                                    -

                                                    {{_i}}Add the disabled attribute on an input to prevent user input and trigger a slightly different look.{{/i}}

                                                    -
                                                    - -
                                                    +

                                                    {{_i}}Disabled inputs{{/i}}

                                                    +

                                                    {{_i}}Add the disabled attribute on an input to prevent user input and trigger a slightly different look.{{/i}}

                                                    +
                                                    + + 
                                                     <input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here...{{/i}}" disabled>
                                                    -

                                                    {{_i}}Validation states{{/i}}

                                                    -

                                                    {{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}

                                                    +

                                                    {{_i}}Validation states{{/i}}

                                                    +

                                                    {{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}

                                                    -
                                                    -
                                                    - -
                                                    - - {{_i}}Something may have gone wrong{{/i}} + +
                                                    + +
                                                    + + {{_i}}Something may have gone wrong{{/i}} +
                                                    -
                                                    -
                                                    - -
                                                    - - {{_i}}Please correct the error{{/i}} +
                                                    + +
                                                    + + {{_i}}Please correct the error{{/i}} +
                                                    -
                                                    -
                                                    - -
                                                    - - {{_i}}Woohoo!{{/i}} +
                                                    + +
                                                    + + {{_i}}Woohoo!{{/i}} +
                                                    -
                                                    - + 
                                                     <div class="control-group warning">
   <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
@@ -1305,138 +1307,138 @@
 </div>
                                                    -
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    {{_i}}Buttons{{/i}}

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    {{_i}}Buttons{{/i}}

                                                    +
                                                    -

                                                    Default buttons

                                                    -

                                                    {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.{{/i}}

                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    {{_i}}Button{{/i}}{{_i}}class=""{{/i}}{{_i}}Description{{/i}}
                                                    btn{{_i}}Standard gray button with gradient{{/i}}
                                                    btn btn-primary{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
                                                    btn btn-info{{_i}}Used as an alternative to the default styles{{/i}}
                                                    btn btn-success{{_i}}Indicates a successful or positive action{{/i}}
                                                    btn btn-warning{{_i}}Indicates caution should be taken with this action{{/i}}
                                                    btn btn-danger{{_i}}Indicates a dangerous or potentially negative action{{/i}}
                                                    btn btn-inverse{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}
                                                    btn btn-link{{_i}}Deemphasize a button by making it look like a link while maintaining button behavior{{/i}}
                                                    +

                                                    Default buttons

                                                    +

                                                    {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.{{/i}}

                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    {{_i}}Button{{/i}}{{_i}}class=""{{/i}}{{_i}}Description{{/i}}
                                                    btn{{_i}}Standard gray button with gradient{{/i}}
                                                    btn btn-primary{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
                                                    btn btn-info{{_i}}Used as an alternative to the default styles{{/i}}
                                                    btn btn-success{{_i}}Indicates a successful or positive action{{/i}}
                                                    btn btn-warning{{_i}}Indicates caution should be taken with this action{{/i}}
                                                    btn btn-danger{{_i}}Indicates a dangerous or potentially negative action{{/i}}
                                                    btn btn-inverse{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}
                                                    btn btn-link{{_i}}Deemphasize a button by making it look like a link while maintaining button behavior{{/i}}
                                                    -

                                                    {{_i}}Cross browser compatibility{{/i}}

                                                    -

                                                    {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}

                                                    +

                                                    {{_i}}Cross browser compatibility{{/i}}

                                                    +

                                                    {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}

                                                    -
                                                    +
                                                    -

                                                    {{_i}}Button sizes{{/i}}

                                                    -

                                                    {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}

                                                    -

                                                    - - -

                                                    -

                                                    - - -

                                                    -

                                                    - - -

                                                    +

                                                    {{_i}}Button sizes{{/i}}

                                                    +

                                                    {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}

                                                    +

                                                    + + +

                                                    +

                                                    + + +

                                                    +

                                                    + + +

                                                    -
                                                    +
                                                    -

                                                    {{_i}}Disabled state{{/i}}

                                                    -

                                                    {{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}

                                                    +

                                                    {{_i}}Disabled state{{/i}}

                                                    +

                                                    {{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}

                                                    -

                                                    Anchor element

                                                    -

                                                    {{_i}}Add the .disabled class to <a> buttons.{{/i}}

                                                    -

                                                    - {{_i}}Primary link{{/i}} - {{_i}}Link{{/i}} -

                                                    +

                                                    Anchor element

                                                    +

                                                    {{_i}}Add the .disabled class to <a> buttons.{{/i}}

                                                    +

                                                    + {{_i}}Primary link{{/i}} + {{_i}}Link{{/i}} + 

                                                     <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
 <a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
                                                    -

                                                    - {{_i}}Heads up!{{/i}} - {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.{{/i}} -

                                                    +

                                                    + {{_i}}Heads up!{{/i}} + {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.{{/i}} +

                                                    -

                                                    Button element

                                                    -

                                                    {{_i}}Add the disabled attribute to <button> buttons.{{/i}}

                                                    -

                                                    - - -

                                                    +

                                                    Button element

                                                    +

                                                    {{_i}}Add the disabled attribute to <button> buttons.{{/i}}

                                                    +

                                                    + + + 

                                                     <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
 <button type="button" class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
                                                    -
                                                    +
                                                    -

                                                    {{_i}}One class, multiple tags{{/i}}

                                                    -

                                                    {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}

                                                    -
                                                    - {{_i}}Link{{/i}} - - - -
                                                    +

                                                    {{_i}}One class, multiple tags{{/i}}

                                                    +

                                                    {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}

                                                    +
                                                    + {{_i}}Link{{/i}} + + + + 
                                                     <a class="btn" href="">{{_i}}Link{{/i}}</a>
 <button class="btn" type="submit">
@@ -1447,248 +1449,250 @@
 <input class="btn" type="submit"
          value="{{_i}}Submit{{/i}}">
                                                    -

                                                    {{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}

                                                    +

                                                    {{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}

                                                    -
                                                    +
                                                    - -
                                                    -
                                                    -

                                                    {{_i}}Icons Graciously provided by Glyphicons{{/i}}

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    {{_i}}Icons Graciously provided by Glyphicons{{/i}}

                                                    +
                                                    -

                                                    {{_i}}Icon glyphs{{/i}}

                                                    -

                                                    {{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.{{/i}}

                                                    -
                                                      -
                                                    • icon-glass
                                                      • -
                                                    • icon-music
                                                      • -
                                                    • icon-search
                                                      • -
                                                    • icon-envelope
                                                      • -
                                                    • icon-heart
                                                      • -
                                                    • icon-star
                                                      • -
                                                    • icon-star-empty
                                                      • -
                                                    • icon-user
                                                      • -
                                                    • icon-film
                                                      • -
                                                    • icon-th-large
                                                      • -
                                                    • icon-th
                                                      • -
                                                    • icon-th-list
                                                      • -
                                                    • icon-ok
                                                      • -
                                                    • icon-remove
                                                      • -
                                                    • icon-zoom-in
                                                      • -
                                                    • icon-zoom-out
                                                      • -
                                                    • icon-off
                                                      • -
                                                    • icon-signal
                                                      • -
                                                    • icon-cog
                                                      • -
                                                    • icon-trash
                                                      • -
                                                    • icon-home
                                                      • -
                                                    • icon-file
                                                      • -
                                                    • icon-time
                                                      • -
                                                    • icon-road
                                                      • -
                                                    • icon-download-alt
                                                      • -
                                                    • icon-download
                                                      • -
                                                    • icon-upload
                                                      • -
                                                    • icon-inbox
                                                      • +

                                                      {{_i}}Icon glyphs{{/i}}

                                                      +

                                                      {{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.{{/i}}

                                                      +
                                                        +
                                                      • icon-glass
                                                        • +
                                                      • icon-music
                                                        • +
                                                      • icon-search
                                                        • +
                                                      • icon-envelope
                                                        • +
                                                      • icon-heart
                                                        • +
                                                      • icon-star
                                                        • +
                                                      • icon-star-empty
                                                        • +
                                                      • icon-user
                                                        • +
                                                      • icon-film
                                                        • +
                                                      • icon-th-large
                                                        • +
                                                      • icon-th
                                                        • +
                                                      • icon-th-list
                                                        • +
                                                      • icon-ok
                                                        • +
                                                      • icon-remove
                                                        • +
                                                      • icon-zoom-in
                                                        • +
                                                      • icon-zoom-out
                                                        • +
                                                      • icon-off
                                                        • +
                                                      • icon-signal
                                                        • +
                                                      • icon-cog
                                                        • +
                                                      • icon-trash
                                                        • +
                                                      • icon-home
                                                        • +
                                                      • icon-file
                                                        • +
                                                      • icon-time
                                                        • +
                                                      • icon-road
                                                        • +
                                                      • icon-download-alt
                                                        • +
                                                      • icon-download
                                                        • +
                                                      • icon-upload
                                                        • +
                                                      • icon-inbox
                                                        • -
                                                      • icon-play-circle
                                                        • -
                                                      • icon-repeat
                                                        • -
                                                      • icon-refresh
                                                        • -
                                                      • icon-list-alt
                                                        • -
                                                      • icon-lock
                                                        • -
                                                      • icon-flag
                                                        • -
                                                      • icon-headphones
                                                        • -
                                                      • icon-volume-off
                                                        • -
                                                      • icon-volume-down
                                                        • -
                                                      • icon-volume-up
                                                        • -
                                                      • icon-qrcode
                                                        • -
                                                      • icon-barcode
                                                        • -
                                                      • icon-tag
                                                        • -
                                                      • icon-tags
                                                        • -
                                                      • icon-book
                                                        • -
                                                      • icon-bookmark
                                                        • -
                                                      • icon-print
                                                        • -
                                                      • icon-camera
                                                        • -
                                                      • icon-font
                                                        • -
                                                      • icon-bold
                                                        • -
                                                      • icon-italic
                                                        • -
                                                      • icon-text-height
                                                        • -
                                                      • icon-text-width
                                                        • -
                                                      • icon-align-left
                                                        • -
                                                      • icon-align-center
                                                        • -
                                                      • icon-align-right
                                                        • -
                                                      • icon-align-justify
                                                        • -
                                                      • icon-list
                                                        • +
                                                      • icon-play-circle
                                                        • +
                                                      • icon-repeat
                                                        • +
                                                      • icon-refresh
                                                        • +
                                                      • icon-list-alt
                                                        • +
                                                      • icon-lock
                                                        • +
                                                      • icon-flag
                                                        • +
                                                      • icon-headphones
                                                        • +
                                                      • icon-volume-off
                                                        • +
                                                      • icon-volume-down
                                                        • +
                                                      • icon-volume-up
                                                        • +
                                                      • icon-qrcode
                                                        • +
                                                      • icon-barcode
                                                        • +
                                                      • icon-tag
                                                        • +
                                                      • icon-tags
                                                        • +
                                                      • icon-book
                                                        • +
                                                      • icon-bookmark
                                                        • +
                                                      • icon-print
                                                        • +
                                                      • icon-camera
                                                        • +
                                                      • icon-font
                                                        • +
                                                      • icon-bold
                                                        • +
                                                      • icon-italic
                                                        • +
                                                      • icon-text-height
                                                        • +
                                                      • icon-text-width
                                                        • +
                                                      • icon-align-left
                                                        • +
                                                      • icon-align-center
                                                        • +
                                                      • icon-align-right
                                                        • +
                                                      • icon-align-justify
                                                        • +
                                                      • icon-list
                                                        • -
                                                      • icon-indent-left
                                                        • -
                                                      • icon-indent-right
                                                        • -
                                                      • icon-facetime-video
                                                        • -
                                                      • icon-picture
                                                        • -
                                                      • icon-pencil
                                                        • -
                                                      • icon-map-marker
                                                        • -
                                                      • icon-adjust
                                                        • -
                                                      • icon-tint
                                                        • -
                                                      • icon-edit
                                                        • -
                                                      • icon-share
                                                        • -
                                                      • icon-check
                                                        • -
                                                      • icon-move
                                                        • -
                                                      • icon-step-backward
                                                        • -
                                                      • icon-fast-backward
                                                        • -
                                                      • icon-backward
                                                        • -
                                                      • icon-play
                                                        • -
                                                      • icon-pause
                                                        • -
                                                      • icon-stop
                                                        • -
                                                      • icon-forward
                                                        • -
                                                      • icon-fast-forward
                                                        • -
                                                      • icon-step-forward
                                                        • -
                                                      • icon-eject
                                                        • -
                                                      • icon-chevron-left
                                                        • -
                                                      • icon-chevron-right
                                                        • -
                                                      • icon-plus-sign
                                                        • -
                                                      • icon-minus-sign
                                                        • -
                                                      • icon-remove-sign
                                                        • -
                                                      • icon-ok-sign
                                                        • +
                                                      • icon-indent-left
                                                        • +
                                                      • icon-indent-right
                                                        • +
                                                      • icon-facetime-video
                                                        • +
                                                      • icon-picture
                                                        • +
                                                      • icon-pencil
                                                        • +
                                                      • icon-map-marker
                                                        • +
                                                      • icon-adjust
                                                        • +
                                                      • icon-tint
                                                        • +
                                                      • icon-edit
                                                        • +
                                                      • icon-share
                                                        • +
                                                      • icon-check
                                                        • +
                                                      • icon-move
                                                        • +
                                                      • icon-step-backward
                                                        • +
                                                      • icon-fast-backward
                                                        • +
                                                      • icon-backward
                                                        • +
                                                      • icon-play
                                                        • +
                                                      • icon-pause
                                                        • +
                                                      • icon-stop
                                                        • +
                                                      • icon-forward
                                                        • +
                                                      • icon-fast-forward
                                                        • +
                                                      • icon-step-forward
                                                        • +
                                                      • icon-eject
                                                        • +
                                                      • icon-chevron-left
                                                        • +
                                                      • icon-chevron-right
                                                        • +
                                                      • icon-plus-sign
                                                        • +
                                                      • icon-minus-sign
                                                        • +
                                                      • icon-remove-sign
                                                        • +
                                                      • icon-ok-sign
                                                        • -
                                                      • icon-question-sign
                                                        • -
                                                      • icon-info-sign
                                                        • -
                                                      • icon-screenshot
                                                        • -
                                                      • icon-remove-circle
                                                        • -
                                                      • icon-ok-circle
                                                        • -
                                                      • icon-ban-circle
                                                        • -
                                                      • icon-arrow-left
                                                        • -
                                                      • icon-arrow-right
                                                        • -
                                                      • icon-arrow-up
                                                        • -
                                                      • icon-arrow-down
                                                        • -
                                                      • icon-share-alt
                                                        • -
                                                      • icon-resize-full
                                                        • -
                                                      • icon-resize-small
                                                        • -
                                                      • icon-plus
                                                        • -
                                                      • icon-minus
                                                        • -
                                                      • icon-asterisk
                                                        • -
                                                      • icon-exclamation-sign
                                                        • -
                                                      • icon-gift
                                                        • -
                                                      • icon-leaf
                                                        • -
                                                      • icon-fire
                                                        • -
                                                      • icon-eye-open
                                                        • -
                                                      • icon-eye-close
                                                        • -
                                                      • icon-warning-sign
                                                        • -
                                                      • icon-plane
                                                        • -
                                                      • icon-calendar
                                                        • -
                                                      • icon-random
                                                        • -
                                                      • icon-comment
                                                        • -
                                                      • icon-magnet
                                                        • +
                                                      • icon-question-sign
                                                        • +
                                                      • icon-info-sign
                                                        • +
                                                      • icon-screenshot
                                                        • +
                                                      • icon-remove-circle
                                                        • +
                                                      • icon-ok-circle
                                                        • +
                                                      • icon-ban-circle
                                                        • +
                                                      • icon-arrow-left
                                                        • +
                                                      • icon-arrow-right
                                                        • +
                                                      • icon-arrow-up
                                                        • +
                                                      • icon-arrow-down
                                                        • +
                                                      • icon-share-alt
                                                        • +
                                                      • icon-resize-full
                                                        • +
                                                      • icon-resize-small
                                                        • +
                                                      • icon-plus
                                                        • +
                                                      • icon-minus
                                                        • +
                                                      • icon-asterisk
                                                        • +
                                                      • icon-exclamation-sign
                                                        • +
                                                      • icon-gift
                                                        • +
                                                      • icon-leaf
                                                        • +
                                                      • icon-fire
                                                        • +
                                                      • icon-eye-open
                                                        • +
                                                      • icon-eye-close
                                                        • +
                                                      • icon-warning-sign
                                                        • +
                                                      • icon-plane
                                                        • +
                                                      • icon-calendar
                                                        • +
                                                      • icon-random
                                                        • +
                                                      • icon-comment
                                                        • +
                                                      • icon-magnet
                                                        • -
                                                      • icon-chevron-up
                                                        • -
                                                      • icon-chevron-down
                                                        • -
                                                      • icon-retweet
                                                        • -
                                                      • icon-shopping-cart
                                                        • -
                                                      • icon-folder-close
                                                        • -
                                                      • icon-folder-open
                                                        • -
                                                      • icon-resize-vertical
                                                        • -
                                                      • icon-resize-horizontal
                                                        • -
                                                      • icon-hdd
                                                        • -
                                                      • icon-bullhorn
                                                        • -
                                                      • icon-bell
                                                        • -
                                                      • icon-certificate
                                                        • -
                                                      • icon-thumbs-up
                                                        • -
                                                      • icon-thumbs-down
                                                        • -
                                                      • icon-hand-right
                                                        • -
                                                      • icon-hand-left
                                                        • -
                                                      • icon-hand-up
                                                        • -
                                                      • icon-hand-down
                                                        • -
                                                      • icon-circle-arrow-right
                                                        • -
                                                      • icon-circle-arrow-left
                                                        • -
                                                      • icon-circle-arrow-up
                                                        • -
                                                      • icon-circle-arrow-down
                                                        • -
                                                      • icon-globe
                                                        • -
                                                      • icon-wrench
                                                        • -
                                                      • icon-tasks
                                                        • -
                                                      • icon-filter
                                                        • -
                                                      • icon-briefcase
                                                        • -
                                                      • icon-fullscreen
                                                        • -
                                                      +
                                                    • icon-chevron-up
                                                      • +
                                                    • icon-chevron-down
                                                      • +
                                                    • icon-retweet
                                                      • +
                                                    • icon-shopping-cart
                                                      • +
                                                    • icon-folder-close
                                                      • +
                                                    • icon-folder-open
                                                      • +
                                                    • icon-resize-vertical
                                                      • +
                                                    • icon-resize-horizontal
                                                      • +
                                                    • icon-hdd
                                                      • +
                                                    • icon-bullhorn
                                                      • +
                                                    • icon-bell
                                                      • +
                                                    • icon-certificate
                                                      • +
                                                    • icon-thumbs-up
                                                      • +
                                                    • icon-thumbs-down
                                                      • +
                                                    • icon-hand-right
                                                      • +
                                                    • icon-hand-left
                                                      • +
                                                    • icon-hand-up
                                                      • +
                                                    • icon-hand-down
                                                      • +
                                                    • icon-circle-arrow-right
                                                      • +
                                                    • icon-circle-arrow-left
                                                      • +
                                                    • icon-circle-arrow-up
                                                      • +
                                                    • icon-circle-arrow-down
                                                      • +
                                                    • icon-globe
                                                      • +
                                                    • icon-wrench
                                                      • +
                                                    • icon-tasks
                                                      • +
                                                    • icon-filter
                                                      • +
                                                    • icon-briefcase
                                                      • +
                                                    • icon-fullscreen
                                                      • +
                                                    -

                                                    Glyphicons attribution

                                                    -

                                                    {{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}

                                                    +

                                                    Glyphicons attribution

                                                    +

                                                    {{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}

                                                    -
                                                    +
                                                    -

                                                    {{_i}}How to use{{/i}}

                                                    -

                                                    {{_i}}All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:{{/i}}

                                                    +

                                                    {{_i}}How to use{{/i}}

                                                    +

                                                    {{_i}}All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:{{/i}}

                                                     <i class="icon-search"></i>
                                                    -

                                                    {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}

                                                    +

                                                    {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}

                                                     <i class="icon-search icon-white"></i>
                                                    -

                                                    - {{_i}}Heads up!{{/i}} - {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}} -

                                                    +

                                                    + {{_i}}Heads up!{{/i}} + {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}} +

                                                    -
                                                    +
                                                    -

                                                    {{_i}}Icon examples{{/i}}

                                                    -

                                                    {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

                                                    +

                                                    {{_i}}Icon examples{{/i}}

                                                    +

                                                    {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

                                                    -

                                                    {{_i}}Buttons{{/i}}

                                                    -
                                                    -
                                                    -
                                                    - - - - -
                                                    -
                                                    - {{_i}}User{{/i}} - - -
                                                    -
                                                    -
                                                    {{! /bs-docs-example }} - -

                                                    {{_i}}Navigation{{/i}}

                                                    -
                                                    -
                                                    - -
                                                    {{! /well }} -
                                                    {{! /bs-docs-example }} - -

                                                    {{_i}}Form fields{{/i}}

                                                    -
                                                    -
                                                    - -
                                                    -
                                                    - +

                                                    {{_i}}Buttons{{/i}}

                                                    +
                                                    +
                                                    +
                                                    + + + + +
                                                    +
                                                    + {{_i}}User{{/i}} + +
                                                    -
                                                    - +
                                                    {{! /bs-docs-example }} -
                                                    +

                                                    {{_i}}Navigation{{/i}}

                                                    +
                                                    +
                                                    + +
                                                    {{! /well }} +
                                                    {{! /bs-docs-example }} + +

                                                    {{_i}}Form fields{{/i}}

                                                    +
                                                    +
                                                    + +
                                                    +
                                                    + +
                                                    +
                                                    +
                                                    +
                                                    + +
                                                    -
                                                    {{! /span9 }} -
                                                    {{! row}} +
                                                    {{! /span9 }} +
                                                    {{! row}} -
                                                    {{! /container }} +
                                                    {{! /.container }} + +
                                                    {{! /.bs-docs-canvas }} diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 9b1e605210..10dd0901ee 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -7,53 +7,54 @@
                                                    -
                                                    +
                                                    +
                                                    - -
                                                    -
                                                    - -
                                                    -
                                                    + +
                                                    +
                                                    + +
                                                    +
                                                    - - +

                                                    {{_i}}Aligning the menus{{/i}}

                                                    +

                                                    {{_i}}...{{/i}}

                                                    + - -
                                                    -
                                                    -

                                                    {{_i}}Button groups{{/i}}

                                                    -
                                                    - -

                                                    {{_i}}Examples{{/i}}

                                                    -

                                                    {{_i}}Two basic options, along with two more specific variations.{{/i}}

                                                    - -

                                                    {{_i}}Single button group{{/i}}

                                                    -

                                                    {{_i}}Wrap a series of buttons with .btn in .btn-group.{{/i}}

                                                    -
                                                    -
                                                    - - - + +
                                                    +
                                                    +

                                                    {{_i}}Button groups{{/i}}

                                                    +
                                                    + +

                                                    {{_i}}Examples{{/i}}

                                                    +

                                                    {{_i}}Two basic options, along with two more specific variations.{{/i}}

                                                    + +

                                                    {{_i}}Single button group{{/i}}

                                                    +

                                                    {{_i}}Wrap a series of buttons with .btn in .btn-group.{{/i}}

                                                    +
                                                    +
                                                    + + + +
                                                    - 
                                                     <div class="btn-group">
   <button class="btn">1</button>
@@ -125,26 +126,26 @@
 </div>
                                                    -

                                                    {{_i}}Multiple button groups{{/i}}

                                                    -

                                                    {{_i}}Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.{{/i}}

                                                    -
                                                    -
                                                    -
                                                    - - - - -
                                                    -
                                                    - - - -
                                                    -
                                                    - +

                                                    {{_i}}Multiple button groups{{/i}}

                                                    +

                                                    {{_i}}Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.{{/i}}

                                                    +
                                                    +
                                                    +
                                                    + + + + +
                                                    +
                                                    + + + +
                                                    +
                                                    + +
                                                    - 
                                                     <div class="btn-toolbar">
   <div class="btn-group">
@@ -153,16 +154,16 @@
 </div>
                                                    -

                                                    {{_i}}Vertical button groups{{/i}}

                                                    -

                                                    {{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}

                                                    -
                                                    -
                                                    - - - - +

                                                    {{_i}}Vertical button groups{{/i}}

                                                    +

                                                    {{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}

                                                    +
                                                    +
                                                    + + + + +
                                                    - 
                                                     <div class="btn-group btn-group-vertical">
   ...
@@ -170,102 +171,102 @@
                                                    -
                                                    +
                                                    -

                                                    {{_i}}Checkbox and radio flavors{{/i}}

                                                    -

                                                    {{_i}}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 the Javascript docs for that.{{/i}}

                                                    +

                                                    {{_i}}Checkbox and radio flavors{{/i}}

                                                    +

                                                    {{_i}}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 the Javascript docs for that.{{/i}}

                                                    -

                                                    {{_i}}Dropdowns in button groups{{/i}}

                                                    -

                                                    {{_i}}Heads up!{{/i}} {{_i}}Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.{{/i}}

                                                    -
                                                    +

                                                    {{_i}}Dropdowns in button groups{{/i}}

                                                    +

                                                    {{_i}}Heads up!{{/i}} {{_i}}Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.{{/i}}

                                                    + - -
                                                    -
                                                    -

                                                    {{_i}}Button dropdown menus{{/i}}

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    {{_i}}Button dropdown menus{{/i}}

                                                    +
                                                    -

                                                    {{_i}}Overview and examples{{/i}}

                                                    -

                                                    {{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}

                                                    -
                                                    -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    -
                                                    {{! /example }} +

                                                    {{_i}}Overview and examples{{/i}}

                                                    +

                                                    {{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}

                                                    +
                                                    +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    +
                                                    +
                                                    {{! /example }} 
                                                     <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -278,134 +279,134 @@
 </div>
                                                    -

                                                    {{_i}}Works with all button sizes{{/i}}

                                                    -

                                                    {{_i}}Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.{{/i}}

                                                    -
                                                    -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    - - -
                                                    -
                                                    -
                                                    {{! /example }} +

                                                    {{_i}}Works with all button sizes{{/i}}

                                                    +

                                                    {{_i}}Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.{{/i}}

                                                    +
                                                    +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    +
                                                    + + +
                                                    +
                                                    +
                                                    {{! /example }} -

                                                    {{_i}}Requires javascript{{/i}}

                                                    -

                                                    {{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}

                                                    -

                                                    {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}

                                                    +

                                                    {{_i}}Requires javascript{{/i}}

                                                    +

                                                    {{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}

                                                    +

                                                    {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}

                                                    -
                                                    +
                                                    -

                                                    {{_i}}Split button dropdowns{{/i}}

                                                    -

                                                    {{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

                                                    -
                                                    -
                                                    -
                                                    - - - -
                                                    -
                                                    - - - -
                                                    -
                                                    - - - -
                                                    -
                                                    - - - -
                                                    -
                                                    - - - -
                                                    -
                                                    - - - -
                                                    -
                                                    - - - -
                                                    -
                                                    -
                                                    {{! /example }} +

                                                    {{_i}}Split button dropdowns{{/i}}

                                                    +

                                                    {{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

                                                    +
                                                    +
                                                    +
                                                    + + + +
                                                    +
                                                    + + + +
                                                    +
                                                    + + + +
                                                    +
                                                    + + + +
                                                    +
                                                    + + + +
                                                    +
                                                    + + + +
                                                    +
                                                    + + + +
                                                    +
                                                    +
                                                    {{! /example }} 
                                                     <div class="btn-group">
   <button class="btn">{{_i}}Action{{/i}}</button>
@@ -418,49 +419,49 @@
 </div>
                                                    -

                                                    {{_i}}Sizes{{/i}}

                                                    -

                                                    {{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}

                                                    -
                                                    -
                                                    -
                                                    - - - -
                                                    -
                                                    -
                                                    -
                                                    - - - -
                                                    -
                                                    -
                                                    -
                                                    - - - -
                                                    -
                                                    -
                                                    {{! /example }} +

                                                    {{_i}}Sizes{{/i}}

                                                    +

                                                    {{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}

                                                    +
                                                    +
                                                    +
                                                    + + + +
                                                    +
                                                    +
                                                    +
                                                    + + + +
                                                    +
                                                    +
                                                    +
                                                    + + + +
                                                    +
                                                    +
                                                    {{! /example }} 
                                                     <div class="btn-group">
   <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
@@ -473,34 +474,34 @@
 </div>
                                                    -

                                                    {{_i}}Dropup menus{{/i}}

                                                    -

                                                    {{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}

                                                    -
                                                    -
                                                    -
                                                    - - - -
                                                    -
                                                    - - - -
                                                    -
                                                    -
                                                    {{! /example }} +

                                                    {{_i}}Dropup menus{{/i}}

                                                    +

                                                    {{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}

                                                    +
                                                    +
                                                    +
                                                    + + + +
                                                    +
                                                    + + + +
                                                    +
                                                    +
                                                    {{! /example }} 
                                                     <div class="btn-group dropup">
   <button class="btn">{{_i}}Dropup{{/i}}</button>
@@ -513,29 +514,29 @@
 </div>
                                                    -
                                                    +
                                                    - - - - + - - - -
                                                    -
                                                    -

                                                    {{_i}}Pagination{{/i}} {{_i}}Two options for paging through content{{/i}}

                                                    -
                                                    - -

                                                    {{_i}}Standard pagination{{/i}}

                                                    -

                                                    {{_i}}Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}

                                                    -
                                                    - 
                                                     <div class="pagination">
   <ul>
@@ -1274,26 +1275,26 @@
                                                    -
                                                    +
                                                    -

                                                    {{_i}}Options{{/i}}

                                                    +

                                                    {{_i}}Options{{/i}}

                                                    -

                                                    {{_i}}Disabled and active states{{/i}}

                                                    -

                                                    {{_i}}Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.{{/i}}

                                                    -
                                                    - 
                                                     <div class="pagination ">
   <ul>
@@ -1304,39 +1305,39 @@
 </div>
                                                    -

                                                    {{_i}}Alignment{{/i}}

                                                    -

                                                    {{_i}}Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}

                                                    -
                                                    - 
                                                     <div class="pagination pagination-centered">
   ...
 </div>
                                                    -
                                                    - 
                                                     <div class="pagination pagination-right">
   ...
@@ -1344,20 +1345,20 @@
                                                    -
                                                    +
                                                    -

                                                    {{_i}}Pager{{/i}}

                                                    -

                                                    {{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}

                                                    +

                                                    {{_i}}Pager{{/i}}

                                                    +

                                                    {{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}

                                                    -

                                                    {{_i}}Default example{{/i}}

                                                    -

                                                    {{_i}}By default, the pager centers links.{{/i}}

                                                    -
                                                    - -
                                                    +

                                                    {{_i}}Default example{{/i}}

                                                    +

                                                    {{_i}}By default, the pager centers links.{{/i}}

                                                    +
                                                    + + 
                                                     <ul class="pager">
   <li><a href="#">{{_i}}Previous{{/i}}</a></li>
@@ -1365,14 +1366,14 @@
 </ul>
                                                    -

                                                    {{_i}}Aligned links{{/i}}

                                                    -

                                                    {{_i}}Alternatively, you can align each link to the sides:{{/i}}

                                                    -
                                                    - -
                                                    +

                                                    {{_i}}Aligned links{{/i}}

                                                    +

                                                    {{_i}}Alternatively, you can align each link to the sides:{{/i}}

                                                    +
                                                    + + 
                                                     <ul class="pager">
   <li class="previous">
@@ -1384,14 +1385,14 @@
 </ul>
                                                    -

                                                    {{_i}}Optional disabled state{{/i}}

                                                    -

                                                    {{_i}}Pager links also use the general .disabled utility class from the pagination.{{/i}}

                                                    -
                                                    - -
                                                    +

                                                    {{_i}}Optional disabled state{{/i}}

                                                    +

                                                    {{_i}}Pager links also use the general .disabled utility class from the pagination.{{/i}}

                                                    +
                                                    + + 
                                                     <ul class="pager">
   <li class="previous disabled">
@@ -1401,175 +1402,175 @@
 </ul>
                                                    -
                                                    + - -
                                                    -
                                                    -

                                                    {{_i}}Labels and badges{{/i}}

                                                    -
                                                    -

                                                    {{_i}}Labels{{/i}}

                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    {{_i}}Labels{{/i}}{{_i}}Markup{{/i}}
                                                    - {{_i}}Default{{/i}} - - <span class="label">{{_i}}Default{{/i}}</span> -
                                                    - {{_i}}Success{{/i}} - - <span class="label label-success">{{_i}}Success{{/i}}</span> -
                                                    - {{_i}}Warning{{/i}} - - <span class="label label-warning">{{_i}}Warning{{/i}}</span> -
                                                    - {{_i}}Important{{/i}} - - <span class="label label-important">{{_i}}Important{{/i}}</span> -
                                                    - {{_i}}Info{{/i}} - - <span class="label label-info">{{_i}}Info{{/i}}</span> -
                                                    - {{_i}}Inverse{{/i}} - - <span class="label label-inverse">{{_i}}Inverse{{/i}}</span> -
                                                    - -

                                                    {{_i}}Badges{{/i}}

                                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                                    {{_i}}Name{{/i}}{{_i}}Example{{/i}}{{_i}}Markup{{/i}}
                                                    - {{_i}}Default{{/i}} - - 1 - - <span class="badge">1</span> -
                                                    - {{_i}}Success{{/i}} - - 2 - - <span class="badge badge-success">2</span> -
                                                    - {{_i}}Warning{{/i}} - - 4 - - <span class="badge badge-warning">4</span> -
                                                    - {{_i}}Important{{/i}} - - 6 - - <span class="badge badge-important">6</span> -
                                                    - {{_i}}Info{{/i}} - - 8 - - <span class="badge badge-info">8</span> -
                                                    - {{_i}}Inverse{{/i}} - - 10 - - <span class="badge badge-inverse">10</span> -
                                                    - -
                                                    - - - - -
                                                    -
                                                    -

                                                    {{_i}}Typographic components{{/i}}

                                                    -
                                                    - -

                                                    {{_i}}Hero unit{{/i}}

                                                    -

                                                    {{_i}}A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.{{/i}}

                                                    -
                                                    -
                                                    -

                                                    {{_i}}Hello, world!{{/i}}

                                                    -

                                                    {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}

                                                    -

                                                    {{_i}}Learn more{{/i}}

                                                    + +
                                                    +
                                                    +

                                                    {{_i}}Labels and badges{{/i}}

                                                    +
                                                    +

                                                    {{_i}}Labels{{/i}}

                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    {{_i}}Labels{{/i}}{{_i}}Markup{{/i}}
                                                    + {{_i}}Default{{/i}} + + <span class="label">{{_i}}Default{{/i}}</span> +
                                                    + {{_i}}Success{{/i}} + + <span class="label label-success">{{_i}}Success{{/i}}</span> +
                                                    + {{_i}}Warning{{/i}} + + <span class="label label-warning">{{_i}}Warning{{/i}}</span> +
                                                    + {{_i}}Important{{/i}} + + <span class="label label-important">{{_i}}Important{{/i}}</span> +
                                                    + {{_i}}Info{{/i}} + + <span class="label label-info">{{_i}}Info{{/i}}</span> +
                                                    + {{_i}}Inverse{{/i}} + + <span class="label label-inverse">{{_i}}Inverse{{/i}}</span> +
                                                    + +

                                                    {{_i}}Badges{{/i}}

                                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                                    {{_i}}Name{{/i}}{{_i}}Example{{/i}}{{_i}}Markup{{/i}}
                                                    + {{_i}}Default{{/i}} + + 1 + + <span class="badge">1</span> +
                                                    + {{_i}}Success{{/i}} + + 2 + + <span class="badge badge-success">2</span> +
                                                    + {{_i}}Warning{{/i}} + + 4 + + <span class="badge badge-warning">4</span> +
                                                    + {{_i}}Important{{/i}} + + 6 + + <span class="badge badge-important">6</span> +
                                                    + {{_i}}Info{{/i}} + + 8 + + <span class="badge badge-info">8</span> +
                                                    + {{_i}}Inverse{{/i}} + + 10 + + <span class="badge badge-inverse">10</span> +
                                                    + +
                                                    + + + + +
                                                    +
                                                    +

                                                    {{_i}}Typographic components{{/i}}

                                                    +
                                                    + +

                                                    {{_i}}Hero unit{{/i}}

                                                    +

                                                    {{_i}}A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.{{/i}}

                                                    +
                                                    +
                                                    +

                                                    {{_i}}Hello, world!{{/i}}

                                                    +

                                                    {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}

                                                    +

                                                    {{_i}}Learn more{{/i}}

                                                    +
                                                    - 
                                                     <div class="hero-unit">
   <h1>{{_i}}Heading{{/i}}</h1>
@@ -1582,105 +1583,105 @@
 </div>
                                                    -

                                                    {{_i}}Page header{{/i}}

                                                    -

                                                    {{_i}}A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}

                                                    -
                                                    -
                                                    -

                                                    {{_i}}Example page header{{/i}} {{_i}}Subtext for header{{/i}}

                                                    +

                                                    {{_i}}Page header{{/i}}

                                                    +

                                                    {{_i}}A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}

                                                    +
                                                    +
                                                    +

                                                    {{_i}}Example page header{{/i}} {{_i}}Subtext for header{{/i}}

                                                    +
                                                    - 
                                                     <div class="page-header">
   <h1>{{_i}}Example page header{{/i}}</h1>
 </div>
                                                    -
                                                    + - -
                                                    -
                                                    -

                                                    {{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}

                                                    -
                                                    + +
                                                    +
                                                    +

                                                    {{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}

                                                    +
                                                    -

                                                    {{_i}}Default thumbnails{{/i}}

                                                    -

                                                    {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

                                                    -
                                                    - -
                                                    +

                                                    {{_i}}Default thumbnails{{/i}}

                                                    +

                                                    {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

                                                    +
                                                    + +
                                                    -

                                                    {{_i}}Highly customizable{{/i}}

                                                    -

                                                    {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}

                                                    -
                                                    -
                                                      -
                                                    • -
                                                      - -
                                                      -

                                                      {{_i}}Thumbnail label{{/i}}

                                                      -

                                                      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                      -

                                                      {{_i}}Action{{/i}} {{_i}}Action{{/i}}

                                                      +

                                                      {{_i}}Highly customizable{{/i}}

                                                      +

                                                      {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}

                                                      +
                                                      +
                                                        +
                                                      • +
                                                        + +
                                                        +

                                                        {{_i}}Thumbnail label{{/i}}

                                                        +

                                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                        +

                                                        {{_i}}Action{{/i}} {{_i}}Action{{/i}}

                                                        +
                                                        -
                                                      -
                                                      • -
                                                    • -
                                                      - -
                                                      -

                                                      {{_i}}Thumbnail label{{/i}}

                                                      -

                                                      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                      -

                                                      {{_i}}Action{{/i}} {{_i}}Action{{/i}}

                                                      +
                                                      • +
                                                    • +
                                                      + +
                                                      +

                                                      {{_i}}Thumbnail label{{/i}}

                                                      +

                                                      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                      +

                                                      {{_i}}Action{{/i}} {{_i}}Action{{/i}}

                                                      +
                                                      -
                                                    - -
                                                  • -
                                                    - -
                                                    -

                                                    {{_i}}Thumbnail label{{/i}}

                                                    -

                                                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                    -

                                                    {{_i}}Action{{/i}} {{_i}}Action{{/i}}

                                                    +
                                                    • +
                                                  • +
                                                    + +
                                                    +

                                                    {{_i}}Thumbnail label{{/i}}

                                                    +

                                                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                                                    +

                                                    {{_i}}Action{{/i}} {{_i}}Action{{/i}}

                                                    +
                                                    -
                                                    • - -
                                                  -
                                                + +
                                              +
                                            -

                                            {{_i}}Why use thumbnails{{/i}}

                                            -

                                            {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

                                            +

                                            {{_i}}Why use thumbnails{{/i}}

                                            +

                                            {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

                                            -

                                            {{_i}}Simple, flexible markup{{/i}}

                                            -

                                            {{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}

                                            +

                                            {{_i}}Simple, flexible markup{{/i}}

                                            +

                                            {{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}

                                            -

                                            {{_i}}Uses grid column sizes{{/i}}

                                            -

                                            {{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

                                            +

                                            {{_i}}Uses grid column sizes{{/i}}

                                            +

                                            {{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

                                            -

                                            {{_i}}Markup{{/i}}

                                            -

                                            {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

                                            +

                                            {{_i}}Markup{{/i}}

                                            +

                                            {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

                                             <ul class="thumbnails">
   <li class="span4">
@@ -1691,7 +1692,7 @@
   ...
 </ul>
                                            -

                                            {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}

                                            +

                                            {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}

                                             <ul class="thumbnails">
   <li class="span4">
@@ -1705,55 +1706,55 @@
 </ul>
                                            -

                                            {{_i}}More examples{{/i}}

                                            -

                                            {{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

                                            - +

                                            {{_i}}More examples{{/i}}

                                            +

                                            {{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

                                            + - + - -
                                            -
                                            -

                                            {{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}

                                            -
                                            - -

                                            {{_i}}Default alert{{/i}}

                                            -

                                            {{_i}}Wrap any text and an optional dismiss button in .alert for a basic warning alert message.{{/i}}

                                            -
                                            -
                                            - - {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} + +
                                            +
                                            +

                                            {{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}

                                            +
                                            + +

                                            {{_i}}Default alert{{/i}}

                                            +

                                            {{_i}}Wrap any text and an optional dismiss button in .alert for a basic warning alert message.{{/i}}

                                            +
                                            +
                                            + + {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} +
                                            - 
                                             <div class="alert">
   <button type="button" class="close" data-dismiss="alert">×</button>
@@ -1761,32 +1762,28 @@
 </div>
                                            -

                                            {{_i}}Dismiss buttons{{/i}}

                                            -

                                            {{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}

                                            -
                                            -<a href="#" class="close" data-dismiss="alert">×</button>
-
                                            -

                                            {{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}

                                            -
                                            -<button type="button" class="close" data-dismiss="alert">×</button>
-
                                            +

                                            {{_i}}Dismiss buttons{{/i}}

                                            +

                                            {{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}

                                            + 
                                            <a href="#" class="close" data-dismiss="alert">×</button>
                                            +

                                            {{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}

                                            + 
                                            <button type="button" class="close" data-dismiss="alert">×</button>
                                            -

                                            {{_i}}Dismiss alerts via javascript{{/i}}

                                            -

                                            {{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}

                                            +

                                            {{_i}}Dismiss alerts via javascript{{/i}}

                                            +

                                            {{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}

                                            -
                                            +
                                            -

                                            {{_i}}Options{{/i}}

                                            -

                                            {{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.{{/i}}

                                            -
                                            -
                                            - -

                                            {{_i}}Warning!{{/i}}

                                            -

                                            {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

                                            +

                                            {{_i}}Options{{/i}}

                                            +

                                            {{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.{{/i}}

                                            +
                                            +
                                            + +

                                            {{_i}}Warning!{{/i}}

                                            +

                                            {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

                                            +
                                            - 
                                             <div class="alert alert-block">
   <a class="close" data-dismiss="alert" href="#">&times;</a>
@@ -1796,97 +1793,97 @@
                                            -
                                            +
                                            -

                                            {{_i}}Contextual alternatives{{/i}}

                                            -

                                            {{_i}}Add optional classes to change an alert's connotation.{{/i}}

                                            +

                                            {{_i}}Contextual alternatives{{/i}}

                                            +

                                            {{_i}}Add optional classes to change an alert's connotation.{{/i}}

                                            -

                                            {{_i}}Error or danger{{/i}}

                                            -
                                            -
                                            - - {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}} +

                                            {{_i}}Error or danger{{/i}}

                                            +
                                            +
                                            + + {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}} +
                                            - 
                                             <div class="alert alert-error">
   ...
 </div>
                                            -

                                            {{_i}}Success{{/i}}

                                            -
                                            -
                                            - - {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}} +

                                            {{_i}}Success{{/i}}

                                            +
                                            +
                                            + + {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}} +
                                            - 
                                             <div class="alert alert-success">
   ...
 </div>
                                            -

                                            {{_i}}Information{{/i}}

                                            -
                                            -
                                            - - {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}} +

                                            {{_i}}Information{{/i}}

                                            +
                                            +
                                            + + {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}} +
                                            - 
                                             <div class="alert alert-info">
   ...
 </div>
                                            -
                                            + - -
                                            -
                                            -

                                            {{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

                                            -
                                            - -

                                            {{_i}}Examples and markup{{/i}}

                                            - -

                                            {{_i}}Basic{{/i}}

                                            -

                                            {{_i}}Default progress bar with a vertical gradient.{{/i}}

                                            -
                                            -
                                            -
                                            + +
                                            +
                                            +

                                            {{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

                                            +
                                            + +

                                            {{_i}}Examples and markup{{/i}}

                                            + +

                                            {{_i}}Basic{{/i}}

                                            +

                                            {{_i}}Default progress bar with a vertical gradient.{{/i}}

                                            +
                                            +
                                            +
                                            +
                                            - 
                                             <div class="progress">
   <div class="bar" style="width: 60%;"></div>
 </div>
                                            -

                                            {{_i}}Striped{{/i}}

                                            -

                                            {{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}

                                            -
                                            -
                                            -
                                            +

                                            {{_i}}Striped{{/i}}

                                            +

                                            {{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}

                                            +
                                            +
                                            +
                                            +
                                            - 
                                             <div class="progress progress-striped">
   <div class="bar" style="width: 20%;"></div>
 </div>
                                            -

                                            {{_i}}Animated{{/i}}

                                            -

                                            {{_i}}Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.{{/i}}

                                            -
                                            -
                                            -
                                            +

                                            {{_i}}Animated{{/i}}

                                            +

                                            {{_i}}Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.{{/i}}

                                            +
                                            +
                                            +
                                            +
                                            - 
                                             <div class="progress progress-striped active">
   <div class="bar" style="width: 40%;"></div>
@@ -1894,27 +1891,27 @@
                                            -
                                            +
                                            -

                                            {{_i}}Options{{/i}}

                                            +

                                            {{_i}}Options{{/i}}

                                            -

                                            {{_i}}Additional colors{{/i}}

                                            -

                                            {{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}

                                            -
                                            -
                                            -
                                            +

                                            {{_i}}Additional colors{{/i}}

                                            +

                                            {{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}

                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            -
                                            -
                                            -
                                            -
                                            -
                                            -
                                            -
                                            -
                                            -
                                            - 
                                             <div class="progress progress-info">
   <div class="bar" style="width: 20%"></div>
@@ -1930,22 +1927,22 @@
 </div>
                                            -

                                            {{_i}}Striped bars{{/i}}

                                            -

                                            {{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}

                                            -
                                            -
                                            -
                                            +

                                            {{_i}}Striped bars{{/i}}

                                            +

                                            {{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}

                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            -
                                            -
                                            -
                                            -
                                            -
                                            -
                                            -
                                            -
                                            -
                                            - 
                                             <div class="progress progress-info progress-striped">
   <div class="bar" style="width: 20%"></div>
@@ -1962,74 +1959,75 @@
                                            -
                                            +
                                            -

                                            {{_i}}Browser support{{/i}}

                                            -

                                            {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}

                                            -

                                            {{_i}}Opera and IE do not support animations at this time.{{/i}}

                                            +

                                            {{_i}}Browser support{{/i}}

                                            +

                                            {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}

                                            +

                                            {{_i}}Opera and IE do not support animations at this time.{{/i}}

                                            -
                                            + - -
                                            -
                                            -

                                            {{_i}}Miscellaneous{{/i}} {{_i}}Lightweight utility components{{/i}}

                                            -
                                            - -

                                            {{_i}}Wells{{/i}}

                                            -

                                            {{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

                                            -
                                            -
                                            - {{_i}}Look, I'm in a well!{{/i}} + +
                                            +
                                            +

                                            {{_i}}Miscellaneous{{/i}} {{_i}}Lightweight utility components{{/i}}

                                            +
                                            + +

                                            {{_i}}Wells{{/i}}

                                            +

                                            {{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

                                            +
                                            +
                                            + {{_i}}Look, I'm in a well!{{/i}} +
                                            - 
                                             <div class="well">
   ...
 </div>
                                            -

                                            {{_i}}Optional classes{{/i}}

                                            -

                                            {{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}

                                            -
                                            -
                                            - {{_i}}Look, I'm in a well!{{/i}} +

                                            {{_i}}Optional classes{{/i}}

                                            +

                                            {{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}

                                            +
                                            +
                                            + {{_i}}Look, I'm in a well!{{/i}} +
                                            - 
                                             <div class="well well-large">
   ...
 </div>
                                            -
                                            -
                                            - {{_i}}Look, I'm in a well!{{/i}} +
                                            +
                                            + {{_i}}Look, I'm in a well!{{/i}} +
                                            - 
                                             <div class="well well-small">
   ...
 </div>
                                            -

                                            {{_i}}Close icon{{/i}}

                                            -

                                            {{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

                                            -
                                            -

                                            -
                                            -
                                            <button class="close">&times;</button>
                                            -

                                            {{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}

                                            -
                                            <a class="close" href="#">&times;</a>
                                            -

                                            {{_i}}Helper classes{{/i}}

                                            -

                                            {{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}

                                            +

                                            {{_i}}Close icon{{/i}}

                                            +

                                            {{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

                                            +
                                            +

                                            +
                                            + 
                                            <button class="close">&times;</button>
                                            +

                                            {{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}

                                            + 
                                            <a class="close" href="#">&times;</a>
                                            -

                                            {{_i}}.pull-left{{/i}}

                                            -

                                            {{_i}}Float an element left{{/i}}

                                            +

                                            {{_i}}Helper classes{{/i}}

                                            +

                                            {{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}

                                            + +

                                            {{_i}}.pull-left{{/i}}

                                            +

                                            {{_i}}Float an element left{{/i}}

                                             class="pull-left"
                                            @@ -2039,8 +2037,8 @@ class="pull-left" } -

                                            {{_i}}.pull-right{{/i}}

                                            -

                                            {{_i}}Float an element right{{/i}}

                                            +

                                            {{_i}}.pull-right{{/i}}

                                            +

                                            {{_i}}Float an element right{{/i}}

                                             class="pull-right"
                                            @@ -2050,8 +2048,8 @@ class="pull-right" } -

                                            {{_i}}.muted{{/i}}

                                            -

                                            {{_i}}Change an element's color to #999{{/i}}

                                            +

                                            {{_i}}.muted{{/i}}

                                            +

                                            {{_i}}Change an element's color to #999{{/i}}

                                             class="muted"
                                            @@ -2061,8 +2059,8 @@ class="muted" } -

                                            {{_i}}.clearfix{{/i}}

                                            -

                                            {{_i}}Clear the float on any element{{/i}}

                                            +

                                            {{_i}}.clearfix{{/i}}

                                            +

                                            {{_i}}Clear the float on any element{{/i}}

                                             class="clearfix"
                                            @@ -2080,11 +2078,13 @@ class="clearfix" } -
                                            + -
                                            {{! /span9 }} -
                                            {{! row}} +
                                        {{! /span9 }} +
                                        {{! row}} -
                                    {{! /container }} +
                                    {{! /.container }} + +
                                {{! /.bs-docs-canvas }} diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache index 1e56eb3ba0..28d8a3169e 100644 --- a/docs/templates/pages/customize.mustache +++ b/docs/templates/pages/customize.mustache @@ -3,357 +3,360 @@

                                {{_i}}Customize and download{{/i}}

                                -

                                {{_i}}Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}

                                +

                                {{_i}}Download Bootstrap or customize variables, components, javascript plugins, and more.{{/i}}

                                -
                                +
                                +
                                - -
                                -
                                - -
                                -
                                + +
                                +
                                + +
                                +
                                - -
                                -
                                -
                                - {{_i}}Toggle all{{/i}} -

                                - {{_i}}1. Choose components{{/i}} -

                                -
                                -
                                -
                                -

                                {{_i}}Scaffolding{{/i}}

                                - - - - -

                                {{_i}}Base CSS{{/i}}

                                - - - - - - - -
                                -
                                -

                                {{_i}}Components{{/i}}

                                - - - - - - - - - - -

                                {{_i}}JS Components{{/i}}

                                - - - - - - -
                                -
                                -

                                {{_i}}Miscellaneous{{/i}}

                                - - - - -

                                {{_i}}Responsive{{/i}}

                                - - - - - -
                                -
                                -
                                + + +
                                +
                                + {{_i}}Toggle all{{/i}} +

                                + {{_i}}1. Choose components{{/i}} +

                                +
                                +
                                +
                                +

                                {{_i}}Scaffolding{{/i}}

                                + + + + +

                                {{_i}}Base CSS{{/i}}

                                + + + + + + + +
                                +
                                +

                                {{_i}}Components{{/i}}

                                + + + + + + + + + + +

                                {{_i}}JS Components{{/i}}

                                + + + + + + +
                                +
                                +

                                {{_i}}Miscellaneous{{/i}}

                                + + + + +

                                {{_i}}Responsive{{/i}}

                                + + + + + +
                                +
                                +
                                -
                                -
                                - {{_i}}Toggle all{{/i}} -

                                - {{_i}}2. Select jQuery plugins{{/i}} -

                                -
                                -
                                -
                                - - - - - - -
                                -
                                - - - - - - -
                                -
                                -

                                {{_i}}Heads up!{{/i}}

                                -

                                {{_i}}All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.{{/i}}

                                -
                                -
                                -
                                +
                                +
                                + {{_i}}Toggle all{{/i}} +

                                + {{_i}}2. Select jQuery plugins{{/i}} +

                                +
                                +
                                +
                                + + + + + + +
                                +
                                + + + + + + +
                                +
                                +

                                {{_i}}Heads up!{{/i}}

                                +

                                {{_i}}All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.{{/i}}

                                +
                                +
                                +
                                -
                                -
                                - {{_i}}Reset to defaults{{/i}} -

                                - {{_i}}3. Customize variables{{/i}} -

                                -
                                -
                                -
                                -

                                {{_i}}Scaffolding{{/i}}

                                - - - - +
                                +
                                + {{_i}}Reset to defaults{{/i}} +

                                + {{_i}}3. Customize variables{{/i}} +

                                +
                                +
                                +
                                +

                                {{_i}}Scaffolding{{/i}}

                                + + + + -

                                {{_i}}Links{{/i}}

                                - - - - -

                                {{_i}}Colors{{/i}}

                                - - - - - - - - - - - - - - +

                                {{_i}}Links{{/i}}

                                + + + + +

                                {{_i}}Colors{{/i}}

                                + + + + + + + + + + + + + + -

                                {{_i}}Sprites{{/i}}

                                - - - - +

                                {{_i}}Sprites{{/i}}

                                + + + + -
                                -
                                -

                                {{_i}}Grid system{{/i}}

                                - - - - - - - - - - - - - - +
                                +
                                +

                                {{_i}}Grid system{{/i}}

                                + + + + + + + + + + + + + + -

                                {{_i}}Typography{{/i}}

                                - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                -
                                -

                                {{_i}}Tables{{/i}}

                                - - - - - - - - +

                                {{_i}}Typography{{/i}}

                                + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                +
                                +

                                {{_i}}Tables{{/i}}

                                + + + + + + + + -

                                {{_i}}Navbar{{/i}}

                                - - - - - - - - - - - - - - - - - - - - - - - - - - - - +

                                {{_i}}Navbar{{/i}}

                                + + + + + + + + + + + + + + + + + + + + + + + + + + + + -

                                {{_i}}Dropdowns{{/i}}

                                - - - - - - - - - - -
                                -
                                -

                                {{_i}}Forms{{/i}}

                                - - - - - - - - - - - - +

                                {{_i}}Dropdowns{{/i}}

                                + + + + + + + + + + +
                                +
                                +

                                {{_i}}Forms{{/i}}

                                + + + + + + + + + + + + - - - - + + + + -

                                {{_i}}Form states & alerts{{/i}}

                                - - - - - - - - - - - - - - - - -
                                -
                                -
                                +

                                {{_i}}Form states & alerts{{/i}}

                                + + + + + + + + + + + + + + + + +
                                +
                                +
                                -
                                -
                                -

                                - {{_i}}4. Download{{/i}} -

                                -
                                -
                                - Customize and Download -

                                {{_i}}What's included?{{/i}}

                                -

                                {{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}

                                -
                                -
                                -
                                +
                                +
                                +

                                + {{_i}}4. Download{{/i}} +

                                +
                                +
                                + Customize and Download +

                                {{_i}}What's included?{{/i}}

                                +

                                {{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}

                                +
                                +
                                + -
                                {{! /span9 }} -
                                {{! row}} +
                                {{! /span9 }} +
                                {{! row}} -
                                {{! /container }} +
                                {{! /.container }} + +
                                {{! /.bs-docs-canvas }} diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index e3f2c7ae7c..fbe4b365f3 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -7,55 +7,58 @@
                                -
                                +
                                +
                                -
                                -
                                - -
                                -
                                + +
                                +
                                + +
                                +
                                - -
                                -
                                -

                                {{_i}}1. Download{{/i}}

                                -
                                -

                                {{_i}}Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.{{/i}}

                                - -
                                -
                                -

                                Download compiled

                                -

                                Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

                                -

                                Download Bootstrap

                                + +
                                +
                                +

                                {{_i}}1. Download{{/i}}

                                -
                                -

                                Download source

                                -

                                Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.

                                -

                                Download Bootstrap source

                                +

                                {{_i}}Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.{{/i}}

                                + +
                                +
                                +

                                Download compiled

                                +

                                Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

                                +

                                Download Bootstrap

                                +
                                +
                                +

                                Download source

                                +

                                Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.

                                +

                                Download Bootstrap source

                                +
                                -
                                -
                                +
                                - -
                                -
                                -

                                {{_i}}2. File structure{{/i}}

                                -
                                -

                                {{_i}}Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:{{/i}}

                                + +
                                +
                                +

                                {{_i}}2. File structure{{/i}}

                                +
                                +

                                {{_i}}Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:{{/i}}

                                   bootstrap/
   ├── css/
@@ -69,67 +72,67 @@
   │   ├── glyphicons-halflings-white.png
   └── README.md
                                -

                                {{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.{{/i}}

                                -
                                +

                                {{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.{{/i}}

                                +
                                - -
                                -
                                -

                                {{_i}}3. What's included{{/i}}

                                -
                                -

                                {{_i}}Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.{{/i}}

                                + +
                                +
                                +

                                {{_i}}3. What's included{{/i}}

                                +
                                +

                                {{_i}}Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.{{/i}}

                                -

                                Scaffolding

                                -

                                Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

                                +

                                Scaffolding

                                +

                                Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

                                -

                                Base CSS

                                -

                                Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

                                +

                                Base CSS

                                +

                                Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

                                -

                                Components

                                -

                                Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

                                +

                                Components

                                +

                                Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

                                -

                                Javascript plugins

                                -

                                Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.

                                +

                                Javascript plugins

                                +

                                Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.

                                -
                                +
                                -

                                List of components

                                -

                                Together, the Components and Javascript plugins sections provide the following interface elements:

                                -
                                  -
                                • Button groups
                                  • -
                                • Button dropdowns
                                  • -
                                • Navigational tabs, pills, and lists
                                  • -
                                • Navbar
                                  • -
                                • Labels
                                  • -
                                • Badges
                                  • -
                                • Page headers and hero unit
                                  • -
                                • Thumbnails
                                  • -
                                • Alerts
                                  • -
                                • Progress bars
                                  • -
                                • Modals
                                  • -
                                • Dropdowns
                                  • -
                                • Tooltips
                                  • -
                                • Popovers
                                  • -
                                • Accordion
                                  • -
                                • Carousel
                                  • -
                                • Typeahead
                                  • -
                                -

                                {{_i}}In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.{{/i}}

                                -
                                +

                                List of components

                                +

                                Together, the Components and Javascript plugins sections provide the following interface elements:

                                +
                                  +
                                • Button groups
                                  • +
                                • Button dropdowns
                                  • +
                                • Navigational tabs, pills, and lists
                                  • +
                                • Navbar
                                  • +
                                • Labels
                                  • +
                                • Badges
                                  • +
                                • Page headers and hero unit
                                  • +
                                • Thumbnails
                                  • +
                                • Alerts
                                  • +
                                • Progress bars
                                  • +
                                • Modals
                                  • +
                                • Dropdowns
                                  • +
                                • Tooltips
                                  • +
                                • Popovers
                                  • +
                                • Accordion
                                  • +
                                • Carousel
                                  • +
                                • Typeahead
                                  • +
                                +

                                {{_i}}In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.{{/i}}

                                +
                                - -
                                -
                                -

                                {{_i}}4. Basic HTML template{{/i}}

                                -
                                -

                                {{_i}}With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.{{/i}}

                                -

                                {{_i}}Now, here's a look at a typical HTML file:{{/i}}

                                + +
                                +
                                +

                                {{_i}}4. Basic HTML template{{/i}}

                                +
                                +

                                {{_i}}With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.{{/i}}

                                +

                                {{_i}}Now, here's a look at a typical HTML file:{{/i}}

                                 <html>
   <head>
@@ -140,7 +143,7 @@
   </body>
 </html>
                                -

                                {{_i}}To make this a Bootstrapped template, just include the appropriate CSS and JS files:{{/i}}

                                +

                                {{_i}}To make this a Bootstrapped template, just include the appropriate CSS and JS files:{{/i}}

                                 <html>
   <head>
@@ -154,61 +157,63 @@
   </body>
 </html>
                                -

                                {{_i}}And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.{{/i}}

                                -
                                +

                                {{_i}}And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.{{/i}}

                                +
                                - -
                                -
                                -

                                {{_i}}5. Examples{{/i}}

                                -
                                -

                                {{_i}}Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}

                                -
                                  -
                                • - - - -

                                  {{_i}}Basic marketing site{{/i}}

                                  -

                                  {{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}

                                  -
                                  • -
                                • - - - -

                                  {{_i}}Fluid layout{{/i}}

                                  -

                                  {{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}

                                  -
                                  • -
                                • - - - -

                                  {{_i}}Starter template{{/i}}

                                  -

                                  {{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}

                                  -
                                  • -
                                -
                                + +
                                +
                                +

                                {{_i}}5. Examples{{/i}}

                                +
                                +

                                {{_i}}Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}

                                +
                                  +
                                • + + + +

                                  {{_i}}Basic marketing site{{/i}}

                                  +

                                  {{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}

                                  +
                                  • +
                                • + + + +

                                  {{_i}}Fluid layout{{/i}}

                                  +

                                  {{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}

                                  +
                                  • +
                                • + + + +

                                  {{_i}}Starter template{{/i}}

                                  +

                                  {{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}

                                  +
                                  • +
                                +
                                - -
                                -
                                -

                                {{_i}}What next?{{/i}}

                                -
                                -

                                Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

                                - Visit the Bootstrap docs - Customize Bootstrap -
                                + +
                                +
                                +

                                {{_i}}What next?{{/i}}

                                +
                                +

                                Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

                                + Visit the Bootstrap docs + Customize Bootstrap +
                                -
                                {{! /span9 }} -
                                {{! row}} +
                                {{! /span9 }} +
                                {{! row}} -
                                {{! /container }} +
                                {{! /.container }} + +
                                {{! /.bs-docs-canvas }} diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index a943b09bfa..acb3f4c6f8 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -11,79 +11,83 @@
                            -
                            -
                            - -
                            -
                            +
                            -
                            - -
                            - -

                            {{_i}}Introducing Bootstrap.{{/i}}

                            -

                            {{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

                            - -
                            -
                            - -

                            {{_i}}By nerds, for nerds.{{/i}}

                            -

                            {{_i}}Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.{{/i}}

                            -
                            -
                            - -

                            {{_i}}Made for everyone.{{/i}}

                            -

                            {{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.{{/i}}

                            -
                            -
                            - -

                            {{_i}}Packed with features.{{/i}}

                            -

                            {{_i}}A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.{{/i}}

                            -
                            -
                            - -
                            - -

                            {{_i}}Built with Bootstrap.{{/i}}

                            -

                            {{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

                            -
                            -
                            -
                            +
                            -
                            {{! /container }} +
                            + +

                            {{_i}}Introducing Bootstrap.{{/i}}

                            +

                            {{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

                            + +
                            +
                            + +

                            {{_i}}By nerds, for nerds.{{/i}}

                            +

                            {{_i}}Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.{{/i}}

                            +
                            +
                            + +

                            {{_i}}Made for everyone.{{/i}}

                            +

                            {{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.{{/i}}

                            +
                            +
                            + +

                            {{_i}}Packed with features.{{/i}}

                            +

                            {{_i}}A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.{{/i}}

                            +
                            +
                            + +
                            + +

                            {{_i}}Built with Bootstrap.{{/i}}

                            +

                            {{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

                            +
                            + +
                            + +
                            {{! /.marketing }} + +
                            {{! /.container }} + +
                            {{! /.bs-docs-canvas }} diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 81ef75209d..78c138a44b 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -7,106 +7,107 @@ -
                            +
                            +
                            - -
                            -
                            - -
                            -
                            - - - - -
                            -
                            -

                            {{_i}}Javascript in Bootstrap{{/i}}

                            -
                            - -

                            {{_i}}Individual or compiled{{/i}}

                            -

                            {{_i}}If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.{{/i}}

                            - -

                            {{_i}}Data attributes{{/i}}

                            -

                            {{_i}}...{{/i}}

                            - -

                            {{_i}}Programmatic API{{/i}}

                            -

                            {{_i}}...{{/i}}

                            - - - {{! Thought: consider porting much of the JS readme here? }} - -
                            - - - - -
                            -
                            -

                            {{_i}}Transitions{{/i}} bootstrap-transition.js

                            -
                            -

                            {{_i}}About transitions{{/i}}

                            -

                            {{_i}}For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.{{/i}}

                            -

                            {{_i}}Use cases{{/i}}

                            -

                            {{_i}}A few examples of the transition plugin:{{/i}}

                            -
                            +
                            +
                            - -
                            -
                            -

                            {{_i}}Modals{{/i}} bootstrap-modal.js

                            -
                            - - -

                            {{_i}}Examples{{/i}}

                            -

                            {{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}

                            - -

                            {{_i}}Static example{{/i}}

                            -

                            {{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}

                            -
                            -
                            -
                            - -

                            {{_i}}Modal header{{/i}}

                            -
                            -
                            -

                            {{_i}}One fine body…{{/i}}

                            -
                            -
                            - {{_i}}Close{{/i}} - {{_i}}Save changes{{/i}} -
                            + +
                            +
                            +

                            {{_i}}Javascript in Bootstrap{{/i}}

                            -
                            {{! /example }} + +

                            {{_i}}Individual or compiled{{/i}}

                            +

                            {{_i}}If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.{{/i}}

                            + +

                            {{_i}}Data attributes{{/i}}

                            +

                            {{_i}}...{{/i}}

                            + +

                            {{_i}}Programmatic API{{/i}}

                            +

                            {{_i}}...{{/i}}

                            + + + {{! Thought: consider porting much of the JS readme here? }} + +
                            + + + + +
                            +
                            +

                            {{_i}}Transitions{{/i}} bootstrap-transition.js

                            +
                            +

                            {{_i}}About transitions{{/i}}

                            +

                            {{_i}}For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.{{/i}}

                            +

                            {{_i}}Use cases{{/i}}

                            +

                            {{_i}}A few examples of the transition plugin:{{/i}}

                            +
                              +
                            • {{_i}}Sliding or fading in modals{{/i}}
                              • +
                            • {{_i}}Fading out tabs{{/i}}
                              • +
                            • {{_i}}Fading out alerts{{/i}}
                              • +
                            • {{_i}}Sliding carousel panes{{/i}}
                              • +
                            + + {{! Ideas: include docs for .fade.in, .slide.in, etc }} +
                            + + + + +
                            +
                            +

                            {{_i}}Modals{{/i}} bootstrap-modal.js

                            +
                            + + +

                            {{_i}}Examples{{/i}}

                            +

                            {{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}

                            + +

                            {{_i}}Static example{{/i}}

                            +

                            {{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}

                            +
                            +
                            +
                            + +

                            {{_i}}Modal header{{/i}}

                            +
                            +
                            +

                            {{_i}}One fine body…{{/i}}

                            +
                            +
                            + {{_i}}Close{{/i}} + {{_i}}Save changes{{/i}} +
                            +
                            +
                            {{! /example }} 
                             <div class="modal hide fade">
   <div class="modal-header">
@@ -123,43 +124,43 @@
 </div>
                            -

                            {{_i}}Live demo{{/i}}

                            -

                            {{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}

                            - -
                            + - - - -
                            -
                            -

                            {{_i}}ScrollSpy{{/i}} bootstrap-scrollspy.js

                            -
                            + +
                            +
                            +

                            {{_i}}ScrollSpy{{/i}} bootstrap-scrollspy.js

                            +
                            -

                            {{_i}}Example in navbar{{/i}}

                            -

                            {{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.{{/i}}

                            -
                            -
                            +

                            {{_i}}Events{{/i}}

                            + + + + + + + + + + + + + +
                            {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                            {{_i}}activate{{/i}}{{_i}}This event fires whenever a new item becomes activated by the scrollspy.{{/i}}
                            +
                            - -
                            -
                            -

                            {{_i}}Togglable tabs{{/i}} bootstrap-tab.js

                            -
                            - - -

                            {{_i}}Example tabs{{/i}}

                            -

                            {{_i}}Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.{{/i}}

                            -
                            - -
                            -
                            -

                            Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

                            -
                            -
                            -

                            Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

                            -
                            - - + +
                            +
                            +

                            {{_i}}Togglable tabs{{/i}} bootstrap-tab.js

                            -
                            {{! /example }} -
                            +

                            {{_i}}Example tabs{{/i}}

                            +

                            {{_i}}Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.{{/i}}

                            +
                            + +
                            +
                            +

                            Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

                            +
                            +
                            +

                            Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

                            +
                            + + +
                            +
                            {{! /example }} -

                            {{_i}}Usage{{/i}}

                            -

                            {{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}

                            +
                            + + +

                            {{_i}}Usage{{/i}}

                            +

                            {{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}

                             $('#myTab a').click(function (e) {
   e.preventDefault();
   $(this).tab('show');
 })
                            -

                            {{_i}}You can activate individual tabs in several ways:{{/i}}

                            +

                            {{_i}}You can activate individual tabs in several ways:{{/i}}

                             $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
 $('#myTab a:first').tab('show'); // Select first tab
@@ -597,8 +597,8 @@ $('#myTab a:last').tab('show'); // Select last tab
 $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
                            -

                            {{_i}}Markup{{/i}}

                            -

                            {{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.{{/i}}

                            +

                            {{_i}}Markup{{/i}}

                            +

                            {{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.{{/i}}

                             <ul class="nav nav-tabs">
   <li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
@@ -607,11 +607,11 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   <li><a href="#settings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li>
 </ul>
                            -

                            {{_i}}Methods{{/i}}

                            -

                            $().tab

                            -

                            - {{_i}}Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.{{/i}} -

                            +

                            {{_i}}Methods{{/i}}

                            +

                            $().tab

                            +

                            + {{_i}}Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.{{/i}} + 

                             <ul class="nav nav-tabs" id="myTab">
   <li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li>
@@ -634,429 +634,425 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
 </script>
                            -

                            {{_i}}Events{{/i}}

                            - - - - - - - - - - - - - - - - - -
                            {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                            {{_i}}show{{/i}}{{_i}}This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
                            {{_i}}shown{{/i}}{{_i}}This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
                            +

                            {{_i}}Events{{/i}}

                            + + + + + + + + + + + + + + + + + +
                            {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                            {{_i}}show{{/i}}{{_i}}This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
                            {{_i}}shown{{/i}}{{_i}}This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
                             $('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
 })
                            -
                            + - -
                            -
                            -

                            {{_i}}Tooltips{{/i}} bootstrap-tooltip.js

                            -
                            + +
                            +
                            +

                            {{_i}}Tooltips{{/i}} bootstrap-tooltip.js

                            +
                            -

                            {{_i}}Examples{{/i}}

                            -

                            {{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}

                            -

                            {{_i}}Hover over the links below to see tooltips:{{/i}}

                            -
                            -

                            {{_i}}Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.{{/i}} -

                            -
                            {{! /example }} +

                            {{_i}}Examples{{/i}}

                            +

                            {{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}

                            +

                            {{_i}}Hover over the links below to see tooltips:{{/i}}

                            +
                            +

                            {{_i}}Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.{{/i}} +

                            +
                            {{! /example }} -

                            {{_i}}Four directions{{/i}}

                            -
                            - -
                            {{! /example }} +

                            {{_i}}Four directions{{/i}}

                            +
                            + +
                            {{! /example }} -
                            +
                            -

                            {{_i}}Usage{{/i}}

                            -

                            {{_i}}Trigger the tooltip via javascript:{{/i}}

                            -
                            $('#example').tooltip({{_i}}options{{/i}})
                            +

                            {{_i}}Usage{{/i}}

                            +

                            {{_i}}Trigger the tooltip via javascript:{{/i}}

                            + 
                            $('#example').tooltip({{_i}}options{{/i}})
                            -

                            {{_i}}Options{{/i}}

                            -

                            {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

                            - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                            {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                            {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
                            {{_i}}html{{/i}}{{_i}}boolean{{/i}}true{{_i}}Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
                            {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'top'{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right
                            {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}If a selector is provided, tooltip objects will be delegated to the specified targets.{{/i}}
                            {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` tag isn't present{{/i}}
                            {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how tooltip is triggered{{/i}} - hover | focus | manual
                            {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 -

                            {{_i}}delay showing and hiding the tooltip (ms) - does not apply to manual trigger type{{/i}}

                            -

                            {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

                            -

                            {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

                            -
                            -
                            - {{_i}}Heads up!{{/i}} - {{_i}}Options for individual tooltips can alternatively be specified through the use of data attributes.{{/i}} -
                            +

                            {{_i}}Options{{/i}}

                            +

                            {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

                            + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                            {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                            {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
                            {{_i}}html{{/i}}{{_i}}boolean{{/i}}true{{_i}}Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
                            {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'top'{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right
                            {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}If a selector is provided, tooltip objects will be delegated to the specified targets.{{/i}}
                            {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` tag isn't present{{/i}}
                            {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how tooltip is triggered{{/i}} - hover | focus | manual
                            {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 +

                            {{_i}}delay showing and hiding the tooltip (ms) - does not apply to manual trigger type{{/i}}

                            +

                            {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

                            +

                            {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

                            +
                            +
                            + {{_i}}Heads up!{{/i}} + {{_i}}Options for individual tooltips can alternatively be specified through the use of data attributes.{{/i}} +
                            -

                            {{_i}}Markup{{/i}}

                            -

                            {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

                            +

                            {{_i}}Markup{{/i}}

                            +

                            {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

                             <a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
                            -

                            {{_i}}Methods{{/i}}

                            -

                            $().tooltip({{_i}}options{{/i}})

                            -

                            {{_i}}Attaches a tooltip handler to an element collection.{{/i}}

                            -

                            .tooltip('show')

                            -

                            {{_i}}Reveals an element's tooltip.{{/i}}

                            - 
                            $('#element').tooltip('show')
                            -

                            .tooltip('hide')

                            -

                            {{_i}}Hides an element's tooltip.{{/i}}

                            - 
                            $('#element').tooltip('hide')
                            -

                            .tooltip('toggle')

                            -

                            {{_i}}Toggles an element's tooltip.{{/i}}

                            - 
                            $('#element').tooltip('toggle')
                            -

                            .tooltip('destroy')

                            -

                            {{_i}}Destroys an element's tooltip.{{/i}}

                            - 
                            $('#element').tooltip('destroy')
                            -
                            +

                            {{_i}}Methods{{/i}}

                            +

                            $().tooltip({{_i}}options{{/i}})

                            +

                            {{_i}}Attaches a tooltip handler to an element collection.{{/i}}

                            +

                            .tooltip('show')

                            +

                            {{_i}}Reveals an element's tooltip.{{/i}}

                            + 
                            $('#element').tooltip('show')
                            +

                            .tooltip('hide')

                            +

                            {{_i}}Hides an element's tooltip.{{/i}}

                            + 
                            $('#element').tooltip('hide')
                            +

                            .tooltip('toggle')

                            +

                            {{_i}}Toggles an element's tooltip.{{/i}}

                            + 
                            $('#element').tooltip('toggle')
                            +

                            .tooltip('destroy')

                            +

                            {{_i}}Destroys an element's tooltip.{{/i}}

                            + 
                            $('#element').tooltip('destroy')
                            +
                            - -
                            -
                            -

                            {{_i}}Popovers{{/i}} bootstrap-popover.js

                            -
                            + +
                            +
                            +

                            {{_i}}Popovers{{/i}} bootstrap-popover.js

                            +
                            -

                            {{_i}}Examples{{/i}}

                            -

                            {{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.{{/i}}

                            +

                            {{_i}}Examples{{/i}}

                            +

                            {{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.{{/i}}

                            -

                            {{_i}}Static popover{{/i}}

                            -

                            {{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}

                            -
                            -
                            -
                            -

                            Popover top

                            -
                            -

                            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                            +

                            {{_i}}Static popover{{/i}}

                            +

                            {{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}

                            +
                            +
                            +
                            +

                            Popover top

                            +
                            +

                            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                            +
                            -
                            -
                            -
                            -

                            Popover right

                            -
                            -

                            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                            +
                            +
                            +

                            Popover right

                            +
                            +

                            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                            +
                            -
                            -
                            -
                            -

                            Popover bottom

                            -
                            -

                            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                            +
                            +
                            +

                            Popover bottom

                            +
                            +

                            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                            +
                            -
                            -
                            -
                            -

                            Popover left

                            -
                            -

                            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                            +
                            +
                            +

                            Popover left

                            +
                            +

                            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                            +
                            + +
                            +
                            +

                            {{_i}}No markup shown as popovers are generated from javascript and content within a data attribute.{{/i}}

                            + +

                            Live demo

                            +
                            + {{_i}}Hover for popover{{/i}}
                            -
                            -
                            -

                            {{_i}}No markup shown as popovers are generated from javascript and content within a data attribute.{{/i}}

                            -

                            Live demo

                            -
                            - {{_i}}Hover for popover{{/i}} -
                            +
                            -
                            +

                            {{_i}}Usage{{/i}}

                            +

                            {{_i}}Enable popovers via javascript:{{/i}}

                            + 
                            $('#example').popover({{_i}}options{{/i}})
                            - -

                            {{_i}}Usage{{/i}}

                            -

                            {{_i}}Enable popovers via javascript:{{/i}}

                            - 
                            $('#example').popover({{_i}}options{{/i}})
                            - -

                            {{_i}}Options{{/i}}

                            -

                            {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

                            - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                            {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                            {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
                            {{_i}}html{{/i}}{{_i}}boolean{{/i}}true{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
                            {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'right'{{_i}}how to position the popover{{/i}} - top | bottom | left | right
                            {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}
                            {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how popover is triggered{{/i}} - hover | focus | manual
                            {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` attribute isn't present{{/i}}
                            {{_i}}content{{/i}}{{_i}}string | function{{/i}}''{{_i}}default content value if `data-content` attribute isn't present{{/i}}
                            {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 -

                            {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}

                            -

                            {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

                            -

                            {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

                            -
                            -
                            - {{_i}}Heads up!{{/i}} - {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}} -
                            - -

                            {{_i}}Markup{{/i}}

                            -

                            {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

                            - -

                            {{_i}}Methods{{/i}}

                            -

                            $().popover({{_i}}options{{/i}})

                            -

                            {{_i}}Initializes popovers for an element collection.{{/i}}

                            -

                            .popover('show')

                            -

                            {{_i}}Reveals an elements popover.{{/i}}

                            - 
                            $('#element').popover('show')
                            -

                            .popover('hide')

                            -

                            {{_i}}Hides an elements popover.{{/i}}

                            - 
                            $('#element').popover('hide')
                            -

                            .popover('toggle')

                            -

                            {{_i}}Toggles an elements popover.{{/i}}

                            - 
                            $('#element').popover('toggle')
                            -

                            .popover('destroy')

                            -

                            {{_i}}Destroys an element's popover.{{/i}}

                            - 
                            $('#element').popover('destroy')
                            -
                            - - - - -
                            -
                            -

                            {{_i}}Alert messages{{/i}} bootstrap-alert.js

                            -
                            - - -

                            {{_i}}Example alerts{{/i}}

                            -

                            {{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}

                            -
                            -
                            - - {{_i}}Holy guacamole!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} +

                            {{_i}}Options{{/i}}

                            +

                            {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

                            + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                            {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                            {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
                            {{_i}}html{{/i}}{{_i}}boolean{{/i}}true{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
                            {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'right'{{_i}}how to position the popover{{/i}} - top | bottom | left | right
                            {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}
                            {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how popover is triggered{{/i}} - hover | focus | manual
                            {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` attribute isn't present{{/i}}
                            {{_i}}content{{/i}}{{_i}}string | function{{/i}}''{{_i}}default content value if `data-content` attribute isn't present{{/i}}
                            {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 +

                            {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}

                            +

                            {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

                            +

                            {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

                            +
                            +
                            + {{_i}}Heads up!{{/i}} + {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
                            -
                            {{! /example }} -
                            -
                            - -

                            {{_i}}Oh snap! You got an error!{{/i}}

                            -

                            {{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}

                            -

                            - {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}} -

                            +

                            {{_i}}Markup{{/i}}

                            +

                            {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

                            + +

                            {{_i}}Methods{{/i}}

                            +

                            $().popover({{_i}}options{{/i}})

                            +

                            {{_i}}Initializes popovers for an element collection.{{/i}}

                            +

                            .popover('show')

                            +

                            {{_i}}Reveals an elements popover.{{/i}}

                            + 
                            $('#element').popover('show')
                            +

                            .popover('hide')

                            +

                            {{_i}}Hides an elements popover.{{/i}}

                            + 
                            $('#element').popover('hide')
                            +

                            .popover('toggle')

                            +

                            {{_i}}Toggles an elements popover.{{/i}}

                            + 
                            $('#element').popover('toggle')
                            +

                            .popover('destroy')

                            +

                            {{_i}}Destroys an element's popover.{{/i}}

                            + 
                            $('#element').popover('destroy')
                            +
                            + + + + +
                            +
                            +

                            {{_i}}Alert messages{{/i}} bootstrap-alert.js

                            -
                            {{! /example }} -
                            +

                            {{_i}}Example alerts{{/i}}

                            +

                            {{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}

                            +
                            +
                            + + {{_i}}Holy guacamole!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} +
                            +
                            {{! /example }} + +
                            +
                            + +

                            {{_i}}Oh snap! You got an error!{{/i}}

                            +

                            {{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}

                            +

                            + {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}} +

                            +
                            +
                            {{! /example }} -

                            {{_i}}Usage{{/i}}

                            -

                            {{_i}}Enable dismissal of an alert via javascript:{{/i}}

                            - 
                            $(".alert").alert()
                            - -

                            {{_i}}Markup{{/i}}

                            -

                            {{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}

                            - 
                            <a class="close" data-dismiss="alert" href="#">&times;</a>
                            - -

                            {{_i}}Methods{{/i}}

                            -

                            $().alert()

                            -

                            {{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}

                            -

                            .alert('close')

                            -

                            {{_i}}Closes an alert.{{/i}}

                            - 
                            $(".alert").alert('close')
                            +
                            -

                            {{_i}}Events{{/i}}

                            -

                            {{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}

                            - - - - - - - - - - - - - - - - - -
                            {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                            {{_i}}close{{/i}}{{_i}}This event fires immediately when the close instance method is called.{{/i}}
                            {{_i}}closed{{/i}}{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}
                            +

                            {{_i}}Usage{{/i}}

                            +

                            {{_i}}Enable dismissal of an alert via javascript:{{/i}}

                            + 
                            $(".alert").alert()
                            + +

                            {{_i}}Markup{{/i}}

                            +

                            {{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}

                            + 
                            <a class="close" data-dismiss="alert" href="#">&times;</a>
                            + +

                            {{_i}}Methods{{/i}}

                            +

                            $().alert()

                            +

                            {{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}

                            +

                            .alert('close')

                            +

                            {{_i}}Closes an alert.{{/i}}

                            + 
                            $(".alert").alert('close')
                            + + +

                            {{_i}}Events{{/i}}

                            +

                            {{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}

                            + + + + + + + + + + + + + + + + + +
                            {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                            {{_i}}close{{/i}}{{_i}}This event fires immediately when the close instance method is called.{{/i}}
                            {{_i}}closed{{/i}}{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}
                             $('#my-alert').bind('closed', function () {
   // {{_i}}do something…{{/i}}
 })
                            - + - -
                            -
                            -

                            {{_i}}Buttons{{/i}} bootstrap-button.js

                            -
                            - -

                            {{_i}}Example uses{{/i}}

                            -

                            {{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}

                            - -

                            {{_i}}Stateful{{/i}}

                            -

                            {{_i}}Add data-loading-text="Loading..." to use a loading state on a button.{{/i}}

                            -
                            - -
                            {{! /example }} -
                            -<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
-
                            - -

                            {{_i}}Single toggle{{/i}}

                            -

                            {{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}

                            -
                            - -
                            {{! /example }} -
                            -<button type="button" class="btn" data-toggle="button">Single Toggle</button>
-
                            - -

                            {{_i}}Checkbox{{/i}}

                            -

                            {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}

                            -
                            -
                            - - - + +
                            +
                            +

                            {{_i}}Buttons{{/i}} bootstrap-button.js

                            -
                            {{! /example }} + +

                            {{_i}}Example uses{{/i}}

                            +

                            {{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}

                            + +

                            {{_i}}Stateful{{/i}}

                            +

                            {{_i}}Add data-loading-text="Loading..." to use a loading state on a button.{{/i}}

                            +
                            + +
                            {{! /example }} + 
                            <button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
                            + +

                            {{_i}}Single toggle{{/i}}

                            +

                            {{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}

                            +
                            + +
                            {{! /example }} + 
                            <button type="button" class="btn" data-toggle="button">Single Toggle</button>
                            + +

                            {{_i}}Checkbox{{/i}}

                            +

                            {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}

                            +
                            +
                            + + + +
                            +
                            {{! /example }} 
                             <div class="btn-group" data-toggle="buttons-checkbox">
   <button type="button" class="btn">Left</button>
@@ -1065,15 +1061,15 @@ $('#my-alert').bind('closed', function () {
 </div>
                            -

                            {{_i}}Radio{{/i}}

                            -

                            {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group.{{/i}}

                            -
                            -
                            - - - -
                            -
                            {{! /example }} +

                            {{_i}}Radio{{/i}}

                            +

                            {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group.{{/i}}

                            +
                            +
                            + + + +
                            +
                            {{! /example }} 
                             <div class="btn-group" data-toggle="buttons-radio">
   <button type="button" class="btn">Left</button>
@@ -1083,101 +1079,102 @@ $('#my-alert').bind('closed', function () {
                            -
                            +
                            -

                            {{_i}}Usage{{/i}}

                            -

                            {{_i}}Enable buttons via javascript:{{/i}}

                            - 
                            $('.nav-tabs').button()
                            +

                            {{_i}}Usage{{/i}}

                            +

                            {{_i}}Enable buttons via javascript:{{/i}}

                            + 
                            $('.nav-tabs').button()
                            -

                            {{_i}}Markup{{/i}}

                            -

                            {{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}

                            +

                            {{_i}}Markup{{/i}}

                            +

                            {{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}

                            -

                            {{_i}}Options{{/i}}

                            -

                            {{_i}}None{{/i}}

                            +

                            {{_i}}Options{{/i}}

                            +

                            {{_i}}None{{/i}}

                            -

                            {{_i}}Methods{{/i}}

                            -

                            $().button('toggle')

                            -

                            {{_i}}Toggles push state. Gives the button the appearance that it has been activated.{{/i}}

                            -
                            - {{_i}}Heads up!{{/i}} - {{_i}}You can enable auto toggling of a button by using the data-toggle attribute.{{/i}} -
                            - 
                            <button type="button" class="btn" data-toggle="button" >…</button>
                            -

                            $().button('loading')

                            -

                            {{_i}}Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.{{/i}} -

                            - 
                            <button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
                            -
                            - {{_i}}Heads up!{{/i}} - {{_i}}Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".{{/i}} -
                            -

                            $().button('reset')

                            -

                            {{_i}}Resets button state - swaps text to original text.{{/i}}

                            -

                            $().button(string)

                            -

                            {{_i}}Resets button state - swaps text to any data defined text state.{{/i}}

                            +

                            {{_i}}Methods{{/i}}

                            +

                            $().button('toggle')

                            +

                            {{_i}}Toggles push state. Gives the button the appearance that it has been activated.{{/i}}

                            +
                            + {{_i}}Heads up!{{/i}} + {{_i}}You can enable auto toggling of a button by using the data-toggle attribute.{{/i}} +
                            + 
                            <button type="button" class="btn" data-toggle="button" >…</button>
                            +

                            $().button('loading')

                            +

                            {{_i}}Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.{{/i}} +

                            + 
                            <button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
                            +
                            + {{_i}}Heads up!{{/i}} + {{_i}}Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".{{/i}} +
                            +

                            $().button('reset')

                            +

                            {{_i}}Resets button state - swaps text to original text.{{/i}}

                            +

                            $().button(string)

                            +

                            {{_i}}Resets button state - swaps text to any data defined text state.{{/i}}

                            <button type="button" class="btn" data-complete-text="finished!" >...</button>
 <script>
   $('.btn').button('complete')
-</script>
                            -
                            +</script> + + - -
                            -
                            -

                            {{_i}}Collapse{{/i}} bootstrap-collapse.js

                            -
                            - -

                            {{_i}}About{{/i}}

                            -

                            {{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}

                            -

                            * {{_i}}Requires the Transitions plugin to be included.{{/i}}

                            - -

                            {{_i}}Example accordion{{/i}}

                            -

                            {{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}

                            - -
                            -
                            -
                            -
                            - - {{_i}}Collapsible Group Item #1{{/i}} - -
                            -
                            -
                            - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
                            -
                            -
                            -
                            -
                            - - {{_i}}Collapsible Group Item #2{{/i}} - -
                            -
                            -
                            - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
                            -
                            -
                            -
                            -
                            - - {{_i}}Collapsible Group Item #3{{/i}} - -
                            -
                            -
                            - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
                            -
                            -
                            + +
                            +
                            +

                            {{_i}}Collapse{{/i}} bootstrap-collapse.js

                            -
                            {{! /example }} + +

                            {{_i}}About{{/i}}

                            +

                            {{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}

                            +

                            * {{_i}}Requires the Transitions plugin to be included.{{/i}}

                            + +

                            {{_i}}Example accordion{{/i}}

                            +

                            {{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}

                            + +
                            +
                            +
                            +
                            + + {{_i}}Collapsible Group Item #1{{/i}} + +
                            +
                            +
                            + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
                            +
                            +
                            +
                            +
                            + + {{_i}}Collapsible Group Item #2{{/i}} + +
                            +
                            +
                            + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
                            +
                            +
                            +
                            +
                            + + {{_i}}Collapsible Group Item #3{{/i}} + +
                            +
                            +
                            + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
                            +
                            +
                            +
                            +
                            {{! /example }} 
                             <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
   {{_i}}simple collapsible{{/i}}
@@ -1187,137 +1184,138 @@ $('#my-alert').bind('closed', function () {
                            -
                            +
                            -

                            {{_i}}Usage{{/i}}

                            +

                            {{_i}}Usage{{/i}}

                            -

                            {{_i}}Via data attributes{{/i}}

                            -

                            {{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}

                            -

                            {{_i}}To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.{{/i}}

                            +

                            {{_i}}Via data attributes{{/i}}

                            +

                            {{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}

                            +

                            {{_i}}To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.{{/i}}

                            -

                            {{_i}}Via javascript{{/i}}

                            -

                            {{_i}}Enable manually with:{{/i}}

                            - 
                            $(".collapse").collapse()
                            +

                            {{_i}}Via javascript{{/i}}

                            +

                            {{_i}}Enable manually with:{{/i}}

                            + 
                            $(".collapse").collapse()
                            -

                            {{_i}}Options{{/i}}

                            -

                            {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-parent="".{{/i}}

                            - - - - - - - - - - - - - - - - - - - - - - - -
                            {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                            {{_i}}parent{{/i}}{{_i}}selector{{/i}}false{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior){{/i}}
                            {{_i}}toggle{{/i}}{{_i}}boolean{{/i}}true{{_i}}Toggles the collapsible element on invocation{{/i}}
                            +

                            {{_i}}Options{{/i}}

                            +

                            {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-parent="".{{/i}}

                            + + + + + + + + + + + + + + + + + + + + + + + +
                            {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                            {{_i}}parent{{/i}}{{_i}}selector{{/i}}false{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior){{/i}}
                            {{_i}}toggle{{/i}}{{_i}}boolean{{/i}}true{{_i}}Toggles the collapsible element on invocation{{/i}}
                            -

                            {{_i}}Methods{{/i}}

                            -

                            .collapse({{_i}}options{{/i}})

                            -

                            {{_i}}Activates your content as a collapsible element. Accepts an optional options object.{{/i}} +

                            {{_i}}Methods{{/i}}

                            +

                            .collapse({{_i}}options{{/i}})

                            +

                            {{_i}}Activates your content as a collapsible element. Accepts an optional options object.{{/i}} 

                             $('#myCollapsible').collapse({
   toggle: false
-})
                            -

                            .collapse('toggle')

                            -

                            {{_i}}Toggles a collapsible element to shown or hidden.{{/i}}

                            -

                            .collapse('show')

                            -

                            {{_i}}Shows a collapsible element.{{/i}}

                            -

                            .collapse('hide')

                            -

                            {{_i}}Hides a collapsible element.{{/i}}

                            +}) + +

                            .collapse('toggle')

                            +

                            {{_i}}Toggles a collapsible element to shown or hidden.{{/i}}

                            +

                            .collapse('show')

                            +

                            {{_i}}Shows a collapsible element.{{/i}}

                            +

                            .collapse('hide')

                            +

                            {{_i}}Hides a collapsible element.{{/i}}

                            -

                            {{_i}}Events{{/i}}

                            -

                            {{_i}}Bootstrap's collapse class exposes a few events for hooking into collapse functionality.{{/i}}

                            - - - - - - - - - - - - - - - - - - - - - - - - - -
                            {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                            {{_i}}show{{/i}}{{_i}}This event fires immediately when the show instance method is called.{{/i}}
                            {{_i}}shown{{/i}}{{_i}}This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).{{/i}}
                            {{_i}}hide{{/i}} - {{_i}}This event is fired immediately when the hide method has been called.{{/i}} -
                            {{_i}}hidden{{/i}}{{_i}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}
                            +

                            {{_i}}Events{{/i}}

                            +

                            {{_i}}Bootstrap's collapse class exposes a few events for hooking into collapse functionality.{{/i}}

                            + + + + + + + + + + + + + + + + + + + + + + + + + +
                            {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                            {{_i}}show{{/i}}{{_i}}This event fires immediately when the show instance method is called.{{/i}}
                            {{_i}}shown{{/i}}{{_i}}This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).{{/i}}
                            {{_i}}hide{{/i}} + {{_i}}This event is fired immediately when the hide method has been called.{{/i}} +
                            {{_i}}hidden{{/i}}{{_i}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}
                             $('#myCollapsible').on('hidden', function () {
   // {{_i}}do something…{{/i}}
 })
                            -
                            + - - +

                            {{_i}}Events{{/i}}

                            +

                            {{_i}}Bootstrap's carousel class exposes two events for hooking into carousel functionality.{{/i}}

                            + + + + + + + + + + + + + + + + + +
                            {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                            {{_i}}slide{{/i}}{{_i}}This event fires immediately when the slide instance method is invoked.{{/i}}
                            {{_i}}slid{{/i}}{{_i}}This event is fired when the carousel has completed its slide transition.{{/i}}
                            + - -
                            -
                            -

                            {{_i}}Typeahead{{/i}} bootstrap-typeahead.js

                            -
                            + +
                            +
                            +

                            {{_i}}Typeahead{{/i}} bootstrap-typeahead.js

                            +
                            -

                            {{_i}}Example{{/i}}

                            -

                            {{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}

                            -
                            - -
                            {{! /example }} -
                            -<input type="text" data-provide="typeahead">
-
                            +

                            {{_i}}Example{{/i}}

                            +

                            {{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}

                            +
                            + +
                            {{! /example }} + 
                            <input type="text" data-provide="typeahead">
                            -
                            +
                            -

                            {{_i}}Usage{{/i}}

                            +

                            {{_i}}Usage{{/i}}

                            -

                            {{_i}}Via data attributes{{/i}}

                            -

                            {{_i}}Add data attributes to register an element with typeahead functionality as shown in the example above.{{/i}}

                            +

                            {{_i}}Via data attributes{{/i}}

                            +

                            {{_i}}Add data attributes to register an element with typeahead functionality as shown in the example above.{{/i}}

                            -

                            {{_i}}Via javascript{{/i}}

                            -

                            {{_i}}Call the typeahead manually with:{{/i}}

                            - 
                            $('.typeahead').typeahead()
                            +

                            {{_i}}Via javascript{{/i}}

                            +

                            {{_i}}Call the typeahead manually with:{{/i}}

                            + 
                            $('.typeahead').typeahead()
                            -

                            {{_i}}Options{{/i}}

                            -

                            {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-source="".{{/i}}

                            - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                            {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                            {{_i}}source{{/i}}{{_i}}array, function{{/i}}[ ]{{_i}}The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.{{/i}}
                            {{_i}}items{{/i}}{{_i}}number{{/i}}8{{_i}}The max number of items to display in the dropdown.{{/i}}
                            {{_i}}matcher{{/i}}{{_i}}function{{/i}}{{_i}}case insensitive{{/i}}{{_i}}The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.{{/i}}
                            {{_i}}sorter{{/i}}{{_i}}function{{/i}}{{_i}}exact match,
                            case sensitive,
                            case insensitive{{/i}}                            		{{_i}}Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.{{/i}}
                            {{_i}}highlighter{{/i}}{{_i}}function{{/i}}{{_i}}highlights all default matches{{/i}}{{_i}}Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.{{/i}}
                            +

                            {{_i}}Options{{/i}}

                            +

                            {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-source="".{{/i}}

                            + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                            {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                            {{_i}}source{{/i}}{{_i}}array, function{{/i}}[ ]{{_i}}The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.{{/i}}
                            {{_i}}items{{/i}}{{_i}}number{{/i}}8{{_i}}The max number of items to display in the dropdown.{{/i}}
                            {{_i}}matcher{{/i}}{{_i}}function{{/i}}{{_i}}case insensitive{{/i}}{{_i}}The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.{{/i}}
                            {{_i}}sorter{{/i}}{{_i}}function{{/i}}{{_i}}exact match,
                            case sensitive,
                            case insensitive{{/i}}                            		{{_i}}Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.{{/i}}
                            {{_i}}highlighter{{/i}}{{_i}}function{{/i}}{{_i}}highlights all default matches{{/i}}{{_i}}Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.{{/i}}
                            -

                            {{_i}}Methods{{/i}}

                            -

                            .typeahead({{_i}}options{{/i}})

                            -

                            {{_i}}Initializes an input with a typeahead.{{/i}}

                            -
                            +

                            {{_i}}Methods{{/i}}

                            +

                            .typeahead({{_i}}options{{/i}})

                            +

                            {{_i}}Initializes an input with a typeahead.{{/i}}

                            +
                            - -
                            -
                            -

                            - {{_i}}Affix{{/i}} - {{_i}}Make an element stick in place{{/i}} -

                            -
                            + +
                            +
                            +

                            + {{_i}}Affix{{/i}} + {{_i}}Make an element stick in place{{/i}} +

                            +
                            -

                            {{_i}}...{{/i}}

                            -

                            {{_i}}...{{/i}}

                            -
                            +

                            {{_i}}...{{/i}}

                            +

                            {{_i}}...{{/i}}

                            +
                            -
                            -
                            -...
-
                            -
                            +
                            + 
                            ...
                            + -
                            {{! /span9 }} -
                            {{! row}} +
                            {{! /span9 }} + {{! row}} -{{! /container }} + {{! /.container }} + +{{! /.bs-docs-canvas }} diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 4b9d4c5b25..5a613a45fa 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -7,35 +7,35 @@ +
                            -
                            +
                            - - -
                            -
                            - -
                            -
                            + +
                            +
                            + +
                            +
                            - -
                            -
                            -

                            {{_i}}Global styles for CSS reset, typography, and links{{/i}}

                            -
                            + +
                            +
                            +

                            {{_i}}Global styles for CSS reset, typography, and links{{/i}}

                            +
                            -

                            {{_i}}Requires HTML5 doctype{{/i}}

                            -

                            {{_i}}Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.{{/i}}

                            +

                            {{_i}}Requires HTML5 doctype{{/i}}

                            +

                            {{_i}}Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.{{/i}}

                             <!DOCTYPE html>
 <html lang="en">
@@ -43,84 +43,84 @@
 </html>
                            -

                            {{_i}}Typography and links{{/i}}

                            -

                            {{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}

                            -
                              -
                            • {{_i}}Remove margin on the body{{/i}}
                              • -
                            • {{_i}}Set background-color: white; on the body{{/i}}
                              • -
                            • {{_i}}Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base{{/i}}
                              • -
                            • {{_i}}Set the global link color via @linkColor and apply link underlines only on :hover{{/i}}
                              • -
                            -

                            {{_i}}These styles can be found within scaffolding.less.{{/i}}

                            +

                            {{_i}}Typography and links{{/i}}

                            +

                            {{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}

                            +
                              +
                            • {{_i}}Remove margin on the body{{/i}}
                              • +
                            • {{_i}}Set background-color: white; on the body{{/i}}
                              • +
                            • {{_i}}Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base{{/i}}
                              • +
                            • {{_i}}Set the global link color via @linkColor and apply link underlines only on :hover{{/i}}
                              • +
                            +

                            {{_i}}These styles can be found within scaffolding.less.{{/i}}

                            -

                            {{_i}}Reset via Normalize{{/i}}

                            -

                            {{_i}}With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.{{/i}}

                            +

                            {{_i}}Reset via Normalize{{/i}}

                            +

                            {{_i}}With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.{{/i}}

                            -
                            +
                            - -
                            -
                            -

                            {{_i}}Default grid system 12 columns with a responsive twist{{/i}}

                            -
                            - -

                            {{_i}}Live grid example{{/i}}

                            -

                            {{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}

                            -
                            -
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            + +
                            +
                            +

                            {{_i}}Default grid system 12 columns with a responsive twist{{/i}}

                            -
                            -
                            2
                            -
                            3
                            -
                            4
                            -
                            -
                            -
                            4
                            -
                            5
                            -
                            -
                            -
                            9
                            -
                            -
                            -

                            {{_i}}Basic grid HTML{{/i}}

                            -

                            {{_i}}For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).{{/i}}

                            +

                            {{_i}}Live grid example{{/i}}

                            +

                            {{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}

                            +
                            +
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            +
                            +
                            2
                            +
                            3
                            +
                            4
                            +
                            +
                            +
                            4
                            +
                            5
                            +
                            +
                            +
                            9
                            +
                            +
                            + +

                            {{_i}}Basic grid HTML{{/i}}

                            +

                            {{_i}}For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).{{/i}}

                             <div class="row">
   <div class="span4">...</div>
   <div class="span8">...</div>
 </div>
                            -

                            {{_i}}Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.{{/i}}

                            +

                            {{_i}}Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.{{/i}}

                            -

                            {{_i}}Offsetting columns{{/i}}

                            -

                            {{_i}}Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.{{/i}}

                            -
                            -
                            -
                            4
                            -
                            3 offset 2
                            -
                            -
                            -
                            3 offset 1
                            -
                            3 offset 2
                            -
                            -
                            -
                            6 offset 3
                            -
                            -
                            +

                            {{_i}}Offsetting columns{{/i}}

                            +

                            {{_i}}Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.{{/i}}

                            +
                            +
                            +
                            4
                            +
                            3 offset 2
                            +
                            +
                            +
                            3 offset 1
                            +
                            3 offset 2
                            +
                            +
                            +
                            6 offset 3
                            +
                            + 
                             <div class="row">
   <div class="span4">...</div>
@@ -128,7 +128,7 @@
 </div>
                            -

                            {{_i}}Nesting columns{{/i}}

                            +

                            {{_i}}Nesting columns{{/i}}

                            {{_i}}To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}

                            {{_i}}Example{{/i}}

                            {{_i}}Here two nested .span4 columns are placed within a .span8.{{/i}}

                            @@ -156,54 +156,54 @@ </div> </div> -
                            + - -
                            -
                            -

                            {{_i}}Fluid grid system 12 responsive, percent-based columns{{/i}}

                            -
                            + +
                            +
                            +

                            {{_i}}Fluid grid system 12 responsive, percent-based columns{{/i}}

                            +
                            -

                            {{_i}}Live fluid grid example{{/i}}

                            -

                            {{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}

                            -
                            -
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            -
                            1
                            +

                            {{_i}}Live fluid grid example{{/i}}

                            +

                            {{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}

                            +
                            +
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            1
                            +
                            +
                            +
                            4
                            +
                            4
                            +
                            4
                            +
                            +
                            +
                            4
                            +
                            8
                            +
                            +
                            +
                            6
                            +
                            6
                            +
                            +
                            +
                            12
                            +
                            -
                            -
                            4
                            -
                            4
                            -
                            4
                            -
                            -
                            -
                            4
                            -
                            8
                            -
                            -
                            -
                            6
                            -
                            6
                            -
                            -
                            -
                            12
                            -
                            -
                            -

                            {{_i}}Basic fluid grid HTML{{/i}}

                            -

                            {{_i}}Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}

                            +

                            {{_i}}Basic fluid grid HTML{{/i}}

                            +

                            {{_i}}Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}

                             <div class="row-fluid">
   <div class="span4">...</div>
@@ -211,21 +211,21 @@
 </div>
                            -

                            {{_i}}Fluid offsetting{{/i}}

                            -

                            {{_i}}Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.{{/i}}

                            -
                            -
                            -
                            4
                            -
                            4 offset 4
                            -
                            -
                            -
                            3 offset 3
                            -
                            3 offset 3
                            -
                            -
                            -
                            6 offset 6
                            -
                            -
                            +

                            {{_i}}Fluid offsetting{{/i}}

                            +

                            {{_i}}Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.{{/i}}

                            +
                            +
                            +
                            4
                            +
                            4 offset 4
                            +
                            +
                            +
                            3 offset 3
                            +
                            3 offset 3
                            +
                            +
                            +
                            6 offset 6
                            +
                            + 
                             <div class="row-fluid">
   <div class="span4">...</div>
@@ -233,21 +233,21 @@
 </div>
                            -

                            {{_i}}Fluid nesting{{/i}}

                            -

                            {{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}

                            -
                            -
                            - {{_i}}Fluid 12{{/i}} -
                            -
                            - {{_i}}Fluid 6{{/i}} -
                            -
                            - {{_i}}Fluid 6{{/i}} +

                            {{_i}}Fluid nesting{{/i}}

                            +

                            {{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}

                            +
                            +
                            + {{_i}}Fluid 12{{/i}} +
                            +
                            + {{_i}}Fluid 6{{/i}} +
                            +
                            + {{_i}}Fluid 6{{/i}} +
                            - 
                             <div class="row-fluid">
   <div class="span12">
@@ -260,23 +260,23 @@
 </div>
                            -
                            +
                            - -
                            -
                            -

                            {{_i}}Layouts Basic templates to create webpages{{/i}}

                            -
                            + +
                            +
                            +

                            {{_i}}Layouts Basic templates to create webpages{{/i}}

                            +
                            -

                            {{_i}}Fixed layout{{/i}}

                            -

                            {{_i}}Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.{{/i}}

                            -
                            -
                            -
                            +

                            {{_i}}Fixed layout{{/i}}

                            +

                            {{_i}}Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.{{/i}}

                            +
                            +
                            + 
                             <body>
   <div class="container">
@@ -285,12 +285,12 @@
 </body>
                            -

                            {{_i}}Fluid layout{{/i}}

                            -

                            {{_i}}Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.{{/i}}

                            -
                            -
                            -
                            -
                            +

                            {{_i}}Fluid layout{{/i}}

                            +

                            {{_i}}Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.{{/i}}

                            +
                            +
                            +
                            + 
                             <div class="container-fluid">
   <div class="row-fluid">
@@ -303,81 +303,81 @@
   </div>
 </div>
                            -
                            +
                            - -
                            -
                            -

                            {{_i}}Responsive design Media queries for various devices and resolutions{{/i}}

                            -
                            + +
                            +
                            +

                            {{_i}}Responsive design Media queries for various devices and resolutions{{/i}}

                            +
                            - {{! Enabling }} -

                            {{_i}}Enabling responsive features{{/i}}

                            -

                            {{_i}}Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.{{/i}}

                            + {{! Enabling }} +

                            {{_i}}Enabling responsive features{{/i}}

                            +

                            {{_i}}Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.{{/i}}

                             <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
                            -

                            {{_i}}Heads up!{{/i}} {{_i}} Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.{{/i}}

                            +

                            {{_i}}Heads up!{{/i}} {{_i}} Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.{{/i}}

                            - {{! About }} -

                            {{_i}}About responsive Bootstrap{{/i}}

                            - Responsive devices -

                            {{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}

                            -
                              -
                            • {{_i}}Modify the width of column in our grid{{/i}}
                              • -
                            • {{_i}}Stack elements instead of float wherever necessary{{/i}}
                              • -
                            • {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
                              • -
                            -

                            {{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}

                            + {{! About }} +

                            {{_i}}About responsive Bootstrap{{/i}}

                            + Responsive devices +

                            {{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}

                            +
                              +
                            • {{_i}}Modify the width of column in our grid{{/i}}
                              • +
                            • {{_i}}Stack elements instead of float wherever necessary{{/i}}
                              • +
                            • {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
                              • +
                            +

                            {{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}

                            - {{! Supported }} -

                            {{_i}}Supported devices{{/i}}

                            -

                            {{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}

                            - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                            {{_i}}Label{{/i}}{{_i}}Layout width{{/i}}{{_i}}Column width{{/i}}{{_i}}Gutter width{{/i}}
                            {{_i}}Phones{{/i}}480px and below{{_i}}Fluid columns, no fixed widths{{/i}}
                            {{_i}}Phones to tablets{{/i}}767px and below{{_i}}Fluid columns, no fixed widths{{/i}}
                            {{_i}}Portrait tablets{{/i}}768px and above42px20px
                            {{_i}}Default{{/i}}980px and up60px20px
                            {{_i}}Large display{{/i}}1200px and up70px30px
                            + {{! Supported }} +

                            {{_i}}Supported devices{{/i}}

                            +

                            {{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}

                            + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                            {{_i}}Label{{/i}}{{_i}}Layout width{{/i}}{{_i}}Column width{{/i}}{{_i}}Gutter width{{/i}}
                            {{_i}}Phones{{/i}}480px and below{{_i}}Fluid columns, no fixed widths{{/i}}
                            {{_i}}Phones to tablets{{/i}}767px and below{{_i}}Fluid columns, no fixed widths{{/i}}
                            {{_i}}Portrait tablets{{/i}}768px and above42px20px
                            {{_i}}Default{{/i}}980px and up60px20px
                            {{_i}}Large display{{/i}}1200px and up70px30px
                             /* {{_i}}Landscape phones and down{{/i}} */
 @media (max-width: 480px) { ... }
@@ -393,83 +393,85 @@
                            - {{! Responsive utility classes }} -

                            {{_i}}Responsive utility classes{{/i}}

                            -

                            {{_i}}For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.{{/i}}

                            - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                            {{_i}}Class{{/i}}{{_i}}Phones 767px and below{{/i}}{{_i}}Tablets 979px to 768px{{/i}}{{_i}}Desktops Default{{/i}}
                            .visible-phone{{_i}}Visible{{/i}}
                            .visible-tablet{{_i}}Visible{{/i}}
                            .visible-desktop{{_i}}Visible{{/i}}
                            .hidden-phone{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
                            .hidden-tablet{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
                            .hidden-desktop{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
                            + {{! Responsive utility classes }} +

                            {{_i}}Responsive utility classes{{/i}}

                            +

                            {{_i}}For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.{{/i}}

                            + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                            {{_i}}Class{{/i}}{{_i}}Phones 767px and below{{/i}}{{_i}}Tablets 979px to 768px{{/i}}{{_i}}Desktops Default{{/i}}
                            .visible-phone{{_i}}Visible{{/i}}
                            .visible-tablet{{_i}}Visible{{/i}}
                            .visible-desktop{{_i}}Visible{{/i}}
                            .hidden-phone{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
                            .hidden-tablet{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
                            .hidden-desktop{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
                            -

                            {{_i}}When to use{{/i}}

                            -

                            {{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}

                            +

                            {{_i}}When to use{{/i}}

                            +

                            {{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}

                            -

                            {{_i}}Responsive utilities test case{{/i}}

                            -

                            {{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}

                            -

                            {{_i}}Visible on...{{/i}}

                            -

                            {{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}

                            -
                              -
                            • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
                              • -
                            • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
                              • -
                            • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
                              • -
                            -

                            {{_i}}Hidden on...{{/i}}

                            -

                            {{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}

                            -
                              -
                            • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
                              • -
                            • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
                              • -
                            • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
                              • -
                            +

                            {{_i}}Responsive utilities test case{{/i}}

                            +

                            {{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}

                            +

                            {{_i}}Visible on...{{/i}}

                            +

                            {{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}

                            +
                              +
                            • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
                              • +
                            • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
                              • +
                            • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
                              • +
                            +

                            {{_i}}Hidden on...{{/i}}

                            +

                            {{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}

                            +
                              +
                            • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
                              • +
                            • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
                              • +
                            • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
                              • +
                            -
                            +
                            -
                            {{! /span9 }} -
                            {{! row}} +
                            {{! /span9 }} +
                            {{! row}} -
                            {{! /container }} +
                            {{! /.container }} + +
                            {{! /.bs-docs-canvas }} From 2a0cf0f1312ff9edf96bed047758eb6e295b18ff Mon Sep 17 00:00:00 2001 From: Jonathan Sampson Date: Tue, 24 Jul 2012 01:50:38 -0400 Subject: [PATCH 237/422] IE10 uses 'transition' and 'transitionend' msTransition, while supported in IE, should be ignored in favor of the unprefixed property. Additionally, MSTransitionEnd should also be ignored in favor of the unprefixed event transitionend. Current unit test requires no attention in light of this change. MSDN: http://msdn.microsoft.com/en-us/library/ie/hh673535(v=vs.85).aspx#transitions_dom_events --- js/bootstrap-transition.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js index 0c37ebb187..c5b2674f37 100644 --- a/js/bootstrap-transition.js +++ b/js/bootstrap-transition.js @@ -37,7 +37,6 @@ 'WebkitTransition' : 'webkitTransitionEnd' , 'MozTransition' : 'transitionend' , 'OTransition' : 'oTransitionEnd otransitionend' - , 'msTransition' : 'MSTransitionEnd' , 'transition' : 'transitionend' } , name From 6245886b269cdba7e8006ebf59165d7558492ec3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jul 2012 23:54:26 -0700 Subject: [PATCH 238/422] tweak docs shadows --- docs/assets/css/docs.css | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 657bcd8a92..fa487e001a 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -29,6 +29,9 @@ h3 code { body > .navbar-fixed-top { font-size: 13px; + -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.15); + -moz-box-shadow: 0 5px 15px rgba(0,0,0,.15); + box-shadow: 0 5px 15px rgba(0,0,0,.15); } /* Change the docs' brand */ @@ -960,25 +963,25 @@ form.bs-docs-example { left: 0; } .masthead { - height: 400px; + height: 380px; } .subhead { - height: 120px; /* +80px pdding */ + height: 130px; /* +80px pdding */ } .bs-docs-canvas { position: absolute; width: 100%; z-index: 10; background-color: #fff; - -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.5); - -moz-box-shadow: 0 1px 5px rgba(0,0,0,.5); - box-shadow: 0 1px 5px rgba(0,0,0,.5); + -webkit-box-shadow: 0 -5px 15px rgba(0,0,0,.15); + -moz-box-shadow: 0 -5px 15px rgba(0,0,0,.15); + box-shadow: 0 -5px 15px rgba(0,0,0,.15); } .masthead + .bs-docs-canvas { - top: 550px; + top: 530px; } .subhead + .bs-docs-canvas { - top: 240px; + top: 250px; } } From cd441e082f25836be85ecc14f0bed4d8e74965b2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jul 2012 23:56:13 -0700 Subject: [PATCH 239/422] fixes #4156: don't override border radius if stacked nav has one child --- docs/assets/css/bootstrap.css | 18 ++++++++++++------ less/navs.less | 4 ++-- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index df389af9cc..5525614d60 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3686,15 +3686,21 @@ input[type="submit"].btn.btn-mini { } .nav-tabs.nav-stacked > li:first-child > a { - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topright: 4px; + -moz-border-radius-topleft: 4px; } .nav-tabs.nav-stacked > li:last-child > a { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -moz-border-radius-bottomleft: 4px; } .nav-tabs.nav-stacked > li > a:hover { diff --git a/less/navs.less b/less/navs.less index 96723ffc93..4c38f7dbf2 100644 --- a/less/navs.less +++ b/less/navs.less @@ -171,10 +171,10 @@ .border-radius(0); } .nav-tabs.nav-stacked > li:first-child > a { - .border-radius(4px 4px 0 0); + .border-top-radius(4px); } .nav-tabs.nav-stacked > li:last-child > a { - .border-radius(0 0 4px 4px); + .border-bottom-radius(4px); } .nav-tabs.nav-stacked > li > a:hover { border-color: #ddd; From 4ea7c472358e2d77f76193ed3c1bafd641dd74ae Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jul 2012 00:21:40 -0700 Subject: [PATCH 240/422] slightly fix side bar --- docs/assets/css/bootstrap.css | 1 + docs/assets/css/docs.css | 27 ++++++++++++++++-------- docs/assets/js/bootstrap-affix.js | 2 -- docs/javascript.html | 2 +- docs/templates/pages/javascript.mustache | 2 +- 5 files changed, 21 insertions(+), 13 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 5d9860248f..df389af9cc 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -67,6 +67,7 @@ sub { } img { + height: auto; max-width: 100%; vertical-align: middle; border: 0; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 0f78130deb..4f55f268a6 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -886,6 +886,7 @@ form.bs-docs-example { min-height: 1px; } .bs-docs-sidenav { + width: 218px; margin-top: 40px; padding: 0; margin-right: 10px; @@ -930,28 +931,36 @@ form.bs-docs-example { background-image: url(../img/glyphicons-halflings-white.png); opacity: .75; } - .bs-docs-sidenav.affix { top: 40px; } -@media (max-width: 979px) { - - .bs-docs-sidenav.affix { - top: 0px; - } - +@media (min-width: 1200px) { .bs-docs-sidenav { + width: 258px; + } +} + +@media (max-width: 979px) { + .bs-docs-sidenav { + top: 0px; margin-top: 30px; margin-right: 0; } +} +@media (min-width: 768px) and (max-width: 979px) { + .bs-docs-sidenav { + width: 166px; + } } @media (max-width: 767px) { - + .bs-docs-sidenav { + width: auto; + } .bs-docs-sidenav.affix { position: relative; + width: auto; } - } diff --git a/docs/assets/js/bootstrap-affix.js b/docs/assets/js/bootstrap-affix.js index 33207b0fbd..a1cd10933f 100644 --- a/docs/assets/js/bootstrap-affix.js +++ b/docs/assets/js/bootstrap-affix.js @@ -50,7 +50,6 @@ if (typeof offset != 'object') offset = { x: offset, y: offset } - affix = (offset.x == null || (position.left - scrollLeft <= offset.x)) && (offset.y == null || (position.top - scrollTop <= offset.y)) @@ -82,7 +81,6 @@ } - /* AFFIX DATA-API * ============== */ diff --git a/docs/javascript.html b/docs/javascript.html index bc17456eae..e0d5495184 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -85,7 +85,7 @@ ================================================== -->
                            -
                              +
                              • Overview
                              • Transitions
                              • Modal
                                • diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index c5afdfb068..906fbc4c6c 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -14,7 +14,7 @@ ================================================== -->
                                -
                                  +
                                  • {{_i}}Overview{{/i}}
                                  • {{_i}}Transitions{{/i}}
                                  • {{_i}}Modal{{/i}}
                                    • From e38fa4b1f40b8e8f64ad904fd5ea3d6d7ab9dffc Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jul 2012 00:30:58 -0700 Subject: [PATCH 241/422] fix scroll thinggg --- docs/assets/js/bootstrap-transition.js | 1 - docs/assets/js/bootstrap.js | 1 - docs/assets/js/bootstrap.min.js | 2 +- docs/base-css.html | 2 +- docs/components.html | 2 +- docs/customize.html | 2 +- docs/getting-started.html | 2 +- docs/javascript.html | 1 - docs/scaffolding.html | 2 +- docs/templates/pages/base-css.mustache | 2 +- docs/templates/pages/components.mustache | 2 +- docs/templates/pages/customize.mustache | 2 +- docs/templates/pages/getting-started.mustache | 2 +- docs/templates/pages/javascript.mustache | 2 +- docs/templates/pages/scaffolding.mustache | 2 +- 15 files changed, 12 insertions(+), 15 deletions(-) diff --git a/docs/assets/js/bootstrap-transition.js b/docs/assets/js/bootstrap-transition.js index 0c37ebb187..c5b2674f37 100644 --- a/docs/assets/js/bootstrap-transition.js +++ b/docs/assets/js/bootstrap-transition.js @@ -37,7 +37,6 @@ 'WebkitTransition' : 'webkitTransitionEnd' , 'MozTransition' : 'transitionend' , 'OTransition' : 'oTransitionEnd otransitionend' - , 'msTransition' : 'MSTransitionEnd' , 'transition' : 'transitionend' } , name diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js index 7ca46ac780..6024ffbf38 100644 --- a/docs/assets/js/bootstrap.js +++ b/docs/assets/js/bootstrap.js @@ -37,7 +37,6 @@ 'WebkitTransition' : 'webkitTransitionEnd' , 'MozTransition' : 'transitionend' , 'OTransition' : 'oTransitionEnd otransitionend' - , 'msTransition' : 'MSTransitionEnd' , 'transition' : 'transitionend' } , name diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js index 363a16111d..75c16fd10d 100644 --- a/docs/assets/js/bootstrap.min.js +++ b/docs/assets/js/bootstrap.min.js @@ -3,4 +3,4 @@ * Copyright 2012 Twitter, Inc. * http://www.apache.org/licenses/LICENSE-2.0.txt */ -!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f+"."+this.type,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();return c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove(),this},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                    ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

                                    '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(a){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(a.keyCode),this.move(a)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                                      ',item:'
                                      • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file +!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f+"."+this.type,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();return c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove(),this},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                      ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

                                      '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(a){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(a.keyCode),this.move(a)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                                        ',item:'
                                        • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index d83076bf69..5987abc532 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -86,7 +86,7 @@ ================================================== -->
                                        -
                                          +
                                          • Typography
                                          • Code
                                          • Tables
                                            • diff --git a/docs/components.html b/docs/components.html index b867c2c35b..8198de37f6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -86,7 +86,7 @@ ================================================== -->
                                            -
                                              +
                                              • Dropdowns
                                              • Button groups
                                              • Button dropdowns
                                                • diff --git a/docs/customize.html b/docs/customize.html index 2e216c3150..5c81f54f25 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -86,7 +86,7 @@ ================================================== -->
                                                -
                                                  +
                                                  • 1. Choose components
                                                  • 2. Select jQuery plugins
                                                  • 3. Customize variables
                                                    • diff --git a/docs/getting-started.html b/docs/getting-started.html index 9be4d6a5ef..eb854e111b 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -86,7 +86,7 @@ ================================================== -->
                                                    -
                                                      +
                                                      • Download
                                                      • File structure
                                                      • What's included
                                                        • diff --git a/docs/javascript.html b/docs/javascript.html index 5baa5eb263..001f974fc0 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -78,7 +78,6 @@
                                                    -
                                                    diff --git a/docs/scaffolding.html b/docs/scaffolding.html index b686d3c7c0..c36aa6d59d 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -86,7 +86,7 @@ ================================================== -->
                                                    -
                                                      +
                                                      • Global styles
                                                      • Grid system
                                                      • Fluid grid system
                                                        • diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index bbfed726d1..0a22423c81 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -15,7 +15,7 @@ ================================================== -->
                                                        -
                                                          +
                                                          • {{_i}}Typography{{/i}}
                                                          • {{_i}}Code{{/i}}
                                                          • {{_i}}Tables{{/i}}
                                                            • diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 10dd0901ee..c2e7fef6c6 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -15,7 +15,7 @@ ================================================== -->
                                                            -
                                                              +
                                                              • {{_i}}Dropdowns{{/i}}
                                                              • {{_i}}Button groups{{/i}}
                                                              • {{_i}}Button dropdowns{{/i}}
                                                                • diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache index 7a0affef6f..0498684705 100644 --- a/docs/templates/pages/customize.mustache +++ b/docs/templates/pages/customize.mustache @@ -15,7 +15,7 @@ ================================================== -->
                                                                -
                                                                  +
                                                                  • {{_i}}1. Choose components{{/i}}
                                                                  • {{_i}}2. Select jQuery plugins{{/i}}
                                                                  • {{_i}}3. Customize variables{{/i}}
                                                                    • diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index fbe4b365f3..4a4c976c50 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -15,7 +15,7 @@ ================================================== -->
                                                                    -
                                                                      +
                                                                      • {{_i}}Download{{/i}}
                                                                      • {{_i}}File structure{{/i}}
                                                                      • {{_i}}What's included{{/i}}
                                                                        • diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 771b7d9acc..d63bdae4ec 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -15,7 +15,7 @@ ================================================== -->
                                                                        -
                                                                          +
                                                                          • {{_i}}Overview{{/i}}
                                                                          • {{_i}}Transitions{{/i}}
                                                                          • {{_i}}Modal{{/i}}
                                                                            • diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 5a613a45fa..ff5af7c0c0 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -15,7 +15,7 @@ ================================================== -->
                                                                            -
                                                                              +
                                                                              • {{_i}}Global styles{{/i}}
                                                                              • {{_i}}Grid system{{/i}}
                                                                              • {{_i}}Fluid grid system{{/i}}
                                                                                • From 4912dd441d46dbacd7414628b6d70a8ae0d85d7f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 00:35:54 -0700 Subject: [PATCH 242/422] fix h3 in modal and make modal unhidden by removing important from earlier issue --- docs/assets/css/bootstrap.css | 9 +++++++-- docs/assets/js/bootstrap-transition.js | 1 - docs/assets/js/bootstrap.js | 1 - docs/assets/js/bootstrap.min.js | 2 +- less/modals.less | 5 +++++ less/utilities.less | 5 ++--- 6 files changed, 15 insertions(+), 8 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 5525614d60..4a4b3e5f47 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4715,6 +4715,11 @@ input[type="submit"].btn.btn-mini { margin-top: 2px; } +.modal-header h3 { + margin: 0; + line-height: 1; +} + .modal-body { max-height: 400px; padding: 15px; @@ -5498,11 +5503,11 @@ a.badge:hover { } .hide { - display: none !important; + display: none; } .show { - display: block !important; + display: block; } .invisible { diff --git a/docs/assets/js/bootstrap-transition.js b/docs/assets/js/bootstrap-transition.js index 0c37ebb187..c5b2674f37 100644 --- a/docs/assets/js/bootstrap-transition.js +++ b/docs/assets/js/bootstrap-transition.js @@ -37,7 +37,6 @@ 'WebkitTransition' : 'webkitTransitionEnd' , 'MozTransition' : 'transitionend' , 'OTransition' : 'oTransitionEnd otransitionend' - , 'msTransition' : 'MSTransitionEnd' , 'transition' : 'transitionend' } , name diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js index 7ca46ac780..6024ffbf38 100644 --- a/docs/assets/js/bootstrap.js +++ b/docs/assets/js/bootstrap.js @@ -37,7 +37,6 @@ 'WebkitTransition' : 'webkitTransitionEnd' , 'MozTransition' : 'transitionend' , 'OTransition' : 'oTransitionEnd otransitionend' - , 'msTransition' : 'MSTransitionEnd' , 'transition' : 'transitionend' } , name diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js index 363a16111d..75c16fd10d 100644 --- a/docs/assets/js/bootstrap.min.js +++ b/docs/assets/js/bootstrap.min.js @@ -3,4 +3,4 @@ * Copyright 2012 Twitter, Inc. * http://www.apache.org/licenses/LICENSE-2.0.txt */ -!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f+"."+this.type,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();return c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove(),this},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                                                                ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

                                                                                '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(a){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(a.keyCode),this.move(a)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                                                                                  ',item:'
                                                                                  • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file +!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f+"."+this.type,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();return c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove(),this},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                                                                  ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

                                                                                  '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(a){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(a.keyCode),this.move(a)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                                                                                    ',item:'
                                                                                    • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file diff --git a/less/modals.less b/less/modals.less index 32aab7acd4..8cdaace36c 100644 --- a/less/modals.less +++ b/less/modals.less @@ -56,6 +56,11 @@ border-bottom: 1px solid #eee; // Close icon .close { margin-top: 2px; } + // Heading + h3 { + margin: 0; + line-height: 1; + } } // Body (where all modal content resides) diff --git a/less/utilities.less b/less/utilities.less index b020e1c1b0..5eef70fe7f 100644 --- a/less/utilities.less +++ b/less/utilities.less @@ -12,12 +12,11 @@ } // Toggling content -// Uses `!important` for proper specifity over things like form controls .hide { - display: none !important; + display: none; } .show { - display: block !important; + display: block; } // Visibility From c37aa99e2836c333407db9d7d703ff731214f64e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 00:37:19 -0700 Subject: [PATCH 243/422] modal heading line-height --- docs/assets/css/bootstrap.css | 2 +- less/modals.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 4a4b3e5f47..b0c966d22d 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4717,7 +4717,7 @@ input[type="submit"].btn.btn-mini { .modal-header h3 { margin: 0; - line-height: 1; + line-height: 30px; } .modal-body { diff --git a/less/modals.less b/less/modals.less index 8cdaace36c..e515bb796d 100644 --- a/less/modals.less +++ b/less/modals.less @@ -59,7 +59,7 @@ // Heading h3 { margin: 0; - line-height: 1; + line-height: 30px; } } From 87aa61001e908857416f8114a892ced7e796c8b9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 00:44:11 -0700 Subject: [PATCH 244/422] fixes #4118: responsive modal gets width auto and improved positioning for narrower widths --- docs/assets/css/bootstrap-responsive.css | 17 +++++++++++------ less/responsive-767px-max.less | 15 +++++++++++---- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 4d104846b7..2590aadf86 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -835,6 +835,17 @@ display: inline-block; width: auto; } + .modal { + position: fixed; + top: 20px; + right: 20px; + left: 20px; + width: auto; + margin: 0; + } + .modal.fade.in { + top: auto; + } } @media (max-width: 480px) { @@ -866,15 +877,9 @@ padding-left: 10px; } .modal { - position: fixed; top: 10px; right: 10px; left: 10px; - width: auto; - margin: 0; - } - .modal.fade.in { - top: auto; } .modal-header .close { padding: 10px; diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index b7fd7454fb..18c96ee0b7 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -84,6 +84,17 @@ width: auto; } + // Modals + .modal { + position: fixed; + top: 20px; + left: 20px; + right: 20px; + width: auto; + margin: 0; + &.fade.in { top: auto; } + } + } @@ -133,13 +144,9 @@ // Modals .modal { - position: fixed; top: 10px; left: 10px; right: 10px; - width: auto; - margin: 0; - &.fade.in { top: auto; } } .modal-header .close { padding: 10px; From c98b75c97949c34be62b63e79fa517347df35018 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jul 2012 00:48:45 -0700 Subject: [PATCH 245/422] added fade out on scroll - we can pull this if you prefer it --- docs/assets/js/application.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 9f1fa704f3..e096f08665 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -6,6 +6,17 @@ $(function(){ + // fancy fade jumbotron + + var $jumbotron = $('.jumbotron') + , $jcontainer = $('.jumbotron .container') + , opacRatio = ($jumbotron.height() / 200 ) * 2 + + $(window).on('scroll', function () { + var diff = 100 - ($(window).scrollTop() / opacRatio) + $jcontainer.css({ opacity: (diff > 0 ? Math.min(diff, 100) : 0) / 100 }) + }) + // Disable certain links in docs $('section [href^=#]').click(function (e) { e.preventDefault() From 7590e65f6f4641d946d0bfec2f4a84bbd3f561cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 01:44:12 -0700 Subject: [PATCH 246/422] fix search form, mostly in navbar --- docs/assets/css/bootstrap.css | 15 +++++++++------ docs/assets/css/docs.css | 2 +- less/forms.less | 2 +- less/navbar.less | 7 ++++--- 4 files changed, 15 insertions(+), 11 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b0c966d22d..2598d89d9f 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1533,9 +1533,9 @@ select:focus:required:invalid:focus { /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; - -webkit-border-radius: 14px; - -moz-border-radius: 14px; - border-radius: 14px; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; } /* Allow for input prepend/append in search forms */ @@ -4034,12 +4034,12 @@ input[type="submit"].btn.btn-mini { .navbar-search { position: relative; float: left; - margin-top: 6px; + margin-top: 5px; margin-bottom: 0; } .navbar-search .search-query { - padding: 4px 9px; + padding: 4px 14px; margin-bottom: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; @@ -4048,6 +4048,9 @@ input[type="submit"].btn.btn-mini { color: #ffffff; background-color: #515151; border: 1px solid #040404; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); @@ -4071,7 +4074,7 @@ input[type="submit"].btn.btn-mini { .navbar-search .search-query:focus, .navbar-search .search-query.focused { - padding: 5px 10px; + padding: 5px 15px; color: #333333; text-shadow: 0 1px 0 #ffffff; background-color: #ffffff; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index ff7d48ae4f..ec1cfc9ebf 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -892,7 +892,7 @@ form.bs-docs-example { } .bs-docs-sidenav { width: 218px; - margin-top: 40px; + margin-top: 30px; padding: 0; margin-right: 10px; background-color: #fff; diff --git a/less/forms.less b/less/forms.less index ddadab8ca3..1a469072cb 100644 --- a/less/forms.less +++ b/less/forms.less @@ -495,7 +495,7 @@ select:focus:required:invalid { padding-left: 14px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; // Remove the default margin on all inputs - .border-radius(14px); + .border-radius(15px); } /* Allow for input prepend/append in search forms */ diff --git a/less/navbar.less b/less/navbar.less index 8cb4274110..0a38ef56e9 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -114,15 +114,16 @@ .navbar-search { position: relative; float: left; - .navbarVerticalAlign(28px); // Vertically center in navbar + .navbarVerticalAlign(30px); // Vertically center in navbar margin-bottom: 0; .search-query { margin-bottom: 0; - padding: 4px 9px; + padding: 4px 14px; #font > .sans-serif(13px, normal, 1); color: @white; background-color: @navbarSearchBackground; border: 1px solid @navbarSearchBorder; + .border-radius(15px); // redeclare because of specificity of the type attribute .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); .transition(none); @@ -131,7 +132,7 @@ // Focus states (we use .focused since IE7-8 and down doesn't support :focus) &:focus, &.focused { - padding: 5px 10px; + padding: 5px 15px; color: @grayDark; text-shadow: 0 1px 0 @white; background-color: @navbarSearchBackgroundFocus; From b7b4fd5c82ea321da3d7858e223eb6adcd225672 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 01:53:32 -0700 Subject: [PATCH 247/422] wrap footer in bs docs canvas for scrolling doodad --- docs/base-css.html | 74 +++--- docs/components.html | 74 +++--- docs/customize.html | 74 +++--- docs/extend.html | 250 +++++++++--------- docs/getting-started.html | 74 +++--- docs/index.html | 74 +++--- docs/javascript.html | 74 +++--- docs/scaffolding.html | 74 +++--- docs/templates/layout.mustache | 73 ++--- docs/templates/pages/base-css.mustache | 2 +- docs/templates/pages/components.mustache | 2 +- docs/templates/pages/customize.mustache | 2 +- docs/templates/pages/extend.mustache | 180 ++++++------- docs/templates/pages/getting-started.mustache | 2 +- docs/templates/pages/index.mustache | 2 +- docs/templates/pages/javascript.mustache | 2 +- docs/templates/pages/scaffolding.mustache | 2 +- docs/upgrading.html | 73 ++--- 18 files changed, 565 insertions(+), 543 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 5987abc532..9aa0120833 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1757,48 +1757,50 @@ For example, <code>section</code> should be wrapped as inline.
                                                                                -
                                                                                - - + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +
                                                                            + diff --git a/docs/components.html b/docs/components.html index 8198de37f6..181a8cbfcd 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2158,48 +2158,50 @@ class="clearfix"
                                                                            -
                                                                        - - + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +
                                                                        + diff --git a/docs/customize.html b/docs/customize.html index 5c81f54f25..44e216f08f 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -429,48 +429,50 @@
                                                                    -
                                                                    - - + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +
                                                                + diff --git a/docs/extend.html b/docs/extend.html index 38006289c1..973e081758 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -78,109 +78,110 @@
                                                                -
                                                                +
                                                                +
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                - - - - -
                                                                -
                                                                -

                                                                Built with LESS

                                                                -
                                                                - - LESS CSS -

                                                                Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

                                                                - -

                                                                Why LESS?

                                                                -

                                                                One of Bootstrap's creators wrote a quick blog post about this, summarized here:

                                                                -
                                                                  -
                                                                • Bootstrap compiles faster ~6x faster with Less compared to Sass
                                                                  • -
                                                                • Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.
                                                                  • -
                                                                • Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.
                                                                  • + +
                                                                  +
                                                                  + - -

                                                                  What's included?

                                                                  -

                                                                  As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

                                                                  - -

                                                                  Learn more

                                                                  -

                                                                  Visit the official website at http://lesscss.org to learn more.

                                                                  -
                                                                +
                                                                +
                                                                - -
                                                                -
                                                                -

                                                                Compiling Bootstrap with Less

                                                                -
                                                                + +
                                                                +
                                                                +

                                                                Built with LESS

                                                                +
                                                                -

                                                                Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.

                                                                + LESS CSS +

                                                                Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

                                                                -
                                                                - Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods. -
                                                                +

                                                                Why LESS?

                                                                +

                                                                One of Bootstrap's creators wrote a quick blog post about this, summarized here:

                                                                +
                                                                  +
                                                                • Bootstrap compiles faster ~6x faster with Less compared to Sass
                                                                  • +
                                                                • Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.
                                                                  • +
                                                                • Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.
                                                                  • +
                                                                -

                                                                Tools for compiling

                                                                +

                                                                What's included?

                                                                +

                                                                As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

                                                                -

                                                                Node with makefile

                                                                -

                                                                Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:

                                                                - 
                                                                $ npm install -g less jshint recess uglify-js
                                                                -

                                                                Once installed just run make from the root of your bootstrap directory and you're all set.

                                                                -

                                                                Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

                                                                +

                                                                Learn more

                                                                +

                                                                Visit the official website at http://lesscss.org to learn more.

                                                                +
                                                                -

                                                                Command line

                                                                -

                                                                Install the LESS command line tool via Node and run the following command:

                                                                - 
                                                                $ lessc ./less/bootstrap.less > bootstrap.css
                                                                -

                                                                Be sure to include --compress in that command if you're trying to save some bytes!

                                                                -

                                                                Javascript

                                                                -

                                                                Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

                                                                + + +
                                                                +
                                                                +

                                                                Compiling Bootstrap with Less

                                                                +
                                                                + +

                                                                Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.

                                                                + +
                                                                + Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods. +
                                                                + +

                                                                Tools for compiling

                                                                + +

                                                                Node with makefile

                                                                +

                                                                Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:

                                                                + 
                                                                $ npm install -g less jshint recess uglify-js
                                                                +

                                                                Once installed just run make from the root of your bootstrap directory and you're all set.

                                                                +

                                                                Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

                                                                + +

                                                                Command line

                                                                +

                                                                Install the LESS command line tool via Node and run the following command:

                                                                + 
                                                                $ lessc ./less/bootstrap.less > bootstrap.css
                                                                +

                                                                Be sure to include --compress in that command if you're trying to save some bytes!

                                                                + +

                                                                Javascript

                                                                +

                                                                Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

                                                                 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
 <script src="/path/to/less.js"></script>
                                                                -

                                                                To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

                                                                +

                                                                To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

                                                                -

                                                                Unofficial Mac app

                                                                -

                                                                The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

                                                                +

                                                                Unofficial Mac app

                                                                +

                                                                The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

                                                                -

                                                                More apps

                                                                -

                                                                Crunch

                                                                -

                                                                Crunch is a great looking LESS editor and compiler built on Adobe Air.

                                                                -

                                                                CodeKit

                                                                -

                                                                Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

                                                                -

                                                                Simpless

                                                                -

                                                                Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

                                                                +

                                                                More apps

                                                                +

                                                                Crunch

                                                                +

                                                                Crunch is a great looking LESS editor and compiler built on Adobe Air.

                                                                +

                                                                CodeKit

                                                                +

                                                                Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

                                                                +

                                                                Simpless

                                                                +

                                                                Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

                                                                -
                                                                +
                                                                - -
                                                                -
                                                                -

                                                                Use as static assets

                                                                -
                                                                -

                                                                Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

                                                                + +
                                                                +
                                                                +

                                                                Use as static assets

                                                                +
                                                                +

                                                                Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

                                                                -

                                                                Setup file structure

                                                                -

                                                                Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

                                                                +

                                                                Setup file structure

                                                                +

                                                                Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

                                                                   app/
   ├── layouts/
@@ -195,8 +196,8 @@
       └── glyphicons-halflings-white.png
                                                                -

                                                                Utilize starter template

                                                                -

                                                                Copy the following base HTML to get started.

                                                                +

                                                                Utilize starter template

                                                                +

                                                                Copy the following base HTML to get started.

                                                                 <html>
   <head>
@@ -212,8 +213,8 @@
 </html>
                                                                -

                                                                Layer on custom code

                                                                -

                                                                Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

                                                                +

                                                                Layer on custom code

                                                                +

                                                                Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

                                                                 <html>
   <head>
@@ -233,57 +234,58 @@
 </html>
                                                                -
                                                                - - +
                                                                +
                                                                +
                                                                -
                                                                + + + + - - + + + + + + + + + + + + + + + + + + + +
                                                                - - - - - - - - - - - - - - - - - - - - diff --git a/docs/getting-started.html b/docs/getting-started.html index eb854e111b..5bf5225beb 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -287,48 +287,50 @@
                                                                -
                                                                - - + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +
                                                            + diff --git a/docs/index.html b/docs/index.html index b3f687846c..fd8218580c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -161,48 +161,50 @@
                                                            -
                                                        - - + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +
                                                        + diff --git a/docs/javascript.html b/docs/javascript.html index 001f974fc0..5dc54fc49c 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1795,48 +1795,50 @@ $('[data-spy="affix"]').each(function () {
                                                        -
                                                        - - + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +
                                                        + diff --git a/docs/scaffolding.html b/docs/scaffolding.html index c36aa6d59d..7912088457 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -541,48 +541,50 @@
                                                    -
                                                    - - + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +
                                                + diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 23e84e64ca..4c69e9fc5e 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -85,44 +85,47 @@ - - + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +
                                                {{! /.bs-docs-canvas }} + {{#production}} -
                                                -
                                                - -
                                                -
                                                - - - - -
                                                -
                                                -

                                                {{_i}}Built with LESS{{/i}}

                                                -
                                                - - LESS CSS -

                                                {{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

                                                - -

                                                {{_i}}Why LESS?{{/i}}

                                                -

                                                {{_i}}One of Bootstrap's creators wrote a quick blog post about this, summarized here:{{/i}}

                                                -
                                                  -
                                                • {{_i}}Bootstrap compiles faster ~6x faster with Less compared to Sass{{/i}}
                                                  • -
                                                • {{_i}}Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.{{/i}}
                                                  • -
                                                • {{_i}}Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.{{/i}}
                                                  • + +
                                                  +
                                                  + - -

                                                  {{_i}}What's included?{{/i}}

                                                  -

                                                  {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

                                                  - -

                                                  {{_i}}Learn more{{/i}}

                                                  -

                                                  {{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

                                                  -
                                                +
                                                +
                                                - -
                                                -
                                                -

                                                {{_i}}Compiling Bootstrap with Less{{/i}}

                                                -
                                                + +
                                                +
                                                +

                                                {{_i}}Built with LESS{{/i}}

                                                +
                                                -

                                                {{_i}}Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.{{/i}}

                                                + LESS CSS +

                                                {{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

                                                -
                                                - {{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}} -
                                                +

                                                {{_i}}Why LESS?{{/i}}

                                                +

                                                {{_i}}One of Bootstrap's creators wrote a quick blog post about this, summarized here:{{/i}}

                                                +
                                                  +
                                                • {{_i}}Bootstrap compiles faster ~6x faster with Less compared to Sass{{/i}}
                                                  • +
                                                • {{_i}}Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.{{/i}}
                                                  • +
                                                • {{_i}}Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.{{/i}}
                                                  • +
                                                -

                                                {{_i}}Tools for compiling{{/i}}

                                                +

                                                {{_i}}What's included?{{/i}}

                                                +

                                                {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

                                                -

                                                {{_i}}Node with makefile{{/i}}

                                                -

                                                {{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}

                                                - 
                                                $ npm install -g less jshint recess uglify-js
                                                -

                                                {{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}

                                                -

                                                {{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}

                                                +

                                                {{_i}}Learn more{{/i}}

                                                +

                                                {{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

                                                +
                                                -

                                                {{_i}}Command line{{/i}}

                                                -

                                                {{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

                                                - 
                                                $ lessc ./less/bootstrap.less > bootstrap.css
                                                -

                                                {{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

                                                -

                                                {{_i}}Javascript{{/i}}

                                                -

                                                {{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}

                                                + + +
                                                +
                                                +

                                                {{_i}}Compiling Bootstrap with Less{{/i}}

                                                +
                                                + +

                                                {{_i}}Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.{{/i}}

                                                + +
                                                + {{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}} +
                                                + +

                                                {{_i}}Tools for compiling{{/i}}

                                                + +

                                                {{_i}}Node with makefile{{/i}}

                                                +

                                                {{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}

                                                + 
                                                $ npm install -g less jshint recess uglify-js
                                                +

                                                {{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}

                                                +

                                                {{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}

                                                + +

                                                {{_i}}Command line{{/i}}

                                                +

                                                {{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

                                                + 
                                                $ lessc ./less/bootstrap.less > bootstrap.css
                                                +

                                                {{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

                                                + +

                                                {{_i}}Javascript{{/i}}

                                                +

                                                {{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}

                                                 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
 <script src="/path/to/less.js"></script>
                                                -

                                                {{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

                                                +

                                                {{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

                                                -

                                                {{_i}}Unofficial Mac app{{/i}}

                                                -

                                                {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

                                                +

                                                {{_i}}Unofficial Mac app{{/i}}

                                                +

                                                {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

                                                -

                                                {{_i}}More apps{{/i}}

                                                -

                                                Crunch

                                                -

                                                {{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}

                                                -

                                                CodeKit

                                                -

                                                {{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

                                                -

                                                Simpless

                                                -

                                                {{_i}}Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

                                                +

                                                {{_i}}More apps{{/i}}

                                                +

                                                Crunch

                                                +

                                                {{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}

                                                +

                                                CodeKit

                                                +

                                                {{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

                                                +

                                                Simpless

                                                +

                                                {{_i}}Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

                                                -
                                                +
                                                - -
                                                -
                                                -

                                                {{_i}}Use as static assets{{/i}}

                                                -
                                                -

                                                {{_i}}Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.{{/i}}

                                                + +
                                                +
                                                +

                                                {{_i}}Use as static assets{{/i}}

                                                +
                                                +

                                                {{_i}}Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.{{/i}}

                                                -

                                                {{_i}}Setup file structure{{/i}}

                                                -

                                                {{_i}}Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:{{/i}}

                                                +

                                                {{_i}}Setup file structure{{/i}}

                                                +

                                                {{_i}}Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:{{/i}}

                                                   app/
   ├── layouts/
@@ -124,8 +125,8 @@
       └── glyphicons-halflings-white.png
                                                -

                                                {{_i}}Utilize starter template{{/i}}

                                                -

                                                {{_i}}Copy the following base HTML to get started.{{/i}}

                                                +

                                                {{_i}}Utilize starter template{{/i}}

                                                +

                                                {{_i}}Copy the following base HTML to get started.{{/i}}

                                                 <html>
   <head>
@@ -141,8 +142,8 @@
 </html>
                                                -

                                                {{_i}}Layer on custom code{{/i}}

                                                -

                                                {{_i}}Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.{{/i}}

                                                +

                                                {{_i}}Layer on custom code{{/i}}

                                                +

                                                {{_i}}Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.{{/i}}

                                                 <html>
   <head>
@@ -162,12 +163,11 @@
 </html>
                                                -
                                                +
                                                +
                                                {{! /span9 }} +
                                                {{! row}} +
                                            {{! /.container }} -
                                            {{! /span9 }} -
                                        {{! row}} - - -
                                        {{! /container }} +{{! /.bs-docs-canvas closes in footer }} diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 4a4c976c50..d177bca5f1 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -216,4 +216,4 @@
                                    {{! /.container }} -
                                    {{! /.bs-docs-canvas }} +{{! /.bs-docs-canvas closes in footer }} diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index acb3f4c6f8..e18bc92546 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -90,4 +90,4 @@ {{! /.container }} -{{! /.bs-docs-canvas }} +{{! /.bs-docs-canvas closes in footer }} diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index d63bdae4ec..e072f05b95 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1725,4 +1725,4 @@ $('[data-spy="affix"]').each(function () { {{! /.container }} -{{! /.bs-docs-canvas }} +{{! /.bs-docs-canvas closes in footer }} diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index ff5af7c0c0..2ceaf0e4b2 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -474,4 +474,4 @@ {{! /.container }} -{{! /.bs-docs-canvas }} +{{! /.bs-docs-canvas closes in footer }} diff --git a/docs/upgrading.html b/docs/upgrading.html index 373fee4749..3ebd66ef5c 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -266,44 +266,47 @@ - - + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + From c10a357bb3aa75a0e1252f3bd17aa8a0476400a3 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jul 2012 12:57:00 -0700 Subject: [PATCH 248/422] don't bite so hard --- docs/assets/js/application.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index e096f08665..9f1fa704f3 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -6,17 +6,6 @@ $(function(){ - // fancy fade jumbotron - - var $jumbotron = $('.jumbotron') - , $jcontainer = $('.jumbotron .container') - , opacRatio = ($jumbotron.height() / 200 ) * 2 - - $(window).on('scroll', function () { - var diff = 100 - ($(window).scrollTop() / opacRatio) - $jcontainer.css({ opacity: (diff > 0 ? Math.min(diff, 100) : 0) / 100 }) - }) - // Disable certain links in docs $('section [href^=#]').click(function (e) { e.preventDefault() From 880bdbc4dd05f98389d039062ab956f79c6236a4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 16:07:25 -0700 Subject: [PATCH 249/422] simplify styles for bs docs nav --- docs/assets/css/docs.css | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index ec1cfc9ebf..f2975c81b3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -896,28 +896,34 @@ form.bs-docs-example { padding: 0; margin-right: 10px; background-color: #fff; - border: 1px solid #e5e5e5; margin-left: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.05); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.05); + box-shadow: 0 1px 3px rgba(0,0,0,.05); } .bs-docs-sidenav > li > a { - margin: 0; + margin: 0 0 -1px; font-size: 14px; padding: 9px 14px; - border-top: 1px solid #eee; + border: 1px solid #e5e5e5; } .bs-docs-sidenav > li:first-child > a { - border-top: 0; - -webkit-border-radius: 5px 5px 0 0; - -moz-border-radius: 5px 5px 0 0; - border-radius: 5px 5px 0 0; + -webkit-border-radius: 6px 6px 0 0; + -moz-border-radius: 6px 6px 0 0; + border-radius: 6px 6px 0 0; } .bs-docs-sidenav > li:last-child > a { - -webkit-border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} +.bs-docs-sidenav > .active > a { + border-color: #08c; + position: relative; + z-index: 2; } /* Chevrons */ .bs-docs-sidenav .icon-chevron-right { From f75277e62d3025fbeb3588a6790caa2ce92122f0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jul 2012 21:45:19 -0700 Subject: [PATCH 250/422] indenting and such --- docs/assets/css/docs.css | 8 +- docs/getting-started.html | 12 +- docs/templates/pages/getting-started.mustache | 64 +- docs/templates/pages/javascript.mustache | 824 +++++++++--------- 4 files changed, 450 insertions(+), 458 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f2975c81b3..764cfbbaca 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -900,9 +900,9 @@ form.bs-docs-example { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.05); - -moz-box-shadow: 0 1px 3px rgba(0,0,0,.05); - box-shadow: 0 1px 3px rgba(0,0,0,.05); + -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); + -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); + box-shadow: 0 1px 4px rgba(0,0,0,.065); } .bs-docs-sidenav > li > a { margin: 0 0 -1px; @@ -1005,4 +1005,4 @@ form.bs-docs-example { .subhead + .bs-docs-canvas { top: 250px; } -} \ No newline at end of file +} diff --git a/docs/getting-started.html b/docs/getting-started.html index 5bf5225beb..b28a358f13 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -109,12 +109,12 @@
                                    -

                                    Download compiled

                                    +

                                    Download compiled

                                    Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

                                    Download Bootstrap

                                    -

                                    Download source

                                    +

                                    Download source

                                    Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.

                                    Download Bootstrap source

                                    @@ -156,21 +156,17 @@

                                    Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.

                                    +

                                    Docs sections

                                    Scaffolding

                                    Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

                                    -

                                    Base CSS

                                    Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

                                    -

                                    Components

                                    Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

                                    -

                                    Javascript plugins

                                    Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.

                                    -
                                    - -

                                    List of components

                                    +

                                    List of components

                                    Together, the Components and Javascript plugins sections provide the following interface elements:

                                    • Button groups
                                      • diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index d177bca5f1..852c3add5e 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -38,12 +38,12 @@
                                      -

                                      Download compiled

                                      +

                                      Download compiled

                                      Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.

                                      Download Bootstrap

                                      -

                                      Download source

                                      +

                                      Download source

                                      Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.

                                      Download Bootstrap source

                                      @@ -85,40 +85,36 @@

                                      {{_i}}Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.{{/i}}

                                      -

                                      Scaffolding

                                      -

                                      Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

                                      +

                                      {{_i}}Docs sections{{/i}}

                                      +

                                      {{_i}}Scaffolding{{/i}}

                                      +

                                      {{_i}}Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.{{/i}}

                                      +

                                      {{_i}}Base CSS{{/i}}

                                      +

                                      {{_i}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.{{/i}}

                                      +

                                      {{_i}}Components{{/i}}

                                      +

                                      {{_i}}Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.{{/i}}

                                      +

                                      {{_i}}Javascript plugins{{/i}}

                                      +

                                      {{_i}}Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}

                                      -

                                      Base CSS

                                      -

                                      Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

                                      - -

                                      Components

                                      -

                                      Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

                                      - -

                                      Javascript plugins

                                      -

                                      Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.

                                      - -
                                      - -

                                      List of components

                                      -

                                      Together, the Components and Javascript plugins sections provide the following interface elements:

                                      +

                                      {{_i}}List of components{{/i}}

                                      +

                                      {{_i}}Together, the Components and Javascript plugins sections provide the following interface elements:{{/i}}

                                        -
                                      • Button groups
                                        • -
                                      • Button dropdowns
                                        • -
                                      • Navigational tabs, pills, and lists
                                        • -
                                      • Navbar
                                        • -
                                      • Labels
                                        • -
                                      • Badges
                                        • -
                                      • Page headers and hero unit
                                        • -
                                      • Thumbnails
                                        • -
                                      • Alerts
                                        • -
                                      • Progress bars
                                        • -
                                      • Modals
                                        • -
                                      • Dropdowns
                                        • -
                                      • Tooltips
                                        • -
                                      • Popovers
                                        • -
                                      • Accordion
                                        • -
                                      • Carousel
                                        • -
                                      • Typeahead
                                        • +
                                      • {{_i}}Button groups{{/i}}
                                        • +
                                      • {{_i}}Button dropdowns{{/i}}
                                        • +
                                      • {{_i}}Navigational tabs, pills, and lists{{/i}}
                                        • +
                                      • {{_i}}Navbar{{/i}}
                                        • +
                                      • {{_i}}Labels{{/i}}
                                        • +
                                      • {{_i}}Badges{{/i}}
                                        • +
                                      • {{_i}}Page headers and hero unit{{/i}}
                                        • +
                                      • {{_i}}Thumbnails{{/i}}
                                        • +
                                      • {{_i}}Alerts{{/i}}
                                        • +
                                      • {{_i}}Progress bars{{/i}}
                                        • +
                                      • {{_i}}Modals{{/i}}
                                        • +
                                      • {{_i}}Dropdowns{{/i}}
                                        • +
                                      • {{_i}}Tooltips{{/i}}
                                        • +
                                      • {{_i}}Popovers{{/i}}
                                        • +
                                      • {{_i}}Accordion{{/i}}
                                        • +
                                      • {{_i}}Carousel{{/i}}
                                        • +
                                      • {{_i}}Typeahead{{/i}}

                                      {{_i}}In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.{{/i}}

                                      diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index e072f05b95..9f93620c33 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -99,34 +99,34 @@ $('#myModal').on('show', function (e) { - -
                                      -
                                      -

                                      {{_i}}Modals{{/i}} bootstrap-modal.js

                                      -
                                      + +
                                      +
                                      +

                                      {{_i}}Modals{{/i}} bootstrap-modal.js

                                      +
                                      -

                                      {{_i}}Examples{{/i}}

                                      -

                                      {{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}

                                      +

                                      {{_i}}Examples{{/i}}

                                      +

                                      {{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}

                                      -

                                      {{_i}}Static example{{/i}}

                                      -

                                      {{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}

                                      -
                                      -
                                      -
                                      - -

                                      {{_i}}Modal header{{/i}}

                                      -
                                      -
                                      -

                                      {{_i}}One fine body…{{/i}}

                                      -
                                      -
                                      - {{_i}}Close{{/i}} - {{_i}}Save changes{{/i}} -
                                      +

                                      {{_i}}Static example{{/i}}

                                      +

                                      {{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}

                                      +
                                      +
                                      +
                                      + +

                                      {{_i}}Modal header{{/i}}

                                      -
                                      {{! /example }} +
                                      +

                                      {{_i}}One fine body…{{/i}}

                                      +
                                      +
                                      + {{_i}}Close{{/i}} + {{_i}}Save changes{{/i}} +
                                      +
                                      +
                                      {{! /example }} 
                                       <div class="modal hide fade">
   <div class="modal-header">
@@ -143,43 +143,43 @@ $('#myModal').on('show', function (e) {
 </div>
                                      -

                                      {{_i}}Live demo{{/i}}

                                      -

                                      {{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}

                                      - -
                                      +
                                      - - - -
                                      -
                                      -

                                      {{_i}}ScrollSpy{{/i}} bootstrap-scrollspy.js

                                      -
                                      + +
                                      +
                                      +

                                      {{_i}}ScrollSpy{{/i}} bootstrap-scrollspy.js

                                      +
                                      -

                                      {{_i}}Example in navbar{{/i}}

                                      -

                                      {{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.{{/i}}

                                      -
                                      -
                                      +

                                      {{_i}}Events{{/i}}

                                      + + + + + + + + + + + + + +
                                      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                                      {{_i}}activate{{/i}}{{_i}}This event fires whenever a new item becomes activated by the scrollspy.{{/i}}
                                      +
                                      - -
                                      -
                                      -

                                      {{_i}}Togglable tabs{{/i}} bootstrap-tab.js

                                      -
                                      + +
                                      +
                                      +

                                      {{_i}}Togglable tabs{{/i}} bootstrap-tab.js

                                      +
                                      -

                                      {{_i}}Example tabs{{/i}}

                                      -

                                      {{_i}}Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.{{/i}}

                                      -
                                      - -
                                      -
                                      -

                                      Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

                                      -
                                      -
                                      -

                                      Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

                                      -
                                      - - +

                                      {{_i}}Example tabs{{/i}}

                                      +

                                      {{_i}}Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.{{/i}}

                                      +
                                      + +
                                      +
                                      +

                                      Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

                                      -
                                      {{! /example }} +
                                      +

                                      Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

                                      +
                                      + + +
                                      +
                                      {{! /example }} -
                                      +
                                      -

                                      {{_i}}Usage{{/i}}

                                      -

                                      {{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}

                                      +

                                      {{_i}}Usage{{/i}}

                                      +

                                      {{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}

                                       $('#myTab a').click(function (e) {
   e.preventDefault();
   $(this).tab('show');
 })
                                      -

                                      {{_i}}You can activate individual tabs in several ways:{{/i}}

                                      +

                                      {{_i}}You can activate individual tabs in several ways:{{/i}}

                                       $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
 $('#myTab a:first').tab('show'); // Select first tab
@@ -616,8 +616,8 @@ $('#myTab a:last').tab('show'); // Select last tab
 $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
                                      -

                                      {{_i}}Markup{{/i}}

                                      -

                                      {{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.{{/i}}

                                      +

                                      {{_i}}Markup{{/i}}

                                      +

                                      {{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.{{/i}}

                                       <ul class="nav nav-tabs">
   <li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
@@ -626,11 +626,11 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   <li><a href="#settings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li>
 </ul>
                                      -

                                      {{_i}}Methods{{/i}}

                                      -

                                      $().tab

                                      -

                                      - {{_i}}Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.{{/i}} -

                                      +

                                      {{_i}}Methods{{/i}}

                                      +

                                      $().tab

                                      +

                                      + {{_i}}Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.{{/i}} + 

                                       <ul class="nav nav-tabs" id="myTab">
   <li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li>
@@ -653,25 +653,25 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
 </script>
                                      -

                                      {{_i}}Events{{/i}}

                                      - - - - - - - - - - - - - - - - - -
                                      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                                      {{_i}}show{{/i}}{{_i}}This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
                                      {{_i}}shown{{/i}}{{_i}}This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
                                      +

                                      {{_i}}Events{{/i}}

                                      + + + + + + + + + + + + + + + + + +
                                      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                                      {{_i}}show{{/i}}{{_i}}This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
                                      {{_i}}shown{{/i}}{{_i}}This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
                                       $('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab

From 4bb2a13776ac5addd3aa286cdad6506313983712 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 26 Jul 2012 21:45:30 -0700
Subject: [PATCH 251/422] rerun make

---
 docs/javascript.html | 816 +++++++++++++++++++++----------------------
 1 file changed, 408 insertions(+), 408 deletions(-)

diff --git a/docs/javascript.html b/docs/javascript.html
index 5dc54fc49c..2e68dbb2bb 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -169,34 +169,34 @@ $('#myModal').on('show', function (e) {
 
 
 
-          
-          
                                      
-            
                                      
-              
                                      Modals bootstrap-modal.js
                                      
-            
                                      
+        
+        
                                      
+          
                                      
+            
                                      Modals bootstrap-modal.js
                                      
+          
                                      
 
 
-            
                                      Examples
                                      
-            
                                      Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
                                      
+          
                                      Examples
                                      
+          
                                      Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
                                      
 
-            
                                      Static example
                                      
-            
                                      A rendered modal with header, body, and set of actions in the footer.
                                      
-            
                                      
-              
                                      
-                
                                      
-                  
-                  
                                      Modal header
                                      
-                
                                      
-                
                                      
-                  
                                      One fine body…
                                      
-                
                                      
-                
                                      
-                  Close
-                  Save changes
-                
                                      
+          
                                      Static example
                                      
+          
                                      A rendered modal with header, body, and set of actions in the footer.
                                      
+          
                                      
+            
                                      
+              
                                      
+                
+                
                                      Modal header
                                      
+              
                                      
+              
                                      
+                
                                      One fine body…
                                      
+              
                                      
+              
                                      
+                Close
+                Save changes
               
                                      
             
                                      
+          
                                      
 
                                       <div class="modal hide fade">
   <div class="modal-header">
@@ -213,43 +213,43 @@ $('#myModal').on('show', function (e) {
 </div>
 
                                      
 
-            
                                      Live demo
                                      
-            
                                      Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.
                                      
-            
-            
                                      
+        
                                      
 
 
 
-          
-          
 
 
 
-          
-          
                                      
-            
                                      
-              
                                      ScrollSpy bootstrap-scrollspy.js
                                      
-            
                                      
+        
+        
                                      
+          
                                      
+            
                                      ScrollSpy bootstrap-scrollspy.js
                                      
+          
                                      
 
 
-            
                                      Example in navbar
                                      
-            
                                      The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
                                      
-            
                                      
-              
                                      
+          
                                      Events
                                      
+          
+            
+             
+               
+               
+             
+            
+            
+             
+               
+               
+            
+            
+          
                                      EventDescription
                                      activateThis event fires whenever a new item becomes activated by the scrollspy.
                                      
+        
                                      
 
 
 
-          
-          
                                      
-            
                                      
-              
                                      Togglable tabs bootstrap-tab.js
                                      
-            
                                      
+        
+        
                                      
+          
                                      
+            
                                      Togglable tabs bootstrap-tab.js
                                      
+          
                                      
 
 
-            
                                      Example tabs
                                      
-            
                                      Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.
                                      
-            
                                      
-              
-              
                                      
-                
                                      
-                  
                                      Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
                                      
-                
                                      
-                
                                      
-                  
                                      Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
                                      
-                
                                      
-                
-                
+          
                                      Example tabs
                                      
+          
                                      Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.
                                      
+          
                                      
+            
+            
                                      
+              
                                      
+                
                                      Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
                                      
+              
                                      
+              
                                      
+                
                                      Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
                                      
+              
                                      
+              
+              
             
                                      
+          
                                      
 
 
-            
                                      
+          
                                      
 
 
-            
                                      Usage
                                      
-            
                                      Enable tabbable tabs via javascript (each tab needs to be activated individually):
                                      
+          
                                      Usage
                                      
+          
                                      Enable tabbable tabs via javascript (each tab needs to be activated individually):
                                      
 
                                       $('#myTab a').click(function (e) {
   e.preventDefault();
   $(this).tab('show');
 })
                                      
-            
                                      You can activate individual tabs in several ways:
                                      
+          
                                      You can activate individual tabs in several ways:
                                      
 
                                       $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
 $('#myTab a:first').tab('show'); // Select first tab
@@ -686,8 +686,8 @@ $('#myTab a:last').tab('show'); // Select last tab
 $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
 
                                      
 
-            
                                      Markup
                                      
-            
                                      You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.
                                      
+          
                                      Markup
                                      
+          
                                      You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.
                                      
 
                                       <ul class="nav nav-tabs">
   <li><a href="#home" data-toggle="tab">Home</a></li>
@@ -696,11 +696,11 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   <li><a href="#settings" data-toggle="tab">Settings</a></li>
 </ul>
                                      
 
-            
                                      Methods
                                      
-            
                                      $().tab
                                      
-            
                                      
-              Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.
-            
                                      
+          
                                      Methods
                                      
+          
                                      $().tab
                                      
+          
                                      
+            Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.
+          
                                      
 
                                       <ul class="nav nav-tabs" id="myTab">
   <li class="active"><a href="#home">Home</a></li>
@@ -723,25 +723,25 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
 </script>
 
                                      
 
-            
                                      Events
                                      
-            
-              
-               
-                 
-                 
-               
-              
-              
-               
-                 
-                 
-              
-              
-                 
-                 
-               
-              
-            
                                      EventDescription
                                      showThis event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
                                      shownThis event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
                                      
+          
                                      Events
                                      
+          
+            
+             
+               
+               
+             
+            
+            
+             
+               
+               
+            
+            
+               
+               
+             
+            
+          
                                      EventDescription
                                      showThis event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
                                      shownThis event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
                                      
 
                                       $('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab

From 79067721b110a60e24637cf3996cb0ffe9350475 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 26 Jul 2012 23:21:06 -0700
Subject: [PATCH 252/422] fix js docs formatting

---
 docs/javascript.html                     | 485 ++++++++---------------
 docs/templates/pages/javascript.mustache | 485 ++++++++---------------
 2 files changed, 348 insertions(+), 622 deletions(-)

diff --git a/docs/javascript.html b/docs/javascript.html
index 2e68dbb2bb..36299d776f 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -894,351 +894,214 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
             
                                      
           
                                      
 
-          
                                      Examples
                                      
-          
                                      Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.
                                      
-
-          
                                      Static popover
                                      
-          
                                      Four options are available: top, right, bottom, and left aligned.
                                      
-          
                                      
-            
                                      
-              
                                      
-              
                                      Popover top
                                      
-              
                                      
-                
                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                      
-              
                                      
+          
                                      
+            
                                      
+            
                                      Popover right
                                      
+            
                                      
+              
                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                      
             
                                      
-
-            
                                      
-              
                                      
-              
                                      Popover right
                                      
-              
                                      
-                
                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                      
-              
                                      
-            
                                      
-
-            
                                      
-              
                                      
-              
                                      Popover bottom
                                      
-              
                                      
-                
                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                      
-              
                                      
-            
                                      
-
-            
                                      
-              
                                      
-              
                                      Popover left
                                      
-              
                                      
-                
                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                      
-              
                                      
-            
                                      
-
-            
                                      
-          
                                      
-          
                                      No markup shown as popovers are generated from javascript and content within a data attribute.
                                      
-
-          
                                      Live demo
                                      
-          
                                      
-            Hover for popover
           
                                      
 
-
-          
                                      
-
-
-          
                                      Usage
                                      
-          
                                      Enable popovers via javascript:
                                      
-          
                                      $('#example').popover(options)
                                      
-
-          
                                      Options
                                      
-          
                                      Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".
                                      
-          
-            
-             
-               
-               
-               
-               
-             
-            
-            
-             
-               
-               
-               
-               
-             
-             
-               
-               
-               
-               
-             
-             
-               
-               
-               
-               
-             
-             
-               
-               
-               
-               
-             
-             
-               
-               
-               
-               
-             
-             
-               
-               
-               
-               
-             
-             
-               
-               
-               
-               
-             
-             
-               
-               
-               
-               
-             
-            
-          
                                      Nametypedefaultdescription
                                      animationbooleantrueapply a css fade transition to the tooltip
                                      htmlbooleantrueInsert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
                                      placementstring|function'right'how to position the popover - top | bottom | left | right
                                      selectorstringfalseif a selector is provided, tooltip objects will be delegated to the specified targets
                                      triggerstring'hover'how popover is triggered - hover | focus | manual
                                      titlestring | function''default title value if `title` attribute isn't present
                                      contentstring | function''default content value if `data-content` attribute isn't present
                                      delaynumber | object0
-                
                                      delay showing and hiding the popover (ms) - does not apply to manual trigger type
                                      
-                
                                      If a number is supplied, delay is applied to both hide/show
                                      
-                
                                      Object structure is: delay: { show: 500, hide: 100 }
                                      
-               
                                      
-          
                                      
-            Heads up!
-            Options for individual popovers can alternatively be specified through the use of data attributes.
+          
                                      
+            
                                      
+            
                                      Popover bottom
                                      
+            
                                      
+              
                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                      
+            
                                      
           
                                      
 
-          
                                      Markup
                                      
-          
                                      For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
                                      
-
-          
                                      Methods
                                      
-          
                                      $().popover(options)
                                      
-          
                                      Initializes popovers for an element collection.
                                      
-          
                                      .popover('show')
                                      
-          
                                      Reveals an elements popover.
                                      
-          
                                      $('#element').popover('show')
                                      
-          
                                      .popover('hide')
                                      
-          
                                      Hides an elements popover.
                                      
-          
                                      $('#element').popover('hide')
                                      
-          
                                      .popover('toggle')
                                      
-          
                                      Toggles an elements popover.
                                      
-          
                                      $('#element').popover('toggle')
                                      
-          
                                      .popover('destroy')
                                      
-          
                                      Hides and destroys an element's popover.
                                      
-          
                                      $('#element').popover('destroy')
                                      
-        
                                      
-
-
-
-        
-        
                                      
-          
                                      
-            
                                      Alert messages bootstrap-alert.js
                                      
+          
                                      
+            
                                      
+            
                                      Popover left
                                      
+            
                                      
+              
                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                                      
+            
                                      
           
                                      
 
+          
                                      
+        
                                      
+        
                                      No markup shown as popovers are generated from javascript and content within a data attribute.
                                      
 
-          
                                      Example alerts
                                      
-          
                                      Add dismiss functionality to all alerge messages with this plugin.
                                      
-          
                                      
-            
                                      
-              
-              Holy guacamole! Best check yo self, you're not looking too good.
-            
                                      
-            
                                      No markup shown as popovers are generated from javascript and content within a data attribute.
                                      
-
-            
                                      Live demo
                                      
-            
                                      
-              Hover for popover
-            
                                      
+        
                                      Live demo
                                      
+        
                                      
+          Hover for popover
+        
                                      
 
 
-            
                                      
+        
                                      
 
 
-            
                                      Usage
                                      
-            
                                      Enable popovers via javascript:
                                      
-            
                                      $('#example').popover(options)
                                      
+        
                                      Usage
                                      
+        
                                      Enable popovers via javascript:
                                      
+        
                                      $('#example').popover(options)
                                      
 
-            
                                      Options
                                      
-            
                                      Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".
                                      
-            
-              
-               
-                 
-                 
-                 
-                 
-               
-              
-              
-               
-                 
-                 
-                 
-                 
-               
-               
-                 
-                 
-                 
-                 
-               
-               
-                 
-                 
-                 
-                 
-               
-               
-                 
-                 
-                 
-                 
-               
-               
-                 
-                 
-                 
-                 
-               
-               
-                 
-                 
-                 
-                 
-               
-               
-                 
-                 
-                 
-                 
-               
-               
-                 
-                 
-                 
-                 
-               
-              
-            
                                      Nametypedefaultdescription
                                      animationbooleantrueapply a css fade transition to the tooltip
                                      htmlbooleantrueInsert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
                                      placementstring|function'right'how to position the popover - top | bottom | left | right
                                      selectorstringfalseif a selector is provided, tooltip objects will be delegated to the specified targets
                                      triggerstring'hover'how popover is triggered - hover | focus | manual
                                      titlestring | function''default title value if `title` attribute isn't present
                                      contentstring | function''default content value if `data-content` attribute isn't present
                                      delaynumber | object0
-                  
                                      delay showing and hiding the popover (ms) - does not apply to manual trigger type
                                      
-                  
                                      If a number is supplied, delay is applied to both hide/show
                                      
-                  
                                      Object structure is: delay: { show: 500, hide: 100 }
                                      
-                 
                                      
-            
                                      
-              Heads up!
-              Options for individual popovers can alternatively be specified through the use of data attributes.
-            
                                      
+        
                                      Options
                                      
+        
                                      Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".
                                      
+        
+          
+           
+             
+             
+             
+             
+           
+          
+          
+           
+             
+             
+             
+             
+           
+           
+             
+             
+             
+             
+           
+           
+             
+             
+             
+             
+           
+           
+             
+             
+             
+             
+           
+           
+             
+             
+             
+             
+           
+           
+             
+             
+             
+             
+           
+           
+             
+             
+             
+             
+           
+           
+             
+             
+             
+             
+           
+          
+        
                                      Nametypedefaultdescription
                                      animationbooleantrueapply a css fade transition to the tooltip
                                      htmlbooleantrueInsert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
                                      placementstring|function'right'how to position the popover - top | bottom | left | right
                                      selectorstringfalseif a selector is provided, tooltip objects will be delegated to the specified targets
                                      triggerstring'hover'how popover is triggered - hover | focus | manual
                                      titlestring | function''default title value if `title` attribute isn't present
                                      contentstring | function''default content value if `data-content` attribute isn't present
                                      delaynumber | object0
+              
                                      delay showing and hiding the popover (ms) - does not apply to manual trigger type
                                      
+              
                                      If a number is supplied, delay is applied to both hide/show
                                      
+              
                                      Object structure is: delay: { show: 500, hide: 100 }
                                      
+             
                                      
+        
                                      
+          Heads up!
+          Options for individual popovers can alternatively be specified through the use of data attributes.
+        
                                      
 
-            
                                      Markup
                                      
-            
                                      For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
                                      
+        
                                      Markup
                                      
+        
                                      For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
                                      
 
-            
                                      Methods
                                      
-            
                                      $().popover(options)
                                      
-            
                                      Initializes popovers for an element collection.
                                      
-            
                                      .popover('show')
                                      
-            
                                      Reveals an elements popover.
                                      
-            
                                      $('#element').popover('show')
                                      
-            
                                      .popover('hide')
                                      
-            
                                      Hides an elements popover.
                                      
-            
                                      $('#element').popover('hide')
                                      
-            
                                      .popover('toggle')
                                      
-            
                                      Toggles an elements popover.
                                      
-            
                                      $('#element').popover('toggle')
                                      
-            
                                      .popover('destroy')
                                      
-            
                                      Destroys an element's popover.
                                      
-            
                                      $('#element').popover('destroy')
                                      
-          
                                      
+        
                                      Methods
                                      
+        
                                      $().popover(options)
                                      
+        
                                      Initializes popovers for an element collection.
                                      
+        
                                      .popover('show')
                                      
+        
                                      Reveals an elements popover.
                                      
+        
                                      $('#element').popover('show')
                                      
+        
                                      .popover('hide')
                                      
+        
                                      Hides an elements popover.
                                      
+        
                                      $('#element').popover('hide')
                                      
+        
                                      .popover('toggle')
                                      
+        
                                      Toggles an elements popover.
                                      
+        
                                      $('#element').popover('toggle')
                                      
+        
                                      .popover('destroy')
                                      
+        
                                      Hides and destroys an element's popover.
                                      
+        
                                      $('#element').popover('destroy')
                                      
+      
                                      
 
 
 
-          
-          
                                      
-            
                                      
-              
                                      Alert messages bootstrap-alert.js
                                      
-            
                                      
+      
+      
                                      
+        
                                      
+          
                                      Alert messages bootstrap-alert.js
                                      
+        
                                      
 
 
-            
                                      Example alerts
                                      
-            
                                      Add dismiss functionality to all alerge messages with this plugin.
                                      
-            
                                      
-              
                                      
-                
-                Holy guacamole! Best check yo self, you're not looking too good.
-              
                                      
-            
                                      
+        
                                      Example alerts
                                      
+        
                                      Add dismiss functionality to all alerge messages with this plugin.
                                      
+        
                                      
+          
                                      
+            
+            Holy guacamole! Best check yo self, you're not looking too good.
+          
                                      
+        
                                      
 
-            
                                      
-              
                                      
-                
-                
                                      Oh snap! You got an error!
                                      
-                
                                      Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                                      
-                
                                      
-                  Take this action Or do this
-                
                                      
-              
                                      
-            
                                      
+        
                                      
+          
                                      
+            
+            
                                      Oh snap! You got an error!
                                      
+            
                                      Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                                      
+            
                                      
+              Take this action Or do this
+            
                                      
+          
                                      
+        
                                      
 
 
-            
                                      
+        
                                      
 
 
-            
                                      Usage
                                      
-            
                                      Enable dismissal of an alert via javascript:
                                      
-            
                                      $(".alert").alert()
                                      
+        
                                      Usage
                                      
+        
                                      Enable dismissal of an alert via javascript:
                                      
+        
                                      $(".alert").alert()
                                      
 
-            
                                      Markup
                                      
-            
                                      Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.
                                      
-            
                                      <a class="close" data-dismiss="alert" href="#">&times;</a>
                                      
+        
                                      Markup
                                      
+        
                                      Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.
                                      
+        
                                      <a class="close" data-dismiss="alert" href="#">&times;</a>
                                      
 
-            
                                      Methods
                                      
-            
                                      $().alert()
                                      
-            
                                      Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.
                                      
-            
                                      .alert('close')
                                      
-            
                                      Closes an alert.
                                      
-            
                                      $(".alert").alert('close')
                                      
+        
                                      Methods
                                      
+        
                                      $().alert()
                                      
+        
                                      Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.
                                      
+        
                                      .alert('close')
                                      
+        
                                      Closes an alert.
                                      
+        
                                      $(".alert").alert('close')
                                      
 
 
-            
                                      Events
                                      
-            
                                      Bootstrap's alert class exposes a few events for hooking into alert functionality.
                                      
-            
-              
-               
-                 
-                 
-               
-              
-              
-               
-                 
-                 
-               
-               
-                 
-                 
-               
-              
-            
                                      EventDescription
                                      closeThis event fires immediately when the close instance method is called.
                                      closedThis event is fired when the alert has been closed (will wait for css transitions to complete).
                                      
+        
                                      Events
                                      
+        
                                      Bootstrap's alert class exposes a few events for hooking into alert functionality.
                                      
+        
+          
+           
+             
+             
+           
+          
+          
+           
+             
+             
+           
+           
+             
+             
+           
+          
+        
                                      EventDescription
                                      closeThis event fires immediately when the close instance method is called.
                                      closedThis event is fired when the alert has been closed (will wait for css transitions to complete).
                                      
 
                                       $('#my-alert').bind('closed', function () {
   // do something…
 })
 
                                      
-          
                                      
+      
                                      
 
 
 
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 9f93620c33..f4c6e8b689 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -824,351 +824,214 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                                      -

                                      {{_i}}Examples{{/i}}

                                      -

                                      {{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.{{/i}}

                                      - -

                                      {{_i}}Static popover{{/i}}

                                      -

                                      {{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}

                                      -
                                      -
                                      -
                                      -

                                      Popover top

                                      -
                                      -

                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                                      -
                                      +
                                      +
                                      +

                                      Popover right

                                      +
                                      +

                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                                      - -
                                      -
                                      -

                                      Popover right

                                      -
                                      -

                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                                      -
                                      -
                                      - -
                                      -
                                      -

                                      Popover bottom

                                      -
                                      -

                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                                      -
                                      -
                                      - -
                                      -
                                      -

                                      Popover left

                                      -
                                      -

                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                                      -
                                      -
                                      - -
                                      -
                                      -

                                      {{_i}}No markup shown as popovers are generated from javascript and content within a data attribute.{{/i}}

                                      - -

                                      Live demo

                                      -
                                      - {{_i}}Hover for popover{{/i}}
                                      - -
                                      - - -

                                      {{_i}}Usage{{/i}}

                                      -

                                      {{_i}}Enable popovers via javascript:{{/i}}

                                      - 
                                      $('#example').popover({{_i}}options{{/i}})
                                      - -

                                      {{_i}}Options{{/i}}

                                      -

                                      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

                                      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                                      {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
                                      {{_i}}html{{/i}}{{_i}}boolean{{/i}}true{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
                                      {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'right'{{_i}}how to position the popover{{/i}} - top | bottom | left | right
                                      {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}
                                      {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how popover is triggered{{/i}} - hover | focus | manual
                                      {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` attribute isn't present{{/i}}
                                      {{_i}}content{{/i}}{{_i}}string | function{{/i}}''{{_i}}default content value if `data-content` attribute isn't present{{/i}}
                                      {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 -

                                      {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}

                                      -

                                      {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

                                      -

                                      {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

                                      -
                                      -
                                      - {{_i}}Heads up!{{/i}} - {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}} +
                                      +
                                      +

                                      Popover bottom

                                      +
                                      +

                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                                      +
                                      -

                                      {{_i}}Markup{{/i}}

                                      -

                                      {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

                                      - -

                                      {{_i}}Methods{{/i}}

                                      -

                                      $().popover({{_i}}options{{/i}})

                                      -

                                      {{_i}}Initializes popovers for an element collection.{{/i}}

                                      -

                                      .popover('show')

                                      -

                                      {{_i}}Reveals an elements popover.{{/i}}

                                      - 
                                      $('#element').popover('show')
                                      -

                                      .popover('hide')

                                      -

                                      {{_i}}Hides an elements popover.{{/i}}

                                      - 
                                      $('#element').popover('hide')
                                      -

                                      .popover('toggle')

                                      -

                                      {{_i}}Toggles an elements popover.{{/i}}

                                      - 
                                      $('#element').popover('toggle')
                                      -

                                      .popover('destroy')

                                      -

                                      {{_i}}Hides and destroys an element's popover.{{/i}}

                                      - 
                                      $('#element').popover('destroy')
                                      -
                                      - - - - -
                                      -
                                      -

                                      {{_i}}Alert messages{{/i}} bootstrap-alert.js

                                      +
                                      +
                                      +

                                      Popover left

                                      +
                                      +

                                      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

                                      +
                                      +
                                      +
                                      +

                                      {{_i}}No markup shown as popovers are generated from javascript and content within a data attribute.{{/i}}

                                      -

                                      {{_i}}Example alerts{{/i}}

                                      -

                                      {{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}

                                      -
                                      -
                                      - - {{_i}}Holy guacamole!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} -
                                      -

                                      {{_i}}No markup shown as popovers are generated from javascript and content within a data attribute.{{/i}}

                                      - -

                                      Live demo

                                      -
                                      - {{_i}}Hover for popover{{/i}} -
                                      +

                                      Live demo

                                      +
                                      + {{_i}}Hover for popover{{/i}} +
                                      -
                                      +
                                      -

                                      {{_i}}Usage{{/i}}

                                      -

                                      {{_i}}Enable popovers via javascript:{{/i}}

                                      - 
                                      $('#example').popover({{_i}}options{{/i}})
                                      +

                                      {{_i}}Usage{{/i}}

                                      +

                                      {{_i}}Enable popovers via javascript:{{/i}}

                                      + 
                                      $('#example').popover({{_i}}options{{/i}})
                                      -

                                      {{_i}}Options{{/i}}

                                      -

                                      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

                                      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                                      {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
                                      {{_i}}html{{/i}}{{_i}}boolean{{/i}}true{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
                                      {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'right'{{_i}}how to position the popover{{/i}} - top | bottom | left | right
                                      {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}
                                      {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how popover is triggered{{/i}} - hover | focus | manual
                                      {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` attribute isn't present{{/i}}
                                      {{_i}}content{{/i}}{{_i}}string | function{{/i}}''{{_i}}default content value if `data-content` attribute isn't present{{/i}}
                                      {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 -

                                      {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}

                                      -

                                      {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

                                      -

                                      {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

                                      -
                                      -
                                      - {{_i}}Heads up!{{/i}} - {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}} -
                                      +

                                      {{_i}}Options{{/i}}

                                      +

                                      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

                                      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                                      {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
                                      {{_i}}html{{/i}}{{_i}}boolean{{/i}}true{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
                                      {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'right'{{_i}}how to position the popover{{/i}} - top | bottom | left | right
                                      {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}
                                      {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how popover is triggered{{/i}} - hover | focus | manual
                                      {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` attribute isn't present{{/i}}
                                      {{_i}}content{{/i}}{{_i}}string | function{{/i}}''{{_i}}default content value if `data-content` attribute isn't present{{/i}}
                                      {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 +

                                      {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}

                                      +

                                      {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

                                      +

                                      {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

                                      +
                                      +
                                      + {{_i}}Heads up!{{/i}} + {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}} +
                                      -

                                      {{_i}}Markup{{/i}}

                                      -

                                      {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

                                      +

                                      {{_i}}Markup{{/i}}

                                      +

                                      {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

                                      -

                                      {{_i}}Methods{{/i}}

                                      -

                                      $().popover({{_i}}options{{/i}})

                                      -

                                      {{_i}}Initializes popovers for an element collection.{{/i}}

                                      -

                                      .popover('show')

                                      -

                                      {{_i}}Reveals an elements popover.{{/i}}

                                      - 
                                      $('#element').popover('show')
                                      -

                                      .popover('hide')

                                      -

                                      {{_i}}Hides an elements popover.{{/i}}

                                      - 
                                      $('#element').popover('hide')
                                      -

                                      .popover('toggle')

                                      -

                                      {{_i}}Toggles an elements popover.{{/i}}

                                      - 
                                      $('#element').popover('toggle')
                                      -

                                      .popover('destroy')

                                      -

                                      {{_i}}Destroys an element's popover.{{/i}}

                                      - 
                                      $('#element').popover('destroy')
                                      -
                                      +

                                      {{_i}}Methods{{/i}}

                                      +

                                      $().popover({{_i}}options{{/i}})

                                      +

                                      {{_i}}Initializes popovers for an element collection.{{/i}}

                                      +

                                      .popover('show')

                                      +

                                      {{_i}}Reveals an elements popover.{{/i}}

                                      + 
                                      $('#element').popover('show')
                                      +

                                      .popover('hide')

                                      +

                                      {{_i}}Hides an elements popover.{{/i}}

                                      + 
                                      $('#element').popover('hide')
                                      +

                                      .popover('toggle')

                                      +

                                      {{_i}}Toggles an elements popover.{{/i}}

                                      + 
                                      $('#element').popover('toggle')
                                      +

                                      .popover('destroy')

                                      +

                                      {{_i}}Hides and destroys an element's popover.{{/i}}

                                      + 
                                      $('#element').popover('destroy')
                                      +
                                      - -
                                      -
                                      -

                                      {{_i}}Alert messages{{/i}} bootstrap-alert.js

                                      -
                                      + +
                                      +
                                      +

                                      {{_i}}Alert messages{{/i}} bootstrap-alert.js

                                      +
                                      -

                                      {{_i}}Example alerts{{/i}}

                                      -

                                      {{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}

                                      -
                                      -
                                      - - {{_i}}Holy guacamole!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} -
                                      -
                                      {{! /example }} +

                                      {{_i}}Example alerts{{/i}}

                                      +

                                      {{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}

                                      +
                                      +
                                      + + {{_i}}Holy guacamole!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} +
                                      +
                                      {{! /example }} -
                                      -
                                      - -

                                      {{_i}}Oh snap! You got an error!{{/i}}

                                      -

                                      {{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}

                                      -

                                      - {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}} -

                                      -
                                      -
                                      {{! /example }} +
                                      +
                                      + +

                                      {{_i}}Oh snap! You got an error!{{/i}}

                                      +

                                      {{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}

                                      +

                                      + {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}} +

                                      +
                                      +
                                      {{! /example }} -
                                      +
                                      -

                                      {{_i}}Usage{{/i}}

                                      -

                                      {{_i}}Enable dismissal of an alert via javascript:{{/i}}

                                      - 
                                      $(".alert").alert()
                                      +

                                      {{_i}}Usage{{/i}}

                                      +

                                      {{_i}}Enable dismissal of an alert via javascript:{{/i}}

                                      + 
                                      $(".alert").alert()
                                      -

                                      {{_i}}Markup{{/i}}

                                      -

                                      {{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}

                                      - 
                                      <a class="close" data-dismiss="alert" href="#">&times;</a>
                                      +

                                      {{_i}}Markup{{/i}}

                                      +

                                      {{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}

                                      + 
                                      <a class="close" data-dismiss="alert" href="#">&times;</a>
                                      -

                                      {{_i}}Methods{{/i}}

                                      -

                                      $().alert()

                                      -

                                      {{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}

                                      -

                                      .alert('close')

                                      -

                                      {{_i}}Closes an alert.{{/i}}

                                      - 
                                      $(".alert").alert('close')
                                      +

                                      {{_i}}Methods{{/i}}

                                      +

                                      $().alert()

                                      +

                                      {{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}

                                      +

                                      .alert('close')

                                      +

                                      {{_i}}Closes an alert.{{/i}}

                                      + 
                                      $(".alert").alert('close')
                                      -

                                      {{_i}}Events{{/i}}

                                      -

                                      {{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}

                                      - - - - - - - - - - - - - - - - - -
                                      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                                      {{_i}}close{{/i}}{{_i}}This event fires immediately when the close instance method is called.{{/i}}
                                      {{_i}}closed{{/i}}{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}
                                      +

                                      {{_i}}Events{{/i}}

                                      +

                                      {{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}

                                      + + + + + + + + + + + + + + + + + +
                                      {{_i}}Event{{/i}}{{_i}}Description{{/i}}
                                      {{_i}}close{{/i}}{{_i}}This event fires immediately when the close instance method is called.{{/i}}
                                      {{_i}}closed{{/i}}{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}
                                       $('#my-alert').bind('closed', function () {
   // {{_i}}do something…{{/i}}
 })
                                      -
                                      +
                                      From 6474190746fd163375200119b9d2cc7066e05d43 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jul 2012 23:42:36 -0700 Subject: [PATCH 253/422] increase height of homepage jumbotron, update vars and styles of popovers --- docs/assets/css/bootstrap.css | 19 ++++++++++--------- docs/assets/css/docs.css | 4 ++-- less/popovers.less | 9 +++++---- less/variables.less | 5 +++-- 4 files changed, 20 insertions(+), 17 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 2598d89d9f..f806ed519f 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4858,8 +4858,9 @@ input[type="submit"].btn.btn-mini { left: 0; z-index: 1010; display: none; - width: 238px; - background-color: #fff; + width: 236px; + padding: 1px; + background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 6px; @@ -4895,8 +4896,8 @@ input[type="submit"].btn.btn-mini { font-size: 14px; font-weight: normal; line-height: 18px; - background-color: #f5f5f5; - border-bottom: 1px solid #dcdcdc; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; @@ -4938,7 +4939,7 @@ input[type="submit"].btn.btn-mini { .popover.top .arrow:after { bottom: -1px; left: -11px; - border-top-color: rgba(0, 0, 0, 0.2); + border-top-color: rgba(0, 0, 0, 0.25); border-width: 11px 11px 0; } @@ -4953,7 +4954,7 @@ input[type="submit"].btn.btn-mini { .popover.right .arrow:after { bottom: -11px; left: -1px; - border-right-color: rgba(0, 0, 0, 0.2); + border-right-color: rgba(0, 0, 0, 0.25); border-width: 11px 11px 11px 0; } @@ -4961,14 +4962,14 @@ input[type="submit"].btn.btn-mini { top: -10px; left: 50%; margin-left: -10px; - border-bottom-color: #f5f5f5; + border-bottom-color: #ffffff; border-width: 0 10px 10px; } .popover.bottom .arrow:after { top: -1px; left: -11px; - border-bottom-color: rgba(0, 0, 0, 0.2); + border-bottom-color: rgba(0, 0, 0, 0.25); border-width: 0 11px 11px; } @@ -4983,7 +4984,7 @@ input[type="submit"].btn.btn-mini { .popover.left .arrow:after { right: -1px; bottom: -11px; - border-left-color: rgba(0, 0, 0, 0.2); + border-left-color: rgba(0, 0, 0, 0.25); border-width: 11px 0 11px 11px; } diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 764cfbbaca..0897cc5c5c 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -177,7 +177,7 @@ hr.soften { /* Masthead (docs home) ------------------------- */ .masthead { - padding: 50px 0 60px; + padding: 70px 0 80px; margin-bottom: 0; color: #fff; } @@ -1000,7 +1000,7 @@ form.bs-docs-example { box-shadow: 0 -5px 15px rgba(0,0,0,.15); } .masthead + .bs-docs-canvas { - top: 530px; + top: 570px; } .subhead + .bs-docs-canvas { top: 250px; diff --git a/less/popovers.less b/less/popovers.less index 147f54a5db..2b3f1b0599 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -9,8 +9,9 @@ left: 0; z-index: @zindexPopover; display: none; - width: 238px; - background-color: #fff; + width: 236px; + padding: 1px; + background-color: @popoverBackground; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; @@ -34,7 +35,7 @@ font-weight: normal; line-height: 18px; background-color: @popoverTitleBackground; - border-bottom: 1px solid darken(@popoverTitleBackground, 10%); + border-bottom: 1px solid darken(@popoverTitleBackground, 5%); .border-radius(5px 5px 0 0); } @@ -92,7 +93,7 @@ left: 50%; margin-left: -@popoverArrowWidth; border-width: 0 @popoverArrowWidth @popoverArrowWidth; - border-bottom-color: @popoverTitleBackground; + border-bottom-color: @popoverArrowColor; &:after { border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; border-bottom-color: @popoverArrowOuterColor; diff --git a/less/variables.less b/less/variables.less index ae5cd5e00b..0e3e13f416 100644 --- a/less/variables.less +++ b/less/variables.less @@ -205,13 +205,14 @@ @tooltipArrowWidth: 5px; @tooltipArrowColor: @tooltipBackground; +@popoverBackground: #fff; @popoverArrowWidth: 10px; @popoverArrowColor: #fff; -@popoverTitleBackground: #f5f5f5; +@popoverTitleBackground: darken(@popoverBackground, 3%); // Special enhancement for popovers @popoverArrowOuterWidth: @popoverArrowWidth + 1; -@popoverArrowOuterColor: rgba(0,0,0,.2); +@popoverArrowOuterColor: rgba(0,0,0,.25); From 1e9b4506196bd448c4038151964733ca524c10bb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 00:06:43 -0700 Subject: [PATCH 254/422] add image styles, for now to scaffolding (soon to own file) --- docs/assets/css/bootstrap.css | 22 ++++++++++++++++++++++ docs/assets/css/docs.css | 6 ++++++ docs/base-css.html | 25 +++++++++++++++++++++++++ docs/templates/pages/base-css.mustache | 25 +++++++++++++++++++++++++ less/scaffolding.less | 22 ++++++++++++++++++++++ 5 files changed, 100 insertions(+) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f806ed519f..87922cf880 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -175,6 +175,28 @@ a:hover { text-decoration: underline; } +.img-rounded { + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.img-polaroid { + padding: 4px; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.img-circle { + -webkit-border-radius: 500px; + -moz-border-radius: 500px; + border-radius: 500px; +} + .row { margin-left: -20px; *zoom: 1; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 0897cc5c5c..f7b79e2dd1 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -632,6 +632,12 @@ form.bs-docs-example { line-height: 24px; } +/* Images */ +.bs-docs-example-images img { + margin: 10px; + display: inline-block; +} + /* Tooltips */ .bs-docs-tooltip-examples { text-align: center; diff --git a/docs/base-css.html b/docs/base-css.html index 9aa0120833..4f0df407d7 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -92,6 +92,7 @@
                                    • Tables
                                    • Forms
                                    • Buttons
                                      • +
                                    • Images
                                    • Icons by Glyphicons
                                    @@ -1517,6 +1518,30 @@ For example, <code>section</code> should be wrapped as inline. + +
                                    +
                                    +

                                    Images

                                    +
                                    + +

                                    Simple classes to easily style images in any project.

                                    +
                                    + + + +
                                    +
                                    +  <img src="..." class="img-rounded">
+  <img src="..." class="img-circle">
+  <img src="..." class="img-polaroid">
+
                                    + + +
                                    + + +
                                    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index fa85786724..a2685aab37 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -21,6 +21,7 @@
                                  • {{_i}}Tables{{/i}}
                                  • {{_i}}Forms{{/i}}
                                  • {{_i}}Buttons{{/i}}
                                    • +
                                  • {{_i}}Images{{/i}}
                                  • {{_i}}Icons by Glyphicons{{/i}}
                                  @@ -1454,6 +1455,30 @@ + +
                                  +
                                  +

                                  {{_i}}Images{{/i}}

                                  +
                                  + +

                                  Simple classes to easily style images in any project.

                                  +
                                  + + + +
                                  +
                                  +  <img src="..." class="img-rounded">
+  <img src="..." class="img-circle">
+  <img src="..." class="img-polaroid">
+
                                  + + +
                                  + + +
                                  diff --git a/less/scaffolding.less b/less/scaffolding.less index a218c54786..fe63c7cacd 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -27,3 +27,25 @@ a:hover { color: @linkColorHover; text-decoration: underline; } + + +// Images +// ------------------------- + +.img-rounded { + .border-radius(6px); +} + +.img-polaroid { + padding: 4px; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0,0,0,.2); + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1); + box-shadow: 0 1px 3px rgba(0,0,0,.1); +} + +.img-circle { + .border-radius(500px); +} \ No newline at end of file From 9d5c4312232ebb53b2499ed495851c0d61eb648c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 10:06:54 -0700 Subject: [PATCH 255/422] add basic support for sub menus in dropdown menus --- docs/assets/css/bootstrap.css | 31 +++++++++++++++---- docs/components.html | 19 ++++++------ docs/templates/pages/components.mustache | 19 ++++++------ less/dropdowns.less | 38 ++++++++++++++++++------ 4 files changed, 74 insertions(+), 33 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 87922cf880..f24baf5810 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2687,7 +2687,8 @@ table .span24 { } .dropdown-menu li > a:hover, -.dropdown-menu li > a:focus { +.dropdown-menu li > a:focus, +.dropdown-submenu:hover > a { color: #ffffff; text-decoration: none; background-color: #0088cc; @@ -2728,11 +2729,6 @@ table .span24 { background-color: transparent; } -.dropdown .dropdown-menu .nav-header { - padding-right: 20px; - padding-left: 20px; -} - .open { *z-index: 1000; } @@ -2760,6 +2756,29 @@ table .span24 { margin-bottom: 1px; } +.dropdown-submenu { + position: relative; +} + +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -5px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} + +.dropdown-submenu:hover .dropdown-menu { + display: block; +} + +.dropdown .dropdown-menu .nav-header { + padding-right: 20px; + padding-left: 20px; +} + .typeahead { margin-top: 2px; -webkit-border-radius: 4px; diff --git a/docs/components.html b/docs/components.html index 181a8cbfcd..c36eec9403 100644 --- a/docs/components.html +++ b/docs/components.html @@ -122,7 +122,16 @@
                                • Another action
                                • Something else here
                                • -
                                • Separated link
                                  • +
                                • + Separated link + +
                                @@ -136,10 +145,6 @@ </ul> - -
                                - -

                                Markup

                                Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.

                                @@ -156,10 +161,6 @@ </div> - -
                                - -

                                Options

                                ...

                                diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 52d5137c08..e9022ee125 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -51,7 +51,16 @@
                              • {{_i}}Another action{{/i}}
                              • {{_i}}Something else here{{/i}}
                              • -
                              • {{_i}}Separated link{{/i}}
                                • +
                              • + {{_i}}Separated link{{/i}} + +
                                • {{! /example }} @@ -65,10 +74,6 @@ </ul> - -
                                - -

                                {{_i}}Markup{{/i}}

                                {{_i}}Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.{{/i}}

                                @@ -85,10 +90,6 @@ </div> - -
                                - -

                                {{_i}}Options{{/i}}

                                {{_i}}...{{/i}}

                                diff --git a/less/dropdowns.less b/less/dropdowns.less index 5f62d27f04..a36c3a416f 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -96,7 +96,8 @@ // Hover state // ----------- .dropdown-menu li > a:hover, -.dropdown-menu li > a:focus { +.dropdown-menu li > a:focus, +.dropdown-submenu:hover > a { text-decoration: none; color: @dropdownLinkColorHover; background-color: @dropdownLinkBackgroundHover; @@ -128,14 +129,6 @@ cursor: default; } -// Tweak nav headers -// ----------------- -// Increase padding from 15px to 20px on sides -.dropdown .dropdown-menu .nav-header { - padding-left: 20px; - padding-right: 20px; -} - // Open state for the dropdown // --------------------------- .open { @@ -175,6 +168,33 @@ } } +// Sub menus +// --------------------------- +.dropdown-submenu { + position: relative; +} +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -5px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} +.dropdown-submenu:hover .dropdown-menu { + display: block; +} + + +// Tweak nav headers +// ----------------- +// Increase padding from 15px to 20px on sides +.dropdown .dropdown-menu .nav-header { + padding-left: 20px; + padding-right: 20px; +} + // Typeahead // --------- .typeahead { From 16b4ac0d8fd5fd2aa588a8b486b71b449e3821ca Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 10:35:15 -0700 Subject: [PATCH 256/422] add docs for sub menu support on dropdowns, add caret via :after to submenu toggles --- docs/assets/css/bootstrap.css | 20 ++++++++- docs/components.html | 55 ++++++++++++++++++------ docs/templates/pages/components.mustache | 55 ++++++++++++++++++------ less/dropdowns.less | 19 +++++++- 4 files changed, 123 insertions(+), 26 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f24baf5810..c59a7fd974 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2763,7 +2763,7 @@ table .span24 { .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; - margin-top: -5px; + margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; @@ -2774,6 +2774,24 @@ table .span24 { display: block; } +.dropdown-submenu > a:after { + display: block; + float: right; + width: 0; + height: 0; + margin-top: 5px; + margin-right: -10px; + border-color: transparent; + border-left-color: #cccccc; + border-style: solid; + border-width: 5px 0 5px 5px; + content: " "; +} + +.dropdown-submenu:hover > a:after { + border-left-color: #ffffff; +} + .dropdown .dropdown-menu .nav-header { padding-right: 20px; padding-left: 20px; diff --git a/docs/components.html b/docs/components.html index c36eec9403..719a9e8743 100644 --- a/docs/components.html +++ b/docs/components.html @@ -122,16 +122,7 @@
                              • Another action
                              • Something else here
                              • -
                              • - Separated link - -
                                • +
                              • Separated link
                                • @@ -162,10 +153,50 @@

                                Options

                                -

                                ...

                                +

                                Align menus to the right and add include additional levels of dropdowns.

                                Aligning the menus

                                -

                                ...

                                +

                                Add .pull-right to a .dropdown-menu to right align the dropdown menu.

                                +
                                +<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
+  ...
+</ul>
+
                                + +

                                Sub menus on dropdowns

                                +

                                Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

                                +
                                +
                                + +
                                +
                                +
                                +<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>
+
                                + diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index e9022ee125..7ac31e2191 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -51,16 +51,7 @@
                              • {{_i}}Another action{{/i}}
                              • {{_i}}Something else here{{/i}}
                              • -
                              • - {{_i}}Separated link{{/i}} - -
                                • +
                              • {{_i}}Separated link{{/i}}
                                • {{! /example }} @@ -91,10 +82,50 @@

                                {{_i}}Options{{/i}}

                                -

                                {{_i}}...{{/i}}

                                +

                                {{_i}}Align menus to the right and add include additional levels of dropdowns.{{/i}}

                                {{_i}}Aligning the menus{{/i}}

                                -

                                {{_i}}...{{/i}}

                                +

                                {{_i}}Add .pull-right to a .dropdown-menu to right align the dropdown menu.{{/i}}

                                +
                                +<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
+  ...
+</ul>
+
                                + +

                                {{_i}}Sub menus on dropdowns{{/i}}

                                +

                                {{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.{{/i}}

                                +
                                +
                                + +
                                +
                                {{! /example }} +
                                +<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+  ...
+  <li class="dropdown-submenu">
+    <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+
                                + diff --git a/less/dropdowns.less b/less/dropdowns.less index a36c3a416f..fb85ca57af 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -176,7 +176,7 @@ .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; - margin-top: -5px; + margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; @@ -186,6 +186,23 @@ display: block; } +.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(@dropdownBackground, 20%); + margin-top: 5px; + margin-right: -10px; +} +.dropdown-submenu:hover > a:after { + border-left-color: @dropdownLinkColorHover; +} + // Tweak nav headers // ----------------- From fe6a4b0b5497a78a085e85125f4397a27b7737dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 15:42:58 -0700 Subject: [PATCH 257/422] add .btn-block for a full-width button option --- docs/assets/css/bootstrap.css | 10 ++++++ docs/base-css.html | 47 ++++++++++++++------------ docs/templates/pages/base-css.mustache | 47 ++++++++++++++------------ less/buttons.less | 9 +++++ 4 files changed, 71 insertions(+), 42 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index c59a7fd974..700d92d785 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3019,6 +3019,16 @@ button.close { line-height: 16px; } +.btn-block { + display: block; + width: 100%; + padding-right: 0; + padding-left: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + .btn-primary.active, .btn-warning.active, .btn-danger.active, diff --git a/docs/base-css.html b/docs/base-css.html index 4f0df407d7..f827380ac4 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1439,26 +1439,34 @@ For example, <code>section</code> should be wrapped as inline.

                                IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

                                -
                                - -

                                Button sizes

                                Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

                                -

                                - - -

                                -

                                - - -

                                -

                                - - -

                                - - -
                                +
                                +

                                + + +

                                +

                                + + +

                                +

                                + + +

                                +
                                +
                                +<button class="btn btn-large" type="button">Large button</button>
+<button class="btn btn-small" type="button">Small button</button>
+<button class="btn btn-mini" type="button">Mini button</button>
+
                                +

                                Create block level buttons—those that span the full width of a parent— by adding .btn-block.

                                +
                                +
                                + +
                                +
                                + 
                                <button class="btn btn-large btn-block" type="button">Block level button</button>

                                Disabled state

                                @@ -1491,9 +1499,6 @@ For example, <code>section</code> should be wrapped as inline. -
                                - -

                                One class, multiple tags

                                Use the .btn class on an <a>, <button>, or <input> element.

                                diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index a2685aab37..248ffa0420 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1376,26 +1376,34 @@

                                {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}

                                -
                                - -

                                {{_i}}Button sizes{{/i}}

                                {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}

                                -

                                - - -

                                -

                                - - -

                                -

                                - - -

                                - - -
                                +
                                +

                                + + +

                                +

                                + + +

                                +

                                + + +

                                +
                                +
                                +<button class="btn btn-large" type="button">{{_i}}Large button{{/i}}</button>
+<button class="btn btn-small" type="button">{{_i}}Small button{{/i}}</button>
+<button class="btn btn-mini" type="button">{{_i}}Mini button{{/i}}</button>
+
                                +

                                {{_i}}Create block level buttons—those that span the full width of a parent— by adding .btn-block.{{/i}}

                                +
                                +
                                + +
                                +
                                + 
                                <button class="btn btn-large btn-block" type="button">{{_i}}Block level button{{/i}}</button>

                                {{_i}}Disabled state{{/i}}

                                @@ -1428,9 +1436,6 @@ -
                                - -

                                {{_i}}One class, multiple tags{{/i}}

                                {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}

                                diff --git a/less/buttons.less b/less/buttons.less index 8bdf34b20a..b6c78ce360 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -99,6 +99,15 @@ line-height: @baseLineHeight - 4px; } +// Block button +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; + .box-sizing(border-box); +} + // Alternate buttons // -------------------------------------------------- From a30045daef809edf5ed592ad842c04377898e444 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jul 2012 00:30:15 -0700 Subject: [PATCH 258/422] reverse navbar styles to save code --- docs/assets/css/bootstrap-responsive.css | 10 +- docs/assets/css/bootstrap.css | 404 +++++++++------------- docs/assets/css/docs.css | 6 +- docs/base-css.html | 5 +- docs/components.html | 9 +- docs/customize.html | 2 +- docs/extend.html | 2 +- docs/getting-started.html | 2 +- docs/index.html | 2 +- docs/javascript.html | 2 +- docs/scaffolding.html | 2 +- docs/templates/layout.mustache | 2 +- docs/templates/pages/base-css.mustache | 3 +- docs/templates/pages/components.mustache | 7 +- docs/upgrading.html | 2 +- less/bootstrap.less | 3 +- less/buttons.less | 3 + less/dropdowns.less | 12 +- less/navbar-redux.less | 418 +++++++++++++++++++++++ less/navbar.less | 2 - less/variables.less | 35 +- 21 files changed, 637 insertions(+), 296 deletions(-) create mode 100644 less/navbar-redux.less diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 2590aadf86..d62a5f68dd 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -935,14 +935,14 @@ display: none; } .nav-collapse .nav .nav-header { - color: #999999; + color: #555555; text-shadow: none; } .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { padding: 6px 15px; font-weight: bold; - color: #999999; + color: #555555; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; @@ -959,7 +959,7 @@ } .nav-collapse .nav > li > a:hover, .nav-collapse .dropdown-menu a:hover { - background-color: #111111; + background-color: #f2f2f2; } .nav-collapse.in .btn-group { padding: 0; @@ -995,8 +995,8 @@ float: none; padding: 10px 15px; margin: 10px 0; - border-top: 1px solid #111111; - border-bottom: 1px solid #111111; + border-top: 1px solid #f2f2f2; + border-bottom: 1px solid #f2f2f2; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 700d92d785..adfba9b5d7 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2614,8 +2614,6 @@ table .span24 { border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; - opacity: 0.3; - filter: alpha(opacity=30); } .dropdown .caret { @@ -2623,17 +2621,6 @@ table .span24 { margin-left: 2px; } -.dropdown a:focus .caret, -.dropdown a:hover .caret, -.open .caret { - opacity: 1; - filter: alpha(opacity=100); -} - -.navbar .nav .open > a { - color: #ffffff; -} - .dropdown-menu { position: absolute; top: 100%; @@ -2643,7 +2630,7 @@ table .span24 { float: left; min-width: 160px; padding: 5px 0; - margin: 1px 0 0; + margin: 2px 0 0; list-style: none; background-color: #ffffff; border: 1px solid #ccc; @@ -3029,6 +3016,10 @@ button.close { box-sizing: border-box; } +.btn-block + .btn-block { + margin-top: 5px; +} + .btn-primary.active, .btn-warning.active, .btn-danger.active, @@ -3982,26 +3973,28 @@ input[type="submit"].btn.btn-mini { *z-index: 2; margin-bottom: 20px; overflow: visible; + color: #555555; } .navbar-inner { min-height: 40px; padding-right: 20px; padding-left: 20px; - background-color: #1b1b1b; - background-image: -moz-linear-gradient(top, #222222, #111111); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); - background-image: -webkit-linear-gradient(top, #222222, #111111); - background-image: -o-linear-gradient(top, #222222, #111111); - background-image: linear-gradient(to bottom, #222222, #111111); + background-color: #fafafa; + background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)); + background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2); + background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); + background-image: linear-gradient(to bottom, #ffffff, #f2f2f2); background-repeat: repeat-x; + border: 1px solid #d4d4d4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0); + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); + -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); } .navbar .container { @@ -4012,36 +4005,32 @@ input[type="submit"].btn.btn-mini { height: auto; } -.navbar { - color: #999999; +.navbar .brand { + display: block; + float: left; + padding: 10px 20px 10px; + margin-left: -20px; + font-size: 20px; + font-weight: 200; + color: #555555; + text-shadow: 0 1px 0 #ffffff; } .navbar .brand:hover { text-decoration: none; } -.navbar .brand { - display: block; - float: left; - padding: 8px 20px 12px; - margin-left: -20px; - font-size: 20px; - font-weight: 200; - line-height: 1; - color: #999999; -} - -.navbar .navbar-text { +.navbar-text { margin-bottom: 0; line-height: 40px; } -.navbar .navbar-link { - color: #999999; +.navbar-link { + color: #555555; } -.navbar .navbar-link:hover { - color: #ffffff; +.navbar-link:hover { + color: #333333; } .navbar .btn, @@ -4114,19 +4103,9 @@ input[type="submit"].btn.btn-mini { font-size: 13px; font-weight: normal; line-height: 1; - color: #ffffff; - background-color: #515151; - border: 1px solid #040404; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); - -webkit-transition: none; - -moz-transition: none; - -o-transition: none; - transition: none; } .navbar-search .search-query:-moz-placeholder { @@ -4141,19 +4120,6 @@ input[type="submit"].btn.btn-mini { color: #cccccc; } -.navbar-search .search-query:focus, -.navbar-search .search-query.focused { - padding: 5px 15px; - color: #333333; - text-shadow: 0 1px 0 #ffffff; - background-color: #ffffff; - border: 0; - outline: 0; - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); -} - .navbar-fixed-top, .navbar-fixed-bottom { position: fixed; @@ -4179,6 +4145,10 @@ input[type="submit"].btn.btn-mini { .navbar-fixed-top { top: 0; +} + +.navbar-fixed-top .navbar-inner { + border-width: 0 0 1px; -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); @@ -4186,6 +4156,10 @@ input[type="submit"].btn.btn-mini { .navbar-fixed-bottom { bottom: 0; +} + +.navbar-fixed-bottom .navbar-inner { + border-width: 1px 0 0; -webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); @@ -4209,32 +4183,19 @@ input[type="submit"].btn.btn-mini { .navbar .nav > li > a { float: none; - padding: 10px 15px 11px; - line-height: 19px; - color: #999999; + padding: 10px 15px 10px; + color: #555555; text-decoration: none; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + text-shadow: 0 1px 0 #ffffff; } .navbar .nav .dropdown-toggle .caret { margin-top: 8px; } -.navbar .btn { - display: inline-block; - padding: 4px 10px 4px; - margin: 5px 5px 6px; - line-height: 20px; -} - -.navbar .btn-group { - padding: 5px 5px 6px; - margin: 0; -} - .navbar .nav > li > a:focus, .navbar .nav > li > a:hover { - color: #ffffff; + color: #333333; text-decoration: none; background-color: transparent; } @@ -4242,23 +4203,12 @@ input[type="submit"].btn.btn-mini { .navbar .nav .active > a, .navbar .nav .active > a:hover, .navbar .nav .active > a:focus { - color: #ffffff; + color: #555555; text-decoration: none; - background-color: #111111; -} - -.navbar .divider-vertical { - width: 1px; - height: 40px; - margin: 0 9px; - overflow: hidden; - background-color: #111111; - border-right: 1px solid #222222; -} - -.navbar .nav.pull-right { - margin-right: 0; - margin-left: 10px; + background-color: #e5e5e5; + -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); } .navbar .btn-navbar { @@ -4269,17 +4219,17 @@ input[type="submit"].btn.btn-mini { margin-left: 5px; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #0e0e0e; - *background-color: #040404; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); - background-image: -webkit-linear-gradient(top, #151515, #040404); - background-image: -o-linear-gradient(top, #151515, #040404); - background-image: linear-gradient(to bottom, #151515, #040404); - background-image: -moz-linear-gradient(top, #151515, #040404); + background-color: #ededed; + *background-color: #e5e5e5; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5)); + background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5); + background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5); + background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5); + background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5); background-repeat: repeat-x; - border-color: #040404 #040404 #000000; + border-color: #e5e5e5 #e5e5e5 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); @@ -4292,13 +4242,13 @@ input[type="submit"].btn.btn-mini { .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] { color: #ffffff; - background-color: #040404; - *background-color: #000000; + background-color: #e5e5e5; + *background-color: #d9d9d9; } .navbar .btn-navbar:active, .navbar .btn-navbar.active { - background-color: #000000 \9; + background-color: #cccccc \9; } .navbar .btn-navbar .icon-bar { @@ -4356,26 +4306,23 @@ input[type="submit"].btn.btn-mini { border-bottom: 0; } -.navbar .nav li.dropdown .dropdown-toggle .caret, -.navbar .nav li.dropdown.open .caret { - border-top-color: #ffffff; - border-bottom-color: #ffffff; -} - -.navbar .nav li.dropdown.active .caret { - opacity: 1; - filter: alpha(opacity=100); -} - .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle { - background-color: transparent; + color: #555555; + background-color: #e5e5e5; } -.navbar .nav li.dropdown.active > .dropdown-toggle:focus, -.navbar .nav li.dropdown.active > .dropdown-toggle:hover { - color: #ffffff; +.navbar .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} + +.navbar .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar .nav li.dropdown.active > .dropdown-toggle .caret, +.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: #555555; + border-bottom-color: #555555; } .navbar .pull-right .dropdown-menu, @@ -4396,150 +4343,109 @@ input[type="submit"].btn.btn-mini { left: auto; } -/* Subnav navbar --------------------------------------------------- */ +.navbar-inverse { + color: #999999; +} -.navbar-subnav .navbar-inner { - padding-right: 10px; - padding-left: 10px; - background-color: #f9f9f9; - background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1); - background-image: linear-gradient(to bottom, #ffffff, #f1f1f1); - background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1); - background-image: -o-linear-gradient(top, #ffffff, #f1f1f1); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1)); +.navbar-inverse .navbar-inner { + background-color: #1b1b1b; + background-image: -moz-linear-gradient(top, #222222, #111111); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); + background-image: -webkit-linear-gradient(top, #222222, #111111); + background-image: -o-linear-gradient(top, #222222, #111111); + background-image: linear-gradient(to bottom, #222222, #111111); background-repeat: repeat-x; - border: 1px solid #e5e5e5; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0); - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + border-color: #252525; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); } -.navbar-subnav .divider-vertical { - background-color: #f1f1f1; - border-right-color: #ffffff; -} - -.navbar-subnav .nav > li > a { - color: #0088cc; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -} - -.navbar-subnav .nav > li > a:hover { - color: #005580; -} - -.navbar-subnav .nav > .active > a, -.navbar-subnav .nav > .active > a:hover { - color: #777; - background-color: #eee; - -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5); - -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5); - box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5); -} - -.navbar-subnav .nav li.dropdown .dropdown-toggle .caret, -.navbar-subnav .nav li.dropdown.open .caret { - border-top-color: #0088cc; - border-bottom-color: #0088cc; -} - -.navbar-subnav .search-query { - background-color: #fff; - border-color: #ccc; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25); -} - -.navbar-subnav .search-query:focus, -.navbar-subnav .search-query.focused { - padding: 4px 9px; - border: 1px solid rgba(82, 168, 236, 0.8); - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); -} - -.navbar-subnav .nav .open > a { - color: #005580; -} - -.navbar-subnav .btn-navbar { - color: #ffffff; +.navbar-inverse .brand, +.navbar-inverse .nav > li > a { + color: #999999; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #ededed; - *background-color: #e4e4e4; - background-image: -moz-linear-gradient(top, #f2f2f2, #e4e4e4); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e4e4e4)); - background-image: -webkit-linear-gradient(top, #f2f2f2, #e4e4e4); - background-image: -o-linear-gradient(top, #f2f2f2, #e4e4e4); - background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4); - background-repeat: repeat-x; - border-color: #e4e4e4 #e4e4e4 #bebebe; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe4e4e4', GradientType=0); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25); } -.navbar-subnav .btn-navbar:hover, -.navbar-subnav .btn-navbar:active, -.navbar-subnav .btn-navbar.active, -.navbar-subnav .btn-navbar.disabled, -.navbar-subnav .btn-navbar[disabled] { +.navbar-inverse .brand:hover, +.navbar-inverse .nav > li > a:hover { color: #ffffff; - background-color: #e4e4e4; - *background-color: #d7d7d7; } -.navbar-subnav .btn-navbar:active, -.navbar-subnav .btn-navbar.active { - background-color: #cbcbcb \9; +.navbar-inverse .nav > li > a:focus, +.navbar-inverse .nav > li > a:hover { + color: #ffffff; + background-color: transparent; } -.navbar .btn-navbar .icon-bar { - background-color: #999; - -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); - -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); +.navbar-inverse .nav .active > a, +.navbar-inverse .nav .active > a:hover, +.navbar-inverse .nav .active > a:focus { + color: #ffffff; + background-color: #111111; } -.navbar-subnav-fixed { - position: fixed; - top: 40px; - right: 0; - left: 0; - z-index: 1020; - -webkit-box-shadow: inset 0 1px 0 #ffffff, 0 1px 10px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 0 #ffffff, 0 1px 10px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 0 #ffffff, 0 1px 10px rgba(0, 0, 0, 0.1); +.navbar-inverse .navbar-link { + color: #999999; } -.navbar-subnav-fixed .navbar-inner { - border-color: #d5d5d5; - border-width: 0 0 1px; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - filter: progid:dximagetransform.microsoft.gradient(enabled=false); +.navbar-inverse .navbar-link:hover { + color: #ffffff; } -.navbar-subnav-fixed .nav { - float: none; - max-width: 970px; - padding: 0 1px; - margin: 0 auto; +.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, +.navbar-inverse .nav li.dropdown.active > .dropdown-toggle, +.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle { + color: #ffffff; + background-color: #111111; } -.navbar-subnav .nav > li:first-child > a, -.navbar-subnav .nav > li:first-child > a:hover { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; +.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: #999999; + border-bottom-color: #999999; +} + +.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret, +.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; +} + +.navbar-inverse .navbar-search .search-query { + color: #ffffff; + background-color: #515151; + border-color: #111111; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; +} + +.navbar-inverse .navbar-search .search-query:-moz-placeholder { + color: #cccccc; +} + +.navbar-inverse .navbar-search .search-query:-ms-input-placeholder { + color: #cccccc; +} + +.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder { + color: #cccccc; +} + +.navbar-inverse .navbar-search .search-query:focus, +.navbar-inverse .navbar-search .search-query.focused { + padding: 5px 15px; + color: #333333; + text-shadow: 0 1px 0 #ffffff; + background-color: #ffffff; + border: 0; + outline: 0; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); } .breadcrumb { diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f7b79e2dd1..6110e93028 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -13,7 +13,6 @@ body { position: relative; padding-top: 40px; - font-size: 14px; } /* Code in headings */ @@ -29,10 +28,10 @@ h3 code { body > .navbar-fixed-top { font-size: 13px; - -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.15); +/* -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.15); -moz-box-shadow: 0 5px 15px rgba(0,0,0,.15); box-shadow: 0 5px 15px rgba(0,0,0,.15); -} +*/} /* Change the docs' brand */ body > .navbar-fixed-top .brand { @@ -598,6 +597,7 @@ h2 + .row { z-index: 1; padding: 0; height: 90px; + overflow: hidden; /* cut the drop shadows off */ } .bs-navbar-top-example .navbar-fixed-top, .bs-navbar-bottom-example .navbar-fixed-bottom { diff --git a/docs/base-css.html b/docs/base-css.html index f827380ac4..80bc8c9b04 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -31,7 +31,7 @@ -
                                +
                                diff --git a/docs/components.html b/docs/components.html index 719a9e8743..8399b4297d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -31,7 +31,7 @@ -
                                +
                                diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 7ac31e2191..7c94999470 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1175,10 +1175,10 @@
                                -

                                {{_i}}Subnav variation{{/i}}

                                -

                                {{_i}}Modify the look of the navbar by adding .navbar-subnav. Perfect for a secondary nav, or just a replacement to the default dark navbar.{{/i}}

                                +

                                {{_i}}Inverted variation{{/i}}

                                +

                                {{_i}}Modify the look of the navbar by adding .navbar-inverse.{{/i}}

                                -
                                +
                                @@ -1186,6 +1186,7 @@ + {{_i}}Title{{/i}}
                                -
                                +
                                • Home
                                • About
                                  • diff --git a/docs/examples/hero.html b/docs/examples/hero.html index c1f89bf9a5..32f6561bde 100644 --- a/docs/examples/hero.html +++ b/docs/examples/hero.html @@ -32,7 +32,7 @@ -
                                  +
                                  @@ -41,7 +41,7 @@ Project name -
                                  +
                                  • Home
                                  • About
                                    • diff --git a/docs/examples/starter-template.html b/docs/examples/starter-template.html index 538ff08bee..7eac55de80 100644 --- a/docs/examples/starter-template.html +++ b/docs/examples/starter-template.html @@ -31,7 +31,7 @@ -
                                    +
                                    @@ -40,7 +40,7 @@ Project name -
                                    +
                                    diff --git a/less/navbar.less b/less/navbar.less index 02535a4674..0e027d2c32 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -48,7 +48,8 @@ display: block; // Vertically center the text given @navbarHeight @elementHeight: 20px; - padding: ((@navbarHeight - @elementHeight) / 2) 20px ((@navbarHeight - @elementHeight) / 2); + @heightDifference: @navbarHeight - @elementHeight; + padding: ((@heightDifference / 2) - 2) 20px ((@heightDifference / 2) + 2); margin-left: -20px; // negative indent to left-align the text down the page font-size: 20px; font-weight: 200; @@ -93,7 +94,7 @@ select, .radio, .checkbox { - .navbarVerticalAlign(28px); // Vertically center in navbar + .navbarVerticalAlign(30px); // Vertically center in navbar } input, select, diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 81d5b18965..a8f62c3ccf 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -34,7 +34,7 @@ -
                                    +
                                    Bootstrap @@ -53,7 +53,9 @@ -
                                    +
                                    + +
                                    @@ -1096,6 +1098,7 @@
                                    +
                                    - + +
                                    From 364dbb7931393cb8fa796d75ec1f32a757d335e1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jul 2012 15:38:36 -0700 Subject: [PATCH 274/422] fixes #3665: ensure inputs in a fluid row maintain grid sizing --- docs/assets/css/bootstrap.css | 4 ++++ less/forms.less | 4 ++++ less/tests/css-tests.html | 19 +++++++++++++++++++ 3 files changed, 27 insertions(+) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index dd9b96bc16..59cf075796 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1165,6 +1165,10 @@ textarea[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"], .input-prepend .uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"], .row-fluid .input-prepend [class*="span"], .row-fluid .input-append [class*="span"] { display: inline-block; diff --git a/less/forms.less b/less/forms.less index 0c913b952b..d127a5e9a2 100644 --- a/less/forms.less +++ b/less/forms.less @@ -279,6 +279,10 @@ textarea[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"], .input-prepend .uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"], .row-fluid .input-prepend [class*="span"], .row-fluid .input-append [class*="span"] { display: inline-block; diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 3ded955bf6..71de6cce74 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -796,6 +796,25 @@
                                    + +
                                    + +

                                    Inline form in fluid row

                                    + +
                                    +
                                    +
                                    + + + + +
                                    +
                                    +
                                    + +
                                    From 0e62011da056d74ca84d462c3d45bc1b7573ef57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jul 2012 15:52:38 -0700 Subject: [PATCH 275/422] fix download page links --- docs/getting-started.html | 2 +- docs/index.html | 2 +- docs/templates/pages/getting-started.mustache | 2 +- docs/templates/pages/index.mustache | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/getting-started.html b/docs/getting-started.html index 3cf303d2eb..c245daba38 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -272,7 +272,7 @@

                                    Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

                                    Visit the Bootstrap docs - Customize Bootstrap + Customize Bootstrap diff --git a/docs/index.html b/docs/index.html index 106dee0e90..91c0cdbc2f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -124,7 +124,7 @@

                                    Packed with features.

                                    -

                                    A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

                                    +

                                    A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

                                    diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 852c3add5e..b724b475bb 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -201,7 +201,7 @@

                                    Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

                                    Visit the Bootstrap docs - Customize Bootstrap + Customize Bootstrap diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index e18bc92546..c2951cd85c 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -53,7 +53,7 @@

                                    {{_i}}Packed with features.{{/i}}

                                    -

                                    {{_i}}A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.{{/i}}

                                    +

                                    {{_i}}A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.{{/i}}

                                    From 59eba9afbc4da210212688f84f679412760b96ed Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jul 2012 15:54:03 -0700 Subject: [PATCH 276/422] remove position from labels/badges in mini btns --- docs/assets/css/bootstrap.css | 5 +++++ less/labels-badges.less | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 59cf075796..5db99719bc 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -5138,6 +5138,11 @@ a.badge:hover { top: -1px; } +.btn-mini .label, +.btn-mini .badge { + top: 0; +} + @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; diff --git a/less/labels-badges.less b/less/labels-badges.less index 527cf6497e..2f15fec05f 100644 --- a/less/labels-badges.less +++ b/less/labels-badges.less @@ -64,3 +64,9 @@ a { top: -1px; } } +.btn-mini { + .label, + .badge { + top: 0; + } +} From 196fb1d86a80ae3dad45eee2d34b738b80171132 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jul 2012 22:26:54 -0700 Subject: [PATCH 277/422] fixes #3615: remove last-child hack for IE7 since IE7 doesn't support :last-child --- docs/assets/css/bootstrap.css | 5 ----- less/mixins.less | 4 ---- 2 files changed, 9 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 5db99719bc..a3451fd933 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2034,11 +2034,6 @@ table .span24 { background-repeat: no-repeat; } -[class^="icon-"]:last-child, -[class*=" icon-"]:last-child { - *margin-left: 0; -} - .icon-white { background-image: url("../img/glyphicons-halflings-white.png"); } diff --git a/less/mixins.less b/less/mixins.less index 54490b73bc..d4dea27be6 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -65,10 +65,6 @@ .ie7-restore-right-whitespace() { *margin-right: .3em; - - &:last-child { - *margin-left: 0; - } } // Sizing shortcuts From 9795e9bbe62b05a95e3485a64ba139539113f2db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jul 2012 23:48:26 -0700 Subject: [PATCH 278/422] place chevrons first in sidenav in docs, fix ie7 bugs for said sidenav --- docs/assets/css/docs.css | 2 ++ docs/base-css.html | 14 +++++----- docs/components.html | 26 ++++++++--------- docs/customize.html | 8 +++--- docs/extend.html | 6 ++-- docs/getting-started.html | 12 ++++---- docs/javascript.html | 28 +++++++++---------- docs/scaffolding.html | 10 +++---- docs/templates/pages/base-css.mustache | 14 +++++----- docs/templates/pages/components.mustache | 26 ++++++++--------- docs/templates/pages/customize.mustache | 8 +++--- docs/templates/pages/extend.mustache | 6 ++-- docs/templates/pages/getting-started.mustache | 12 ++++---- docs/templates/pages/javascript.mustache | 28 +++++++++---------- docs/templates/pages/scaffolding.mustache | 10 +++---- 15 files changed, 106 insertions(+), 104 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 784aa153b8..5470cfe31f 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -912,6 +912,8 @@ form.bs-docs-example { box-shadow: 0 1px 4px rgba(0,0,0,.065); } .bs-docs-sidenav > li > a { + display: block; + *width: 190px; margin: 0 0 -1px; font-size: 14px; padding: 9px 14px; diff --git a/docs/base-css.html b/docs/base-css.html index 80bc8c9b04..50c3628642 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -87,13 +87,13 @@
                                    diff --git a/docs/components.html b/docs/components.html index d6d4cc1bcd..2b2bc52e83 100644 --- a/docs/components.html +++ b/docs/components.html @@ -87,19 +87,19 @@
                                    diff --git a/docs/customize.html b/docs/customize.html index 1abe9005b3..1fc225e525 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -87,10 +87,10 @@
                                    diff --git a/docs/extend.html b/docs/extend.html index 1c1a7d9a11..efd933cb55 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -87,9 +87,9 @@
                                    diff --git a/docs/getting-started.html b/docs/getting-started.html index c245daba38..70fb744326 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -87,12 +87,12 @@
                                    diff --git a/docs/javascript.html b/docs/javascript.html index 846089da8b..7b015f6fe9 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -87,20 +87,20 @@
                                    diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 3c49eb2e32..eb5f19ae71 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -87,11 +87,11 @@
                                    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 39d8f4fc4e..89732c4fbb 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -16,13 +16,13 @@
                                    diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index f0f19ee723..314fd23f74 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -16,19 +16,19 @@
                                    diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache index 791ca6efcd..d84d02f0cf 100644 --- a/docs/templates/pages/customize.mustache +++ b/docs/templates/pages/customize.mustache @@ -16,10 +16,10 @@
                                    diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index 22fb0d288b..842f9f7a37 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -16,9 +16,9 @@
                                    diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index b724b475bb..3b026dea36 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -16,12 +16,12 @@
                                    diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index f4c6e8b689..0a17006f6e 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -16,20 +16,20 @@
                                    diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 2ceaf0e4b2..385c9db70a 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -16,11 +16,11 @@
                                    From e191964ff800f5576576d6212be1e43112567ebe Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 31 Jul 2012 00:01:04 -0700 Subject: [PATCH 279/422] reorder docs css --- docs/assets/css/docs.css | 252 +++++++++++++++++++-------------------- 1 file changed, 125 insertions(+), 127 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 5470cfe31f..b91910d935 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -730,15 +730,88 @@ form.bs-docs-example { +/* Sidenav for Docs +-------------------------------------------------- */ + +/* prevent column from collapsing when affixing */ +.span3 { + min-height: 1px; +} + +.bs-docs-sidenav { + width: 218px; + margin-top: 30px; + padding: 0; + margin-right: 10px; + background-color: #fff; + margin-left: 0; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); + -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); + box-shadow: 0 1px 4px rgba(0,0,0,.065); +} +.bs-docs-sidenav > li > a { + display: block; + *width: 190px; + margin: 0 0 -1px; + font-size: 14px; + padding: 9px 14px; + border: 1px solid #e5e5e5; +} +.bs-docs-sidenav > li:first-child > a { + -webkit-border-radius: 6px 6px 0 0; + -moz-border-radius: 6px 6px 0 0; + border-radius: 6px 6px 0 0; +} +.bs-docs-sidenav > li:last-child > a { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} +.bs-docs-sidenav > .active > a { + border-color: #08c; + position: relative; + z-index: 2; +} +/* Chevrons */ +.bs-docs-sidenav .icon-chevron-right { + float: right; + margin-top: 2px; + margin-right: -6px; + opacity: .25; +} +.bs-docs-sidenav > li > a:hover { + background-color: #f5f5f5; +} +.bs-docs-sidenav a:hover .icon-chevron-right { + opacity: .5; +} +.bs-docs-sidenav .active .icon-chevron-right { + background-image: url(../img/glyphicons-halflings-white.png); + opacity: .75; +} +.bs-docs-sidenav.affix { + top: 30px; +} + + + + + /* Responsive -------------------------------------------------- */ /* Desktop large ------------------------- */ -@media (min-width: 1210px) { +@media (min-width: 1200px) { .bs-docs-container { max-width: 970px; } + .bs-docs-sidenav { + width: 258px; + } } /* Desktop @@ -757,6 +830,44 @@ form.bs-docs-example { display: inline-block; margin: 5px; } + + /* When affixed, space properly */ + .bs-docs-sidenav { + top: 0; + margin-top: 30px; + margin-right: 0; + } +} + +@media (min-width: 979px) { + .masthead, + .subhead { + position: fixed; + top: 40px; + right: 0; + left: 0; + } + .masthead { + height: 380px; + } + .subhead { + height: 130px; /* +80px pdding */ + } + .bs-docs-canvas { + position: absolute; + width: 100%; + z-index: 10; + background-color: #fff; + -webkit-box-shadow: 0 -5px 15px rgba(0,0,0,.15); + -moz-box-shadow: 0 -5px 15px rgba(0,0,0,.15); + box-shadow: 0 -5px 15px rgba(0,0,0,.15); + } + .masthead + .bs-docs-canvas { + top: 570px; + } + .subhead + .bs-docs-canvas { + top: 250px; + } } /* Tablet to desktop @@ -770,6 +881,10 @@ form.bs-docs-example { .jumbotron { margin-top: -20px; /* Offset bottom margin on .navbar */ } + /* Adjust sidenav width */ + .bs-docs-sidenav { + width: 166px; + } } /* Tablet @@ -806,6 +921,15 @@ form.bs-docs-example { margin-bottom: 5px; } + /* Sidenav */ + .bs-docs-sidenav { + width: auto; + } + .bs-docs-sidenav.affix { + position: relative; + width: auto; + } + /* Unfloat the back to top link in footer */ .footer { margin-left: -20px; @@ -889,129 +1013,3 @@ form.bs-docs-example { float: none; } } - - - -/* Docs side .nav-list -------------------------- */ -.span3 { - min-height: 1px; -} -.bs-docs-sidenav { - width: 218px; - margin-top: 30px; - padding: 0; - margin-right: 10px; - background-color: #fff; - margin-left: 0; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); - -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); - box-shadow: 0 1px 4px rgba(0,0,0,.065); -} -.bs-docs-sidenav > li > a { - display: block; - *width: 190px; - margin: 0 0 -1px; - font-size: 14px; - padding: 9px 14px; - border: 1px solid #e5e5e5; -} -.bs-docs-sidenav > li:first-child > a { - -webkit-border-radius: 6px 6px 0 0; - -moz-border-radius: 6px 6px 0 0; - border-radius: 6px 6px 0 0; -} -.bs-docs-sidenav > li:last-child > a { - -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; -} -.bs-docs-sidenav > .active > a { - border-color: #08c; - position: relative; - z-index: 2; -} -/* Chevrons */ -.bs-docs-sidenav .icon-chevron-right { - float: right; - margin-top: 2px; - margin-right: -6px; - opacity: .25; -} -.bs-docs-sidenav > li > a:hover { - background-color: #f5f5f5; -} -.bs-docs-sidenav a:hover .icon-chevron-right { - opacity: .5; -} -.bs-docs-sidenav .active .icon-chevron-right { - background-image: url(../img/glyphicons-halflings-white.png); - opacity: .75; -} -.bs-docs-sidenav.affix { - top: 40px; -} - -@media (min-width: 1200px) { - .bs-docs-sidenav { - width: 258px; - } -} - -@media (max-width: 979px) { - .bs-docs-sidenav { - top: 0px; - margin-top: 30px; - margin-right: 0; - } -} - -@media (min-width: 768px) and (max-width: 979px) { - .bs-docs-sidenav { - width: 166px; - } -} - -@media (max-width: 767px) { - .bs-docs-sidenav { - width: auto; - } - .bs-docs-sidenav.affix { - position: relative; - width: auto; - } -} - -@media (min-width: 979px) { - .masthead, - .subhead { - position: fixed; - top: 40px; - right: 0; - left: 0; - } - .masthead { - height: 380px; - } - .subhead { - height: 130px; /* +80px pdding */ - } - .bs-docs-canvas { - position: absolute; - width: 100%; - z-index: 10; - background-color: #fff; - -webkit-box-shadow: 0 -5px 15px rgba(0,0,0,.15); - -moz-box-shadow: 0 -5px 15px rgba(0,0,0,.15); - box-shadow: 0 -5px 15px rgba(0,0,0,.15); - } - .masthead + .bs-docs-canvas { - top: 570px; - } - .subhead + .bs-docs-canvas { - top: 250px; - } -} From 31b30ab88e6ac823653a6211365d6c9d46c5fa5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 31 Jul 2012 00:06:37 -0700 Subject: [PATCH 280/422] copy edits to docs --- docs/base-css.html | 2 +- docs/scaffolding.html | 2 +- docs/templates/pages/base-css.mustache | 2 +- docs/templates/pages/scaffolding.mustache | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 50c3628642..4b67ef17e8 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -74,7 +74,7 @@

                                    Base CSS

                                    -

                                    On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.

                                    +

                                    Fundamental HTML elements styled and enhanced with extensible classes.

                                    diff --git a/docs/scaffolding.html b/docs/scaffolding.html index eb5f19ae71..76ef0cc2ef 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -74,7 +74,7 @@

                                    Scaffolding

                                    -

                                    Bootstrap is built on a responsive 12-column grid and includes fixed- and fluid-width layouts.

                                    +

                                    Bootstrap is built on responsive 12-column grids, layouts, and components.

                                    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 89732c4fbb..0c18e80e73 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -3,7 +3,7 @@

                                    {{_i}}Base CSS{{/i}}

                                    -

                                    {{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.{{/i}}

                                    +

                                    {{_i}}Fundamental HTML elements styled and enhanced with extensible classes.{{/i}}

                                    diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 385c9db70a..63501e7fc8 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -3,7 +3,7 @@

                                    {{_i}}Scaffolding{{/i}}

                                    -

                                    {{_i}}Bootstrap is built on a responsive 12-column grid and includes fixed- and fluid-width layouts.{{/i}}

                                    +

                                    {{_i}}Bootstrap is built on responsive 12-column grids, layouts, and components.{{/i}}

                                    From 1f70dd71c870804486d1dd57b7b6d319360edde2 Mon Sep 17 00:00:00 2001 From: Kyle Robinson Young Date: Tue, 31 Jul 2012 15:16:40 -0700 Subject: [PATCH 281/422] Use ref instead of label when checking branches in issue-guidelines --- .issue-guidelines.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.issue-guidelines.js b/.issue-guidelines.js index 4c18ab3c03..9b20dc2638 100644 --- a/.issue-guidelines.js +++ b/.issue-guidelines.js @@ -24,11 +24,11 @@ module.exports = { 'pull-requests': { 'should always be made against -wip branches': function (pull) { - assert.ok(/\-wip$/.test(pull.base.label)) + assert.ok(/\-wip$/.test(pull.base.ref)) }, 'should always be made from feature branches': function (pull) { - assert.ok(pull.head.label != 'master') + assert.notEqual(pull.head.ref, 'master') }, 'should always include a unit test if changing js files': function (pull) { @@ -36,7 +36,7 @@ module.exports = { var hasTests = false pull.files.forEach(function (file) { - if (/^js\/[^./]+.js/.test(file.filename)) hasJS = true + if (/^js\/[^./]+.js/.test(file.filename)) hasJS = true if (/^js\/tests\/unit\/[^.]+.js/.test(file.filename)) hasTests = true }) From 060e216712b023f637ad94b512c4cc90794cf065 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 09:18:00 -0700 Subject: [PATCH 282/422] fixes #4253: hover on responsive navbar --- docs/assets/css/bootstrap-responsive.css | 4 ++++ less/responsive-navbar.less | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index d62a5f68dd..a28c97e050 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -961,6 +961,10 @@ .nav-collapse .dropdown-menu a:hover { background-color: #f2f2f2; } + .navbar-inverse .nav-collapse .nav > li > a:hover, + .navbar-inverse .nav-collapse .dropdown-menu a:hover { + background-color: #111111; + } .nav-collapse.in .btn-group { padding: 0; margin-top: 5px; diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index d684fcafa1..e54213ef3f 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -85,6 +85,10 @@ .nav-collapse .dropdown-menu a:hover { background-color: @navbarBackground; } + .navbar-inverse .nav-collapse .nav > li > a:hover, + .navbar-inverse .nav-collapse .dropdown-menu a:hover { + background-color: @navbarInverseBackground; + } // Buttons in the navbar .nav-collapse.in .btn-group { margin-top: 5px; From fab1a80dcb944f32fd9655d6bde3511d5df52aa2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 11:35:31 -0700 Subject: [PATCH 283/422] increase margin on checkboxes and radios to center properly --- docs/assets/css/bootstrap.css | 2 +- less/forms.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index a3451fd933..22b8e33289 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1012,7 +1012,7 @@ input[type="color"]:focus, input[type="radio"], input[type="checkbox"] { - margin: 3px 0; + margin: 4px 0; *margin-top: 0; /* IE7 */ diff --git a/less/forms.less b/less/forms.less index d127a5e9a2..b2095e6f43 100644 --- a/less/forms.less +++ b/less/forms.less @@ -132,7 +132,7 @@ input[type="color"], // Position radios and checkboxes better input[type="radio"], input[type="checkbox"] { - margin: 3px 0; + margin: 4px 0; *margin-top: 0; /* IE7 */ line-height: normal; cursor: pointer; From 5637c6fb7031ed045902a4f74bbb164978b7dd38 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 11:52:48 -0700 Subject: [PATCH 284/422] pulsing download button on homepage --- docs/assets/css/docs.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b91910d935..0abef7a9e3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -132,6 +132,11 @@ hr.soften { } /* Download button */ +@-webkit-keyframes downloadButton { + from { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.1); } + 50% { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 20px rgba(0,68,204,.75); } + to { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.1); } +} .masthead .btn { padding: 14px 24px; font-size: 24px; @@ -141,9 +146,12 @@ hr.soften { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); - box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.01); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.01); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.01); + -webkit-animation-name: downloadButton; + -webkit-animation-duration: 2s; + -webkit-animation-iteration-count: infinite; } .masthead .btn:active { -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); From 735001cb266def8185367ae9d48207e46f6e023f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 11:53:00 -0700 Subject: [PATCH 285/422] increase horizontal padding on inputs given new font-size --- docs/assets/css/bootstrap-responsive.css | 48 ++++++++++++------------ docs/assets/css/bootstrap.css | 26 ++++++------- less/forms.less | 2 +- less/mixins.less | 2 +- 4 files changed, 39 insertions(+), 39 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index a28c97e050..6e485bc10b 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -368,62 +368,62 @@ input.span12, textarea.span12, .uneditable-input.span12 { - width: 1160px; + width: 1156px; } input.span11, textarea.span11, .uneditable-input.span11 { - width: 1060px; + width: 1056px; } input.span10, textarea.span10, .uneditable-input.span10 { - width: 960px; + width: 956px; } input.span9, textarea.span9, .uneditable-input.span9 { - width: 860px; + width: 856px; } input.span8, textarea.span8, .uneditable-input.span8 { - width: 760px; + width: 756px; } input.span7, textarea.span7, .uneditable-input.span7 { - width: 660px; + width: 656px; } input.span6, textarea.span6, .uneditable-input.span6 { - width: 560px; + width: 556px; } input.span5, textarea.span5, .uneditable-input.span5 { - width: 460px; + width: 456px; } input.span4, textarea.span4, .uneditable-input.span4 { - width: 360px; + width: 356px; } input.span3, textarea.span3, .uneditable-input.span3 { - width: 260px; + width: 256px; } input.span2, textarea.span2, .uneditable-input.span2 { - width: 160px; + width: 156px; } input.span1, textarea.span1, .uneditable-input.span1 { - width: 60px; + width: 56px; } .thumbnails { margin-left: -30px; @@ -713,62 +713,62 @@ input.span12, textarea.span12, .uneditable-input.span12 { - width: 714px; + width: 710px; } input.span11, textarea.span11, .uneditable-input.span11 { - width: 652px; + width: 648px; } input.span10, textarea.span10, .uneditable-input.span10 { - width: 590px; + width: 586px; } input.span9, textarea.span9, .uneditable-input.span9 { - width: 528px; + width: 524px; } input.span8, textarea.span8, .uneditable-input.span8 { - width: 466px; + width: 462px; } input.span7, textarea.span7, .uneditable-input.span7 { - width: 404px; + width: 400px; } input.span6, textarea.span6, .uneditable-input.span6 { - width: 342px; + width: 338px; } input.span5, textarea.span5, .uneditable-input.span5 { - width: 280px; + width: 276px; } input.span4, textarea.span4, .uneditable-input.span4 { - width: 218px; + width: 214px; } input.span3, textarea.span3, .uneditable-input.span3 { - width: 156px; + width: 152px; } input.span2, textarea.span2, .uneditable-input.span2 { - width: 94px; + width: 90px; } input.span1, textarea.span1, .uneditable-input.span1 { - width: 32px; + width: 28px; } } diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 22b8e33289..9054f68d47 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -938,7 +938,7 @@ input[type="color"], .uneditable-input { display: inline-block; height: 20px; - padding: 4px; + padding: 4px 6px; margin-bottom: 9px; font-size: 14px; line-height: 20px; @@ -1187,73 +1187,73 @@ textarea, input.span12, textarea.span12, .uneditable-input.span12 { - width: 930px; + width: 926px; } input.span11, textarea.span11, .uneditable-input.span11 { - width: 850px; + width: 846px; } input.span10, textarea.span10, .uneditable-input.span10 { - width: 770px; + width: 766px; } input.span9, textarea.span9, .uneditable-input.span9 { - width: 690px; + width: 686px; } input.span8, textarea.span8, .uneditable-input.span8 { - width: 610px; + width: 606px; } input.span7, textarea.span7, .uneditable-input.span7 { - width: 530px; + width: 526px; } input.span6, textarea.span6, .uneditable-input.span6 { - width: 450px; + width: 446px; } input.span5, textarea.span5, .uneditable-input.span5 { - width: 370px; + width: 366px; } input.span4, textarea.span4, .uneditable-input.span4 { - width: 290px; + width: 286px; } input.span3, textarea.span3, .uneditable-input.span3 { - width: 210px; + width: 206px; } input.span2, textarea.span2, .uneditable-input.span2 { - width: 130px; + width: 126px; } input.span1, textarea.span1, .uneditable-input.span1 { - width: 50px; + width: 46px; } .controls-row { diff --git a/less/forms.less b/less/forms.less index b2095e6f43..8dfef255a7 100644 --- a/less/forms.less +++ b/less/forms.less @@ -80,7 +80,7 @@ input[type="color"], .uneditable-input { display: inline-block; height: @baseLineHeight; - padding: 4px; + padding: 4px 6px; margin-bottom: 9px; font-size: @baseFontSize; line-height: @baseLineHeight; diff --git a/less/mixins.less b/less/mixins.less index d4dea27be6..96ce23ecab 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -643,7 +643,7 @@ .spanX (0) {} .span(@columns) { - width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10; + width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14; } input, From e8fd7e6c96d44f21422b65620ceacb084282745a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 16:15:21 -0700 Subject: [PATCH 286/422] fix jank button on docs homepage --- docs/assets/css/docs.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 0abef7a9e3..8c81ec72ef 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -134,8 +134,8 @@ hr.soften { /* Download button */ @-webkit-keyframes downloadButton { from { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.1); } - 50% { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 20px rgba(0,68,204,.75); } - to { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.1); } + 50% { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 20px rgba(0,68,204,.75); } + to { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.1); } } .masthead .btn { padding: 14px 24px; @@ -152,6 +152,10 @@ hr.soften { -webkit-animation-name: downloadButton; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; + -webkit-transition: none; + -moz-transition: none; + transition: none; + } .masthead .btn:active { -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); From 7aaf1413718140d0f27876f3c210a08f52d41cd6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 16:57:27 -0700 Subject: [PATCH 287/422] add compability note to image styles --- docs/base-css.html | 2 +- docs/templates/pages/base-css.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 4b67ef17e8..2f0c10f500 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1531,7 +1531,7 @@ For example, <code>section</code> should be wrapped as inline.

                                    Images

                                    -

                                    Simple classes to easily style images in any project.

                                    +

                                    Simple classes to easily style images in any project. Heads up: .img-rounded and .img-circle don't work in IE7-8.

                                    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 0c18e80e73..8420f7d2ff 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1468,7 +1468,7 @@

                                    {{_i}}Images{{/i}}

                                    -

                                    Simple classes to easily style images in any project.

                                    +

                                    {{_i}}Simple classes to easily style images in any project. Heads up: .img-rounded and .img-circle don't work in IE7-8.{{/i}}

                                    From b979cd9e67968526a5918f2bdedc66bf274c96d1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 17:01:29 -0700 Subject: [PATCH 288/422] darken default button borders --- docs/assets/css/bootstrap.css | 4 ++-- less/buttons.less | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 9054f68d47..bcbe4d9dac 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3039,8 +3039,8 @@ button.close { } .btn { - border-color: #ccc; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border-color: #c5c5c5; + border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25); } .btn-primary { diff --git a/less/buttons.less b/less/buttons.less index eb0290d8e7..f3cb1bdef8 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -129,8 +129,8 @@ // ------------------------- .btn { // reset here as of 2.0.3 due to Recess property order - border-color: #ccc; - border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25); + border-color: #c5c5c5; + border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25); } .btn-primary { .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); From fbc053692de67f5b18ce6d95b0bea86aaa3b2fce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 18:06:02 -0700 Subject: [PATCH 289/422] add components section to docs for isolated examples --- docs/components/alert.html | 63 +++++++++++++++++++ docs/components/breadcrumb.html | 66 ++++++++++++++++++++ docs/components/button-group.html | 71 +++++++++++++++++++++ docs/components/button.html | 61 ++++++++++++++++++ docs/components/dropdown.html | 66 ++++++++++++++++++++ docs/components/form.html | 100 ++++++++++++++++++++++++++++++ docs/components/icon.html | 60 ++++++++++++++++++ docs/components/modal.html | 72 +++++++++++++++++++++ docs/components/nav.html | 77 +++++++++++++++++++++++ docs/components/pagination.html | 70 +++++++++++++++++++++ docs/components/progress-bar.html | 62 ++++++++++++++++++ docs/components/table.html | 89 ++++++++++++++++++++++++++ 12 files changed, 857 insertions(+) create mode 100644 docs/components/alert.html create mode 100644 docs/components/breadcrumb.html create mode 100644 docs/components/button-group.html create mode 100644 docs/components/button.html create mode 100644 docs/components/dropdown.html create mode 100644 docs/components/form.html create mode 100644 docs/components/icon.html create mode 100644 docs/components/modal.html create mode 100644 docs/components/nav.html create mode 100644 docs/components/pagination.html create mode 100644 docs/components/progress-bar.html create mode 100644 docs/components/table.html diff --git a/docs/components/alert.html b/docs/components/alert.html new file mode 100644 index 0000000000..3e7d935e55 --- /dev/null +++ b/docs/components/alert.html @@ -0,0 +1,63 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap alert

                                    + +
                                    + +
                                    + + Warning! Best check yo self, you're not looking too good. +
                                    + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/breadcrumb.html b/docs/components/breadcrumb.html new file mode 100644 index 0000000000..5f273442be --- /dev/null +++ b/docs/components/breadcrumb.html @@ -0,0 +1,66 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap breadcrumb

                                    + +
                                    + + + + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/button-group.html b/docs/components/button-group.html new file mode 100644 index 0000000000..80ee9e3910 --- /dev/null +++ b/docs/components/button-group.html @@ -0,0 +1,71 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap button group

                                    + +
                                    + + + +
                                    + +
                                    + +
                                    + Link button text + Link button text + Link button text +
                                    + + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/button.html b/docs/components/button.html new file mode 100644 index 0000000000..2d1569307f --- /dev/null +++ b/docs/components/button.html @@ -0,0 +1,61 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap button

                                    + +

                                    + +

                                    Link button text

                                    + + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/dropdown.html b/docs/components/dropdown.html new file mode 100644 index 0000000000..5ddbe6625d --- /dev/null +++ b/docs/components/dropdown.html @@ -0,0 +1,66 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap dropdown

                                    + + + + + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/form.html b/docs/components/form.html new file mode 100644 index 0000000000..0f70ccb408 --- /dev/null +++ b/docs/components/form.html @@ -0,0 +1,100 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap form

                                    + +
                                    +
                                    + +
                                    + +
                                    +
                                    +
                                    + +
                                    + +
                                    +
                                    +
                                    + +
                                    + +
                                    +
                                    +
                                    + +
                                    + + +
                                    +
                                    +
                                    +
                                    + +
                                    +
                                    +
                                    + + + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/icon.html b/docs/components/icon.html new file mode 100644 index 0000000000..473492269a --- /dev/null +++ b/docs/components/icon.html @@ -0,0 +1,60 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap form

                                    + +

                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

                                    + + + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/modal.html b/docs/components/modal.html new file mode 100644 index 0000000000..04aaa771b4 --- /dev/null +++ b/docs/components/modal.html @@ -0,0 +1,72 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap modal

                                    + +
                                    + +
                                    +
                                    + +

                                    Modal header

                                    +
                                    +
                                    +

                                    One fine body...

                                    +
                                    +
                                    + Close + Save changes +
                                    +
                                    + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/nav.html b/docs/components/nav.html new file mode 100644 index 0000000000..a58aa449e1 --- /dev/null +++ b/docs/components/nav.html @@ -0,0 +1,77 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap nav

                                    + +
                                    + + + +
                                    + + + + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/pagination.html b/docs/components/pagination.html new file mode 100644 index 0000000000..ef56df2eaa --- /dev/null +++ b/docs/components/pagination.html @@ -0,0 +1,70 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap breadcrumb

                                    + +
                                    + + + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/progress-bar.html b/docs/components/progress-bar.html new file mode 100644 index 0000000000..69204e6be6 --- /dev/null +++ b/docs/components/progress-bar.html @@ -0,0 +1,62 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap progress bar

                                    + +
                                    + +
                                    +
                                    +
                                    + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/table.html b/docs/components/table.html new file mode 100644 index 0000000000..a3c898270c --- /dev/null +++ b/docs/components/table.html @@ -0,0 +1,89 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap form

                                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                                    #First NameLast NameUsername
                                    1MarkOtto@mdo
                                    2JacobThornton@fat
                                    3Larrythe Bird@twitter
                                    + + + + +
                                    + + + + + + + + + + + + + + + + + + + From fe93b926b4712ea0d59f572f61b3eebd881ecb57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 18:08:31 -0700 Subject: [PATCH 290/422] add popover and tooltip components --- docs/components/popover.html | 62 ++++++++++++++++++++++++++++++++++++ docs/components/tooltip.html | 62 ++++++++++++++++++++++++++++++++++++ 2 files changed, 124 insertions(+) create mode 100644 docs/components/popover.html create mode 100644 docs/components/tooltip.html diff --git a/docs/components/popover.html b/docs/components/popover.html new file mode 100644 index 0000000000..4b73f395dc --- /dev/null +++ b/docs/components/popover.html @@ -0,0 +1,62 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap popover

                                    + +
                                    + + Hover for popover + + + + +
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/tooltip.html b/docs/components/tooltip.html new file mode 100644 index 0000000000..afbaa9fad9 --- /dev/null +++ b/docs/components/tooltip.html @@ -0,0 +1,62 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
                                    + + + +

                                    Bootstrap tooltip

                                    + +
                                    + +

                                    Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

                                    + + + + +
                                    + + + + + + + + + + + + + + + + + + + From c2e899f2a014e18f9cf981ea89a20e18a5c9fefb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 19:00:25 -0700 Subject: [PATCH 291/422] remove the canvas slider doodad --- docs/assets/css/docs.css | 31 -- docs/base-css.html | 74 ++--- docs/components.html | 74 ++--- docs/customize.html | 74 ++--- docs/extend.html | 75 ++--- docs/getting-started.html | 74 ++--- docs/index.html | 209 ++++++------ docs/javascript.html | 75 ++--- docs/scaffolding.html | 75 ++--- docs/templates/layout.mustache | 72 ++-- docs/templates/pages/base-css.mustache | 3 - docs/templates/pages/components.mustache | 3 - docs/templates/pages/customize.mustache | 3 - docs/templates/pages/extend.mustache | 4 - docs/templates/pages/getting-started.mustache | 3 - docs/templates/pages/index.mustache | 140 ++++---- docs/templates/pages/javascript.mustache | 4 - docs/templates/pages/scaffolding.mustache | 4 - docs/templates/pages/upgrading.mustache | 194 ----------- docs/upgrading.html | 313 ------------------ 20 files changed, 450 insertions(+), 1054 deletions(-) delete mode 100644 docs/templates/pages/upgrading.mustache delete mode 100644 docs/upgrading.html diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 8c81ec72ef..52f8ff1bc8 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -851,37 +851,6 @@ form.bs-docs-example { } } -@media (min-width: 979px) { - .masthead, - .subhead { - position: fixed; - top: 40px; - right: 0; - left: 0; - } - .masthead { - height: 380px; - } - .subhead { - height: 130px; /* +80px pdding */ - } - .bs-docs-canvas { - position: absolute; - width: 100%; - z-index: 10; - background-color: #fff; - -webkit-box-shadow: 0 -5px 15px rgba(0,0,0,.15); - -moz-box-shadow: 0 -5px 15px rgba(0,0,0,.15); - box-shadow: 0 -5px 15px rgba(0,0,0,.15); - } - .masthead + .bs-docs-canvas { - top: 570px; - } - .subhead + .bs-docs-canvas { - top: 250px; - } -} - /* Tablet to desktop ------------------------- */ @media (min-width: 768px) and (max-width: 980px) { diff --git a/docs/base-css.html b/docs/base-css.html index 2f0c10f500..cd550adc38 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -78,7 +78,6 @@
                                    -
                                    @@ -1790,47 +1789,44 @@ For example, <code>section</code> should be wrapped as inline. - - - + + - - - - - - - - - - - - - - - - - - - - -
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/components.html b/docs/components.html index 2b2bc52e83..a578238cc5 100644 --- a/docs/components.html +++ b/docs/components.html @@ -78,7 +78,6 @@
                                    -
                                    @@ -2243,47 +2242,44 @@ class="clearfix" - - - + + - - - - - - - - - - - - - - - - - - - - -
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/customize.html b/docs/customize.html index 1fc225e525..37da451e87 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -78,7 +78,6 @@
                                    -
                                    @@ -431,47 +430,44 @@ - - - + + - - - - - - - - - - - - - - - - - - - - -
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/extend.html b/docs/extend.html index efd933cb55..aa306a598c 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -78,8 +78,6 @@
                                    -
                                    -
                                    - + + - - - - - - - - - - - - - - - - - - - - -
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/getting-started.html b/docs/getting-started.html index 70fb744326..4f7f43ed12 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -78,7 +78,6 @@
                                    -
                                    @@ -285,47 +284,44 @@ - - - + + - - - - - - - - - - - - - - - - - - - - -
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/index.html b/docs/index.html index 91c0cdbc2f..1b21e1d00e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -82,128 +82,123 @@
                                    -
                                    +
                                    +
                                    + +
                                    +
                                    -
                                    -
                                    -
                                    + - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/javascript.html b/docs/javascript.html index 7b015f6fe9..d0332ece9b 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -78,8 +78,6 @@
                                    -
                                    -
                                    - + + - - - - - - - - - - - - - - - - - - - - -
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 76ef0cc2ef..2bc153ea9b 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -78,8 +78,6 @@
                                    -
                                    -
                                    - + + - - - - - - - - - - - - - - - - - - - - -
                                    + + + + + + + + + + + + + + + + + + + diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 6266446e1f..eb4cc9ef42 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -85,46 +85,44 @@ - - + + - - - - - - - - - - - - - - - - - - - - -
                                    {{! /.bs-docs-canvas }} + + + + + + + + + + + + + + + + + + + {{#production}} diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 8420f7d2ff..b0fe47c551 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -7,7 +7,6 @@
                                    -
                                    @@ -1724,5 +1723,3 @@
                                    {{! row}}
                                    {{! /.container }} - -{{! /.bs-docs-canvas closes in footer }} diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 314fd23f74..7ebae93e82 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -7,7 +7,6 @@
                                    -
                                    @@ -2169,5 +2168,3 @@ class="clearfix"
                                    {{! row}}
                                    {{! /.container }} - -{{! /.bs-docs-canvas closes in footer }} diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache index d84d02f0cf..83f0169002 100644 --- a/docs/templates/pages/customize.mustache +++ b/docs/templates/pages/customize.mustache @@ -7,7 +7,6 @@
                                    -
                                    @@ -357,5 +356,3 @@
                                    {{! row}}
                                    {{! /.container }} - -{{! /.bs-docs-canvas closes in footer }} diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index 842f9f7a37..f925e7b298 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -7,8 +7,6 @@
                                    -
                                    -
                                    -
                                    -

                                    {{_i}}Upgrading to Bootstrap 2{{/i}}

                                    -

                                    {{_i}}Learn about significant changes and additions since v1.4 with this handy guide.{{/i}}

                                    -
                                    - - - - -
                                    -
                                    -

                                    {{_i}}Project changes{{/i}}

                                    -
                                    -
                                      -
                                    • {{_i}}Docs: major updates across the board to general structure, examples, and code snippets. Also made responsive with new media queries.{{/i}}
                                      • -
                                    • {{_i}}Docs: all docs pages are now powered by Mustache templates and strings are wrapped in i18n tags for translation by the Twitter Translation Center. All changes to documentation must be done here and then compiled (similar to our CSS and LESS).{{/i}}
                                      • -
                                    • {{_i}}Repo directory structure: removed the compiled CSS from the root in favor of a large direct download link on the docs homepage. Compiled CSS is in /docs/assets/css/.{{/i}}
                                      • -
                                    • {{_i}}Docs and repo: one makefile, just type make in the Terminal and get updated docs and CSS.{{/i}}
                                      • -
                                    -
                                    - - - - -
                                    -
                                    -

                                    {{_i}}Scaffolding{{/i}}

                                    -
                                    -

                                    {{_i}}Grid system{{/i}}

                                    -
                                      -
                                    • {{_i}}Updated grid system, now only 12 columns instead of 16{{/i}} -
                                    • {{_i}}Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more{{/i}}
                                      • -
                                    • {{_i}}Removed unused (by default) grid columns support for 17-24 columns{{/i}}
                                      • -
                                    -

                                    {{_i}}Responsive (media queries){{/i}}

                                    -
                                      -
                                    • {{_i}}Media queries added for basic support across mobile and tablet devices{{/i}} -
                                    • {{_i}}Responsive CSS is compiled separately, as bootstrap-responsive.css{{/i}}
                                      • -
                                    -
                                    - - - - -
                                    -
                                    -

                                    {{_i}}Base CSS{{/i}}

                                    -
                                    -

                                    {{_i}}Typography{{/i}}

                                    -
                                      -
                                    • {{_i}}h4 elements were dropped from 16px to 14px with a default line-height of 18px{{/i}}
                                      • -
                                    • {{_i}}h5 elements were dropped from 14px to 12px{{/i}}
                                      • -
                                    • {{_i}}h6 elements were dropped from 13px to 11px{{/i}}
                                      • -
                                    • {{_i}}Right-aligned option for blockquotes if float: right;{{/i}}
                                      • -
                                    -

                                    {{_i}}Code{{/i}}

                                    -
                                      -
                                    • {{_i}}New graphical style for <code>{{/i}}
                                      • -
                                    • {{_i}}Google Code Prettify styles updated (based on GitHub's gists){{/i}}
                                      • -
                                    -

                                    {{_i}}Tables{{/i}}

                                    -
                                      -
                                    • {{_i}}Improved support for colspan and rowspan{{/i}}
                                      • -
                                    • {{_i}}Styles now restricted to new base class, .table{{/i}}
                                      • -
                                    • {{_i}}Table classes standardized with .table- required as a prefix{{/i}}
                                      • -
                                    • {{_i}}Removed unused table color options (too much code for such little impact){{/i}}
                                      • -
                                    • {{_i}}Dropped support for TableSorter{{/i}}
                                      • -
                                    -

                                    {{_i}}Buttons{{/i}}

                                    -
                                      -
                                    • {{_i}}New classes for colors and sizes, all prefixed with .btn-{{/i}}
                                      • -
                                    • {{_i}}IE9: removed gradients and added rounded corners{{/i}}
                                      • -
                                    • {{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}
                                      • -
                                    • {{_i}}New mixin, .buttonBackground, to set button gradients{{/i}}
                                      • -
                                    • {{_i}}The .secondary class was removed from modal examples in our docs as it never had associated styles.{{/i}}
                                      • -
                                    -

                                    {{_i}}Forms{{/i}}

                                    -
                                      -
                                    • {{_i}}Default form style is now vertical (stacked) to use less CSS and add greater flexibility{{/i}}
                                      • -
                                    • {{_i}}Form classes standardized with .form- required as a prefix{{/i}}
                                      • -
                                    • {{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}
                                      • -
                                    • {{_i}}For horizontal forms, previous classes .clearfix and .input are equivalent to the new .control-group and .controls.{{/i}}
                                      • -
                                    • {{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the label{{/i}}
                                      • -
                                    • {{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}
                                      • -
                                    -

                                    {{_i}}Icons, by Glyphicons{{/i}}

                                    -
                                      -
                                    • {{_i}}New Glyphicons Halflings icon set added in sprite form, in black and white{{/i}}
                                      • -
                                    • {{_i}}Simple markup required for an icon in tons of contexts: <i class="icon-cog"></>{{/i}}
                                      • -
                                    • {{_i}}Add another class, .icon-white, for white variation of the same icon{{/i}}
                                      • -
                                    -
                                    - - - - -
                                    -
                                    -

                                    {{_i}}Components{{/i}}

                                    -
                                    -

                                    {{_i}}Button groups and dropdowns{{/i}}

                                    -
                                      -
                                    • {{_i}}Two brand new components in 2.0: button groups and button dropdowns{{/i}}
                                      • -
                                    • {{_i}}Dependency: button dropdowns are built on button groups, and therefore require all their styles{{/i}}
                                      • -
                                    • {{_i}}Button groups, .btn-group, can be grouped one level higher with a button toolbar, .btn-toolbar{{/i}}
                                      • -
                                    -

                                    {{_i}}Navigation{{/i}}

                                    -
                                      -
                                    • {{_i}}Tabs and pills now require the use of a new base class, .nav, on their <ul> and the class names are now .nav-pills and .nav-tabs.{{/i}}
                                      • -
                                    • {{_i}}New nav list variation added that uses the same base class, .nav{{/i}}
                                      • -
                                    • {{_i}}Vertical tabs and pills have been added—just add .nav-stacked to the <ul>{{/i}}
                                      • -
                                    • {{_i}}Pills were restyled to be less rounded by default{{/i}}
                                      • -
                                    • {{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}
                                      • -
                                    -

                                    {{_i}}Navbar (formerly topbar){{/i}}

                                    -
                                      -
                                    • {{_i}}Base class changed from .topbar to .navbar{{/i}}
                                      • -
                                    • {{_i}}Now supports static position (default behavior, not fixed) and fixed to the top of viewport via .navbar-fixed-top (previously only supported fixed){{/i}}
                                      • -
                                    • {{_i}}Added vertical dividers to top-level nav{{/i}}
                                      • -
                                    • {{_i}}Improved support for inline forms in the navbar, which now require .navbar-form to properly scope styles to only the intended forms.{{/i}}
                                      • -
                                    • {{_i}}Navbar search form now requires use of the .navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right.{{/i}}
                                      • -
                                    • {{_i}}Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. See navbar docs for how to utilize.{{/i}}
                                      • -
                                    -

                                    {{_i}}Dropdown menus{{/i}}

                                    -
                                      -
                                    • {{_i}}Updated the .dropdown-menu to tighten up spacing{{/i}}
                                      • -
                                    • {{_i}}Now requires you to add a <span class="caret"></span> to show the dropdown arrow{{/i}}
                                      • -
                                    • {{_i}}Now requires you to add a data-toggle="dropdown" attribute to obtain toggling behavior{{/i}}
                                      • -
                                    • {{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}
                                      • -
                                    -

                                    {{_i}}Labels{{/i}}

                                    -
                                      -
                                    • {{_i}}Label colors updated to match form state colors{{/i}}
                                      • -
                                    • {{_i}}Not only do they match graphically, but they are powered by the same new variables{{/i}}
                                      • -
                                    -

                                    {{_i}}Thumbnails{{/i}}

                                    -
                                      -
                                    • {{_i}}Formerly .media-grid, now just .thumbnails, we've thoroughly extended this component for more uses while maintaining overall simplicity out of the box.{{/i}}
                                      • -
                                    • {{_i}}Individual thumbnails now require .thumbnail class{{/i}}
                                      • -
                                    -

                                    {{_i}}Alerts{{/i}}

                                    -
                                      -
                                    • {{_i}}New base class: .alert instead of .alert-message{{/i}}
                                      • -
                                    • {{_i}}Class names standardized for other options, now all starting with .alert-{{/i}}
                                      • -
                                    • {{_i}}Redesigned base alert styles to combine the default alerts and block-level alerts into one{{/i}}
                                      • -
                                    • {{_i}}Block level alert class changed: .alert-block instead of .block-message{{/i}}
                                      • -
                                    -

                                    {{_i}}Progress bars{{/i}}

                                    -
                                      -
                                    • {{_i}}New in 2.0{{/i}}
                                      • -
                                    • {{_i}}Features multiple styles via classes, including striped and animated variations via CSS3{{/i}}
                                      • -
                                    -

                                    {{_i}}Miscellaneous components{{/i}}

                                    -
                                      -
                                    • {{_i}}Added documentation for the well component and the close icon (used in modals and alerts){{/i}}
                                      • -
                                    -
                                    - - - - -
                                    -
                                    -

                                    {{_i}}Javascript plugins{{/i}}

                                    -
                                    -
                                    - {{_i}}Heads up!{{/i}} {{_i}}We've rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.{{/i}} -
                                    -

                                    {{_i}}Tooltips{{/i}}

                                    -
                                      -
                                    • {{_i}}The plugin method has been renamed from twipsy() to tooltip(), and the class name changed from twipsy to tooltip.{{/i}}
                                      • -
                                    • {{_i}}The placement option value that was below is now bottom, and above is now top.{{/i}}
                                      • -
                                    • {{_i}}The animate option was renamed to animation.{{/i}}
                                      • -
                                    • {{_i}}The html option was removed, as the tooltips default to allowing HTML now.{{/i}}
                                      • -
                                    -

                                    {{_i}}Popovers{{/i}}

                                    -
                                      -
                                    • {{_i}}Child elements now properly namespaced: .title to .popover-title, .inner to .popover-inner, and .content to .popover-content.{{/i}}
                                      • -
                                    • {{_i}}The placement option value that was below is now bottom, and above is now top.{{/i}}
                                      • -
                                    -

                                    {{_i}}New plugins{{/i}}

                                    - -
                                    - diff --git a/docs/upgrading.html b/docs/upgrading.html deleted file mode 100644 index 2e390aaa6a..0000000000 --- a/docs/upgrading.html +++ /dev/null @@ -1,313 +0,0 @@ - - - - - Upgrading · Twitter Bootstrap - - - - - - - - - - - - - - - - - - - - - - - - - -
                                    -
                                    -
                                    - - Bootstrap -
                                    - -
                                    -
                                    -
                                    -
                                    - - -
                                    -

                                    Upgrading to Bootstrap 2

                                    -

                                    Learn about significant changes and additions since v1.4 with this handy guide.

                                    -
                                    - - - - -
                                    -
                                    -

                                    Project changes

                                    -
                                    -
                                      -
                                    • Docs: major updates across the board to general structure, examples, and code snippets. Also made responsive with new media queries.
                                      • -
                                    • Docs: all docs pages are now powered by Mustache templates and strings are wrapped in i18n tags for translation by the Twitter Translation Center. All changes to documentation must be done here and then compiled (similar to our CSS and LESS).
                                      • -
                                    • Repo directory structure: removed the compiled CSS from the root in favor of a large direct download link on the docs homepage. Compiled CSS is in /docs/assets/css/.
                                      • -
                                    • Docs and repo: one makefile, just type make in the Terminal and get updated docs and CSS.
                                      • -
                                    -
                                    - - - - -
                                    -
                                    -

                                    Scaffolding

                                    -
                                    -

                                    Grid system

                                    -
                                      -
                                    • Updated grid system, now only 12 columns instead of 16 -
                                    • Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more
                                      • -
                                    • Removed unused (by default) grid columns support for 17-24 columns
                                      • -
                                    -

                                    Responsive (media queries)

                                    -
                                      -
                                    • Media queries added for basic support across mobile and tablet devices -
                                    • Responsive CSS is compiled separately, as bootstrap-responsive.css
                                      • -
                                    -
                                    - - - - -
                                    -
                                    -

                                    Base CSS

                                    -
                                    -

                                    Typography

                                    -
                                      -
                                    • h4 elements were dropped from 16px to 14px with a default line-height of 18px
                                      • -
                                    • h5 elements were dropped from 14px to 12px
                                      • -
                                    • h6 elements were dropped from 13px to 11px
                                      • -
                                    • Right-aligned option for blockquotes if float: right;
                                      • -
                                    -

                                    Code

                                    -
                                      -
                                    • New graphical style for <code>
                                      • -
                                    • Google Code Prettify styles updated (based on GitHub's gists)
                                      • -
                                    -

                                    Tables

                                    -
                                      -
                                    • Improved support for colspan and rowspan
                                      • -
                                    • Styles now restricted to new base class, .table
                                      • -
                                    • Table classes standardized with .table- required as a prefix
                                      • -
                                    • Removed unused table color options (too much code for such little impact)
                                      • -
                                    • Dropped support for TableSorter
                                      • -
                                    -

                                    Buttons

                                    -
                                      -
                                    • New classes for colors and sizes, all prefixed with .btn-
                                      • -
                                    • IE9: removed gradients and added rounded corners
                                      • -
                                    • Updated active state to make styling clearer in button groups (new) and look better with custom transition
                                      • -
                                    • New mixin, .buttonBackground, to set button gradients
                                      • -
                                    • The .secondary class was removed from modal examples in our docs as it never had associated styles.
                                      • -
                                    -

                                    Forms

                                    -
                                      -
                                    • Default form style is now vertical (stacked) to use less CSS and add greater flexibility
                                      • -
                                    • Form classes standardized with .form- required as a prefix
                                      • -
                                    • New built-in form defaults for search, inline, and horizontal forms
                                      • -
                                    • For horizontal forms, previous classes .clearfix and .input are equivalent to the new .control-group and .controls.
                                      • -
                                    • More flexible horizontal form markup with classes for all styling, including new optional class for the label
                                      • -
                                    • Form states: colors updated and customizable via new LESS variables
                                      • -
                                    -

                                    Icons, by Glyphicons

                                    -
                                      -
                                    • New Glyphicons Halflings icon set added in sprite form, in black and white
                                      • -
                                    • Simple markup required for an icon in tons of contexts: <i class="icon-cog"></>
                                      • -
                                    • Add another class, .icon-white, for white variation of the same icon
                                      • -
                                    -
                                    - - - - -
                                    -
                                    -

                                    Components

                                    -
                                    -

                                    Button groups and dropdowns

                                    -
                                      -
                                    • Two brand new components in 2.0: button groups and button dropdowns
                                      • -
                                    • Dependency: button dropdowns are built on button groups, and therefore require all their styles
                                      • -
                                    • Button groups, .btn-group, can be grouped one level higher with a button toolbar, .btn-toolbar
                                      • -
                                    -

                                    Navigation

                                    -
                                      -
                                    • Tabs and pills now require the use of a new base class, .nav, on their <ul> and the class names are now .nav-pills and .nav-tabs.
                                      • -
                                    • New nav list variation added that uses the same base class, .nav
                                      • -
                                    • Vertical tabs and pills have been added—just add .nav-stacked to the <ul>
                                      • -
                                    • Pills were restyled to be less rounded by default
                                      • -
                                    • Pills now have dropdown menu support (they share the same markup and styles as tabs)
                                      • -
                                    -

                                    Navbar (formerly topbar)

                                    -
                                      -
                                    • Base class changed from .topbar to .navbar
                                      • -
                                    • Now supports static position (default behavior, not fixed) and fixed to the top of viewport via .navbar-fixed-top (previously only supported fixed)
                                      • -
                                    • Added vertical dividers to top-level nav
                                      • -
                                    • Improved support for inline forms in the navbar, which now require .navbar-form to properly scope styles to only the intended forms.
                                      • -
                                    • Navbar search form now requires use of the .navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right.
                                      • -
                                    • Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. See navbar docs for how to utilize.
                                      • -
                                    -

                                    Dropdown menus

                                    -
                                      -
                                    • Updated the .dropdown-menu to tighten up spacing
                                      • -
                                    • Now requires you to add a <span class="caret"></span> to show the dropdown arrow
                                      • -
                                    • Now requires you to add a data-toggle="dropdown" attribute to obtain toggling behavior
                                      • -
                                    • The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.
                                      • -
                                    -

                                    Labels

                                    -
                                      -
                                    • Label colors updated to match form state colors
                                      • -
                                    • Not only do they match graphically, but they are powered by the same new variables
                                      • -
                                    -

                                    Thumbnails

                                    -
                                      -
                                    • Formerly .media-grid, now just .thumbnails, we've thoroughly extended this component for more uses while maintaining overall simplicity out of the box.
                                      • -
                                    • Individual thumbnails now require .thumbnail class
                                      • -
                                    -

                                    Alerts

                                    -
                                      -
                                    • New base class: .alert instead of .alert-message
                                      • -
                                    • Class names standardized for other options, now all starting with .alert-
                                      • -
                                    • Redesigned base alert styles to combine the default alerts and block-level alerts into one
                                      • -
                                    • Block level alert class changed: .alert-block instead of .block-message
                                      • -
                                    -

                                    Progress bars

                                    -
                                      -
                                    • New in 2.0
                                      • -
                                    • Features multiple styles via classes, including striped and animated variations via CSS3
                                      • -
                                    -

                                    Miscellaneous components

                                    -
                                      -
                                    • Added documentation for the well component and the close icon (used in modals and alerts)
                                      • -
                                    -
                                    - - - - -
                                    -
                                    -

                                    Javascript plugins

                                    -
                                    -
                                    - Heads up! We've rewritten just about everything for our plugins, so head on over to the Javascript page to learn more. -
                                    -

                                    Tooltips

                                    -
                                      -
                                    • The plugin method has been renamed from twipsy() to tooltip(), and the class name changed from twipsy to tooltip.
                                      • -
                                    • The placement option value that was below is now bottom, and above is now top.
                                      • -
                                    • The animate option was renamed to animation.
                                      • -
                                    • The html option was removed, as the tooltips default to allowing HTML now.
                                      • -
                                    -

                                    Popovers

                                    -
                                      -
                                    • Child elements now properly namespaced: .title to .popover-title, .inner to .popover-inner, and .content to .popover-content.
                                      • -
                                    • The placement option value that was below is now bottom, and above is now top.
                                      • -
                                    -

                                    New plugins

                                    - -
                                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
                                    - - - - - From 72323051c31810138fdff4156a88ee863f4f8001 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 19:18:42 -0700 Subject: [PATCH 292/422] increase padding on navbar responsive nav links, fix footer margins --- docs/assets/css/bootstrap-responsive.css | 2 +- docs/assets/css/docs.css | 6 +----- less/responsive-navbar.less | 2 +- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 6e485bc10b..d234664421 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -940,7 +940,7 @@ } .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { - padding: 6px 15px; + padding: 9px 15px; font-weight: bold; color: #555555; -webkit-border-radius: 3px; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 52f8ff1bc8..3ac60b0b09 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -134,7 +134,7 @@ hr.soften { /* Download button */ @-webkit-keyframes downloadButton { from { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.1); } - 50% { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 20px rgba(0,68,204,.75); } + 50% { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 50px rgba(0,68,204,1); } to { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.1); } } .masthead .btn { @@ -912,10 +912,6 @@ form.bs-docs-example { } /* Unfloat the back to top link in footer */ - .footer { - margin-left: -20px; - margin-right: -20px; - } .footer p { margin-bottom: 9px; } diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index e54213ef3f..6d21a99a02 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -67,7 +67,7 @@ // Nav and dropdown links in navbar .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { - padding: 6px 15px; + padding: 9px 15px; font-weight: bold; color: @navbarLinkColor; .border-radius(3px); From 3c742fc08bd1714bf9145cebac8e7f653e83c05d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 19:25:50 -0700 Subject: [PATCH 293/422] add test for textarea at .span12, really fix docs footer --- docs/assets/css/docs.css | 6 ++++++ less/tests/css-tests.html | 12 ++++++++++++ 2 files changed, 18 insertions(+) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 3ac60b0b09..aa7f080959 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -912,6 +912,12 @@ form.bs-docs-example { } /* Unfloat the back to top link in footer */ + .footer { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + } .footer p { margin-bottom: 9px; } diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 71de6cce74..ef3c0ef6eb 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -1098,6 +1098,18 @@ +
                                    +
                                    +
                                    + + +
                                    +
                                    + +
                                    +
                                    + +
                                    From 1bb7c0e669bfa431b190ed3b283be93f27cf0eae Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 19:33:37 -0700 Subject: [PATCH 294/422] fixes #4254: make .span12 expand full width of a parent when responsive --- docs/assets/css/bootstrap-responsive.css | 7 +++++++ less/responsive-767px-max.less | 5 +++++ 2 files changed, 12 insertions(+) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index d234664421..d5b7e3c4e0 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -814,6 +814,13 @@ width: auto; margin-left: 0; } + .span12, + .row-fluid .span12 { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } .input-large, .input-xlarge, .input-xxlarge, diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 18c96ee0b7..65e019a8fb 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -62,6 +62,11 @@ width: auto; margin-left: 0; } + .span12, + .row-fluid .span12 { + width: 100%; + .box-sizing(border-box); + } // FORM FIELDS // ----------- From 225d0e0af36ef7aed818fb124c7ec13fbb52be5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 19:36:28 -0700 Subject: [PATCH 295/422] label new css test --- less/tests/css-tests.html | 1 + 1 file changed, 1 insertion(+) diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index ef3c0ef6eb..8d9785187f 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -1103,6 +1103,7 @@
                                    +

                                    Fluid textarea at .span12

                                    From 6977d35eedd8a0b25b7b18eae67c3299eb18badd Mon Sep 17 00:00:00 2001 From: Dirk Ginader Date: Wed, 1 Aug 2012 20:11:16 -0700 Subject: [PATCH 296/422] close #3531 added focus handling and removed the badly announced "times" close button from screenreaders --- docs/assets/js/bootstrap-modal.js | 20 +++++++++++++++----- docs/assets/js/bootstrap.js | 20 +++++++++++++++----- docs/assets/js/bootstrap.min.js | 2 +- docs/javascript.html | 14 +++++++------- docs/templates/pages/javascript.mustache | 20 ++++++++++---------- js/bootstrap-modal.js | 20 +++++++++++++++----- 6 files changed, 63 insertions(+), 33 deletions(-) diff --git a/docs/assets/js/bootstrap-modal.js b/docs/assets/js/bootstrap-modal.js index 530b53e07e..a6fe1e8176 100644 --- a/docs/assets/js/bootstrap-modal.js +++ b/docs/assets/js/bootstrap-modal.js @@ -69,7 +69,10 @@ that.$element[0].offsetWidth // force reflow } - that.$element.addClass('in') + that.$element + .addClass('in') + .attr('aria-hidden', false) + .focus() that.enforceFocus() @@ -99,7 +102,9 @@ $(document).off('focusin.modal') - this.$element.removeClass('in') + this.$element + .removeClass('in') + .attr('aria-hidden', true) $.support.transition && this.$element.hasClass('fade') ? this.hideWithTransition() : @@ -118,11 +123,11 @@ , escape: function () { var that = this if (this.isShown && this.options.keyboard) { - $(document).on('keyup.dismiss.modal', function ( e ) { + this.$element.on('keyup.dismiss.modal', function ( e ) { e.which == 27 && that.hide() }) } else if (!this.isShown) { - $(document).off('keyup.dismiss.modal') + this.$element.off('keyup.dismiss.modal') } } @@ -222,7 +227,12 @@ , option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) e.preventDefault() - $target.modal(option) + + $target + .modal(option) + .one('hide', function () { + $this.focus() + }) }) }) diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js index 6024ffbf38..1a02eac156 100644 --- a/docs/assets/js/bootstrap.js +++ b/docs/assets/js/bootstrap.js @@ -793,7 +793,10 @@ that.$element[0].offsetWidth // force reflow } - that.$element.addClass('in') + that.$element + .addClass('in') + .attr('aria-hidden', false) + .focus() that.enforceFocus() @@ -823,7 +826,9 @@ $(document).off('focusin.modal') - this.$element.removeClass('in') + this.$element + .removeClass('in') + .attr('aria-hidden', true) $.support.transition && this.$element.hasClass('fade') ? this.hideWithTransition() : @@ -842,11 +847,11 @@ , escape: function () { var that = this if (this.isShown && this.options.keyboard) { - $(document).on('keyup.dismiss.modal', function ( e ) { + this.$element.on('keyup.dismiss.modal', function ( e ) { e.which == 27 && that.hide() }) } else if (!this.isShown) { - $(document).off('keyup.dismiss.modal') + this.$element.off('keyup.dismiss.modal') } } @@ -946,7 +951,12 @@ , option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) e.preventDefault() - $target.modal(option) + + $target + .modal(option) + .one('hide', function () { + $this.focus() + }) }) }) diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js index 75c16fd10d..4ca965ebad 100644 --- a/docs/assets/js/bootstrap.min.js +++ b/docs/assets/js/bootstrap.min.js @@ -3,4 +3,4 @@ * Copyright 2012 Twitter, Inc. * http://www.apache.org/licenses/LICENSE-2.0.txt */ -!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f+"."+this.type,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();return c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove(),this},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                    ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

                                    '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(a){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(a.keyCode),this.move(a)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                                      ',item:'
                                      • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery); \ No newline at end of file +!function(e){e(function(){"use strict";e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()},e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e(function(){e("body").on("click.alert.data-api",t,n.prototype.close)})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.parent('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")},e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e(function(){e("body").on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=n,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},to:function(t){var n=this.$element.find(".item.active"),r=n.parent().children(),i=r.index(n),s=this;if(t>r.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){s.to(t)}):i==t?this.pause().cycle():this.slide(t>i?"next":"prev",e(r[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f=e.Event("slide",{relatedTarget:i[0]});this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u]();if(i.hasClass("active"))return;if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}},e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e(function(){e("body").on("click.carousel.data-api","[data-slide]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=!i.data("modal")&&e.extend({},i.data(),n.data());i.carousel(s),t.preventDefault()})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning)return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning)return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=typeof n=="object"&&n;i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e(function(){e("body").on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})})}(window.jQuery),!function(e){"use strict";function r(){i(e(t)).removeClass("open")}function i(t){var n=t.attr("data-target"),r;return n||(n=t.attr("href"),n=n&&n.replace(/.*(?=#[^\s]*$)/,"")),r=e(n),r.length||(r=t.parent()),r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||(s.toggleClass("open"),n.focus()),!1},keydown:function(t){var n,r,s,o,u,a;if(!/(38|40|27)/.test(t.keyCode))return;n=e(this),t.preventDefault(),t.stopPropagation();if(n.is(".disabled, :disabled"))return;o=i(n),u=o.hasClass("open");if(!u||u&&t.keyCode==27)return n.click();r=e("[role=menu] li:not(.divider) a",o);if(!r.length)return;a=r.index(r.filter(":focus")),t.keyCode==38&&a>0&&a--,t.keyCode==40&&a').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,e.proxy(this.removeBackdrop,this)):this.removeBackdrop()):t&&t()}},e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e(function(){e("body").on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})})})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,this.options.trigger!="manual"&&(i=this.options.trigger=="hover"?"mouseenter":"focus",s=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this))),this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,t,this.$element.data()),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);if(!n.options.delay||!n.options.delay.show)return n.show();clearTimeout(this.timeout),n.hoverState="in",this.timeout=setTimeout(function(){n.hoverState=="in"&&n.show()},n.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var e,t,n,r,i,s,o;if(this.hasContent()&&this.enabled){e=this.tip(),this.setContent(),this.options.animation&&e.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,e[0],this.$element[0]):this.options.placement,t=/in/.test(s),e.remove().css({top:0,left:0,display:"block"}).appendTo(t?this.$element:document.body),n=this.getPosition(t),r=e[0].offsetWidth,i=e[0].offsetHeight;switch(t?s.split(" ")[1]:s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}e.css(o).addClass(s).addClass("in")}},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function r(){var t=setTimeout(function(){n.off(e.support.transition.end).remove()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.remove()})}var t=this,n=this.tip();return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?r():n.remove(),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(t){return e.extend({},t?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                      ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content > *")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-content")||(typeof n.content=="function"?n.content.call(t[0]):n.content),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",content:"",template:'

                                      '})}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var t=e(this),n=t.data("target")||t.attr("href"),r=/^#\w/.test(n)&&e(n);return r&&r.length&&[[r.position().top,n]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parent(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parent("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}},e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active a").last()[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}},e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e(function(){e("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=e(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:t.top+t.height,left:t.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length"+t+""})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),(e.browser.webkit||e.browser.msie)&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this))},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(e){this.suppressKeyPressRepeat=!~[40,38,9,13,27].indexOf(e.keyCode),this.move(e)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},blur:function(e){var t=this;setTimeout(function(){t.hide()},150)},click:function(e){e.stopPropagation(),e.preventDefault(),this.select()},mouseenter:function(t){this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")}},e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'
                                        ',item:'
                                        • ',minLength:1},e.fn.typeahead.Constructor=t,e(function(){e("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;t.preventDefault(),n.typeahead(n.data())})})}(window.jQuery); \ No newline at end of file diff --git a/docs/javascript.html b/docs/javascript.html index d0332ece9b..cb86d49f38 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -214,9 +214,9 @@ $('#myModal').on('show', function (e) {

                                        Live demo

                                        Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.

                                        - 
                                        -  <img src="..." class="img-rounded">
-  <img src="..." class="img-circle">
-  <img src="..." class="img-polaroid">
+<img src="..." class="img-rounded">
+<img src="..." class="img-circle">
+<img src="..." class="img-polaroid">
                                        From d8eb75d6e83a20f087856258cbd66ef01edee823 Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 18:14:20 +0200 Subject: [PATCH 380/422] Fix Heads up! part for Images section --- docs/base-css.html | 3 ++- docs/templates/pages/base-css.mustache | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index cd46ec0471..67065bcc0d 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1567,7 +1567,8 @@ For example, <code>section</code> should be wrapped as inline.

                                        Images

                                        -

                                        Simple classes to easily style images in any project. Heads up: .img-rounded and .img-circle don't work in IE7-8.

                                        +

                                        Simple classes to easily style images in any project.

                                        +

                                        Heads up! .img-rounded and .img-circle don't work in IE7-8.

                                        diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index bc1e29f17f..3620d5b06a 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1504,7 +1504,8 @@

                                        {{_i}}Images{{/i}}

                                        -

                                        {{_i}}Simple classes to easily style images in any project. Heads up: .img-rounded and .img-circle don't work in IE7-8.{{/i}}

                                        +

                                        {{_i}}Simple classes to easily style images in any project.

                                        +

                                        {{_i}}Heads up!{{/i}} .img-rounded and .img-circle don't work in IE7-8.{{/i}}

                                        From 97247a157c6d8c5a1c42461a3a7b569ecb930e86 Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 18:24:18 +0200 Subject: [PATCH 381/422] Improve description for Images section --- docs/base-css.html | 2 +- docs/templates/pages/base-css.mustache | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 67065bcc0d..1428e38ec0 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1567,7 +1567,7 @@ For example, <code>section</code> should be wrapped as inline.

                                        Images

                                        -

                                        Simple classes to easily style images in any project.

                                        +

                                        Add the .img-rounded, .img-circle or .img-polaroid class to a <img> element to easily style images in any project.

                                        Heads up! .img-rounded and .img-circle don't work in IE7-8.

                                        diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 3620d5b06a..d8af4eaabf 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1504,8 +1504,8 @@

                                        {{_i}}Images{{/i}}

                                        -

                                        {{_i}}Simple classes to easily style images in any project.

                                        -

                                        {{_i}}Heads up!{{/i}} .img-rounded and .img-circle don't work in IE7-8.{{/i}}

                                        +

                                        {{_i}}Add the .img-rounded, .img-circle or .img-polaroid class to a <img> element to easily style images in any project.{{/i}}

                                        +

                                        {{_i}}Heads up!{{/i}} {{_i}}.img-rounded and .img-circle don't work in IE7-8.{{/i}}

                                        From d71efb855bda3ecd0b0fd079d2d9cb231c8ba71b Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 19:21:01 +0200 Subject: [PATCH 382/422] Separate Buttons examples in Icon examples section and add code snippets --- docs/base-css.html | 66 ++++++++++++++++++++------ docs/templates/pages/base-css.mustache | 66 ++++++++++++++++++++------ 2 files changed, 102 insertions(+), 30 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 1428e38ec0..40bfbcf066 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1770,30 +1770,66 @@ For example, <code>section</code> should be wrapped as inline.

                                        Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

                                        Buttons

                                        + +
                                        Button group in a button toolbar
                                        -
                                        +
                                        -

                                        -
                                        - User - - -
                                        -

                                        -
                                        +
                                        +<div class="btn-toolbar">
+  <div class="btn-group">
+
+    <a class="btn" href="#"><i class="icon-align-left"></i></a>
+    <a class="btn" href="#"><i class="icon-align-center"></i></a>
+    <a class="btn" href="#"><i class="icon-align-right"></i></a>
+    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
+  </div>
+</div>
+
                                        + +
                                        Dropdown in a button group
                                        +
                                        +
                                        + User + + +
                                        +
                                        +
                                        +<div class="btn-group">
+  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
+  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+  <ul class="dropdown-menu">
+    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
+    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
+    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
+    <li class="divider"></li>
+    <li><a href="#"><i class="i"></i> Make admin</a></li>
+  </ul>
+</div>
+
                                        + +
                                        Button
                                        +
                                        + +
                                        +
                                        +<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+
                                        +

                                        Navigation

                                        diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index d8af4eaabf..e1e14a4a0d 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1707,30 +1707,66 @@

                                        {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

                                        {{_i}}Buttons{{/i}}

                                        + +
                                        {{_i}}Button group in a button toolbar{{/i}}
                                        -
                                        +
                                        -

                                        -
                                        - {{_i}}User{{/i}} - - -
                                        -

                                        -
                                        {{! /bs-docs-example }} +
                                        +<div class="btn-toolbar">
+  <div class="btn-group">
+
+    <a class="btn" href="#"><i class="icon-align-left"></i></a>
+    <a class="btn" href="#"><i class="icon-align-center"></i></a>
+    <a class="btn" href="#"><i class="icon-align-right"></i></a>
+    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
+  </div>
+</div>
+
                                        + +
                                        {{_i}}Dropdown in a button group{{/i}}
                                        +
                                        +
                                        + {{_i}}User{{/i}} + + +
                                        +
                                        {{! /bs-docs-example }} +
                                        +<div class="btn-group">
+  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
+  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+  <ul class="dropdown-menu">
+    <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
+    <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li>
+    <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
+    <li class="divider"></li>
+    <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
+  </ul>
+</div>
+
                                        + +
                                        {{_i}}Button{{/i}}
                                        +
                                        + +
                                        {{! /bs-docs-example }} +
                                        +<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+
                                        +

                                        {{_i}}Navigation{{/i}}

                                        From 8b763286df34d4eadd8e5a254b7390a6c1ccbc3e Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 19:31:29 +0200 Subject: [PATCH 383/422] Add code snippet to Icon examples => Navigation section --- docs/base-css.html | 8 ++++++++ docs/templates/pages/base-css.mustache | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/docs/base-css.html b/docs/base-css.html index 40bfbcf066..3a8a928d09 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1842,6 +1842,14 @@ For example, <code>section</code> should be wrapped as inline.
                                      +
                                      +<ul class="nav nav-list">
+  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
+  <li><a href="#"><i class="icon-book"></i> Library</a></li>
+  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
+  <li><a href="#"><i class="i"></i> Misc</a></li>
+</ul>
+

                                      Form fields

                                      diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index e1e14a4a0d..e8482b0e16 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1779,6 +1779,14 @@
                                    {{! /well }}
                                    {{! /bs-docs-example }} +
                                    +<ul class="nav nav-list">
+  <li class="active"><a href="#"><i class="icon-home icon-white"></i> {{_i}}Home{{/i}}</a></li>
+  <li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li>
+  <li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
+  <li><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li>
+</ul>
+

                                    {{_i}}Form fields{{/i}}

                                    From 2327d30ef5bcbebd5519488178534f2b09de89af Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 19:40:42 +0200 Subject: [PATCH 384/422] Add code snippet to Icon examples => Form fields section --- docs/base-css.html | 9 +++++++++ docs/templates/pages/base-css.mustache | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/docs/base-css.html b/docs/base-css.html index 3a8a928d09..549bb415d1 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1862,6 +1862,15 @@ For example, <code>section</code> should be wrapped as inline.
                                    +
                                    +<div class="control-group">
+  <label class="control-label" for="inputIcon">Email address</label>
+  <div class="controls">
+    <div class="input-prepend">
+    <span class="add-on"><i class="icon-envelope"><i><span><input class="span2" id="inputIcon" type="text">
+  </div>
+</div>
+
                                    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index e8482b0e16..242559dbe7 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1799,6 +1799,15 @@
                                    +
                                    +<div class="control-group">
+  <label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
+  <div class="controls">
+    <div class="input-prepend">
+    <span class="add-on"><i class="icon-envelope"><i><span><input class="span2" id="inputIcon" type="text">
+  </div>
+</div>
+
                                    From 3f12c746e59de41fc13964a70eaa31891f71c760 Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 19:49:27 +0200 Subject: [PATCH 385/422] Replace Note: by Heads up! --- docs/base-css.html | 2 +- docs/templates/pages/base-css.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 549bb415d1..30c7f8d3f6 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -420,7 +420,7 @@ For example, <code>section</code> should be wrapped as inline. &lt;p&gt;Sample text here...&lt;/p&gt; </pre> -

                                    Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

                                    +

                                    Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

                                    You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

                                    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 242559dbe7..a25862c18e 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -357,7 +357,7 @@ &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt; </pre> -

                                    {{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

                                    +

                                    {{_i}}Heads up!{{/i}} {{_i}}Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

                                    {{_i}}You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}

                                    From b7233a49dd42a17032389351f340c8175d77f36a Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 19:51:57 +0200 Subject: [PATCH 386/422] Move code within code snippet as close to the left for Basic block --- docs/base-css.html | 2 +- docs/templates/pages/base-css.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 30c7f8d3f6..718beee6dd 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -417,7 +417,7 @@ For example, <code>section</code> should be wrapped as inline. 
                                     <pre>
-  &lt;p&gt;Sample text here...&lt;/p&gt;
+&lt;p&gt;Sample text here...&lt;/p&gt;
 </pre>

                                    Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

                                    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index a25862c18e..8496a05073 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -354,7 +354,7 @@ 
                                     <pre>
-  &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
+&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
 </pre>

                                    {{_i}}Heads up!{{/i}} {{_i}}Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

                                    From ae275dccb82023c9e8f0b8d8b689566ad07db8d9 Mon Sep 17 00:00:00 2001 From: Erik van der Kolk Date: Sat, 18 Aug 2012 21:44:57 +0200 Subject: [PATCH 387/422] Fix empty for attribute on labels in Horizontal form --- docs/base-css.html | 16 ++++++++-------- docs/templates/pages/base-css.mustache | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 718beee6dd..6c92089077 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -906,15 +906,15 @@ For example, <code>section</code> should be wrapped as inline.
                                    Legend
                                    - +
                                    - +
                                    - +
                                    - +
                                    @@ -929,15 +929,15 @@ For example, <code>section</code> should be wrapped as inline. 
                                     <form class="form-horizontal">
   <div class="control-group">
-    <label class="control-label" for="">Email</label>
+    <label class="control-label" for="inputEmail">Email</label>
     <div class="controls">
-      <input type="text" placeholder="Email">
+      <input type="text" id="inputEmail" placeholder="Email">
     </div>
   </div>
   <div class="control-group">
-    <label class="control-label" for="">Password</label>
+    <label class="control-label" for="inputPassword">Password</label>
     <div class="controls">
-      <input type="password" placeholder="Password">
+      <input type="password" id="inputPassword" placeholder="Password">
     </div>
   </div>
   <div class="control-group">
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 8496a05073..35d5118a25 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -843,15 +843,15 @@
           
             Legend
             
                                    
-              
+              
               
                                    
-                
+                
               
                                    
             
                                    
             
                                    
-              
+              
               
                                    
-                
+                
               
                                    
             
                                    
             
                                    
@@ -866,15 +866,15 @@
 
                                     <form class="form-horizontal">
   <div class="control-group">
-    <label class="control-label" for="">{{_i}}Email{{/i}}</label>
+    <label class="control-label" for="inputEmail">{{_i}}Email{{/i}}</label>
     <div class="controls">
-      <input type="text" placeholder="{{_i}}Email{{/i}}">
+      <input type="text" id="inputEmail" placeholder="{{_i}}Email{{/i}}">
     </div>
   </div>
   <div class="control-group">
-    <label class="control-label" for="">{{_i}}Password{{/i}}</label>
+    <label class="control-label" for="inputPassword">{{_i}}Password{{/i}}</label>
     <div class="controls">
-      <input type="password" placeholder="{{_i}}Password{{/i}}">
+      <input type="password" id="inputPassword" placeholder="{{_i}}Password{{/i}}">
     </div>
   </div>
   <div class="control-group">

From dda951d1e1283738c132f1132e9dec28f27fa1ec Mon Sep 17 00:00:00 2001
From: Erik van der Kolk 
Date: Sat, 18 Aug 2012 21:52:43 +0200
Subject: [PATCH 388/422] Remove inexisting end tag 

---
 docs/base-css.html                     | 8 ++++----
 docs/templates/pages/base-css.mustache | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/base-css.html b/docs/base-css.html
index 6c92089077..363f91a020 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -855,7 +855,7 @@ For example, <code>section</code> should be wrapped as inline.
 
                                    
 
 
-          
                                    
+          
                                    
 
 
           
                                    Optional layouts
                                    
@@ -952,7 +952,7 @@ For example, <code>section</code> should be wrapped as inline.
                                    -
                                    +

                                    Supported form controls

                                    @@ -1074,7 +1074,7 @@ For example, <code>section</code> should be wrapped as inline. -
                                    +

                                    Extending form controls

                                    @@ -1316,7 +1316,7 @@ For example, <code>section</code> should be wrapped as inline. -
                                    +

                                    Form control states

                                    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 35d5118a25..f2fb96b4bb 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -792,7 +792,7 @@ -
                                    +

                                    {{_i}}Optional layouts{{/i}}

                                    @@ -889,7 +889,7 @@ -
                                    +

                                    {{_i}}Supported form controls{{/i}}

                                    @@ -1011,7 +1011,7 @@ -
                                    +

                                    {{_i}}Extending form controls{{/i}}

                                    @@ -1253,7 +1253,7 @@ -
                                    +

                                    {{_i}}Form control states{{/i}}

                                    From 50638530e61307f174950ef295235a6dbddec6b9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 18 Aug 2012 16:30:47 -0700 Subject: [PATCH 389/422] fixes #4445: .btn-link shouldn't have a pressed button-like state at all, so nuking everything on :active as well --- docs/assets/css/bootstrap.css | 14 +++++++++----- less/buttons.less | 11 +++++++---- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f8f16bbf28..3af4a79459 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3286,18 +3286,22 @@ input[type="submit"].btn.btn-mini { *padding-bottom: 1px; } +.btn-link, +.btn-link:active { + background-color: transparent; + background-image: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + .btn-link { color: #0088cc; cursor: pointer; - background-color: transparent; - background-image: none; border-color: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; } .btn-link:hover { diff --git a/less/buttons.less b/less/buttons.less index 204b1269e1..e9ec87ec7d 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -192,18 +192,21 @@ input[type="submit"].btn { // -------------------------------------------------- // Make a button look and behave like a link -.btn-link { +.btn-link, +.btn-link:active { background-color: transparent; background-image: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.btn-link { border-color: transparent; cursor: pointer; color: @linkColor; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; } .btn-link:hover { color: @linkColorHover; From 9ae137aede2ec2664793c3d67c99c81188f1c6f5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 18 Aug 2012 16:42:50 -0700 Subject: [PATCH 390/422] modifications to new content --- docs/base-css.html | 39 ++++++++++++++------------ docs/templates/pages/base-css.mustache | 39 ++++++++++++++------------ 2 files changed, 42 insertions(+), 36 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 363f91a020..9c75695639 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -406,18 +406,21 @@

                                    Inline

                                    Wrap inline snippets of code with <code>.

                                    +
                                    + For example, <section> should be wrapped as inline. +
                                    -For example, <code>section</code> should be wrapped as inline.
+For example, <code><section></code> should be wrapped as inline.

                                    Basic block

                                    Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

                                    -
                                    -<p>Sample text here...</p>
-
                                    +
                                    + 
                                    <p>Sample text here...</p>
                                    +
                                     <pre>
-&lt;p&gt;Sample text here...&lt;/p&gt;
+  &lt;p&gt;Sample text here...&lt;/p&gt;
 </pre>

                                    Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

                                    @@ -802,17 +805,17 @@ For example, <code>section</code> should be wrapped as inline. 
                                     <table>
-  <caption>…</caption>
+  <caption>...</caption>
   <thead>
     <tr>
-      <th>…</th>
-      <th>…</th>
+      <th>...</th>
+      <th>...</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>…</td>
-      <td>…</td>
+      <td>...</td>
+      <td>...</td>
     </tr>
   </tbody>
 </table>
@@ -1040,7 +1043,7 @@ For example, <code>section</code> should be wrapped as inline.
           
                                    Use the default option or specify a multiple="multiple" to show multiple options at once.
                                    
           
             
-              
+              
               
               
               
@@ -994,7 +997,7 @@
           
 
                                     <select>
-  <option>something</option>
+  <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
@@ -1099,8 +1102,8 @@
     <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
   </div>
   <div class="input-prepend">
-    <input type="text" class="span2 search-query">
     <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+    <input type="text" class="span2 search-query">
   </div>
 </form>
 
                                    
@@ -1504,8 +1507,7 @@
             
                                    {{_i}}Images{{/i}}
                                    -

                                    {{_i}}Add the .img-rounded, .img-circle or .img-polaroid class to a <img> element to easily style images in any project.{{/i}}

                                    -

                                    {{_i}}Heads up!{{/i}} {{_i}}.img-rounded and .img-circle don't work in IE7-8.{{/i}}

                                    +

                                    {{_i}}Add classes to an <img> element to easily style images in any project.{{/i}}

                                    @@ -1516,6 +1518,7 @@ <img src="..." class="img-circle"> <img src="..." class="img-polaroid"> +

                                    {{_i}}Heads up!{{/i}} {{_i}}.img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.{{/i}}

                                    @@ -1708,7 +1711,7 @@

                                    {{_i}}Buttons{{/i}}

                                    -
                                    {{_i}}Button group in a button toolbar{{/i}}
                                    +
                                    {{_i}}Button group in a button toolbar{{/i}}
                                    @@ -1731,7 +1734,7 @@ </div> -
                                    {{_i}}Dropdown in a button group{{/i}}
                                    +
                                    {{_i}}Dropdown in a button group{{/i}}
                                    {{_i}}User{{/i}} @@ -1759,7 +1762,7 @@ </div> -
                                    {{_i}}Button{{/i}}
                                    +
                                    {{_i}}Small button{{/i}}
                                    {{! /bs-docs-example }} From 4d2f584fdd921a9b463355513a0beba5052a199b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 18 Aug 2012 16:47:04 -0700 Subject: [PATCH 391/422] fixes #4444: clarify docs copy that new icon white style is intentional on active and hover links in .nav and .dropdown-menu --- docs/base-css.html | 2 +- docs/templates/pages/base-css.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 9c75695639..554b325148 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1756,7 +1756,7 @@ For example, <code><section></code> should be wrapped as inlin 
                                     <i class="icon-search"></i>
                                    -

                                    There are also styles available for inverted (white) icons, made ready with one extra class:

                                    +

                                    There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

                                     <i class="icon-search icon-white"></i>
                                    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index d80dec813b..a92941d249 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1693,7 +1693,7 @@ 
                                     <i class="icon-search"></i>
                                    -

                                    {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}

                                    +

                                    {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.{{/i}}

                                     <i class="icon-search icon-white"></i>
                                    From e6e0e2ac9b0a31979531b6add3d1c8aaceb65f2e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 18 Aug 2012 16:50:26 -0700 Subject: [PATCH 392/422] fixes #4442: allow for .btn within a .btn-toolbar without .btn-group --- docs/assets/css/bootstrap.css | 6 ++++++ less/button-groups.less | 5 +++++ 2 files changed, 11 insertions(+) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 3af4a79459..82fee6daeb 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3328,6 +3328,7 @@ input[type="submit"].btn.btn-mini { .btn-toolbar { margin-top: 10px; margin-bottom: 10px; + font-size: 0; } .btn-toolbar .btn-group { @@ -3338,6 +3339,11 @@ input[type="submit"].btn.btn-mini { *zoom: 1; } +.btn-toolbar .btn-group + .btn, +.btn-toolbar .btn + .btn-group { + margin-left: 5px; +} + .btn-group > .btn { position: relative; margin-left: -1px; diff --git a/less/button-groups.less b/less/button-groups.less index cbb237a611..1cc758b7f6 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -18,12 +18,17 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { + font-size: 0; // Hack to remove whitespace that results from using inline-block margin-top: @baseLineHeight / 2; margin-bottom: @baseLineHeight / 2; .btn-group { display: inline-block; .ie7-inline-block(); } + .btn-group + .btn, + .btn + .btn-group { + margin-left: 5px; + } } // Float them, remove border radius, then re-add to first and last elements From e79eb75e0944c2852fc47e117f4e96b984e40051 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 18 Aug 2012 17:05:37 -0700 Subject: [PATCH 393/422] fixes #4044: make z-index of tooltips same as fixed navbar so they overlay it if generated from within --- docs/assets/css/bootstrap.css | 4 ++-- less/variables.less | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 82fee6daeb..e550b175ec 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4710,7 +4710,7 @@ input[type="submit"].btn.btn-mini { } .modal-open .tooltip { - z-index: 2070; + z-index: 2080; } .modal-backdrop { @@ -4829,7 +4829,7 @@ input[type="submit"].btn.btn-mini { .tooltip { position: absolute; - z-index: 1020; + z-index: 1030; display: block; padding: 5px; font-size: 11px; diff --git a/less/variables.less b/less/variables.less index 42b76df45e..a5c8cdd989 100644 --- a/less/variables.less +++ b/less/variables.less @@ -125,7 +125,7 @@ // Try to avoid customizing these :) @zindexDropdown: 1000; @zindexPopover: 1010; -@zindexTooltip: 1020; +@zindexTooltip: 1030; @zindexFixedNavbar: 1030; @zindexModalBackdrop: 1040; @zindexModal: 1050; From 1166b39630cb2394722456a38d99a3cca4c97354 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 18 Aug 2012 19:24:29 -0700 Subject: [PATCH 394/422] removed some old stuff from application.js --- docs/assets/js/application.js | 14 -------------- docs/assets/js/bootstrap.min.js | 2 +- 2 files changed, 1 insertion(+), 15 deletions(-) diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 69760bee36..5baab39354 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -31,20 +31,6 @@ $(this).parents('.add-on')[method]('active') }) - // position static twipsies for components page - if ($(".twipsies a").length) { - $(window).on('load resize', function () { - $(".twipsies a").each(function () { - $(this) - .tooltip({ - placement: $(this).attr('title') - , trigger: 'manual' - }) - .tooltip('show') - }) - }) - } - // add tipsies to grid for scaffolding if ($('#gridSystem').length) { $('#gridSystem').tooltip({ diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js index c3078944a4..539e432b13 100644 --- a/docs/assets/js/bootstrap.min.js +++ b/docs/assets/js/bootstrap.min.js @@ -3,4 +3,4 @@ * Copyright 2012 Twitter, Inc. * http://www.apache.org/licenses/LICENSE-2.0.txt */ -!function(e){e(function(){"use strict";e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()},e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e(function(){e("body").on("click.alert.data-api",t,n.prototype.close)})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.parent('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")},e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e(function(){e("body").on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=n,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},to:function(t){var n=this.$element.find(".item.active"),r=n.parent().children(),i=r.index(n),s=this;if(t>r.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){s.to(t)}):i==t?this.pause().cycle():this.slide(t>i?"next":"prev",e(r[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f=e.Event("slide",{relatedTarget:i[0]});this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u]();if(i.hasClass("active"))return;if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}},e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e(function(){e("body").on("click.carousel.data-api","[data-slide]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=!i.data("modal")&&e.extend({},i.data(),n.data());i.carousel(s),t.preventDefault()})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning)return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning)return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=typeof n=="object"&&n;i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e(function(){e("body").on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})})}(window.jQuery),!function(e){"use strict";function r(){i(e(t)).removeClass("open")}function i(t){var n=t.attr("data-target"),r;return n||(n=t.attr("href"),n=n&&n.replace(/.*(?=#[^\s]*$)/,"")),r=e(n),r.length||(r=t.parent()),r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||(s.toggleClass("open"),n.focus()),!1},keydown:function(t){var n,r,s,o,u,a;if(!/(38|40|27)/.test(t.keyCode))return;n=e(this),t.preventDefault(),t.stopPropagation();if(n.is(".disabled, :disabled"))return;o=i(n),u=o.hasClass("open");if(!u||u&&t.keyCode==27)return n.click();r=e("[role=menu] li:not(.divider) a",o);if(!r.length)return;a=r.index(r.filter(":focus")),t.keyCode==38&&a>0&&a--,t.keyCode==40&&a').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,e.proxy(this.removeBackdrop,this)):this.removeBackdrop()):t&&t()}},e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e(function(){e("body").on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})})})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,this.options.trigger!="manual"&&(i=this.options.trigger=="hover"?"mouseenter":"focus",s=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this))),this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,t,this.$element.data()),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);if(!n.options.delay||!n.options.delay.show)return n.show();clearTimeout(this.timeout),n.hoverState="in",this.timeout=setTimeout(function(){n.hoverState=="in"&&n.show()},n.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var e,t,n,r,i,s,o;if(this.hasContent()&&this.enabled){e=this.tip(),this.setContent(),this.options.animation&&e.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,e[0],this.$element[0]):this.options.placement,t=/in/.test(s),e.remove().css({top:0,left:0,display:"block"}).appendTo(t?this.$element:document.body),n=this.getPosition(t),r=e[0].offsetWidth,i=e[0].offsetHeight;switch(t?s.split(" ")[1]:s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}e.css(o).addClass(s).addClass("in")}},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function r(){var t=setTimeout(function(){n.off(e.support.transition.end).remove()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.remove()})}var t=this,n=this.tip();return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?r():n.remove(),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(t){return e.extend({},t?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                    ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content > *")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-content")||(typeof n.content=="function"?n.content.call(t[0]):n.content),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",content:"",template:'

                                    '})}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var t=e(this),n=t.data("target")||t.attr("href"),r=/^#\w/.test(n)&&e(n);return r&&r.length&&[[r.position().top,n]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parent(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parent("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}},e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active a").last()[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}},e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e(function(){e("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=e(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:t.top+t.height,left:t.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length"+t+""})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),(e.browser.webkit||e.browser.msie)&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this))},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=!~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},blur:function(e){var t=this;setTimeout(function(){t.hide()},150)},click:function(e){e.stopPropagation(),e.preventDefault(),this.select()},mouseenter:function(t){this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")}},e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'
                                      ',item:'
                                      • ',minLength:1},e.fn.typeahead.Constructor=t,e(function(){e("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;t.preventDefault(),n.typeahead(n.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))},e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery); \ No newline at end of file +!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f).one("hide",function(){c.focus()})})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f+"."+this.type,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();return c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove(),this},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                      ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

                                      '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(b){this.suppressKeyPressRepeat=!~a.inArray(b.keyCode,[40,38,9,13,27]),this.move(b)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                                        ',item:'
                                        • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.options=a.extend({},a.fn.affix.defaults,c),this.$window=a(window).on("scroll.affix.data-api",a.proxy(this.checkPosition,this)),this.$element=a(b),this.checkPosition()};b.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var b=a(document).height(),c=this.$window.scrollTop(),d=this.$element.offset(),e=this.options.offset,f=e.bottom,g=e.top,h="affix affix-top affix-bottom",i;typeof e!="object"&&(f=g=e),typeof g=="function"&&(g=e.top()),typeof f=="function"&&(f=e.bottom()),i=this.unpin!=null&&c+this.unpin<=d.top?!1:f!=null&&d.top+this.$element.height()>=b-f?"bottom":g!=null&&c<=g?"top":!1;if(this.affixed===i)return;this.affixed=i,this.unpin=i=="bottom"?d.top-c:null,this.$element.removeClass(h).addClass("affix"+(i?"-"+i:""))},a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("affix"),f=typeof c=="object"&&c;e||d.data("affix",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.defaults={offset:0},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(window.jQuery); \ No newline at end of file From 937cfa6a88919eaa6bfd3e65405093f9bd46c95d Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 18 Aug 2012 19:32:50 -0700 Subject: [PATCH 395/422] add note about .nav --- docs/javascript.html | 2 +- docs/templates/pages/javascript.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index bc5d606cd4..31ad87edda 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -566,7 +566,7 @@ $('#myModal').on('hidden', function () {

                                        Usage

                                        Via data attributes

                                        -

                                        To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use.

                                        +

                                        To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to scrollspy with the .nav class.

                                        <body data-spy="scroll" data-target=".navbar">...</body>

                                        Via JavaScript

                                        diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index b62bbfc3cb..29cce61e6d 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -496,7 +496,7 @@ $('#myModal').on('hidden', function () {

                                        {{_i}}Usage{{/i}}

                                        {{_i}}Via data attributes{{/i}}

                                        -

                                        {{_i}}To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use.{{/i}}

                                        +

                                        {{_i}}To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to scrollspy with the .nav class.{{/i}}

                                        <body data-spy="scroll" data-target=".navbar">...</body>

                                        {{_i}}Via JavaScript{{/i}}

                                        From 44e35e9dfa33fe618218c770f0495bd9596f3485 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 18 Aug 2012 19:33:46 -0700 Subject: [PATCH 396/422] fix component --- docs/templates/pages/javascript.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 29cce61e6d..b419fb3142 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -496,7 +496,7 @@ $('#myModal').on('hidden', function () {

                                        {{_i}}Usage{{/i}}

                                        {{_i}}Via data attributes{{/i}}

                                        -

                                        {{_i}}To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to scrollspy with the .nav class.{{/i}}

                                        +

                                        {{_i}}To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.{{/i}}

                                        <body data-spy="scroll" data-target=".navbar">...</body>

                                        {{_i}}Via JavaScript{{/i}}

                                        From 45dddc59a19f3e9decaa4bf0e0db3f884a0f6ff7 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 18 Aug 2012 19:54:30 -0700 Subject: [PATCH 397/422] add click option for tooltip, popover - make click default for popover --- docs/assets/js/bootstrap-popover.js | 1 + docs/assets/js/bootstrap-tooltip.js | 6 ++++-- docs/assets/js/bootstrap.js | 7 +++++-- docs/assets/js/bootstrap.min.js | 2 +- docs/javascript.html | 10 +++++----- docs/templates/pages/javascript.mustache | 8 ++++---- js/bootstrap-popover.js | 1 + js/bootstrap-tooltip.js | 6 ++++-- js/tests/unit/bootstrap-popover.js | 2 +- 9 files changed, 26 insertions(+), 17 deletions(-) diff --git a/docs/assets/js/bootstrap-popover.js b/docs/assets/js/bootstrap-popover.js index b7883c5d2c..bbf0ba4bc2 100644 --- a/docs/assets/js/bootstrap-popover.js +++ b/docs/assets/js/bootstrap-popover.js @@ -95,6 +95,7 @@ $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { placement: 'right' + , trigger: 'click' , content: '' , template: '

                                        ' }) diff --git a/docs/assets/js/bootstrap-tooltip.js b/docs/assets/js/bootstrap-tooltip.js index 1e681627ad..0b3230bc1f 100644 --- a/docs/assets/js/bootstrap-tooltip.js +++ b/docs/assets/js/bootstrap-tooltip.js @@ -44,8 +44,10 @@ this.options = this.getOptions(options) this.enabled = true - if (this.options.trigger != 'manual') { - eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' + if (this.options.trigger == 'click') { + this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) + } else if (this.options.trigger != 'manual') { + eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js index 269fb206f7..938dac9b40 100644 --- a/docs/assets/js/bootstrap.js +++ b/docs/assets/js/bootstrap.js @@ -1006,8 +1006,10 @@ this.options = this.getOptions(options) this.enabled = true - if (this.options.trigger != 'manual') { - eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' + if (this.options.trigger == 'click') { + this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) + } else if (this.options.trigger != 'manual') { + eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) @@ -1330,6 +1332,7 @@ $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { placement: 'right' + , trigger: 'click' , content: '' , template: '

                                        ' }) diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js index 539e432b13..7ad5535a77 100644 --- a/docs/assets/js/bootstrap.min.js +++ b/docs/assets/js/bootstrap.min.js @@ -3,4 +3,4 @@ * Copyright 2012 Twitter, Inc. * http://www.apache.org/licenses/LICENSE-2.0.txt */ -!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f).one("hide",function(){c.focus()})})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f+"."+this.type,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();return c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove(),this},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                        ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'

                                        '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(b){this.suppressKeyPressRepeat=!~a.inArray(b.keyCode,[40,38,9,13,27]),this.move(b)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                                          ',item:'
                                          • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.options=a.extend({},a.fn.affix.defaults,c),this.$window=a(window).on("scroll.affix.data-api",a.proxy(this.checkPosition,this)),this.$element=a(b),this.checkPosition()};b.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var b=a(document).height(),c=this.$window.scrollTop(),d=this.$element.offset(),e=this.options.offset,f=e.bottom,g=e.top,h="affix affix-top affix-bottom",i;typeof e!="object"&&(f=g=e),typeof g=="function"&&(g=e.top()),typeof f=="function"&&(f=e.bottom()),i=this.unpin!=null&&c+this.unpin<=d.top?!1:f!=null&&d.top+this.$element.height()>=b-f?"bottom":g!=null&&c<=g?"top":!1;if(this.affixed===i)return;this.affixed=i,this.unpin=i=="bottom"?d.top-c:null,this.$element.removeClass(h).addClass("affix"+(i?"-"+i:""))},a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("affix"),f=typeof c=="object"&&c;e||d.data("affix",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.defaults={offset:0},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(window.jQuery); \ No newline at end of file +!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f).one("hide",function(){c.focus()})})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger=="click"?this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this)):this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f+"."+this.type,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();return c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove(),this},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                          ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'

                                          '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(b){this.suppressKeyPressRepeat=!~a.inArray(b.keyCode,[40,38,9,13,27]),this.move(b)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                                            ',item:'
                                            • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.options=a.extend({},a.fn.affix.defaults,c),this.$window=a(window).on("scroll.affix.data-api",a.proxy(this.checkPosition,this)),this.$element=a(b),this.checkPosition()};b.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var b=a(document).height(),c=this.$window.scrollTop(),d=this.$element.offset(),e=this.options.offset,f=e.bottom,g=e.top,h="affix affix-top affix-bottom",i;typeof e!="object"&&(f=g=e),typeof g=="function"&&(g=e.top()),typeof f=="function"&&(f=e.bottom()),i=this.unpin!=null&&c+this.unpin<=d.top?!1:f!=null&&d.top+this.$element.height()>=b-f?"bottom":g!=null&&c<=g?"top":!1;if(this.affixed===i)return;this.affixed=i,this.unpin=i=="bottom"?d.top-c:null,this.$element.removeClass(h).addClass("affix"+(i?"-"+i:""))},a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("affix"),f=typeof c=="object"&&c;e||d.data("affix",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.defaults={offset:0},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(window.jQuery); \ No newline at end of file diff --git a/docs/javascript.html b/docs/javascript.html index 31ad87edda..3a207dd484 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -566,7 +566,7 @@ $('#myModal').on('hidden', function () {

                                            Usage

                                            Via data attributes

                                            -

                                            To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to scrollspy with the .nav class.

                                            +

                                            To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.

                                            <body data-spy="scroll" data-target=".navbar">...</body>

                                            Via JavaScript

                                            @@ -829,7 +829,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { trigger string 'hover' - how tooltip is triggered - hover | focus | manual + how tooltip is triggered - click | hover | focus | manual delay @@ -922,7 +922,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

                                            Live demo

                                            - Hover for popover + Click to toggle popover
                                            @@ -972,8 +972,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) { trigger string - 'hover' - how popover is triggered - hover | focus | manual + 'click' + how popover is triggered - click | hover | focus | manual title diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index b419fb3142..c91ed3eb02 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -759,7 +759,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { {{_i}}trigger{{/i}} {{_i}}string{{/i}} 'hover' - {{_i}}how tooltip is triggered{{/i}} - hover | focus | manual + {{_i}}how tooltip is triggered{{/i}} - click | hover | focus | manual {{_i}}delay{{/i}} @@ -852,7 +852,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

                                            Live demo

                                            - {{_i}}Hover for popover{{/i}} + {{_i}}Click to toggle popover{{/i}}
                                            @@ -902,8 +902,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) { {{_i}}trigger{{/i}} {{_i}}string{{/i}} - 'hover' - {{_i}}how popover is triggered{{/i}} - hover | focus | manual + 'click' + {{_i}}how popover is triggered{{/i}} - click | hover | focus | manual {{_i}}title{{/i}} diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index b7883c5d2c..bbf0ba4bc2 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -95,6 +95,7 @@ $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { placement: 'right' + , trigger: 'click' , content: '' , template: '

                                            ' }) diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js index 1e681627ad..0b3230bc1f 100644 --- a/js/bootstrap-tooltip.js +++ b/js/bootstrap-tooltip.js @@ -44,8 +44,10 @@ this.options = this.getOptions(options) this.enabled = true - if (this.options.trigger != 'manual') { - eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' + if (this.options.trigger == 'click') { + this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) + } else if (this.options.trigger != 'manual') { + eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) diff --git a/js/tests/unit/bootstrap-popover.js b/js/tests/unit/bootstrap-popover.js index daffe215c9..04d5279d24 100644 --- a/js/tests/unit/bootstrap-popover.js +++ b/js/tests/unit/bootstrap-popover.js @@ -92,7 +92,7 @@ $(function () { }) test("should destroy popover", function () { - var popover = $('
                                            ').popover().on('click.foo', function(){}) + var popover = $('
                                            ').popover({trigger: 'hover'}).on('click.foo', function(){}) ok(popover.data('popover'), 'popover has data') ok(popover.data('events').mouseover && popover.data('events').mouseout, 'popover has hover event') ok(popover.data('events').click[0].namespace == 'foo', 'popover has extra click.foo event') From c9cef741f6d97bb8549af8e4809fccce4339f2f4 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 18 Aug 2012 20:18:15 -0700 Subject: [PATCH 398/422] listen to touchstart for dropdowns on mobile --- docs/assets/js/bootstrap-dropdown.js | 8 ++++---- docs/assets/js/bootstrap.js | 8 ++++---- docs/assets/js/bootstrap.min.js | 2 +- js/bootstrap-dropdown.js | 8 ++++---- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/assets/js/bootstrap-dropdown.js b/docs/assets/js/bootstrap-dropdown.js index d71a54292d..dc4cc5ece2 100644 --- a/docs/assets/js/bootstrap-dropdown.js +++ b/docs/assets/js/bootstrap-dropdown.js @@ -140,11 +140,11 @@ $(function () { $('html') - .on('click.dropdown.data-api', clearMenus) + .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) $('body') - .on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() }) - .on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle) - .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) + .on('click.dropdown touchstart.dropdown.data-api', '.dropdown', function (e) { e.stopPropagation() }) + .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) + .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) }) }(window.jQuery); \ No newline at end of file diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js index 938dac9b40..71340e4d4e 100644 --- a/docs/assets/js/bootstrap.js +++ b/docs/assets/js/bootstrap.js @@ -715,11 +715,11 @@ $(function () { $('html') - .on('click.dropdown.data-api', clearMenus) + .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) $('body') - .on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() }) - .on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle) - .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) + .on('click.dropdown touchstart.dropdown.data-api', '.dropdown', function (e) { e.stopPropagation() }) + .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) + .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) }) }(window.jQuery);/* ========================================================= diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js index 7ad5535a77..9e4ac0425c 100644 --- a/docs/assets/js/bootstrap.min.js +++ b/docs/assets/js/bootstrap.min.js @@ -3,4 +3,4 @@ * Copyright 2012 Twitter, Inc. * http://www.apache.org/licenses/LICENSE-2.0.txt */ -!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f).one("hide",function(){c.focus()})})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger=="click"?this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this)):this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f+"."+this.type,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();return c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove(),this},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                            ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'

                                            '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(b){this.suppressKeyPressRepeat=!~a.inArray(b.keyCode,[40,38,9,13,27]),this.move(b)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                                              ',item:'
                                              • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.options=a.extend({},a.fn.affix.defaults,c),this.$window=a(window).on("scroll.affix.data-api",a.proxy(this.checkPosition,this)),this.$element=a(b),this.checkPosition()};b.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var b=a(document).height(),c=this.$window.scrollTop(),d=this.$element.offset(),e=this.options.offset,f=e.bottom,g=e.top,h="affix affix-top affix-bottom",i;typeof e!="object"&&(f=g=e),typeof g=="function"&&(g=e.top()),typeof f=="function"&&(f=e.bottom()),i=this.unpin!=null&&c+this.unpin<=d.top?!1:f!=null&&d.top+this.$element.height()>=b-f?"bottom":g!=null&&c<=g?"top":!1;if(this.affixed===i)return;this.affixed=i,this.unpin=i=="bottom"?d.top-c:null,this.$element.removeClass(h).addClass("affix"+(i?"-"+i:""))},a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("affix"),f=typeof c=="object"&&c;e||d.data("affix",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.defaults={offset:0},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(window.jQuery); \ No newline at end of file +!function(a){a(function(){"use strict",a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".item.active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide",{relatedTarget:e[0]});this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c),g=typeof c=="string"?c:f.slide;e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):g?e[g]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}"use strict";var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f).one("hide",function(){c.focus()})})})}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger=="click"?this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this)):this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f+"."+this.type,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();return c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove(),this},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
                                              ',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'

                                              '})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}"use strict",b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&d.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c;return this.query=this.$element.val(),!this.query||this.query.length"+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},move:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:a.preventDefault(),this.prev();break;case 40:a.preventDefault(),this.next()}a.stopPropagation()},keydown:function(b){this.suppressKeyPressRepeat=!~a.inArray(b.keyCode,[40,38,9,13,27]),this.move(b)},keypress:function(a){if(this.suppressKeyPressRepeat)return;this.move(a)},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'
                                                ',item:'
                                                • ',minLength:1},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery),!function(a){"use strict";var b=function(b,c){this.options=a.extend({},a.fn.affix.defaults,c),this.$window=a(window).on("scroll.affix.data-api",a.proxy(this.checkPosition,this)),this.$element=a(b),this.checkPosition()};b.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var b=a(document).height(),c=this.$window.scrollTop(),d=this.$element.offset(),e=this.options.offset,f=e.bottom,g=e.top,h="affix affix-top affix-bottom",i;typeof e!="object"&&(f=g=e),typeof g=="function"&&(g=e.top()),typeof f=="function"&&(f=e.bottom()),i=this.unpin!=null&&c+this.unpin<=d.top?!1:f!=null&&d.top+this.$element.height()>=b-f?"bottom":g!=null&&c<=g?"top":!1;if(this.affixed===i)return;this.affixed=i,this.unpin=i=="bottom"?d.top-c:null,this.$element.removeClass(h).addClass("affix"+(i?"-"+i:""))},a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("affix"),f=typeof c=="object"&&c;e||d.data("affix",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.defaults={offset:0},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(window.jQuery); \ No newline at end of file diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index d71a54292d..dc4cc5ece2 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -140,11 +140,11 @@ $(function () { $('html') - .on('click.dropdown.data-api', clearMenus) + .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) $('body') - .on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() }) - .on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle) - .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) + .on('click.dropdown touchstart.dropdown.data-api', '.dropdown', function (e) { e.stopPropagation() }) + .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) + .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) }) }(window.jQuery); \ No newline at end of file From 1e190d8036184077cac8c3acb670945853cb75ef Mon Sep 17 00:00:00 2001 From: Kai Dorschner Date: Sun, 19 Aug 2012 17:32:40 +0300 Subject: [PATCH 399/422] Fix for thumbnails in responsive design --- less/responsive-767px-max.less | 1 + 1 file changed, 1 insertion(+) diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 65e019a8fb..23a6ce86b0 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -53,6 +53,7 @@ } .thumbnails > li { float: none; + margin-left: 0; } // Make all grid-sized elements block level again [class*="span"], From c531a75ff00fd58a6d1c05a944145ff165dba837 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Aug 2012 11:53:55 -0700 Subject: [PATCH 400/422] fixes #4451 manually: add .fade to modal example in both mustache and html --- docs/javascript.html | 2 +- docs/templates/pages/javascript.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index bc5d606cd4..79de4f6a55 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -214,7 +214,7 @@ $('#myModal').on('show', function (e) {

                                                Live demo

                                                Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

                                                -