Merge branch 'master' into docs_derp

.gitignore

@@ -39,3 +39,4 @@ validation-report.json
 
 # Folders to ignore
 node_modules
+bower_components

components.html

@@ -3160,7 +3160,7 @@ body { padding-bottom: 70px; }
               <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
             </a>
             <div class="media-body">
-              <h4 class="media-heading">Media heading</h4>
+              <h4 class="media-heading">Nested media heading</h4>
               Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
             </div>
           </div>

css.html

@@ -1617,7 +1617,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h2 id="forms-horizontal">Horizontal form</h2>
     <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
     <div class="bs-example">
-      <form class="form-horizontal">
+      <form class="form-horizontal" role="form">
         <div class="form-group">
           <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
           <div class="col-sm-10">

dist/css/bootstrap.css

@@ -4665,13 +4665,13 @@ textarea.input-group-sm > .input-group-btn > .btn {
 }
 
 .navbar-text {
-  float: left;
   margin-top: 15px;
   margin-bottom: 15px;
 }
 
 @media (min-width: 768px) {
   .navbar-text {
+    float: left;
     margin-right: 15px;
     margin-left: 15px;
   }

examples/jumbotron/index.html

@@ -40,7 +40,7 @@
           <a class="navbar-brand" href="#">Project name</a>
         </div>
         <div class="navbar-collapse collapse">
-          <form class="navbar-form navbar-right">
+          <form class="navbar-form navbar-right" role="form">
             <div class="form-group">
               <input type="text" placeholder="Email" class="form-control">
             </div>

examples/signin/index.html

@@ -30,7 +30,7 @@
 
     <div class="container">
 
-      <form class="form-signin">
+      <form class="form-signin" role="form">
         <h2 class="form-signin-heading">Please sign in</h2>
         <input type="text" class="form-control" placeholder="Email address" required autofocus>
         <input type="password" class="form-control" placeholder="Password" required>

javascript.html

@@ -304,15 +304,15 @@ $('#myModal').modal({
 {% endhighlight %}
 
     <h4>.modal('toggle')</h4>
-    <p>Manually toggles a modal.</p>
+    <p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p>
     {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
 
     <h4>.modal('show')</h4>
-    <p>Manually opens a modal.</p>
+    <p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p>
     {% highlight js %}$('#myModal').modal('show'){% endhighlight %}
 
     <h4>.modal('hide')</h4>
-    <p>Manually hides a modal.</p>
+    <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
     {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
 
     <h3>Events</h3>
@@ -328,11 +328,11 @@ $('#myModal').modal({
         <tbody>
          <tr>
            <td>show.bs.modal</td>
-           <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+           <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
          </tr>
          <tr>
            <td>shown.bs.modal</td>
-           <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
+           <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
          </tr>
          <tr>
            <td>hide.bs.modal</td>
@@ -346,8 +346,8 @@ $('#myModal').modal({
       </table>
     </div><!-- /.table-responsive -->
 {% highlight js %}
-$('#myModal').on('hidden.bs.modal', function () {
-  // do something…
+$('#myModal').on('hidden.bs.modal', function (e) {
+  // do something...
 })
 {% endhighlight %}
   </div>

js/dropdown.js

@@ -41,7 +41,7 @@
 
     if (!isActive) {
       if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
-        // if mobile we we use a backdrop because click events don't delegate
+        // if mobile we use a backdrop because click events don't delegate
         $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
       }
 

less/mixins.less

@@ -55,7 +55,8 @@
 // Placeholder text
 .placeholder(@color: @input-color-placeholder) {
   &:-moz-placeholder            { color: @color; } // Firefox 4-18
-  &::-moz-placeholder           { color: @color; } // Firefox 19+
+  &::-moz-placeholder           { color: @color;   // Firefox 19+
+                                  opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
   &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
   &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
 }

less/navbar.less

@@ -340,10 +340,10 @@
 // Add a class to make any element properly align itself vertically within the navbars.
 
 .navbar-text {
-  float: left;
   .navbar-vertical-align(@line-height-computed);
 
   @media (min-width: @grid-float-breakpoint) {
+    float: left;
     margin-left: @navbar-padding-horizontal;
     margin-right: @navbar-padding-horizontal;
   }