',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 ee766eeb1..74f91b795 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 c61039954..57d5cd6e8 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 f4c0d484d..a530b21e0 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 08d0dceb8..db4f84599 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 23f63228f..cc83e0d73 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 53936e5d0..95ac1ce4c 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 d8e6a811a..e9f86dc98 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 f02b8d505..10977cfd3 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 ba762d56b..5f8883bdf 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 f687739b3..1fe73f313 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 c49d6e9da..96bf420d2 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 51273ab9d..8500bd273 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 a0ab0bfad..cc2d0048f 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 5c194b428..0d7167e1c 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 8116f2255..734575800 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 42370dfbe..0ef9b0f9d 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 f1622b1c6..041274c5b 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 941372285..6f20bf592 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 e740ac01f..5da6a7f28 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 070deb8f4..4fb3c3839 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 ed6288531..78dddbead 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 fedc90a83..0d1cb003b 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 6ceacd61d..d079da3a7 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 aaa3d8a6f..3055c5cc4 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 7bd639aac..62e53f373 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 08ece791c..3fd1e95f5 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 390c37497..bed158612 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 e1af6766a..557f87278 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 3da17ffe6..9a0650132 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 81cacb7ab..a0401c4d1 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 64e2eb7ea..3514c40e0 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 a7629d3db..da2425367 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 36744d89c..0486371aa 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 fc27e9c87..2901a85c8 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 3202c1905..6e4261047 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 4ffa5a9fe..c454dd5e3 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 87b347085..e56042e4e 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 342dcf705..7a7496a64 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 9bf970fa9..6d3aaef32 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 9816d8973..e5b3f3979 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 471514339..c0cb1485e 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 14f65f2fa..2e0f386ee 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 f0be5d5f4..e9b11d329 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."