diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 7f669d573fb1b27a0354f62007669e30d408510b..a5d9ff4267f65c13b46dbe2988061118f7acb6ba 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -174,6 +174,10 @@
width: auto;
margin-left: 0;
}
+ .row-fluid .input-prepend [class*="span"],
+ .row-fluid .input-append [class*="span"] {
+ display: inline-block;
+ }
.input-large,
.input-xlarge,
.input-xxlarge,
@@ -683,11 +687,18 @@
body {
padding-top: 0;
}
- .navbar-fixed-top {
+ .navbar-fixed-top,
+ .navbar-fixed-bottom {
position: static;
+ }
+ .navbar-fixed-top {
margin-bottom: 18px;
}
- .navbar-fixed-top .navbar-inner {
+ .navbar-fixed-bottom {
+ margin-top: 18px;
+ }
+ .navbar-fixed-top .navbar-inner,
+ .navbar-fixed-bottom .navbar-inner {
padding: 5px;
}
.navbar .container {
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 09e2833dcdefc4d7eededbcea0dabba19af1b356..549c4d37e1f5ff6e3958dfacdfff917865abb0c3 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -603,7 +603,7 @@ em {
abbr[title] {
cursor: help;
- border-bottom: 1px dotted #ddd;
+ border-bottom: 1px dotted #999999;
}
abbr.initialism {
@@ -740,7 +740,7 @@ legend {
line-height: 36px;
color: #333333;
border: 0;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid #e5e5e5;
}
legend small {
@@ -771,76 +771,117 @@ label {
color: #333333;
}
-input,
-textarea,
select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
.uneditable-input {
display: inline-block;
- width: 210px;
height: 18px;
padding: 4px;
margin-bottom: 9px;
font-size: 13px;
line-height: 18px;
color: #555555;
+}
+
+input,
+textarea {
+ width: 210px;
+}
+
+textarea {
+ height: auto;
+}
+
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+ -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+ -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+ -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
+ -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+ transition: border linear 0.2s, box-shadow linear 0.2s;
}
-.uneditable-textarea {
- width: auto;
- height: auto;
-}
+textarea:focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="time"]:focus,
+input[type="week"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="color"]:focus,
+.uneditable-input:focus {
+ border-color: rgba(82, 168, 236, 0.8);
+ outline: 0;
+ outline: thin dotted \9;
+ /* IE6-9 */
-label input,
-label textarea,
-label select {
- display: block;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
-input[type="image"],
-input[type="checkbox"],
-input[type="radio"] {
- width: auto;
- height: auto;
- padding: 0;
+input[type="radio"],
+input[type="checkbox"] {
margin: 3px 0;
*margin-top: 0;
/* IE7 */
line-height: normal;
cursor: pointer;
- background-color: transparent;
- border: 0 \9;
- /* IE9 and down */
-
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
}
-input[type="image"] {
- border: 0;
-}
-
-input[type="file"] {
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
width: auto;
- padding: initial;
- line-height: initial;
- background-color: #ffffff;
- background-color: initial;
- border: initial;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
}
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
+.uneditable-textarea {
width: auto;
height: auto;
}
@@ -856,13 +897,9 @@ input[type="file"] {
line-height: 28px;
}
-input[type="file"] {
- line-height: 18px \9;
-}
-
select {
width: 220px;
- background-color: #ffffff;
+ border: 1px solid #bbb;
}
select[multiple],
@@ -870,18 +907,13 @@ select[size] {
height: auto;
}
-input[type="image"] {
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
-}
-
-textarea {
- height: auto;
-}
-
-input[type="hidden"] {
- display: none;
+select:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+ outline: thin dotted #333;
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
}
.radio,
@@ -914,42 +946,6 @@ input[type="hidden"] {
margin-left: 10px;
}
-input,
-textarea {
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
- -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
- -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
- -o-transition: border linear 0.2s, box-shadow linear 0.2s;
- transition: border linear 0.2s, box-shadow linear 0.2s;
-}
-
-input:focus,
-textarea:focus {
- border-color: rgba(82, 168, 236, 0.8);
- outline: 0;
- outline: thin dotted \9;
- /* IE6-9 */
-
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
- -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-}
-
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus,
-select:focus {
- outline: thin dotted #333;
- outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -2px;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
-}
-
.input-mini {
width: 60px;
}
@@ -1190,7 +1186,7 @@ select:focus:required:invalid:focus {
margin-top: 18px;
margin-bottom: 18px;
background-color: #f5f5f5;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #e5e5e5;
*zoom: 1;
}
@@ -2433,7 +2429,7 @@ table .span24 {
*z-index: 1000;
}
-.open .dropdown-menu {
+.open > .dropdown-menu {
display: block;
}
@@ -4651,15 +4647,15 @@ a.badge:hover {
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -ms-box-sizing: border-box;
- box-sizing: border-box;
-webkit-transition: width 0.6s ease;
-moz-transition: width 0.6s ease;
-ms-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
}
.progress-striped .bar {
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b7e0c8dbfab20b3a0813ac3f69cac36927080d89..92a4ec8e67f279f4038380f64ff049ebb03039df 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -649,6 +649,11 @@ form.well {
margin-top: 18px;
}
+ /* icons */
+ .marketing .bs-icon {
+ margin: 0;
+ }
+
/* Adjust the jumbotron */
.jumbotron h1,
.jumbotron p {
diff --git a/docs/base-css.html b/docs/base-css.html
index 5c55e043234a140b50c827a447290d57a5c4db3a..69a9a2f590d55a308287046dedc5b24414cef2f2 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -111,8 +111,10 @@
</div>
<div class="span4">
<h3>Example body text</h3>
- <p>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 ut id elit.</p>
- <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
+ <p>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.</p>
+ <h3>Lead body copy</h3>
+ <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
+ <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div>
<div class="span4">
<div class="well">
@@ -1272,7 +1274,7 @@ For example, <code>section</code> should be wrapped as inline.
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
- Option two can is something else and selecting it will deselect option one
+ Option two can be something else and selecting it will deselect option one
</label>
</div>
</div>
@@ -1590,7 +1592,7 @@ For example, <code>section</code> should be wrapped as inline.
<pre class="prettyprint linenums">
<i class="icon-search icon-white"></i>
</pre>
- <p>There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
+ <p>There are 140 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
<p>
<span class="label label-info">Heads up!</span>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code><i></code> tag for proper spacing.
diff --git a/docs/components.html b/docs/components.html
index 1678e58aa5b4cad2651df8bb2ba42904492f5c29..523b189bb7ca7578445ec468f24d1f6c4aa95f52 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -813,7 +813,7 @@
<h3>Straightforward markup</h3>
<p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
<pre class="prettyprint linenums">
-<div class="tabbable"> <-- Only required for left/right tabs -->
+<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
@@ -1665,7 +1665,7 @@
-<!-- Alerts & Messages
+<!-- Alerts
================================================== -->
<section id="alerts">
<div class="page-header">
@@ -1688,7 +1688,7 @@
<h3>Example alerts</h3>
<p>Wrap your message and an optional close icon in a div with simple class.</p>
<div class="alert">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<pre class="prettyprint linenums">
@@ -1697,10 +1697,10 @@
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</pre>
- <p><span class="label label-info">Heads up!</span> iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code>button</code> element with the data attribute, which we have opted to do for our docs.</p>
+ <p><span class="label label-info">Heads up!</span> iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.</p>
<p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
<div class="alert alert-block">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<h4 class="alert-heading">Warning!</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
@@ -1719,7 +1719,7 @@
<div class="span4">
<h3>Error or danger</h3>
<div class="alert alert-error">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<pre class="prettyprint linenums">
@@ -1731,7 +1731,7 @@
<div class="span4">
<h3>Success</h3>
<div class="alert alert-success">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<pre class="prettyprint linenums">
@@ -1743,7 +1743,7 @@
<div class="span4">
<h3>Information</h3>
<div class="alert alert-info">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<pre class="prettyprint linenums">
diff --git a/docs/index.html b/docs/index.html
index 19e6a676ad7ac3e77c8a7807bcdb6bf721180ae8..370750be9057e108589ae6d3c1110a2e7497cad1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -83,7 +83,7 @@
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
<p class="download-info">
<a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">View project on GitHub</a>
- <a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap <small>(v2.0.3)</small></a>
+ <a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap <small>(v2.0.4)</small></a>
</p>
</div>
diff --git a/docs/javascript.html b/docs/javascript.html
index 7ad42ae81f17c1c16f38a89764bc452c275fc9e6..c910a5ce5d0188b7ae2dfa424edcb2556fb5aad9 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -107,82 +107,58 @@
</div>
<div class="row">
<div class="span3">
- <label>
- <h3><a href="./javascript.html#modals">Modals</a></h3>
- <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
- </label>
+ <h3><a href="./javascript.html#modals">Modals</a></h3>
+ <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3>
- <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
- </label>
+ <h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3>
+ <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3>
- <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
- </label>
+ <h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3>
+ <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#tabs">Togglable tabs</a></h3>
- <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
- </label>
+ <h3><a href="./javascript.html#tabs">Togglable tabs</a></h3>
+ <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span3">
- <label>
- <h3><a href="./javascript.html#tooltips">Tooltips</a></h3>
- <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.</p>
- </label>
+ <h3><a href="./javascript.html#tooltips">Tooltips</a></h3>
+ <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3>
- <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
- <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
- </label>
+ <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3>
+ <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
+ <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#alerts">Alert messages</a></h3>
- <p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
- </label>
+ <h3><a href="./javascript.html#alerts">Alert messages</a></h3>
+ <p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#buttons">Buttons</a></h3>
- <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
- </label>
+ <h3><a href="./javascript.html#buttons">Buttons</a></h3>
+ <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
</div>
</div> <!-- /row -->
<div class="row" style="margin-bottom: 9px;">
<div class="span3">
- <label>
- <h3><a href="./javascript.html#collapse">Collapse</a></h3>
- <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
- </label>
+ <h3><a href="./javascript.html#collapse">Collapse</a></h3>
+ <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#carousel">Carousel</a></h3>
- <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
- </label>
+ <h3><a href="./javascript.html#carousel">Carousel</a></h3>
+ <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
- <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
- </label>
+ <h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
+ <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
</div>
<div class="span3">
- <label>
- <h3>Transitions <small class="muted">*</small></h3>
- <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
- <p class="muted"><strong>*</strong> Required for animation in plugins</p>
- </label>
+ <h3>Transitions <small class="muted">*</small></h3>
+ <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
+ <p class="muted"><strong>*</strong> Required for animation in plugins</p>
</div>
</div> <!-- /row -->
<div class="alert alert-info"><strong>Heads up!</strong> All javascript plugins require the latest version of jQuery.</div>
@@ -208,7 +184,7 @@
<div class="well modal-example" style="background-color: #888; border: none;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
<div class="modal-header">
- <button class="close" data-dismiss="modal">×</button>
+ <button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
@@ -226,7 +202,7 @@
<!-- sample modal content -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
- <button class="close" data-dismiss="modal">×</button>
+ <button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
@@ -301,16 +277,16 @@
</pre>
<pre class="prettyprint linenums">
-<div class="modal" id="myModal">
+<div class="modal hide" id="myModal">
<div class="modal-header">
- <button class="close" data-dismiss="modal">×</button>
+ <button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
- <a href="#" class="btn">Close</a>
+ <a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
@@ -978,11 +954,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h2>Example alerts</h2>
<p>The alerts plugin works on regular alert messages, and block messages.</p>
<div class="alert fade in">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-block alert-error fade in">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<h4 class="alert-heading">Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
diff --git a/docs/less.html b/docs/less.html
index 3fecd1ade2997f42d8bde2b14c2d7ae8e121b492..41f62ee2091534ec952f8e759d730288dc22ab3f 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -614,6 +614,14 @@
<td><code>@dropdownLinkBackgroundHover</code></td>
<td><code>@linkColor</code></td>
</tr>
+ <tr>
+ <td><code>@@dropdownDividerTop</code></td>
+ <td><code>#e5e5e5</code></td>
+ </tr>
+ <tr>
+ <td><code>@@dropdownDividerBottom</code></td>
+ <td><code>@white</code></td>
+ </tr>
</tbody>
</table>
<h4>Hero unit</h4>
@@ -810,7 +818,7 @@
<tr>
<td><code>#grid > .fluid()</code></td>
<td><code>@fluidGridColumnWidth, @fluidGridGutterWidth</code></td>
- <td>Generate a precent grid system with <em>n</em> columns and <em>x</em> % wide gutter</td>
+ <td>Generate a percent grid system with <em>n</em> columns and <em>x</em> % wide gutter</td>
</tr>
<tr>
<td><code>#grid > .input()</code></td>
@@ -899,6 +907,11 @@
<td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
<td>Make the content of any element use CSS3 columns</td>
</tr>
+ <tr>
+ <td><code>.hyphens()</code></td>
+ <td><code>@mode: auto</code></td>
+ <td>CSS3 hyphenation when you want it (includes <code>word-wrap: break-word</code>)</td>
+ </tr>
</tbody>
</table>
<h3>Backgrounds and gradients</h3>
@@ -975,8 +988,8 @@
<div class="row">
<div class="span4">
<h3>Node with makefile</h3>
- <p>Install the LESS command line compiler and uglify-js globally with npm by running the following command:</p>
- <pre>$ npm install -g less uglify-js</pre>
+ <p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
+ <pre>$ npm install -g less jshint recess uglify-js</pre>
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
<p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
</div><!-- /span4 -->
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index caffa6af66ae6cac4e4539b47cef49edd01d15c1..e88656dbb0f37c6c2801b348c2e8b527255b72e5 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -529,16 +529,16 @@
</div><!-- /.span -->
<div class="span8">
<pre class="prettyprint linenums">
- // Landscape phones and down
+ /* Landscape phones and down */
@media (max-width: 480px) { ... }
- // Landscape phone to portrait tablet
+ /* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
- // Portrait tablet to landscape and desktop
+ /* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
- // Large desktop
+ /* Large desktop */
@media (min-width: 1200px) { ... }
</pre>
</div><!-- /.span -->
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 3524ac98521eedab2e9e255291cdb319b04873e4..1404a31f028e089c83ce0cd7315eb389ed80d20e 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -34,8 +34,10 @@
</div>
<div class="span4">
<h3>{{_i}}Example body text{{/i}}</h3>
- <p>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 ut id elit.</p>
- <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
+ <p>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.</p>
+ <h3>{{_i}}Lead body copy{{/i}}</h3>
+ <p>{{_i}}Make a paragraph stand out by adding <code>.lead</code>.{{/i}}</p>
+ <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div>
<div class="span4">
<div class="well">
@@ -1195,7 +1197,7 @@
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
- {{_i}}Option two can is something else and selecting it will deselect option one{{/i}}
+ {{_i}}Option two can be something else and selecting it will deselect option one{{/i}}
</label>
</div>
</div>
@@ -1513,7 +1515,7 @@
<pre class="prettyprint linenums">
<i class="icon-search icon-white"></i>
</pre>
- <p>{{_i}}There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
+ <p>{{_i}}There are 140 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
<p>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code><i></code> tag for proper spacing.{{/i}}
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 8e81a95df04e04c8dc31fc56a86b2d68f54e7f2b..b1f858998165a20ea7bcd4d51532081489590565 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -736,7 +736,7 @@
<h3>{{_i}}Straightforward markup{{/i}}</h3>
<p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p>
<pre class="prettyprint linenums">
-<div class="tabbable"> <-- Only required for left/right tabs -->
+<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
<li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
@@ -1252,7 +1252,7 @@
<span class="label label-success">{{_i}}Success{{/i}}</span>
</td>
<td>
- <code><span class="label label-success">{{/_i}}Success{{/i}}</span></code>
+ <code><span class="label label-success">{{_i}}Success{{/i}}</span></code>
</td>
</tr>
<tr>
@@ -1588,7 +1588,7 @@
-<!-- Alerts & Messages
+<!-- Alerts
================================================== -->
<section id="alerts">
<div class="page-header">
@@ -1611,7 +1611,7 @@
<h3>{{_i}}Example alerts{{/i}}</h3>
<p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
<div class="alert">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
<pre class="prettyprint linenums">
@@ -1620,10 +1620,10 @@
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
</pre>
- <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code>button</code> element with the data attribute, which we have opted to do for our docs.{{/i}}</p>
+ <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
<p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
<div class="alert alert-block">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
<p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
@@ -1642,7 +1642,7 @@
<div class="span4">
<h3>{{_i}}Error or danger{{/i}}</h3>
<div class="alert alert-error">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{_i}}Oh snap!{{/i}}</strong> {{_i}}Change a few things up and try submitting again.{{/i}}
</div>
<pre class="prettyprint linenums">
@@ -1654,7 +1654,7 @@
<div class="span4">
<h3>{{_i}}Success{{/i}}</h3>
<div class="alert alert-success">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{_i}}Well done!{{/i}}</strong> {{_i}}You successfully read this important alert message.{{/i}}
</div>
<pre class="prettyprint linenums">
@@ -1666,7 +1666,7 @@
<div class="span4">
<h3>{{_i}}Information{{/i}}</h3>
<div class="alert alert-info">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it's not super important.{{/i}}
</div>
<pre class="prettyprint linenums">
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 41a89e07a373b7c3d9817b235edbe459c045316d..f4806183efc28fddd3d289d8983f87dfe8d9a9fa 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -6,7 +6,7 @@
<p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
<p class="download-info">
<a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
- <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap <small>(v2.0.3)</small>{{/i}}</a>
+ <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap <small>(v2.0.4)</small>{{/i}}</a>
</p>
</div>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 1ae3ffa5a82506cf09fd4191a1b00654be579937..ba3787561f59c7ddc4854e9462d4bd6d6e049fc2 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -30,82 +30,58 @@
</div>
<div class="row">
<div class="span3">
- <label>
- <h3><a href="./javascript.html#modals">{{_i}}Modals{{/i}}</a></h3>
- <p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
- </label>
+ <h3><a href="./javascript.html#modals">{{_i}}Modals{{/i}}</a></h3>
+ <p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#dropdowns">{{_i}}Dropdowns{{/i}}</a></h3>
- <p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
- </label>
+ <h3><a href="./javascript.html#dropdowns">{{_i}}Dropdowns{{/i}}</a></h3>
+ <p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></h3>
- <p>{{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}</p>
- </label>
+ <h3><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></h3>
+ <p>{{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#tabs">{{_i}}Togglable tabs{{/i}}</a></h3>
- <p>{{_i}}Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.{{/i}}</p>
- </label>
+ <h3><a href="./javascript.html#tabs">{{_i}}Togglable tabs{{/i}}</a></h3>
+ <p>{{_i}}Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.{{/i}}</p>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span3">
- <label>
- <h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a></h3>
- <p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
- </label>
+ <h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a></h3>
+ <p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#popovers">{{_i}}Popovers{{/i}}</a> <small class="muted">*</small></h3>
- <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
- <p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltips</a> to be included{{/i}}</p>
- </label>
+ <h3><a href="./javascript.html#popovers">{{_i}}Popovers{{/i}}</a> <small class="muted">*</small></h3>
+ <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
+ <p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltips</a> to be included{{/i}}</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#alerts">{{_i}}Alert messages{{/i}}</a></h3>
- <p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
- </label>
+ <h3><a href="./javascript.html#alerts">{{_i}}Alert messages{{/i}}</a></h3>
+ <p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#buttons">{{_i}}Buttons{{/i}}</a></h3>
- <p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
- </label>
+ <h3><a href="./javascript.html#buttons">{{_i}}Buttons{{/i}}</a></h3>
+ <p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
</div>
</div> <!-- /row -->
<div class="row" style="margin-bottom: 9px;">
<div class="span3">
- <label>
- <h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></h3>
- <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
- </label>
+ <h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></h3>
+ <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></h3>
- <p>{{_i}}Create a merry-go-round of any content you wish to provide an interactive slideshow of content.{{/i}}</p>
- </label>
+ <h3><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></h3>
+ <p>{{_i}}Create a merry-go-round of any content you wish to provide an interactive slideshow of content.{{/i}}</p>
</div>
<div class="span3">
- <label>
- <h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
- <p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
- </label>
+ <h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
+ <p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
</div>
<div class="span3">
- <label>
- <h3>{{_i}}Transitions{{/i}} <small class="muted">*</small></h3>
- <p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
- <p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p>
- </label>
+ <h3>{{_i}}Transitions{{/i}} <small class="muted">*</small></h3>
+ <p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
+ <p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p>
</div>
</div> <!-- /row -->
<div class="alert alert-info"><strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}All javascript plugins require the latest version of jQuery.{{/i}}</div>
@@ -131,7 +107,7 @@
<div class="well modal-example" style="background-color: #888; border: none;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
<div class="modal-header">
- <button class="close" data-dismiss="modal">×</button>
+ <button type="button" class="close" data-dismiss="modal">×</button>
<h3>{{_i}}Modal header{{/i}}</h3>
</div>
<div class="modal-body">
@@ -149,7 +125,7 @@
<!-- sample modal content -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
- <button class="close" data-dismiss="modal">×</button>
+ <button type="button" class="close" data-dismiss="modal">×</button>
<h3>{{_i}}Modal Heading{{/i}}</h3>
</div>
<div class="modal-body">
@@ -224,16 +200,16 @@
</pre>
<pre class="prettyprint linenums">
-<div class="modal" id="myModal">
+<div class="modal hide" id="myModal">
<div class="modal-header">
- <button class="close" data-dismiss="modal">×</button>
+ <button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>{{_i}}One fine body…{{/i}}</p>
</div>
<div class="modal-footer">
- <a href="#" class="btn">{{_i}}Close{{/i}}</a>
+ <a href="#" class="btn" data-dismiss="modal">{{_i}}Close{{/i}}</a>
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
</div>
</div>
@@ -901,11 +877,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h2>{{_i}}Example alerts{{/i}}</h2>
<p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p>
<div class="alert fade in">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
<div class="alert alert-block alert-error fade in">
- <button class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert">×</button>
<h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
<p>{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}</p>
<p>
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index 7698dd290004609792c543a72bbfeaae0c56b1c1..c9a00eadc84e0b71dde24b0da097d9331e9021cd 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -537,6 +537,14 @@
<td><code>@dropdownLinkBackgroundHover</code></td>
<td><code>@linkColor</code></td>
</tr>
+ <tr>
+ <td><code>@@dropdownDividerTop</code></td>
+ <td><code>#e5e5e5</code></td>
+ </tr>
+ <tr>
+ <td><code>@@dropdownDividerBottom</code></td>
+ <td><code>@white</code></td>
+ </tr>
</tbody>
</table>
<h4>{{_i}}Hero unit{{/i}}</h4>
@@ -733,7 +741,7 @@
<tr>
<td><code>#grid > .fluid()</code></td>
<td><code>@fluidGridColumnWidth, @fluidGridGutterWidth</code></td>
- <td>{{_i}}Generate a precent grid system with <em>n</em> columns and <em>x</em> % wide gutter{{/i}}</td>
+ <td>{{_i}}Generate a percent grid system with <em>n</em> columns and <em>x</em> % wide gutter{{/i}}</td>
</tr>
<tr>
<td><code>#grid > .input()</code></td>
@@ -822,6 +830,11 @@
<td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
<td>{{_i}}Make the content of any element use CSS3 columns{{/i}}</td>
</tr>
+ <tr>
+ <td><code>.hyphens()</code></td>
+ <td><code>@mode: auto</code></td>
+ <td>{{_i}}CSS3 hyphenation when you want it (includes <code>word-wrap: break-word</code>){{/i}}</td>
+ </tr>
</tbody>
</table>
<h3>{{_i}}Backgrounds and gradients{{/i}}</h3>
@@ -898,8 +911,8 @@
<div class="row">
<div class="span4">
<h3>{{_i}}Node with makefile{{/i}}</h3>
- <p>{{_i}}Install the LESS command line compiler and uglify-js globally with npm by running the following command:{{/i}}</p>
- <pre>$ npm install -g less uglify-js</pre>
+ <p>{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}</p>
+ <pre>$ npm install -g less jshint recess uglify-js</pre>
<p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p>
<p>{{_i}}Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p>
</div><!-- /span4 -->
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 13c777a260b78b06381a8768cb403689d8cd91a7..2db9e9d3dee97722249693667bc7690f053cff60 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -452,16 +452,16 @@
</div><!-- /.span -->
<div class="span8">
<pre class="prettyprint linenums">
- // {{_i}}Landscape phones and down{{/i}}
+ /* {{_i}}Landscape phones and down{{/i}} */
@media (max-width: 480px) { ... }
- // {{_i}}Landscape phone to portrait tablet{{/i}}
+ /* {{_i}}Landscape phone to portrait tablet{{/i}} */
@media (max-width: 767px) { ... }
- // {{_i}}Portrait tablet to landscape and desktop{{/i}}
+ /* {{_i}}Portrait tablet to landscape and desktop{{/i}} */
@media (min-width: 768px) and (max-width: 979px) { ... }
- // {{_i}}Large desktop{{/i}}
+ /* {{_i}}Large desktop{{/i}} */
@media (min-width: 1200px) { ... }
</pre>
</div><!-- /.span -->
diff --git a/js/README.md b/js/README.md
index c7b71e70f2e94db7e4f5184aef67ba65601a4746..b7927ba6b2414e314a1889b7a2976d0b0d952a10 100644
--- a/js/README.md
+++ b/js/README.md
@@ -5,9 +5,9 @@ These are the high-level design rules which guide the development of Bootstrap's
### DATA-ATTRIBUTE API
-We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript. This is bootstraps first class api.
+We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API.
-We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
+We acknowledge that this isn't always the most performant and it may sometimes be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
$('body').off('.data-api')
@@ -19,7 +19,7 @@ To target a specific plugin, just include the plugins name as a namespace along
### PROGRAMATIC API
-We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API.
+We also believe you should be able to use all plugins provided by Bootstrap purely through the JavaScript API.
All public APIs should be single, chainable methods, and return the collection acted upon.
@@ -45,7 +45,7 @@ An options definition should take the following form:
*noun*: *adjective* - describes or modifies a quality of an instance
-examples:
+Examples:
backdrop: true
keyboard: false
@@ -93,7 +93,7 @@ Data attributes should take the following form:
- data-target || href^=# - defined on "control" element (if element controls an element other than self)
- data-{{noun}} - defines class instance options
-examples:
+Examples:
// control other targets
data-toggle="modal" data-target="#foo"
diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js
index 577ead48b56eeb08e2caa4f88bd8fc3da009654b..6ff2b47086529d169bc7c3c6a39d9844d3b5141a 100644
--- a/js/bootstrap-tooltip.js
+++ b/js/bootstrap-tooltip.js
@@ -84,9 +84,9 @@
, leave: function (e) {
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
+ if (this.timeout) clearTimeout(this.timeout)
if (!self.options.delay || !self.options.delay.hide) return self.hide()
- clearTimeout(this.timeout)
self.hoverState = 'out'
this.timeout = setTimeout(function() {
if (self.hoverState == 'out') self.hide()
@@ -272,4 +272,4 @@
, delay: 0
}
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/js/tests/unit/bootstrap-tooltip.js b/js/tests/unit/bootstrap-tooltip.js
index 63f4f0b07cb6b376d05b21ba5df4fdd8721ca54b..63a42b0d4dae1bed65b97f27f41ce768e1059e5d 100644
--- a/js/tests/unit/bootstrap-tooltip.js
+++ b/js/tests/unit/bootstrap-tooltip.js
@@ -33,7 +33,7 @@ $(function () {
.tooltip({placement: 'bottom'})
.tooltip('show')
- ok($(".tooltip").hasClass('fade bottom in'), 'has correct classes applied')
+ ok($(".tooltip").is('.fade.bottom.in'), 'has correct classes applied')
tooltip.tooltip('hide')
})
@@ -69,10 +69,29 @@ $(function () {
tooltip.trigger('mouseenter')
setTimeout(function () {
- ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
+ ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
tooltip.trigger('mouseout')
setTimeout(function () {
- ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
+ ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
+ start()
+ }, 200)
+ }, 100)
+ })
+
+ test("should not show tooltip if leave event occurs before delay expires, even if hide delay is 0", function () {
+ var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
+ .appendTo('#qunit-fixture')
+ .tooltip({ delay: { show: 200, hide: 0} })
+
+ stop()
+
+ tooltip.trigger('mouseenter')
+
+ setTimeout(function () {
+ ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
+ tooltip.trigger('mouseout')
+ setTimeout(function () {
+ ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
start()
}, 200)
}, 100)
@@ -85,10 +104,10 @@ $(function () {
stop()
tooltip.trigger('mouseenter')
setTimeout(function () {
- ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
+ ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
tooltip.trigger('mouseout')
setTimeout(function () {
- ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
+ ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
start()
}, 100)
}, 50)
@@ -101,9 +120,9 @@ $(function () {
stop()
tooltip.trigger('mouseenter')
setTimeout(function () {
- ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
+ ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
setTimeout(function () {
- ok(!$(".tooltip").hasClass('fade in'), 'tooltip has faded in')
+ ok(!$(".tooltip").is('.fade.in'), 'tooltip has faded in')
start()
}, 200)
}, 100)
@@ -133,4 +152,4 @@ $(function () {
ok($.fn.tooltip.Constructor.prototype.isHTML($('<div></div>')), 'correctly detected html')
})
-})
\ No newline at end of file
+})
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 6c60385e553eedac2678513b1329ba0baa4f6ac7..96dfec223725408ead9fe120ca28e19cc182ae23 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -71,7 +71,7 @@
// Dividers (basically an hr) within the dropdown
.divider {
- .nav-divider();
+ .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
}
// Links within the dropdown menu
@@ -103,7 +103,7 @@
// make the menu appear below buttons that appeared later on the page
*z-index: @zindexDropdown;
- .dropdown-menu {
+ & > .dropdown-menu {
display: block;
}
}
diff --git a/less/forms.less b/less/forms.less
index 7d967c6b3dbbb84ef5005b459fb77edd15bfd7c4..582bb413ba0714216c03dfb2cf5d9e586a3e940e 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -27,7 +27,7 @@ legend {
line-height: @baseLineHeight * 2;
color: @grayDark;
border: 0;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid #e5e5e5;
// Small
small {
@@ -58,69 +58,99 @@ label {
color: @grayDark;
}
-// Inputs, Textareas, Selects
-input,
-textarea,
+// Form controls
+// -------------------------
+
+// Shared size and type resets
select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
.uneditable-input {
display: inline-block;
- width: 210px;
height: @baseLineHeight;
padding: 4px;
margin-bottom: 9px;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @gray;
- background-color: @inputBackground;
- border: 1px solid @inputBorder;
- .border-radius(@inputBorderRadius);
}
-.uneditable-textarea {
- width: auto;
+
+// 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;
+}
+// Reset height since textareas have rows
+textarea {
height: auto;
}
+// Everything else
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+ background-color: @inputBackground;
+ border: 1px solid @inputBorder;
+ .border-radius(@inputBorderRadius);
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+ @transition: border linear .2s, box-shadow linear .2s;
+ .transition(@transition);
-// Inputs within a label
-label input,
-label textarea,
-label select {
- display: block;
+ // Focus state
+ &:focus {
+ 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)");
+ }
}
-// Mini reset for unique input types
-input[type="image"],
-input[type="checkbox"],
-input[type="radio"] {
- width: auto;
- height: auto;
- padding: 0;
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
margin: 3px 0;
*margin-top: 0; /* IE7 */
line-height: normal;
cursor: pointer;
- background-color: transparent;
- border: 0 \9; /* IE9 and down */
- .border-radius(0);
-}
-input[type="image"] {
- border: 0;
}
-// Reset the file input to browser defaults
-input[type="file"] {
- width: auto;
- padding: initial;
- line-height: initial;
- background-color: @inputBackground;
- background-color: initial;
- border: initial;
- .box-shadow(none);
+// Reset width of input buttons, radios, checkboxes
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+ width: auto; // Override of generic input selector
}
-// Help out input buttons
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
+// Make uneditable textareas behave like a textarea
+.uneditable-textarea {
width: auto;
height: auto;
}
@@ -133,15 +163,10 @@ input[type="file"] {
line-height: 28px;
}
-// Reset line-height for IE
-input[type="file"] {
- line-height: 18px \9;
-}
-
-// Chrome on Linux and Mobile Safari need background-color
+// Make select elements obey height by applying a border
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
- background-color: @inputBackground;
+ border: 1px solid #bbb;
}
// Make multiple select elements height not fixed
@@ -150,19 +175,12 @@ select[size] {
height: auto;
}
-// Remove shadow from image inputs
-input[type="image"] {
- .box-shadow(none);
-}
-
-// Make textarea height behave
-textarea {
- height: auto;
-}
-
-// Hidden inputs
-input[type="hidden"] {
- display: none;
+// Focus for select, file, radio, and checkbox
+select:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+ .tab-focus();
}
@@ -204,32 +222,6 @@ input[type="hidden"] {
-// FOCUS STATE
-// -----------
-
-input,
-textarea {
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
- @transition: border linear .2s, box-shadow linear .2s;
- .transition(@transition);
-}
-input:focus,
-textarea:focus {
- 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)");
-}
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus,
-select:focus {
- .tab-focus();
- .box-shadow(none); // override for file inputs
-}
-
-
-
// INPUT SIZES
// -----------
@@ -260,8 +252,7 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS
// ----------------------
-#grid > .input (@gridColumnWidth, @gridGutterWidth);
-
+#grid > .input(@gridColumnWidth, @gridGutterWidth);
@@ -329,7 +320,7 @@ select:focus:required:invalid {
margin-top: @baseLineHeight;
margin-bottom: @baseLineHeight;
background-color: @formActionsBackground;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #e5e5e5;
.clearfix(); // Adding clearfix to allow for .pull-right button containers
}
@@ -344,7 +335,7 @@ select:focus:required:invalid {
}
// Placeholder text gets special styles; can't be bundled together though for some reason
-.placeholder(@grayLight);
+.placeholder();
diff --git a/less/mixins.less b/less/mixins.less
index b107955f57b7ca2ff41963809ba65dd05ee7d922..8efe12b388a2ee83f580913ecc82436d79c4899f 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -312,6 +312,16 @@
column-gap: @columnGap;
}
+// Optional hyphenation
+.hyphens(@mode: auto) {
+ word-wrap: break-word;
+ -webkit-hyphens: @mode;
+ -moz-hyphens: @mode;
+ -ms-hyphens: @mode;
+ -o-hyphens: @mode;
+ hyphens: @mode;
+}
+
// Opacity
.opacity(@opacity) {
opacity: @opacity / 100;
@@ -417,7 +427,7 @@
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
-.nav-divider() {
+.nav-divider(@top: #e5e5e5, @bottom: @white) {
// IE7 needs a set width since we gave a height. Restricting just
// to IE7 to keep the 1px left/right space in other browsers.
// It is unclear where IE is getting the extra space that we need
@@ -427,8 +437,8 @@
margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
*margin: -5px 0 5px;
overflow: hidden;
- background-color: #e5e5e5;
- border-bottom: 1px solid @white;
+ background-color: @top;
+ border-bottom: 1px solid @bottom;
}
// Button backgrounds
diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less
index 614c6905c2d62ae642e7135c99840baa6c16601a..fc422d3a251d5e36174f65876b9942e1a659423c 100644
--- a/less/responsive-767px-max.less
+++ b/less/responsive-767px-max.less
@@ -124,6 +124,10 @@
width: auto;
margin-left: 0;
}
+ .row-fluid .input-prepend [class*="span"],
+ .row-fluid .input-append [class*="span"] {
+ display: inline-block;
+ }
// FORM FIELDS
// -----------
diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
index d49b8ae12d87c6b00b817d906427e7a2d86c049d..8d31db5310ab27e8c9f8007834af659d0ceaae40 100644
--- a/less/responsive-navbar.less
+++ b/less/responsive-navbar.less
@@ -9,11 +9,18 @@
padding-top: 0;
}
// Unfix the navbar
- .navbar-fixed-top {
+ .navbar-fixed-top,
+ .navbar-fixed-bottom {
position: static;
+ }
+ .navbar-fixed-top {
margin-bottom: @baseLineHeight;
}
- .navbar-fixed-top .navbar-inner {
+ .navbar-fixed-bottom {
+ margin-top: @baseLineHeight;
+ }
+ .navbar-fixed-top .navbar-inner,
+ .navbar-fixed-bottom .navbar-inner {
padding: 5px;
}
.navbar .container {
diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css
index ac764270aa222dd440a6639ca28ec13a46a88a6d..e0870be449acceb6b3099fa26315f0d58676f4ef 100644
--- a/less/tests/css-tests.css
+++ b/less/tests/css-tests.css
@@ -30,6 +30,7 @@ h4 {
/* Fluid row inputs */
+#rowInputs .row > [class*=span],
#fluidRowInputs .row-fluid > [class*=span] {
background-color: rgba(255,0,0,.1);
}
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index b290186211bed60a20412962df2946c5ad213d41..0e964e27f4478e9feb3bc14a1e2bec4edaacf1b6 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -500,6 +500,73 @@
</div><!--/span-->
</div><!--/row-->
+<h4>Fixed row with inputs</h4>
+<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
+
+<div class="rowInputs">
+ <div class="row">
+ <div class="span12">
+ <input class="span1" placeholder="span1">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row">
+ <div class="span12">
+ <input class="span2" placeholder="span2">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row">
+ <div class="span12">
+ <input class="span3" placeholder="span3">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row">
+ <div class="span12">
+ <input class="span4" placeholder="span4">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row">
+ <div class="span12">
+ <input class="span5" placeholder="span5">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row">
+ <div class="span12">
+ <input class="span6" placeholder="span6">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row">
+ <div class="span12">
+ <input class="span7" placeholder="span7">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row">
+ <div class="span12">
+ <input class="span8" placeholder="span8">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row">
+ <div class="span12">
+ <input class="span9" placeholder="span9">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row">
+ <div class="span12">
+ <input class="span10" placeholder="span10">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row">
+ <div class="span12">
+ <input class="span11" placeholder="span11">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row">
+ <div class="span12">
+ <input class="span12" placeholder="span12">
+ </div><!--/span-->
+ </div><!--/row-->
+</div>
+<br>
+
<h4>Fluid row with inputs</h4>
<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
<div id="fluidRowInputs">
diff --git a/less/tests/forms.html b/less/tests/forms.html
new file mode 100644
index 0000000000000000000000000000000000000000..a63d728a0084b6c766c550967c8d4b0c39c390b6
--- /dev/null
+++ b/less/tests/forms.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le styles -->
+ <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
+ <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
+ <style>
+ body {
+ padding-top: 30px;
+ padding-bottom: 30px;
+ }
+ </style>
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
+ </head>
+
+ <body>
+
+ <form class="container">
+
+ <div class="page-header">
+ <h1>Form controls</h1>
+ </div>
+
+ <div class="row">
+ <div class="span4">
+
+ <label>Select</label>
+ <select>
+ <option>Select</option>
+ <option>Option 2</option>
+ <option>Option 3</option>
+ </select>
+
+ <hr>
+
+ <label>textarea</label>
+ <textarea>Textarea</textarea>
+
+ <hr>
+
+ <label>text</label>
+ <input type="text" value="Text input">
+
+ <hr>
+
+ <label>password</label>
+ <input type="password" value="Password input">
+
+ <hr>
+
+ <label>checkbox</label>
+ <input type="checkbox" value="">
+
+ <hr>
+
+ <label>radio</label>
+ <input type="radio" value="">
+
+ <hr>
+
+ <label>button</label>
+ <input type="button" value="Button">
+
+ <hr>
+
+ <label>submit</label>
+ <input type="submit" value="Submit">
+
+ <hr>
+
+ <label>reset</label>
+ <input type="reset" value="Reset">
+
+ </div><!-- /span4 -->
+ <div class="span4">
+
+ <label>file</label>
+ <input type="file" value="">
+
+ <hr>
+
+ <label>hidden</label>
+ <input type="hidden" value="hidden">
+
+ <hr>
+
+ <label>image</label>
+ <input type="image" value="">
+
+ <hr>
+
+ <label>datetime</label>
+ <input type="datetime" value="">
+
+ <hr>
+
+ <label>datetime-local</label>
+ <input type="datetime-local" value="">
+
+ <hr>
+
+ <label>date</label>
+ <input type="date" value="">
+
+ <hr>
+
+ <label>month</label>
+ <input type="month" value="">
+
+ <hr>
+
+ <label>time</label>
+ <input type="time" value="">
+
+ <hr>
+
+ <label>week</label>
+ <input type="week" value="">
+
+ </div><!-- /span4 -->
+ <div class="span4">
+
+ <label>number</label>
+ <input type="number" value="">
+
+ <hr>
+
+ <label>range</label>
+ <input type="range" value="">
+
+ <hr>
+
+ <label>email</label>
+ <input type="email" value="">
+
+ <hr>
+
+ <label>url</label>
+ <input type="url" value="">
+
+ <hr>
+
+ <label>search</label>
+ <input type="search" value="">
+
+ <hr>
+
+ <label>tel</label>
+ <input type="tel" value="">
+
+ <hr>
+
+ <label>color</label>
+ <input type="color" value="">
+
+ </div><!-- /span4 -->
+ </div><!-- /row -->
+
+ </form> <!-- /container -->
+
+ </body>
+</html>
diff --git a/less/tests/navbar.html b/less/tests/navbar.html
new file mode 100644
index 0000000000000000000000000000000000000000..17754bf6e80c85534b98fdf195a0fd96c3c2e345
--- /dev/null
+++ b/less/tests/navbar.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le styles -->
+ <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
+ <style>
+ body {
+ padding-top: 60px;
+ padding-bottom: 30px;
+ }
+ </style>
+ <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
+ </head>
+
+ <body>
+
+ <!-- Fixed navbar -->
+ <div class="navbar navbar-fixed-top">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href="#">Project name</a>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </div><!--/.nav-collapse -->
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <!-- Static navbar -->
+ <div class="navbar">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href="#">Project name</a>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </div><!--/.nav-collapse -->
+ </div>
+ </div>
+ </div>
+
+ <!-- Main hero unit for a primary marketing message or call to action -->
+ <div class="hero-unit">
+ <h1>Navbar example</h1>
+ <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+ <p>
+ <a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a>
+ </p>
+ </div>
+
+ </div> <!-- /container -->
+
+ <!-- Le javascript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="../assets/js/jquery.js"></script>
+ <script src="../assets/js/bootstrap-transition.js"></script>
+ <script src="../assets/js/bootstrap-alert.js"></script>
+ <script src="../assets/js/bootstrap-modal.js"></script>
+ <script src="../assets/js/bootstrap-dropdown.js"></script>
+ <script src="../assets/js/bootstrap-scrollspy.js"></script>
+ <script src="../assets/js/bootstrap-tab.js"></script>
+ <script src="../assets/js/bootstrap-tooltip.js"></script>
+ <script src="../assets/js/bootstrap-popover.js"></script>
+ <script src="../assets/js/bootstrap-button.js"></script>
+ <script src="../assets/js/bootstrap-collapse.js"></script>
+ <script src="../assets/js/bootstrap-carousel.js"></script>
+ <script src="../assets/js/bootstrap-typeahead.js"></script>
+
+ </body>
+</html>
diff --git a/less/type.less b/less/type.less
index 0d562193406bc42d437071e0609337588e1da06b..61aa624a747dcbc0d45c6b26e218e46c05c0a737 100644
--- a/less/type.less
+++ b/less/type.less
@@ -171,7 +171,7 @@ em {
// Abbreviations and acronyms
abbr[title] {
cursor: help;
- border-bottom: 1px dotted #ddd;
+ border-bottom: 1px dotted @grayLight;
}
abbr.initialism {
font-size: 90%;
diff --git a/less/variables.less b/less/variables.less
index d8825fb0764bd178d806cc6821699c6c2f33cbed..b931d3d2a26ae072283808d0ece8520717f732f9 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -107,7 +107,8 @@
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkBackgroundHover: @linkColor;
-
+@dropdownDividerTop: #e5e5e5;
+@dropdownDividerBottom: @white;