',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",trigger:"click",content:"",template:'
<strong>
+ Bold
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>
+ Italics
For emphasizing a snippet of text with stress
The following snippet of text is rendered as italicized text.
@@ -170,6 +170,23 @@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.
Emphasis classes
+Convey meaning through color with a handful of emphasis utility classes.
+
+
+Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
+Etiam porta sem malesuada magna mollis euismod.
+Donec ullamcorper nulla non metus auctor fringilla.
+Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
+Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
++<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> +<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> +<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> +<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> +<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> ++
@@ -995,7 +1012,7 @@ For example, <code><section></code> should be wrapped as inlin
Textarea
-Form control which supports multiple lines of text. Change row attribute as necessary.
Form control which supports multiple lines of text. Change rows attribute as necessary.
+
+
diff --git a/docs/getting-started.html b/docs/getting-started.html
index ee766eeb..74f91b79 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -104,7 +104,7 @@
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.
+ 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 the compiled Bootstrap files.
@@ -199,7 +199,7 @@
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.
+ With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.
Now, here's a look at a typical HTML file:
<!DOCTYPE html>
diff --git a/docs/index.html b/docs/index.html
index c6103995..57d5cd6e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -77,7 +77,7 @@
- GitHub project
- Extend
- - Version 2.1.1
+ - Version 2.1.2
diff --git a/docs/javascript.html b/docs/javascript.html
index f4c0d484..a530b21e 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1261,6 +1261,36 @@ $('#my-alert').bind('closed', function () {
+<div class="accordion" id="accordion2">
+ <div class="accordion-group">
+ <div class="accordion-heading">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+ Collapsible Group Item #1
+ </a>
+ </div>
+ <div id="collapseOne" class="accordion-body collapse in">
+ <div class="accordion-inner">
+ Anim pariatur cliche...
+ </div>
+ </div>
+ </div>
+ <div class="accordion-group">
+ <div class="accordion-heading">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+ Collapsible Group Item #2
+ </a>
+ </div>
+ <div id="collapseTwo" class="accordion-body collapse">
+ <div class="accordion-inner">
+ Anim pariatur cliche...
+ </div>
+ </div>
+ </div>
+</div>
+...
+
+ You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.
+
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 08d0dceb..db4f8459 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -178,7 +178,7 @@
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.
+ Move columns to the right 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
@@ -203,8 +203,8 @@
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.
-
- Level 1 of column
+
+ Level 1 column
Level 2
@@ -221,7 +221,111 @@
Level 1 column
<div class="row">
<div class="span6">Level 2</div>
- <div class="span6">Level 2</div>
+ <div class="span3">Level 2</div>
+ </div>
+ </div>
+</div>
+
+
+
+
+
+
+
+
+ Fluid grid system
+
+
+ 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.
+
+<div class="row-fluid">
+ <div class="span4">...</div>
+ <div class="span8">...</div>
+</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
+
+
+
+<div class="row-fluid">
+ <div class="span4">...</div>
+ <div class="span4 offset2">...</div>
+</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
+
+
+
+
+
+<div class="row-fluid">
+ <div class="span12">
+ Fluid 12
+ <div class="row-fluid">
+ <div class="span6">Fluid 6</div>
+ <div class="span6">Fluid 6</div>
+>>>>>>> 2.1.2-wip
</div>
</div>
</div>
@@ -312,20 +416,10 @@
- Phones
- 480px and below
- Fluid columns, no fixed widths
-
-
- Phones to tablets
- 767px and below
- Fluid columns, no fixed widths
-
-
- Portrait tablets
- 768px and above
- 42px
- 20px
+ Large display
+ 1200px and up
+ 70px
+ 30px
Default
@@ -334,25 +428,35 @@
20px
- Large display
- 1200px and up
- 70px
- 30px
+ Portrait tablets
+ 768px and above
+ 42px
+ 20px
+
+
+ Phones to tablets
+ 767px and below
+ Fluid columns, no fixed widths
+
+
+ Phones
+ 480px and below
+ Fluid columns, no fixed widths
-/* Landscape phones and down */
-@media (max-width: 480px) { ... }
-
-/* Landscape phone to portrait tablet */
-@media (max-width: 767px) { ... }
+/* Large desktop */
+@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
-/* Large desktop */
-@media (min-width: 1200px) { ... }
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) { ... }
+
+/* Landscape phones and down */
+@media (max-width: 480px) { ... }
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 23f63228..cc83e0d7 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -88,14 +88,14 @@
</p>
- <strong>
+ {{_i}}Bold{{/i}}
{{_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}}Italics{{/i}}
{{_i}}For emphasizing a snippet of text with stress{{/i}}
The following snippet of text is rendered as italicized text.
@@ -104,6 +104,23 @@
{{_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}}Emphasis classes{{/i}}
+ {{_i}}Convey meaning through color with a handful of emphasis utility classes.{{/i}}
+
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
+ Etiam porta sem malesuada magna mollis euismod.
+ Donec ullamcorper nulla non metus auctor fringilla.
+ Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
+
+<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
+<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+
+
@@ -932,7 +949,7 @@
{{_i}}Textarea{{/i}}
- {{_i}}Form control which supports multiple lines of text. Change row attribute as necessary.{{/i}}
+ {{_i}}Form control which supports multiple lines of text. Change rows attribute as necessary.{{/i}}
@@ -1837,8 +1854,9 @@
<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">
+ <span class="add-on"><i class="icon-envelope"></i></span>
+ <input class="span2" id="inputIcon" type="text">
+ </div>
</div>
</div>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 53936e5d..95ac1ce4 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -111,6 +111,24 @@
+
+
+
{{! /example }}
diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache
index d8e6a811..e9f86dc9 100644
--- a/docs/templates/pages/getting-started.mustache
+++ b/docs/templates/pages/getting-started.mustache
@@ -33,7 +33,7 @@
{{_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}}
+ {{_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 the compiled Bootstrap files.{{/i}}
@@ -128,7 +128,7 @@
{{_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}}With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.{{/i}}
{{_i}}Now, here's a look at a typical HTML file:{{/i}}
<!DOCTYPE html>
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index f02b8d50..10977cfd 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -2,11 +2,11 @@
Bootstrap
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
- {{_i}}Download Bootstrap{{/i}}
+ {{_i}}Download Bootstrap{{/i}}
- GitHub project
- Extend
- - Version 2.1.1
+ - Version 2.1.2
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index ba762d56..5f8883bd 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -1191,6 +1191,36 @@ $('#my-alert').bind('closed', function () {
{{! /example }}
+<div class="accordion" id="accordion2">
+ <div class="accordion-group">
+ <div class="accordion-heading">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+ {{_i}}Collapsible Group Item #1{{/i}}
+ </a>
+ </div>
+ <div id="collapseOne" class="accordion-body collapse in">
+ <div class="accordion-inner">
+ Anim pariatur cliche...
+ </div>
+ </div>
+ </div>
+ <div class="accordion-group">
+ <div class="accordion-heading">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+ {{_i}}Collapsible Group Item #2{{/i}}
+ </a>
+ </div>
+ <div id="collapseTwo" class="accordion-body collapse">
+ <div class="accordion-inner">
+ Anim pariatur cliche...
+ </div>
+ </div>
+ </div>
+</div>
+...
+
+ {{_i}}You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.{{/i}}
+
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
{{_i}}simple collapsible{{/i}}
</button>
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index f687739b..1fe73f31 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -107,7 +107,7 @@
{{_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}}
+ {{_i}}Move columns to the right 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
@@ -132,8 +132,8 @@
{{_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}}Level 1 of column{{/i}}
+
+ {{_i}}Level 1 column{{/i}}
{{_i}}Level 2{{/i}}
@@ -150,7 +150,111 @@
{{_i}}Level 1 column{{/i}}
<div class="row">
<div class="span6">{{_i}}Level 2{{/i}}</div>
- <div class="span6">{{_i}}Level 2{{/i}}</div>
+ <div class="span3">{{_i}}Level 2{{/i}}</div>
+ </div>
+ </div>
+</div>
+
+
+
+
+
+
+
+
+ {{_i}}Fluid grid system{{/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}}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>
+ <div class="span8">...</div>
+</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
+
+
+
+<div class="row-fluid">
+ <div class="span4">...</div>
+ <div class="span4 offset2">...</div>
+</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}}
+
+
+
+
+
+<div class="row-fluid">
+ <div class="span12">
+ {{_i}}Fluid 12{{/i}}
+ <div class="row-fluid">
+ <div class="span6">{{_i}}Fluid 6{{/i}}</div>
+ <div class="span6">{{_i}}Fluid 6{{/i}}</div>
+>>>>>>> 2.1.2-wip
</div>
</div>
</div>
@@ -244,20 +348,10 @@
- {{_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 above
- 42px
- 20px
+ {{_i}}Large display{{/i}}
+ 1200px and up
+ 70px
+ 30px
{{_i}}Default{{/i}}
@@ -266,25 +360,35 @@
20px
- {{_i}}Large display{{/i}}
- 1200px and up
- 70px
- 30px
+ {{_i}}Portrait tablets{{/i}}
+ 768px and above
+ 42px
+ 20px
+
+
+ {{_i}}Phones to tablets{{/i}}
+ 767px and below
+ {{_i}}Fluid columns, no fixed widths{{/i}}
+
+
+ {{_i}}Phones{{/i}}
+ 480px and below
+ {{_i}}Fluid columns, no fixed widths{{/i}}
-/* {{_i}}Landscape phones and down{{/i}} */
-@media (max-width: 480px) { ... }
-
-/* {{_i}}Landscape phone to portrait tablet{{/i}} */
-@media (max-width: 767px) { ... }
+/* {{_i}}Large desktop{{/i}} */
+@media (min-width: 1200px) { ... }
/* {{_i}}Portrait tablet to landscape and desktop{{/i}} */
@media (min-width: 768px) and (max-width: 979px) { ... }
-/* {{_i}}Large desktop{{/i}} */
-@media (min-width: 1200px) { ... }
+/* {{_i}}Landscape phone to portrait tablet{{/i}} */
+@media (max-width: 767px) { ... }
+
+/* {{_i}}Landscape phones and down{{/i}} */
+@media (max-width: 480px) { ... }
diff --git a/js/bootstrap-affix.js b/js/bootstrap-affix.js
index c49d6e9d..96bf420d 100644
--- a/js/bootstrap-affix.js
+++ b/js/bootstrap-affix.js
@@ -1,5 +1,5 @@
/* ==========================================================
- * bootstrap-affix.js v2.1.1
+ * bootstrap-affix.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#affix
* ==========================================================
* Copyright 2012 Twitter, Inc.
diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js
index 51273ab9..8500bd27 100644
--- a/js/bootstrap-alert.js
+++ b/js/bootstrap-alert.js
@@ -1,5 +1,5 @@
/* ==========================================================
- * bootstrap-alert.js v2.1.1
+ * bootstrap-alert.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2012 Twitter, Inc.
diff --git a/js/bootstrap-button.js b/js/bootstrap-button.js
index a0ab0bfa..cc2d0048 100644
--- a/js/bootstrap-button.js
+++ b/js/bootstrap-button.js
@@ -1,5 +1,5 @@
/* ============================================================
- * bootstrap-button.js v2.1.1
+ * bootstrap-button.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
* Copyright 2012 Twitter, Inc.
diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js
index 5c194b42..0d7167e1 100644
--- a/js/bootstrap-carousel.js
+++ b/js/bootstrap-carousel.js
@@ -1,5 +1,5 @@
/* ==========================================================
- * bootstrap-carousel.js v2.1.1
+ * bootstrap-carousel.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#carousel
* ==========================================================
* Copyright 2012 Twitter, Inc.
diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js
index 8116f225..73457580 100644
--- a/js/bootstrap-collapse.js
+++ b/js/bootstrap-collapse.js
@@ -1,5 +1,5 @@
/* =============================================================
- * bootstrap-collapse.js v2.1.1
+ * bootstrap-collapse.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#collapse
* =============================================================
* Copyright 2012 Twitter, Inc.
diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js
index 42370dfb..0ef9b0f9 100644
--- a/js/bootstrap-dropdown.js
+++ b/js/bootstrap-dropdown.js
@@ -1,5 +1,5 @@
/* ============================================================
- * bootstrap-dropdown.js v2.1.1
+ * bootstrap-dropdown.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index f1622b1c..041274c5 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -1,5 +1,5 @@
/* =========================================================
- * bootstrap-modal.js v2.1.1
+ * bootstrap-modal.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#modals
* =========================================================
* Copyright 2012 Twitter, Inc.
diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js
index 94137228..6f20bf59 100644
--- a/js/bootstrap-popover.js
+++ b/js/bootstrap-popover.js
@@ -1,5 +1,5 @@
/* ===========================================================
- * bootstrap-popover.js v2.1.1
+ * bootstrap-popover.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#popovers
* ===========================================================
* Copyright 2012 Twitter, Inc.
diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js
index e740ac01..5da6a7f2 100644
--- a/js/bootstrap-scrollspy.js
+++ b/js/bootstrap-scrollspy.js
@@ -1,5 +1,5 @@
/* =============================================================
- * bootstrap-scrollspy.js v2.1.1
+ * bootstrap-scrollspy.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
* =============================================================
* Copyright 2012 Twitter, Inc.
diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js
index 070deb8f..4fb3c383 100644
--- a/js/bootstrap-tab.js
+++ b/js/bootstrap-tab.js
@@ -1,5 +1,5 @@
/* ========================================================
- * bootstrap-tab.js v2.1.1
+ * bootstrap-tab.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2012 Twitter, Inc.
diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js
index ed628853..78dddbea 100644
--- a/js/bootstrap-tooltip.js
+++ b/js/bootstrap-tooltip.js
@@ -1,5 +1,5 @@
/* ===========================================================
- * bootstrap-tooltip.js v2.1.1
+ * bootstrap-tooltip.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#tooltips
* Inspired by the original jQuery.tipsy by Jason Frame
* ===========================================================
diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js
index fedc90a8..0d1cb003 100644
--- a/js/bootstrap-transition.js
+++ b/js/bootstrap-transition.js
@@ -1,5 +1,5 @@
/* ===================================================
- * bootstrap-transition.js v2.1.1
+ * bootstrap-transition.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#transitions
* ===================================================
* Copyright 2012 Twitter, Inc.
diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js
index 6ceacd61..d079da3a 100644
--- a/js/bootstrap-typeahead.js
+++ b/js/bootstrap-typeahead.js
@@ -1,5 +1,5 @@
/* =============================================================
- * bootstrap-typeahead.js v2.1.1
+ * bootstrap-typeahead.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#typeahead
* =============================================================
* Copyright 2012 Twitter, Inc.
@@ -174,7 +174,7 @@
.on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this))
- if ($.browser.webkit || $.browser.msie) {
+ if ($.browser.chrome || $.browser.webkit || $.browser.msie) {
this.$element.on('keydown', $.proxy(this.keydown, this))
}
diff --git a/less/bootstrap.less b/less/bootstrap.less
index aaa3d8a6..3055c5cc 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -1,5 +1,5 @@
/*!
- * Bootstrap v2.1.1
+ * Bootstrap v2.1.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
diff --git a/less/button-groups.less b/less/button-groups.less
index 7bd639aa..62e53f37 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -120,7 +120,7 @@
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
- .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+ .box-shadow(inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
*padding-top: 5px;
*padding-bottom: 5px;
}
@@ -147,7 +147,7 @@
// Remove the gradient and set the same inset shadow as the :active state
.dropdown-toggle {
background-image: none;
- .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+ .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
}
// Keep the hover's background when dropdown is open
diff --git a/less/buttons.less b/less/buttons.less
index 08ece791..3fd1e95f 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -24,7 +24,7 @@
border-bottom-color: darken(@btnBorder, 10%);
.border-radius(4px);
.ie7-restore-left-whitespace(); // Give IE7 some love
- .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+ .box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
// Hover state
&:hover {
@@ -51,7 +51,7 @@
background-color: darken(@white, 15%) e("\9");
background-image: none;
outline: 0;
- .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+ .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
}
// Disabled state
@@ -208,7 +208,8 @@ input[type="submit"].btn {
// Make a button look and behave like a link
.btn-link,
-.btn-link:active {
+.btn-link:active,
+.btn-link[disabled] {
background-color: transparent;
background-image: none;
.box-shadow(none);
@@ -224,3 +225,7 @@ input[type="submit"].btn {
text-decoration: underline;
background-color: transparent;
}
+.btn-link[disabled]:hover {
+ color: @grayDark;
+ text-decoration: none;
+}
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 390c3749..bed15861 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -163,6 +163,8 @@
.dropdown-submenu {
position: relative;
}
+
+// Default dropdowns
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
@@ -176,6 +178,18 @@
display: block;
}
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+ top: auto;
+ bottom: 0;
+ margin-top: 0;
+ margin-bottom: -2px;
+ -webkit-border-radius: 5px 5px 5px 0;
+ -moz-border-radius: 5px 5px 5px 0;
+ border-radius: 5px 5px 5px 0;
+}
+
+// Caret to indicate there is a submenu
.dropdown-submenu > a:after {
display: block;
content: " ";
diff --git a/less/forms.less b/less/forms.less
index e1af6766..557f8727 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -126,7 +126,7 @@ input[type="color"],
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
- .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
}
}
@@ -162,7 +162,7 @@ input[type="file"] {
// Make select elements obey height by applying a border
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
- border: 1px solid #bbb;
+ border: 1px solid @inputBorder;
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
}
diff --git a/less/mixins.less b/less/mixins.less
index 3da17ffe..9a065013 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -183,10 +183,7 @@
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@borderColor, 10%);
- // Write out in full since the lighten() function isn't easily escaped
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
- box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%));
}
}
// Give a small background color for input-prepend/-append
@@ -251,10 +248,12 @@
}
// Drop shadows
-.box-shadow(@shadow) {
- -webkit-box-shadow: @shadow;
- -moz-box-shadow: @shadow;
- box-shadow: @shadow;
+.box-shadow(@shadowA, @shadowB:X, ...){
+ // Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
+ @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
+ -webkit-box-shadow: @props;
+ -moz-box-shadow: @props;
+ box-shadow: @props;
}
// Transitions
@@ -296,7 +295,7 @@
.skew(@x, @y) {
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
- -ms-transform: skew(@x, @y);
+ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
}
diff --git a/less/modals.less b/less/modals.less
index 81cacb7a..a0401c4d 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -95,4 +95,8 @@
.btn-group .btn + .btn {
margin-left: -1px;
}
+ // and override it for block buttons as well
+ .btn-block + .btn-block {
+ margin-left: 0;
+ }
}
diff --git a/less/navbar.less b/less/navbar.less
index 64e2eb7e..3514c40e 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -202,7 +202,7 @@
.navbar-fixed-top,
.navbar-static-top {
.navbar-inner {
- .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
+ .box-shadow(inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1));
}
}
@@ -210,7 +210,7 @@
.navbar-fixed-bottom {
bottom: 0;
.navbar-inner {
- .box-shadow(~"inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)");
+ .box-shadow(inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1));
}
}
@@ -262,9 +262,7 @@
color: @navbarLinkColorActive;
text-decoration: none;
background-color: @navbarLinkBackgroundActive;
- -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
- -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
- box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
+ .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
}
// Navbar button for toggling navbar items in responsive layouts
@@ -276,7 +274,7 @@
margin-left: 5px;
margin-right: 5px;
.buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
- .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
+ .box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075));
}
.navbar .btn-navbar .icon-bar {
display: block;
@@ -448,7 +446,7 @@
color: @white;
background-color: @navbarInverseSearchBackground;
border-color: @navbarInverseSearchBorder;
- .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15));
.transition(none);
.placeholder(@navbarInverseSearchPlaceholderColor);
diff --git a/less/pager.less b/less/pager.less
index a7629d3d..da242536 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -12,28 +12,29 @@
.pager li {
display: inline;
}
-.pager a,
-.pager span {
+.pager li > a,
+.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
.border-radius(15px);
}
-.pager a:hover {
+.pager li > a:hover {
text-decoration: none;
background-color: #f5f5f5;
}
-.pager .next a,
-.pager .next span {
+.pager .next > a,
+.pager .next > span {
float: right;
}
-.pager .previous a {
+.pager .previous > a,
+.pager .previous > span {
float: left;
}
-.pager .disabled a,
-.pager .disabled a:hover,
-.pager .disabled span {
+.pager .disabled > a,
+.pager .disabled > a:hover,
+.pager .disabled > span {
color: @grayLight;
background-color: #fff;
cursor: default;
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 36744d89..0486371a 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -66,7 +66,7 @@
.transition(width .6s ease);
}
.progress .bar + .bar {
- .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
+ .box-shadow(inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15));
}
// Striped bars
diff --git a/less/reset.less b/less/reset.less
index fc27e9c8..2901a85c 100644
--- a/less/reset.less
+++ b/less/reset.less
@@ -77,8 +77,11 @@ sub {
// -------------------------
img {
- max-width: 100%; // Make images inherently responsive
- height: auto; // Make images inherently responsive
+ /* Responsive images (ensure images don't scale beyond their parents) */
+ max-width: 100%; /* Part 1: Set a maxium relative to the parent */
+ width: auto\9; /* IE7-8 need help adjusting responsive images */
+ height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
+
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less
index 3202c190..6e426104 100644
--- a/less/responsive-767px-max.less
+++ b/less/responsive-767px-max.less
@@ -61,14 +61,18 @@
.row-fluid [class*="span"] {
float: none;
display: block;
- width: auto;
+ width: 100%;
margin-left: 0;
+ .box-sizing(border-box);
}
.span12,
.row-fluid .span12 {
width: 100%;
.box-sizing(border-box);
}
+ .row-fluid [class*="offset"]:first-child {
+ margin-left: 0;
+ }
// FORM FIELDS
// -----------
@@ -132,24 +136,26 @@
}
// Remove the horizontal form styles
- .form-horizontal .control-group > label {
- float: none;
- width: auto;
- padding-top: 0;
- text-align: left;
- }
- // Move over all input controls and content
- .form-horizontal .controls {
- margin-left: 0;
- }
- // Move the options list down to align with labels
- .form-horizontal .control-list {
- padding-top: 0; // has to be padding because margin collaspes
- }
- // Move over buttons in .form-actions to align with .controls
- .form-horizontal .form-actions {
- padding-left: 10px;
- padding-right: 10px;
+ .form-horizontal {
+ .control-label {
+ float: none;
+ width: auto;
+ padding-top: 0;
+ text-align: left;
+ }
+ // Move over all input controls and content
+ .controls {
+ margin-left: 0;
+ }
+ // Move the options list down to align with labels
+ .control-list {
+ padding-top: 0; // has to be padding because margin collaspes
+ }
+ // Move over buttons in .form-actions to align with .controls
+ .form-actions {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
}
// Modals
diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
index 4ffa5a9f..c454dd5e 100644
--- a/less/responsive-navbar.less
+++ b/less/responsive-navbar.less
@@ -129,7 +129,7 @@
margin: (@baseLineHeight / 2) 0;
border-top: 1px solid @navbarBackground;
border-bottom: 1px solid @navbarBackground;
- .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
+ .box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1));
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
diff --git a/less/responsive.less b/less/responsive.less
index 87b34708..e56042e4 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Responsive v2.1.1
+ * Bootstrap Responsive v2.1.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 342dcf70..7a7496a6 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -32,20 +32,21 @@ a:hover {
// Images
// -------------------------
+// Rounded corners
.img-rounded {
.border-radius(6px);
}
+// Add polaroid-esque trim
.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);
+ .box-shadow(0 1px 3px rgba(0,0,0,.1));
}
+// Perfect circle
.img-circle {
- .border-radius(500px);
+ .border-radius(500px); // crank the border-radius so it works with most reasonably sized images
}
diff --git a/less/sprites.less b/less/sprites.less
index 9bf970fa..6d3aaef3 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -30,8 +30,6 @@
/* White icons with optional class, or on hover/active states of certain elements */
.icon-white,
-.nav-tabs > .active > a > [class^="icon-"],
-.nav-tabs > .active > a > [class*=" icon-"],
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
diff --git a/less/tables.less b/less/tables.less
index 9816d897..e5b3f397 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -133,7 +133,7 @@ table {
colgroup + tbody tr:first-child td:last-child {
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
- -moz-border-radius-topleft: 4px;
+ -moz-border-radius-topright: 4px;
}
}
@@ -180,7 +180,7 @@ table [class*=span],
}
// Change the column widths to account for td/th padding
-table {
+.table {
.span1 { .tableColumns(1); }
.span2 { .tableColumns(2); }
.span3 { .tableColumns(3); }
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 47151433..c0cb1485 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -98,6 +98,44 @@
+
+
+
+ Responsive images
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
diff --git a/less/type.less b/less/type.less
index 14f65f2f..2e0f386e 100644
--- a/less/type.less
+++ b/less/type.less
@@ -11,7 +11,7 @@ p {
}
.lead {
margin-bottom: @baseLineHeight;
- font-size: 20px;
+ font-size: @baseFontSize * 1.5;
font-weight: 200;
line-height: @baseLineHeight * 1.5;
}
@@ -32,9 +32,23 @@ em {
cite {
font-style: normal;
}
+
+// Utility classes
.muted {
color: @grayLight;
}
+.text-warning {
+ color: @warningText;
+}
+.text-error {
+ color: @errorText;
+}
+.text-info {
+ color: @infoText;
+}
+.text-success {
+ color: @successText;
+}
// Headings
diff --git a/package.json b/package.json
index f0be5d5f..e9b11d32 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "bootstrap"
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
- , "version": "2.1.1"
+ , "version": "2.1.2"
, "keywords": ["bootstrap", "css"]
, "homepage": "http://twitter.github.com/bootstrap/"
, "author": "Twitter Inc."