',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 ee766eeb14..74f91b7958 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 c610399546..57d5cd6e84 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 f4c0d484d8..a530b21e0d 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 08d0dceb85..db4f84599f 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 23f63228f5..cc83e0d733 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 53936e5d0d..95ac1ce4c4 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 d8e6a811a6..e9f86dc986 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 f02b8d505d..10977cfd3e 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 ba762d56bb..5f8883bdf7 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 f687739b38..1fe73f3138 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 c49d6e9dac..96bf420d24 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 51273ab9d2..8500bd273c 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 a0ab0bfad5..cc2d0048fd 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 5c194b4287..0d7167e1c2 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 8116f22553..7345758000 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 42370dfbef..0ef9b0f9d2 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 f1622b1c65..041274c5bc 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 941372285c..6f20bf5921 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 e740ac01f7..5da6a7f287 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 070deb8f4d..4fb3c38399 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 ed62885316..78dddbeade 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 fedc90a83e..0d1cb003bf 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 6ceacd61dc..d079da3a72 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 aaa3d8a6f2..3055c5cc4e 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 7bd639aac4..62e53f373a 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 08ece791c4..3fd1e95f5f 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 390c374974..bed158612f 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 e1af6766a1..557f872780 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 3da17ffe6c..9a0650132c 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 81cacb7ab1..a0401c4d11 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 64e2eb7ea3..3514c40e0f 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 a7629d3db7..da24253672 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 36744d89c7..0486371aa8 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 fc27e9c878..2901a85c80 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 3202c1905c..6e42610475 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 4ffa5a9fec..c454dd5e39 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 87b3470853..e56042e4e2 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 342dcf7051..7a7496a64e 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 9bf970fa9b..6d3aaef323 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 9816d89738..e5b3f39799 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 4715143397..c0cb1485e9 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 14f65f2fa1..2e0f386eef 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 f0be5d5f42..e9b11d329a 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."