',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:'
h6. Heading 6
Body copy
-Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).
Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
@@ -154,14 +154,14 @@<small>
</p>
- <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 @@<em>
Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
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> ++
@@ -189,7 +206,7 @@
<abbr class="initialism">
HTML is the best thing since sliced bread.
<abbr title="attribute" class="initialism">attr</abbr>+
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
@@ -233,7 +250,7 @@
<address>
Blockquotes
For quoting blocks of content from another source within your document.
-Default blockqoute
+Default blockquote
Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
@@ -686,6 +703,12 @@Optional row classes
Indicates a dangerous or potentially negative action. ++ + +.warning+Indicates a warning that might need attention. +- .info@@ -717,12 +740,18 @@Optional row classes
02/04/2012 Declined + + 3 TB - Monthly 03/04/2012 Pending + 4 +TB - Monthly +04/04/2012 +Call in to confirm +
Inputs
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.
Disabled inputs
Validation states
-Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.
Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.
+
+
+
+ Username is taken
+
+
@@ -1539,7 +1575,7 @@
@@ -1881,7 +1917,9 @@
Anchor element
Heads up!
- We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.
+ We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
Button element
@@ -1756,7 +1792,7 @@Icon glyphs
Glyphicons attribution
-Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
+Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
@@ -1881,7 +1917,9 @@
Form fields
<label class="control-label" for="inputIcon">Email address</label> <div class="controls"> <div class="input-prepend"> - <span class="add-on"><i class="icon-envelope"><i><span><input class="span2" id="inputIcon" type="text"> + <span class="add-on"><i class="icon-envelope"></i></span> + <input class="span2" id="inputIcon" type="text"> + </div> </div> </div> diff --git a/docs/components.html b/docs/components.html index 828ad7be2e2d..f47aecbf1951 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1473,13 +1473,23 @@Disabled and active states
-<div class="pagination ">
+<div class="pagination">
<ul>
<li class="disabled"><a href="#">Prev</a></li>
<li class="active"><a href="#">1</a></li>
...
</ul>
</div>
+
+ You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.
++<div class="pagination"> + <ul> + <li class="disabled"><span>Prev</span></li> + <li class="active"><span>1</span></li> + ... + </ul> +</div>
Alignment
@@ -1769,7 +1779,7 @@Example page header Subtext for header
<div class="page-header"> - <h1>Example page header</h1> + <h1>Example page header <small>Subtext for header</small></h1> </div>@@ -1941,7 +1951,7 @@
Default alert
Dismiss buttons
Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.
<a href="#" class="close" data-dismiss="alert">×</button>+
<a href="#" class="close" data-dismiss="alert">×</a>
Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.
<button type="button" class="close" data-dismiss="alert">×</button>diff --git a/docs/components/alert.html b/docs/components/alert.html deleted file mode 100644 index 3e7d935e55db..000000000000 --- a/docs/components/alert.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/breadcrumb.html b/docs/components/breadcrumb.html
deleted file mode 100644
index 5f273442be65..000000000000
--- a/docs/components/breadcrumb.html
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
-
- Bootstrap alert
- -- -
-
- Warning! Best check yo self, you're not looking too good.
-
-
-
-
-
-
-
-
- - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/button-group.html b/docs/components/button-group.html
deleted file mode 100644
index 80ee9e391060..000000000000
--- a/docs/components/button-group.html
+++ /dev/null
@@ -1,71 +0,0 @@
-
-
-
-
- Bootstrap breadcrumb
- -- - - - - -
-
-
-
-
- - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/button.html b/docs/components/button.html
deleted file mode 100644
index 2d1569307f76..000000000000
--- a/docs/components/button.html
+++ /dev/null
@@ -1,61 +0,0 @@
-
-
-
-
- Bootstrap button group
- -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/dropdown.html b/docs/components/dropdown.html
deleted file mode 100644
index 5ddbe6625d7c..000000000000
--- a/docs/components/dropdown.html
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
-
- Bootstrap button
- - - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/form.html b/docs/components/form.html
deleted file mode 100644
index 0f70ccb408b6..000000000000
--- a/docs/components/form.html
+++ /dev/null
@@ -1,100 +0,0 @@
-
-
-
-
- Bootstrap dropdown
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/icon.html b/docs/components/icon.html
deleted file mode 100644
index 473492269a7e..000000000000
--- a/docs/components/icon.html
+++ /dev/null
@@ -1,60 +0,0 @@
-
-
-
-
- Bootstrap form
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/modal.html b/docs/components/modal.html
deleted file mode 100644
index 04aaa771b448..000000000000
--- a/docs/components/modal.html
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
-
-
- Bootstrap form
- -Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- - - - -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/nav.html b/docs/components/nav.html
deleted file mode 100644
index a58aa449e100..000000000000
--- a/docs/components/nav.html
+++ /dev/null
@@ -1,77 +0,0 @@
-
-
-
-
- Bootstrap modal
- -- -
-
-
-
-
-
-
- Modal header
-
-
-
- One fine body...
-
-
-
-
-
- - - -
- - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/pagination.html b/docs/components/pagination.html
deleted file mode 100644
index ef56df2eaa8e..000000000000
--- a/docs/components/pagination.html
+++ /dev/null
@@ -1,70 +0,0 @@
-
-
-
-
- Bootstrap nav
- -- - - -
- - - - - -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/table.html b/docs/components/table.html
deleted file mode 100644
index a3c898270c81..000000000000
--- a/docs/components/table.html
+++ /dev/null
@@ -1,89 +0,0 @@
-
-
-
-
- Bootstrap progress bar
- -- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/components/tooltip.html b/docs/components/tooltip.html
deleted file mode 100644
index afbaa9fad975..000000000000
--- a/docs/components/tooltip.html
+++ /dev/null
@@ -1,62 +0,0 @@
-
-
-
-
- Bootstrap form
- -| # | -First Name | -Last Name | -Username | -
|---|---|---|---|
| 1 | -Mark | -Otto | -@mdo | -
| 2 | -Jacob | -Thornton | -@fat | -
| 3 | -Larry | -the Bird | -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 952c246548a0..5ef902688187 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -74,7 +74,7 @@
Bootstrap tooltip
- -- -
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
- - - - -Getting started
-Overview of the project, it's contents, and how to get started with a simple template.
+Overview of the project, its contents, and how to get started with a simple template.
Getting started
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.
@@ -114,7 +114,7 @@
Download compiled
Download source
-Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.
+Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.
2. File structure
└── README.mdThis is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.
Please note that all JavaScript plugins require jQuery to be included.
@@ -201,17 +202,20 @@4. Basic HTML template
With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.
Now, here's a look at a typical HTML file:
+<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
</head>
<body>
<h1>Hello, world!</h1>
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
To make this a Bootstrapped template, just include the appropriate CSS and JS files:
+<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
@@ -220,6 +224,7 @@ 4. Basic HTML template
</head>
<body>
<h1>Hello, world!</h1>
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
diff --git a/docs/index.html b/docs/index.html
index 74a45aa6dfd5..c6103995462b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -77,7 +77,7 @@ Bootstrap
- GitHub project
- Extend -
- Version 2.1.0 +
- Version 2.1.1
Events
-
@@ -479,7 +479,7 @@
Via data attributes
Add data-toggle="dropdown" to a link or button to toggle a dropdown.
<div class="dropdown">
- <a class="dropdown-toggle" href="#">Dropdown trigger</a>
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
@@ -1035,7 +1035,7 @@ Alert messages bootstrap-alert.js
Example alerts
- Add dismiss functionality to all alerge messages with this plugin.
+ Add dismiss functionality to all alert messages with this plugin.
@@ -1261,6 +1261,36 @@ Example accordion
+<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>
@@ -1606,11 +1636,11 @@ Usage
Via data attributes
To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.
- <div data-spy="affix" data-offset-top="200">...</body>
+ <div data-spy="affix" data-offset-top="200">...</div>
Heads up!
- It's up to you to manage the position of a pinned element. This is done by styling affix, affix-top, and affix-bottom.
+ You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
Via JavaScript
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index a8edd1705b1e..75cb761d53e3 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -117,7 +117,7 @@ Typography and links
- Remove
marginon the body - Set
background-color: white;on thebody
- - Use the
@baseFontFamily,@baseFontSize, and@baseLineHeightattributes as our typographyic base
+ - Use the
@baseFontFamily,@baseFontSize, and@baseLineHeightattributes as our typographic base - Set the global link color via
@linkColorand apply link underlines only on:hover
These styles can be found within scaffolding.less.
@@ -138,7 +138,7 @@Default grid system
Live grid example
-The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
+The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
1
@@ -176,7 +176,7 @@ Basic grid HTML
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
@@ -199,8 +199,6 @@ Offsetting columns
Nesting columns
To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.
Example
-Here two nested .span4 columns are placed within a .span8.
Level 1 of column
@@ -415,14 +413,16 @@
- Phones
- 480px and below
- Fluid columns, no fixed widths
+ Large display
+ 1200px and up
+ 70px
+ 30px
- Phones to tablets
- 767px and below
- Fluid columns, no fixed widths
+ Default
+ 980px and up
+ 60px
+ 20px
Portrait tablets
@@ -431,31 +431,29 @@ 20px
- Default
- 980px and up
- 60px
- 20px
+ Phones to tablets
+ 767px and below
+ Fluid columns, no fixed widths
- Large display
- 1200px and up
- 70px
- 30px
+ Phones
+ 480px and below
+ Fluid columns, no fixed widths
+
+
@@ -124,7 +141,7 @@
-
@@ -170,7 +187,7 @@
{{! /example }}
@@ -920,7 +949,7 @@
+
@@ -33,18 +33,18 @@
-
@@ -73,6 +73,7 @@
└── README.md
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index c9e1b612b058..5f8883bdf7a5 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -306,7 +306,7 @@ $('#myModal').on('hidden', function () {
-
Supported devices
Supported devices
-/* 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 46b155234339..cc83e0d733ed 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -49,7 +49,7 @@
{{! Body copy }}
{{_i}}Body copy{{/i}}
-{{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}
{{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).{{/i}}
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
@@ -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> ++
@@ -124,7 +141,7 @@
{{_i}}HTML is the best thing since sliced bread.{{/i}}
<abbr title="attribute" class="initialism">attr</abbr>+
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
@@ -170,7 +187,7 @@
{{_i}}Blockquotes{{/i}}
{{_i}}For quoting blocks of content from another source within your document.{{/i}}
-{{_i}}Default blockqoute{{/i}}
+{{_i}}Default blockquote{{/i}}
{{_i}}Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}
@@ -623,6 +640,12 @@{{_i}}Indicates a dangerous or potentially negative action.{{/i}} ++ + +.warning+{{_i}}Indicates a warning that might need attention.{{/i}} +- .info@@ -654,12 +677,18 @@02/04/2012 Declined + + 3 TB - Monthly 03/04/2012 Pending + 4 +TB - Monthly +04/04/2012 +Call in to confirm +
{{_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}}
{{_i}}Validation states{{/i}}
-{{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}
{{_i}}Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}
+
+
+
+ {{_i}}Username is taken{{/i}}
+
+
@@ -1476,7 +1512,7 @@
@@ -1818,7 +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 8187ce084a3e..53936e5d0dde 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1402,13 +1402,23 @@
{{_i}}Heads up!{{/i}}
- {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.{{/i}}
+ {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.{{/i}}
Button element
@@ -1693,7 +1729,7 @@Glyphicons attribution
-{{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}
+{{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}
@@ -1818,7 +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 8187ce084a3e..53936e5d0dde 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1402,13 +1402,23 @@
-<div class="pagination ">
+<div class="pagination">
<ul>
<li class="disabled"><a href="#">Prev</a></li>
<li class="active"><a href="#">1</a></li>
...
</ul>
</div>
+
+ {{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}
++<div class="pagination"> + <ul> + <li class="disabled"><span>Prev</span></li> + <li class="active"><span>1</span></li> + ... + </ul> +</div>
{{_i}}Alignment{{/i}}
@@ -1698,7 +1708,7 @@
<div class="page-header">
- <h1>{{_i}}Example page header{{/i}}</h1>
+ <h1>{{_i}}Example page header{{/i}} <small>{{_i}}Subtext for header{{/i}}</small></h1>
</div>
@@ -1870,7 +1880,7 @@
{{_i}}Dismiss buttons{{/i}}
{{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}
<a href="#" class="close" data-dismiss="alert">×</button>+
<a href="#" class="close" data-dismiss="alert">×</a>
{{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}
<button type="button" class="close" data-dismiss="alert">×</button>diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 8b58e62b72c8..513124c27f2e 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -3,7 +3,7 @@
{{_i}}Getting started{{/i}}
-{{_i}}Overview of the project, it's contents, and how to get started with a simple template.{{/i}}
+{{_i}}Overview of the project, its contents, and how to get started with a simple template.{{/i}}
{{_i}}1. Download{{/i}}
{{_i}}Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.{{/i}}
+{{_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}}
-
Download compiled
-Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.
- +{{_i}}Download compiled{{/i}}
+{{_i}}Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.{{/i}}
+Download source
-Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.
- +Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.
+{{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.{{/i}}
{{_i}}Please note that all JavaScript plugins require jQuery to be included.{{/i}}
@@ -130,17 +131,20 @@{{_i}}With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.{{/i}}
{{_i}}Now, here's a look at a typical HTML file:{{/i}}
+<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
</head>
<body>
<h1>Hello, world!</h1>
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
{{_i}}To make this a Bootstrapped template, just include the appropriate CSS and JS files:{{/i}}
+<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
@@ -149,6 +153,7 @@
</head>
<body>
<h1>Hello, world!</h1>
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
@@ -199,9 +204,9 @@
{{_i}}What next?{{/i}}
- Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.
- Visit the Bootstrap docs
- Customize Bootstrap
+ {{_i}}Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.{{/i}}
+ {{_i}}Visit the Bootstrap docs{{/i}}
+ {{_i}}Customize Bootstrap{{/i}}
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 654a988469d5..f02b8d505db7 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.0
+ - Version 2.1.1
@@ -409,7 +409,7 @@ $('#myModal').on('hidden', function () {
{{_i}}Add data-toggle="dropdown" to a link or button to toggle a dropdown.{{/i}}
<div class="dropdown">
- <a class="dropdown-toggle" href="#">Dropdown trigger</a>
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
@@ -965,7 +965,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}Example alerts{{/i}}
- {{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}
+ {{_i}}Add dismiss functionality to all alert messages with this plugin.{{/i}}
@@ -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>
@@ -1536,11 +1566,11 @@ $('.carousel').carousel({
{{_i}}Via data attributes{{/i}}
{{_i}}To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.{{/i}}
- <div data-spy="affix" data-offset-top="200">...</body>
+ <div data-spy="affix" data-offset-top="200">...</div>
{{_i}}Heads up!{{/i}}
- {{_i}}It's up to you to manage the position of a pinned element. This is done by styling affix, affix-top, and affix-bottom.{{/i}}
+ {{_i}}You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.{{/i}}
{{_i}}Via JavaScript{{/i}}
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 724ab5e53eed..0d9c191e3664 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -46,7 +46,7 @@
- {{_i}}Remove
marginon the body{{/i}} - {{_i}}Set
background-color: white;on thebody{{/i}}
- - {{_i}}Use the
@baseFontFamily,@baseFontSize, and@baseLineHeightattributes as our typographyic base{{/i}}
+ - {{_i}}Use the
@baseFontFamily,@baseFontSize, and@baseLineHeightattributes as our typographic base{{/i}} - {{_i}}Set the global link color via
@linkColorand apply link underlines only on:hover{{/i}}
{{_i}}These styles can be found within scaffolding.less.{{/i}}
@@ -67,7 +67,7 @@{{_i}}Live grid example{{/i}}
-{{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}
+{{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}
1
@@ -105,7 +105,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
@@ -128,8 +128,6 @@
{{_i}}Nesting columns{{/i}}
{{_i}}To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}
{{_i}}Example{{/i}}
-{{_i}}Here two nested .span4 columns are placed within a .span8.{{/i}}
{{_i}}Level 1 of column{{/i}}
@@ -347,14 +345,16 @@
- {{_i}}Phones{{/i}}
- 480px and below
- {{_i}}Fluid columns, no fixed widths{{/i}}
+ {{_i}}Large display{{/i}}
+ 1200px and up
+ 70px
+ 30px
- {{_i}}Phones to tablets{{/i}}
- 767px and below
- {{_i}}Fluid columns, no fixed widths{{/i}}
+ {{_i}}Default{{/i}}
+ 980px and up
+ 60px
+ 20px
{{_i}}Portrait tablets{{/i}}
@@ -363,31 +363,29 @@
20px
- {{_i}}Default{{/i}}
- 980px and up
- 60px
- 20px
+ {{_i}}Phones to tablets{{/i}}
+ 767px and below
+ {{_i}}Fluid columns, no fixed widths{{/i}}
- {{_i}}Large display{{/i}}
- 1200px and up
- 70px
- 30px
+ {{_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 c6b8208a6ef9..c49d6e9dac09 100644
--- a/js/bootstrap-affix.js
+++ b/js/bootstrap-affix.js
@@ -1,5 +1,5 @@
/* ==========================================================
- * bootstrap-affix.js v2.1.0
+ * bootstrap-affix.js v2.1.1
* 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 4dd31adb22f6..51273ab9d2d8 100644
--- a/js/bootstrap-alert.js
+++ b/js/bootstrap-alert.js
@@ -1,5 +1,5 @@
/* ==========================================================
- * bootstrap-alert.js v2.1.0
+ * bootstrap-alert.js v2.1.1
* 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 d0413d6efbc7..a0ab0bfad521 100644
--- a/js/bootstrap-button.js
+++ b/js/bootstrap-button.js
@@ -1,5 +1,5 @@
/* ============================================================
- * bootstrap-button.js v2.1.0
+ * bootstrap-button.js v2.1.1
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
* Copyright 2012 Twitter, Inc.
@@ -51,7 +51,7 @@
}
Button.prototype.toggle = function () {
- var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
+ var $parent = this.$element.closest('[data-toggle="buttons-radio"]')
$parent && $parent
.find('.active')
diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js
index 0b87eb8a2459..5c194b4287ba 100644
--- a/js/bootstrap-carousel.js
+++ b/js/bootstrap-carousel.js
@@ -1,5 +1,5 @@
/* ==========================================================
- * bootstrap-carousel.js v2.1.0
+ * bootstrap-carousel.js v2.1.1
* 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 391d91281bc2..8116f2255388 100644
--- a/js/bootstrap-collapse.js
+++ b/js/bootstrap-collapse.js
@@ -1,5 +1,5 @@
/* =============================================================
- * bootstrap-collapse.js v2.1.0
+ * bootstrap-collapse.js v2.1.1
* 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 ab601e9e5bf7..42370dfbef26 100644
--- a/js/bootstrap-dropdown.js
+++ b/js/bootstrap-dropdown.js
@@ -1,5 +1,5 @@
/* ============================================================
- * bootstrap-dropdown.js v2.1.0
+ * bootstrap-dropdown.js v2.1.1
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.
@@ -110,7 +110,7 @@
if (!selector) {
selector = $this.attr('href')
- selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+ selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
@@ -142,7 +142,7 @@
$('html')
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
$('body')
- .on('click.dropdown touchstart.dropdown.data-api', '.dropdown', function (e) { e.stopPropagation() })
+ .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
})
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index 62fbc951b5dd..f1622b1c65f7 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -1,5 +1,5 @@
/* =========================================================
- * bootstrap-modal.js v2.1.0
+ * bootstrap-modal.js v2.1.1
* 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 4ce7a16d3f3c..941372285cb3 100644
--- a/js/bootstrap-popover.js
+++ b/js/bootstrap-popover.js
@@ -1,5 +1,5 @@
/* ===========================================================
- * bootstrap-popover.js v2.1.0
+ * bootstrap-popover.js v2.1.1
* 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 df70ebdd715d..e740ac01f710 100644
--- a/js/bootstrap-scrollspy.js
+++ b/js/bootstrap-scrollspy.js
@@ -1,5 +1,5 @@
/* =============================================================
- * bootstrap-scrollspy.js v2.1.0
+ * bootstrap-scrollspy.js v2.1.1
* 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 df2a7f7a06fa..070deb8f4dda 100644
--- a/js/bootstrap-tab.js
+++ b/js/bootstrap-tab.js
@@ -1,5 +1,5 @@
/* ========================================================
- * bootstrap-tab.js v2.1.0
+ * bootstrap-tab.js v2.1.1
* 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 4d06dfcc9b16..ed6288531604 100644
--- a/js/bootstrap-tooltip.js
+++ b/js/bootstrap-tooltip.js
@@ -1,5 +1,5 @@
/* ===========================================================
- * bootstrap-tooltip.js v2.1.0
+ * bootstrap-tooltip.js v2.1.1
* 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 f0913d861a06..fedc90a83e1b 100644
--- a/js/bootstrap-transition.js
+++ b/js/bootstrap-transition.js
@@ -1,5 +1,5 @@
/* ===================================================
- * bootstrap-transition.js v2.1.0
+ * bootstrap-transition.js v2.1.1
* 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 ae57221c11a7..c2ccdea21838 100644
--- a/js/bootstrap-typeahead.js
+++ b/js/bootstrap-typeahead.js
@@ -1,5 +1,5 @@
/* =============================================================
- * bootstrap-typeahead.js v2.1.0
+ * bootstrap-typeahead.js v2.1.1
* 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/js/tests/unit/bootstrap-button.js b/js/tests/unit/bootstrap-button.js
index 03c4a8e9d57e..b5d08349993c 100644
--- a/js/tests/unit/bootstrap-button.js
+++ b/js/tests/unit/bootstrap-button.js
@@ -62,7 +62,7 @@ $(function () {
ok(btn.hasClass('active'), 'btn has class active')
})
- test("should toggle active when btn children are clicked within btn-group", function () {
+ test("should toggle active when btn children are clicked within btn-group", function () {
var btngroup = $('')
, btn = $('')
, inner = $('')
@@ -74,4 +74,23 @@ $(function () {
ok(btn.hasClass('active'), 'btn has class active')
})
+ test("should check for closest matching toggle", function () {
+ var group = $("")
+ , btn1 = $("")
+ , btn2 = $("")
+ , wrap = $("")
+
+ wrap.append(btn1, btn2)
+
+ group
+ .append(wrap)
+ .appendTo($('#qunit-fixture'))
+
+ ok(btn1.hasClass('active'), 'btn1 has active class')
+ ok(!btn2.hasClass('active'), 'btn2 does not have active class')
+ btn2.click()
+ ok(!btn1.hasClass('active'), 'btn1 does not have active class')
+ ok(btn2.hasClass('active'), 'btn2 has active class')
+ })
+
})
\ No newline at end of file
diff --git a/js/tests/unit/bootstrap-dropdown.js b/js/tests/unit/bootstrap-dropdown.js
index 4e52c8485e71..3a617692b380 100644
--- a/js/tests/unit/bootstrap-dropdown.js
+++ b/js/tests/unit/bootstrap-dropdown.js
@@ -61,6 +61,24 @@ $(function () {
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
})
+ test("should test if element has a # before assuming it's a selector", function () {
+ var dropdownHTML = '- '
+ + '
- ' + + 'Dropdown' + + '' + + ' ' + + '
- '
+ '
- '
diff --git a/js/tests/unit/bootstrap-tooltip.js b/js/tests/unit/bootstrap-tooltip.js
index 2eb8c8f7c9ac..9844d6460f7b 100644
--- a/js/tests/unit/bootstrap-tooltip.js
+++ b/js/tests/unit/bootstrap-tooltip.js
@@ -113,7 +113,7 @@ $(function () {
}, 50)
})
- test("should show tooltip if leave event hasn't occured before delay expires", function () {
+ test("should show tooltip if leave event hasn't occurred before delay expires", function () {
var tooltip = $('')
.appendTo('#qunit-fixture')
.tooltip({ delay: 150 })
diff --git a/less/bootstrap.less b/less/bootstrap.less
index f0df4f1d542d..aaa3d8a6f207 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -1,5 +1,5 @@
/*!
- * Bootstrap v2.1.0
+ * Bootstrap v2.1.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
diff --git a/less/button-groups.less b/less/button-groups.less
index 77496d6ab8d8..62e53f373a13 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -7,6 +7,7 @@
.btn-group {
position: relative;
font-size: 0; // remove as part 1 of font-size inline-block hack
+ vertical-align: middle; // match .btn alignment given font-size hack above
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
.ie7-restore-left-whitespace();
}
@@ -119,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;
}
@@ -146,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 077616e990bf..3fd1e95f5fba 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
@@ -96,10 +96,13 @@
.btn-mini {
padding: 2px 6px;
font-size: @baseFontSize - 3px;
- line-height: @baseLineHeight - 4px;
+ line-height: @baseLineHeight - 3px;
}
+
// Block button
+// -------------------------
+
.btn-block {
display: block;
width: 100%;
@@ -107,10 +110,22 @@
padding-right: 0;
.box-sizing(border-box);
}
+
+// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
}
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ &.btn-block {
+ width: 100%;
+ }
+}
+
+
// Alternate buttons
// --------------------------------------------------
@@ -193,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);
@@ -209,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/component-animations.less b/less/component-animations.less
index 2166776d98ba..d614263a76a7 100644
--- a/less/component-animations.less
+++ b/less/component-animations.less
@@ -15,7 +15,6 @@
position: relative;
height: 0;
overflow: hidden;
- overflow: visible \9;
.transition(height .35s ease);
&.in {
height: auto;
diff --git a/less/dropdowns.less b/less/dropdowns.less
index e83915dba51d..390c374974e6 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -148,7 +148,7 @@
.caret {
border-top: 0;
border-bottom: 4px solid @black;
- content: "\2191";
+ content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
@@ -172,7 +172,7 @@
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
-.dropdown-submenu:hover .dropdown-menu {
+.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
diff --git a/less/forms.less b/less/forms.less
index 77b5135a4040..f8d8562b6069 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -91,8 +91,9 @@ input[type="color"],
// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input,
-textarea {
- width: 210px;
+textarea,
+.uneditable-input {
+ width: 206px; // plus 12px padding and 2px border
}
// Reset height since textareas have rows
textarea {
@@ -125,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));
}
}
@@ -161,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
}
@@ -209,7 +210,7 @@ input[type="checkbox"]:focus {
// Placeholder
// -------------------------
-// Placeholder text gets special styles; can't be bundled together though for some reason
+// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn’t understand a selector
input,
textarea {
.placeholder();
@@ -349,6 +350,10 @@ input[type="checkbox"][readonly] {
.control-group.success {
.formFieldState(@successText, @successText, @successBackground);
}
+// Success
+.control-group.info {
+ .formFieldState(@infoText, @infoText, @infoBackground);
+}
// HTML5 invalid states
// Shares styles with the .control-group.error above
@@ -441,7 +446,6 @@ select:focus:required:invalid {
}
.add-on,
.btn {
- margin-left: -1px;
vertical-align: top;
.border-radius(0);
}
@@ -466,6 +470,10 @@ select:focus:required:invalid {
.uneditable-input {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
}
+ .add-on,
+ .btn {
+ margin-left: -1px;
+ }
.add-on:last-child,
.btn:last-child {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
@@ -510,16 +518,16 @@ input.search-query {
.border-radius(0); // Override due to specificity
}
.form-search .input-append .search-query {
- .border-radius(14px 0 0 14px)
+ .border-radius(14px 0 0 14px);
}
.form-search .input-append .btn {
- .border-radius(0 14px 14px 0)
+ .border-radius(0 14px 14px 0);
}
.form-search .input-prepend .search-query {
- .border-radius(0 14px 14px 0)
+ .border-radius(0 14px 14px 0);
}
.form-search .input-prepend .btn {
- .border-radius(14px 0 0 14px)
+ .border-radius(14px 0 0 14px);
}
@@ -607,7 +615,7 @@ legend + .control-group {
// Float the labels left
.control-label {
float: left;
- width: 140px;
+ width: @horizontalComponentOffset - 20;
padding-top: 5px;
text-align: right;
}
@@ -617,19 +625,26 @@ legend + .control-group {
// don't inherit the margin of the parent, in this case .controls
*display: inline-block;
*padding-left: 20px;
- margin-left: 160px;
+ margin-left: @horizontalComponentOffset;
*margin-left: 0;
&:first-child {
- *padding-left: 160px;
+ *padding-left: @horizontalComponentOffset;
}
}
// Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block {
- margin-top: @baseLineHeight / 2;
margin-bottom: 0;
}
+ // And apply it only to .help-block instances that follow a form control
+ input,
+ select,
+ textarea {
+ + .help-block {
+ margin-top: @baseLineHeight / 2;
+ }
+ }
// Move over buttons in .form-actions to align with .controls
.form-actions {
- padding-left: 160px;
+ padding-left: @horizontalComponentOffset;
}
}
diff --git a/less/mixins.less b/less/mixins.less
index db60f1aea296..67f1c0af7233 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -175,14 +175,15 @@
select,
textarea {
color: @textColor;
+ }
+ input,
+ select,
+ textarea {
border-color: @borderColor;
.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
@@ -247,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
@@ -260,6 +263,12 @@
-o-transition: @transition;
transition: @transition;
}
+.transition-delay(@transition-delay) {
+ -webkit-transition-delay: @transition-delay;
+ -moz-transition-delay: @transition-delay;
+ -o-transition-delay: @transition-delay;
+ transition-delay: @transition-delay;
+}
// Transformations
.rotate(@degrees) {
@@ -286,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);
}
@@ -432,7 +441,7 @@
background-color: mix(@midColor, @endColor, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
- background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop*100%, @endColor);
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
@@ -446,7 +455,7 @@
background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
background-repeat: no-repeat;
}
- .striped(@color, @angle: 45deg) {
+ .striped(@color: #555, @angle: 45deg) {
background-color: @color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
@@ -575,6 +584,7 @@
[class*="span"] {
float: left;
+ min-height: 1px; // prevent collapsing columns
margin-left: @gridGutterWidth;
}
diff --git a/less/modals.less b/less/modals.less
index e515bb796d75..81cacb7ab12f 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -3,8 +3,9 @@
// --------------------------------------------------
-// Recalculate z-index where appropriate
-.modal-open {
+// Recalculate z-index where appropriate,
+// but only apply to elements within modal
+.modal-open .modal {
.dropdown-menu { z-index: @zindexDropdown + @zindexModal; }
.dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
.popover { z-index: @zindexPopover + @zindexModal; }
diff --git a/less/navbar.less b/less/navbar.less
index 70501e459591..3514c40e0fe9 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -27,6 +27,9 @@
border: 1px solid @navbarBorder;
.border-radius(4px);
.box-shadow(0 1px 4px rgba(0,0,0,.065));
+
+ // Prevent floats from breaking the navbar
+ .clearfix();
}
// Set width to auto for default container
@@ -87,13 +90,16 @@
// -------------------------
.navbar .btn,
.navbar .btn-group {
- .navbarVerticalAlign(28px); // Vertically center in navbar
+ .navbarVerticalAlign(30px); // Vertically center in navbar
}
-.navbar .btn-group .btn {
- margin: 0; // then undo the margin here so we don't accidentally double it
+.navbar .btn-group .btn,
+.navbar .input-prepend .btn,
+.navbar .input-append .btn {
+ margin-top: 0; // then undo the margin here so we don't accidentally double it
}
// Navbar forms
+// -------------------------
.navbar-form {
margin-bottom: 0; // remove default bottom margin
.clearfix();
@@ -125,6 +131,7 @@
}
// Navbar search
+// -------------------------
.navbar-search {
position: relative;
float: left;
@@ -166,12 +173,12 @@
z-index: @zindexFixedNavbar;
margin-bottom: 0; // remove 18px margin for default navbar
}
-.navbar-fixed-top,
-.navbar-fixed-bottom,
-.navbar-static-top {
- .navbar-inner {
- border: 0;
- }
+.navbar-fixed-top .navbar-inner,
+.navbar-static-top .navbar-inner {
+ border-width: 0 0 1px;
+}
+.navbar-fixed-bottom .navbar-inner {
+ border-width: 1px 0 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
@@ -195,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));
}
}
@@ -203,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));
}
}
@@ -221,6 +228,7 @@
}
.navbar .nav.pull-right {
float: right; // redeclare due to specificity
+ margin-right: 0; // remove margin on float right nav
}
.navbar .nav > li {
float: left;
@@ -254,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
@@ -268,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;
@@ -440,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 2b854b4bef92..a7629d3db73b 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -12,7 +12,8 @@
.pager li {
display: inline;
}
-.pager a {
+.pager a,
+.pager span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
@@ -23,14 +24,16 @@
text-decoration: none;
background-color: #f5f5f5;
}
-.pager .next a {
+.pager .next a,
+.pager .next span {
float: right;
}
.pager .previous a {
float: left;
}
.pager .disabled a,
-.pager .disabled a:hover {
+.pager .disabled a:hover,
+.pager .disabled span {
color: @grayLight;
background-color: #fff;
cursor: default;
diff --git a/less/pagination.less b/less/pagination.less
index 2c19880c09e2..61a760be58cc 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -15,11 +15,11 @@
.border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
-.pagination li {
- display: inline;
- }
-.pagination a,
-.pagination span {
+.pagination ul > li {
+ display: inline;
+}
+.pagination ul > li > a,
+.pagination ul > li > span {
float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
@@ -28,30 +28,30 @@
border: 1px solid @paginationBorder;
border-left-width: 0;
}
-.pagination a:hover,
-.pagination .active a,
-.pagination .active span {
+.pagination ul > li > a:hover,
+.pagination ul > .active > a,
+.pagination ul > .active > span {
background-color: #f5f5f5;
}
-.pagination .active a,
-.pagination .active span {
+.pagination ul > .active > a,
+.pagination ul > .active > span {
color: @grayLight;
cursor: default;
}
-.pagination .disabled span,
-.pagination .disabled a,
-.pagination .disabled a:hover {
+.pagination ul > .disabled > span,
+.pagination ul > .disabled > a,
+.pagination ul > .disabled > a:hover {
color: @grayLight;
background-color: transparent;
cursor: default;
}
-.pagination li:first-child a,
-.pagination li:first-child span {
+.pagination ul > li:first-child > a,
+.pagination ul > li:first-child > span {
border-left-width: 1px;
.border-radius(3px 0 0 3px);
}
-.pagination li:last-child a,
-.pagination li:last-child span {
+.pagination ul > li:last-child > a,
+.pagination ul > li:last-child > span {
.border-radius(0 3px 3px 0);
}
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 36744d89c707..0486371aa89f 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 fc27e9c878dd..2901a85c80dd 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 b2e3da25c03c..79c7eaa82b86 100644
--- a/less/responsive-767px-max.less
+++ b/less/responsive-767px-max.less
@@ -12,7 +12,8 @@
}
// Negative indent the now static "fixed" navbar
.navbar-fixed-top,
- .navbar-fixed-bottom {
+ .navbar-fixed-bottom,
+ .navbar-static-top {
margin-left: -20px;
margin-right: -20px;
}
@@ -60,8 +61,9 @@
.row-fluid [class*="span"] {
float: none;
display: block;
- width: auto;
+ width: 100%;
margin-left: 0;
+ .box-sizing(border-box);
}
.span12,
.row-fluid .span12 {
@@ -89,6 +91,9 @@
display: inline-block; // redeclare so they don't wrap to new lines
width: auto;
}
+ .controls-row [class*="span"] + [class*="span"] {
+ margin-left: 0;
+ }
// Modals
.modal {
@@ -128,24 +133,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 3498863c82b9..c454dd5e398c 100644
--- a/less/responsive-navbar.less
+++ b/less/responsive-navbar.less
@@ -115,6 +115,12 @@
.nav-collapse .dropdown-menu .divider {
display: none;
}
+ .nav-collapse .nav > li > .dropdown-menu {
+ &:before,
+ &:after {
+ display: none;
+ }
+ }
// Forms in navbar
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
@@ -123,7 +129,12 @@
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 {
+ border-top-color: @navbarInverseBackground;
+ border-bottom-color: @navbarInverseBackground;
}
// Pull right (secondary) nav content
.navbar .nav-collapse .nav.pull-right {
diff --git a/less/responsive.less b/less/responsive.less
index 5a62e4a5076f..87b34708538b 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Responsive v2.1.0
+ * Bootstrap Responsive v2.1.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 342dcf70516c..7a7496a64ed8 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 8d5e40e7ab68..9bf970fa9b64 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -30,8 +30,14 @@
/* White icons with optional class, or on hover/active states of certain elements */
.icon-white,
-.nav > .active > a > [class^="icon-"],
-.nav > .active > a > [class*=" icon-"],
+.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-"],
+.nav-list > .active > a > [class*=" icon-"],
+.navbar-inverse .nav > .active > a > [class^="icon-"],
+.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
diff --git a/less/tables.less b/less/tables.less
index 853b97e3902c..13c37c6e87cc 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-right-topleft: 4px;
+ -moz-border-radius-topleft: 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); }
@@ -208,18 +208,38 @@ table {
}
+
// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-striped
-.table {
- tbody tr.success td {
+.table tbody tr {
+ &.success td {
background-color: @successBackground;
}
- tbody tr.error td {
+ &.error td {
background-color: @errorBackground;
}
- tbody tr.info td {
+ &.warning td {
+ background-color: @warningBackground;
+ }
+ &.info td {
background-color: @infoBackground;
}
}
+
+// Hover states for .table-hover
+.table-hover tbody tr {
+ &.success:hover td {
+ background-color: darken(@successBackground, 5%);
+ }
+ &.error:hover td {
+ background-color: darken(@errorBackground, 5%);
+ }
+ &.warning:hover td {
+ background-color: darken(@warningBackground, 5%);
+ }
+ &.info:hover td {
+ background-color: darken(@infoBackground, 5%);
+ }
+}
diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css
index 6001f53aab8f..9edaf69bfb77 100644
--- a/less/tests/css-tests.css
+++ b/less/tests/css-tests.css
@@ -65,3 +65,75 @@ body {
.fluid-grid .span1 {
background-color: #999;
}
+
+
+/* Gradients */
+
+[class^="gradient-"] {
+ width: 100%;
+ height: 400px;
+ margin: 20px 0;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+}
+
+.gradient-horizontal {
+ background-color: #333333;
+ background-image: -moz-linear-gradient(left, #555555, #333333);
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#555555), to(#333333));
+ background-image: -webkit-linear-gradient(left, #555555, #333333);
+ background-image: -o-linear-gradient(left, #555555, #333333);
+ background-image: linear-gradient(to right, #555555, #333333);
+ background-repeat: repeat-x;
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=1);
+}
+
+.gradient-vertical {
+ background-color: #474747;
+ background-image: -moz-linear-gradient(top, #555555, #333333);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333));
+ background-image: -webkit-linear-gradient(top, #555555, #333333);
+ background-image: -o-linear-gradient(top, #555555, #333333);
+ background-image: linear-gradient(to bottom, #555555, #333333);
+ background-repeat: repeat-x;
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0);
+}
+
+.gradient-directional {
+ background-color: #333333;
+ background-image: -moz-linear-gradient(45deg, #555555, #333333);
+ background-image: -webkit-linear-gradient(45deg, #555555, #333333);
+ background-image: -o-linear-gradient(45deg, #555555, #333333);
+ background-image: linear-gradient(45deg, #555555, #333333);
+ background-repeat: repeat-x;
+}
+
+.gradient-vertical-three {
+ background-color: #8940a5;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
+ background-image: -webkit-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
+ background-image: -moz-linear-gradient(top, #00b3ee, #7a43b6 50%, #c3325f);
+ background-image: -o-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
+ background-image: linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
+ background-repeat: no-repeat;
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff00b3ee', endColorstr='#ffc3325f', GradientType=0);
+}
+
+.gradient-radial {
+ background-color: #333333;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#555555), to(#333333));
+ background-image: -webkit-radial-gradient(circle, #555555, #333333);
+ background-image: -moz-radial-gradient(circle, #555555, #333333);
+ background-image: -o-radial-gradient(circle, #555555, #333333);
+ background-repeat: no-repeat;
+}
+
+.gradient-striped {
+ background-color: #555555;
+ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+ background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
\ No newline at end of file
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 6786454cc7ea..c0cb1485e983 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -98,6 +98,44 @@
h6. Heading 6
+ + +++ +Responsive images
+++ ++++
++++
+ +++ ++++
+++
++
+ + + + @@ -597,6 +635,36 @@Fluid grid sizing
Forms
Buttons and button groups
+ + +Horizontal form errors
+ +Prepend and append on inputs
@@ -622,7 +690,7 @@Prepend and append on inputs
+
+
Prepend and append with uneditable
+
Prepend with type="submit"
+ +
+
+
+
+
+
+
+
+
+ Fluid prepended and appended inputs
@@ -1131,6 +1217,36 @@Hidden on...
+ + +
+
+
+