Merge branch '3.0.0-wip' into bs3_navbar_overhaul

Conflicts:
	dist/css/bootstrap.min.css

.gitignore

@@ -33,6 +33,9 @@ nbproject
 *.komodoproject
 .komodotools
 
+# grunt-html-validation
+validation-staus.json
+
 # Folders to ignore
 .hg
 .svn

.travis.yml

@@ -2,6 +2,7 @@ language: node_js
 node_js:
   - 0.8
 before_script:
+  - gem install jekyll
   - npm install -g grunt-cli
 env:
   global:

Gruntfile.js

@@ -102,6 +102,19 @@ module.exports = function(grunt) {
       }
     },
 
+    jekyll: {
+      docs: {}
+    },
+
+    validation: {
+      options: {
+        reset: true,
+      },
+      files: {
+        src: ["_gh_pages/**/*.html"]
+      }
+    },
+
     watch: {
       src: {
         files: '<%= jshint.src.src %>',
@@ -127,12 +140,17 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-qunit');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-html-validation');
+  grunt.loadNpmTasks('grunt-jekyll');
   grunt.loadNpmTasks('grunt-recess');
   grunt.loadNpmTasks('browserstack-runner');
 
 
+  // Docs HTML validation task
+  grunt.registerTask('validate-docs', ['jekyll', 'validation']);
+
   // Test task.
-  var testSubtasks = ['jshint', 'qunit'];
+  var testSubtasks = ['jshint', 'qunit', 'validate-docs'];
   // Only run BrowserStack tests under Travis
   if (process.env.TRAVIS) {
     // Only run BrowserStack tests if this is a mainline commit in twbs/bootstrap, or you have your own BrowserStack key

_config.yml

@@ -13,7 +13,7 @@ port:             9001
 # Custom vars
 repo:             https://github.com/twbs/bootstrap
 download:         https://github.com/twbs/bootstrap/archive/3.0.0-wip.zip
-download_dist:    http://getbootstrap.com/bs-v3.0.0-rc1-dist.zip
+download_dist:    http://getbootstrap.com/bs-v3.0.0-rc.2-dist.zip
 
 examples:         http://examples.getbootstrap.com
 examples_repo:    https://github.com/twbs/bootstrap-examples
@@ -24,5 +24,5 @@ glyphicons_repo:  https://github.com/twbs/bootstrap-glyphicons
 blog:             http://blog.getbootstrap.com
 expo:             http://expo.getbootstrap.com
 
-cdn_css:          //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css
+cdn_css:          //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css
-cdn_js:           //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js
+cdn_js:           //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/js/bootstrap.min.js

assets/css/docs.css

@@ -719,7 +719,7 @@ body {
 -------------------------------------------------- */
 
 /* Pseudo :focus state for showing how it looks in the docs */
-input.focused {
+#focusedInput {
   border-color: rgba(82,168,236,.8);
   outline: 0;
   outline: thin dotted \9; /* IE6-9 */

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap",
   "version": "3.0.0",
-  "main": ["./dist/js/bootstrap.min.js", "./dist/js/bootstrap.js", "./dist/css/bootstrap.min.css", "./dist/css/bootstrap.css"],
+  "main": ["./dist/js/bootstrap.min.js", "./dist/css/bootstrap.min.css"],
   "ignore": [
       "**/.*"
   ],

components.html

@@ -19,24 +19,25 @@ base_url: "../"
     <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
     <div class="bs-example">
       <div class="dropdown clearfix">
-        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+        <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-          <li><a tabindex="-1" href="#">Action</a></li>
+        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-          <li><a tabindex="-1" href="#">Another action</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-          <li><a tabindex="-1" href="#">Something else here</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-          <li class="divider"></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-          <li><a tabindex="-1" href="#">Separated link</a></li>
+          <li role="presentation" class="divider"></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
         </ul>
       </div>
     </div><!-- /example -->
 {% highlight html %}
 <div class="dropdown">
   <!-- Link or button to toggle dropdown -->
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-    <li><a tabindex="-1" href="#">Action</a></li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-    <li><a tabindex="-1" href="#">Another action</a></li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-    <li><a tabindex="-1" href="#">Something else here</a></li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-    <li class="divider"></li>
+    <li role="presentation" class="divider"></li>
-    <li><a tabindex="-1" href="#">Separated link</a></li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
   </ul>
 </div>
 {% endhighlight %}
@@ -53,23 +54,24 @@ base_url: "../"
     <p>Add a header to label sections of actions in any dropdown menu.</p>
     <div class="bs-example">
       <div class="dropdown clearfix">
-        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+        <a id="dropdownMenu2" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-          <li class="dropdown-header">Dropdown header</li>
+        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
-          <li><a tabindex="-1" href="#">Action</a></li>
+          <li role="presentation" class="dropdown-header">Dropdown header</li>
-          <li><a tabindex="-1" href="#">Another action</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
-          <li><a tabindex="-1" href="#">Something else here</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
-          <li class="divider"></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
-          <li class="dropdown-header">Dropdown header</li>
+          <li role="presentation" class="divider"></li>
-          <li><a tabindex="-1" href="#">Separated link</a></li>
+          <li role="presentation" class="dropdown-header">Dropdown header</li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
         </ul>
       </div>
     </div><!-- /example -->
 {% highlight html %}
-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
-  <li class="dropdown-header">Dropdown header</li>
+  <li role="presentation" class="dropdown-header">Dropdown header</li>
   ...
-  <li class="divider"></li>
+  <li role="presentation" class="divider"></li>
-  <li class="dropdown-header">Dropdown header</li>
+  <li role="presentation" class="dropdown-header">Dropdown header</li>
   ...
 </ul>
 {% endhighlight %}
@@ -78,18 +80,19 @@ base_url: "../"
     <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
     <div class="bs-example">
       <div class="dropdown clearfix">
-        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+        <a id="dropdownMenu3" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-          <li><a tabindex="-1" href="#">Regular link</a></li>
+        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
-          <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
-          <li><a tabindex="-1" href="#">Another link</a></li>
+          <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
+          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
         </ul>
       </div>
     </div><!-- /example -->
 {% highlight html %}
-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
-  <li><a tabindex="-1" href="#">Regular link</a></li>
+  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
-  <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
+  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
-  <li><a tabindex="-1" href="#">Another link</a></li>
+  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
 </ul>
 {% endhighlight %}
   </div>
@@ -230,8 +233,48 @@ base_url: "../"
       <div class="btn-group-vertical">
         <button type="button" class="btn btn-default">Button</button>
         <button type="button" class="btn btn-default">Button</button>
+        <div class="btn-group">
+          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            Dropdown
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Dropdown link</a></li>
+            <li><a href="#">Dropdown link</a></li>
+          </ul>
+        </div>
         <button type="button" class="btn btn-default">Button</button>
         <button type="button" class="btn btn-default">Button</button>
+        <div class="btn-group">
+          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            Dropdown
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Dropdown link</a></li>
+            <li><a href="#">Dropdown link</a></li>
+          </ul>
+        </div>
+        <div class="btn-group">
+          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            Dropdown
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Dropdown link</a></li>
+            <li><a href="#">Dropdown link</a></li>
+          </ul>
+        </div>
+        <div class="btn-group">
+          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            Dropdown
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Dropdown link</a></li>
+            <li><a href="#">Dropdown link</a></li>
+          </ul>
+        </div>
       </div>
     </div>
 {% highlight html %}
@@ -1743,22 +1786,22 @@ body { padding-bottom: 70px; }
       <div class="row">
         <div class="col-lg-3">
           <a href="#" class="thumbnail">
-            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
+            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
           </a>
         </div>
         <div class="col-lg-3">
           <a href="#" class="thumbnail">
-            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
+            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
           </a>
         </div>
         <div class="col-lg-3">
           <a href="#" class="thumbnail">
-            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
+            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
           </a>
         </div>
         <div class="col-lg-3">
           <a href="#" class="thumbnail">
-            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
+            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
           </a>
         </div>
       </div>
@@ -1780,7 +1823,7 @@ body { padding-bottom: 70px; }
       <div class="row">
         <div class="col-lg-4">
           <div class="thumbnail">
-            <img data-src="holder.js/300x200" alt="">
+            <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
             <div class="caption">
               <h3>Thumbnail label</h3>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -1790,7 +1833,7 @@ body { padding-bottom: 70px; }
         </div>
         <div class="col-lg-4">
           <div class="thumbnail">
-            <img data-src="holder.js/300x200" alt="">
+            <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
             <div class="caption">
               <h3>Thumbnail label</h3>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -1800,7 +1843,7 @@ body { padding-bottom: 70px; }
         </div>
         <div class="col-lg-4">
           <div class="thumbnail">
-            <img data-src="holder.js/300x200" alt="">
+            <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
             <div class="caption">
               <h3>Thumbnail label</h3>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -1814,7 +1857,7 @@ body { padding-bottom: 70px; }
 <div class="row">
   <div class="col-lg-4">
     <div class="thumbnail">
-      <img data-src="holder.js/300x200" alt="">
+      <img data-src="holder.js/300x200" alt="...">
       <div class="caption">
         <h3>Thumbnail label</h3>
         <p>...</p>
@@ -2072,7 +2115,7 @@ body { padding-bottom: 70px; }
     <div class="bs-example">
       <div class="media">
         <a class="pull-left" href="#">
-          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
         </a>
         <div class="media-body">
           <h4 class="media-heading">Media heading</h4>
@@ -2081,14 +2124,14 @@ body { padding-bottom: 70px; }
       </div>
       <div class="media">
         <a class="pull-left" href="#">
-          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
         </a>
         <div class="media-body">
           <h4 class="media-heading">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 class="media">
             <a class="pull-left" href="#">
-              <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+              <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
             </a>
             <div class="media-body">
               <h4 class="media-heading">Media heading</h4>
@@ -2116,7 +2159,7 @@ body { padding-bottom: 70px; }
       <ul class="media-list">
         <li class="media">
           <a class="pull-left" href="#">
-            <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+            <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
           </a>
           <div class="media-body">
             <h4 class="media-heading">Media heading</h4>
@@ -2124,7 +2167,7 @@ body { padding-bottom: 70px; }
             <!-- Nested media object -->
             <div class="media">
               <a class="pull-left" href="#">
-                <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+                <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
               </a>
               <div class="media-body">
                 <h4 class="media-heading">Nested media heading</h4>
@@ -2132,7 +2175,7 @@ body { padding-bottom: 70px; }
                 <!-- Nested media object -->
                 <div class="media">
                   <a class="pull-left" href="#">
-                    <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+                    <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
                   </a>
                   <div class="media-body">
                     <h4 class="media-heading">Nested media heading</h4>
@@ -2144,7 +2187,7 @@ body { padding-bottom: 70px; }
             <!-- Nested media object -->
             <div class="media">
               <a class="pull-left" href="#">
-                <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+                <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
               </a>
               <div class="media-body">
                 <h4 class="media-heading">Nested media heading</h4>
@@ -2155,7 +2198,7 @@ body { padding-bottom: 70px; }
         </li>
         <li class="media">
           <a class="pull-right" href="#">
-            <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+            <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
           </a>
           <div class="media-body">
             <h4 class="media-heading">Media heading</h4>
@@ -2307,12 +2350,16 @@ body { padding-bottom: 70px; }
     <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
     <div class="bs-example">
       <div class="panel">
-        Basic panel example
+        <div class="panel-body">
+          Basic panel example
+        </div>
       </div>
     </div>
 {% highlight html %}
 <div class="panel">
-  Basic panel example
+  <div class="panel-body">
+    Basic panel example
+  </div>
 </div>
 {% endhighlight %}
 
@@ -2321,26 +2368,34 @@ body { padding-bottom: 70px; }
     <div class="bs-example">
       <div class="panel">
         <div class="panel-heading">Panel heading</div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
       <div class="panel">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
     </div>
 {% highlight html %}
 <div class="panel">
   <div class="panel-heading">Panel heading</div>
-  Panel content
+  <div class="panel-body">
+    Panel content
+  </div>
 </div>
 
 <div class="panel">
   <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
   </div>
-  Panel content
+  <div class="panel-body">
+    Panel content
+  </div>
 </div>
 {% endhighlight %}
 
@@ -2348,13 +2403,17 @@ body { padding-bottom: 70px; }
     <p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
     <div class="bs-example">
       <div class="panel">
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
         <div class="panel-footer">Panel footer</div>
       </div>
     </div>
 {% highlight html %}
 <div class="panel">
-  Panel content
+  <div class="panel-body">
+    Panel content
+  </div>
   <div class="panel-footer">Panel footer</div>
 </div>
 {% endhighlight %}
@@ -2366,31 +2425,41 @@ body { padding-bottom: 70px; }
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
       <div class="panel panel-success">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
       <div class="panel panel-warning">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
       <div class="panel panel-danger">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
       <div class="panel panel-info">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
-        Panel content
+        <div class="panel-body">
+          Panel content
+        </div>
       </div>
     </div>
 {% highlight html %}
@@ -2407,7 +2476,9 @@ body { padding-bottom: 70px; }
       <div class="panel">
         <!-- Default panel contents -->
         <div class="panel-heading">Panel heading</div>
-        <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+        <div class="panel-body">
+          <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+        </div>
 
         <!-- List group -->
         <ul class="list-group">
@@ -2423,7 +2494,9 @@ body { padding-bottom: 70px; }
 <div class="panel">
   <!-- Default panel contents -->
   <div class="panel-heading">Panel heading</div>
-  <p>...</p>
+  <div class="panel-body">
+    <p>...</p>
+  </div>
 
   <!-- List group -->
   <ul class="list-group">

css.html

@@ -602,7 +602,7 @@ base_url: "../"
           </tr>
           <tr>
             <td><h5>Bootstrap heading</h5></td>
-            <td>Semibold 16px</td>
+            <td>Semibold 14px</td>
           </tr>
           <tr>
             <td><h6>Bootstrap heading</h6></td>
@@ -2012,9 +2012,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
     </div>
     <div class="bs-example bs-example-images">
-      <img data-src="holder.js/140x140" class="img-rounded" alt="A generic square placeholder image with rounded corners">
+      <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-rounded" alt="A generic square placeholder image with rounded corners">
-      <img data-src="holder.js/140x140" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
+      <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
-      <img data-src="holder.js/140x140" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
+      <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
     </div>
 {% highlight html %}
 <img src="..." alt="..." class="img-rounded">
@@ -2075,7 +2075,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 {% highlight css %}
 // Mixin
-.clearfix {
+.clearfix() {
   &:before,
   &:after {
     content: " ";

dist/css/bootstrap.css

@@ -1704,7 +1704,7 @@ textarea.form-control {
   margin-left: 10px;
 }
 
-.input-lg {
+.input-sm {
   height: 45px;
   padding: 10px 16px;
   font-size: 18px;
@@ -1712,7 +1712,16 @@ textarea.form-control {
   border-radius: 6px;
 }
 
-.input-sm {
+select.input-sm {
+  height: 45px;
+  line-height: 45px;
+}
+
+textarea.input-sm {
+  height: auto;
+}
+
+.input-lg {
   height: 30px;
   padding: 5px 10px;
   font-size: 12px;
@@ -1721,17 +1730,11 @@ textarea.form-control {
 }
 
 select.input-lg {
-  height: 45px;
-  line-height: 45px;
-}
-
-select.input-sm {
   height: 30px;
   line-height: 30px;
 }
 
-textarea.input-lg,
+textarea.input-lg {
-textarea.input-sm {
   height: auto;
 }
 
@@ -2256,6 +2259,29 @@ input[type="button"].btn-block {
 
 .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-btn > .btn {
+  height: 30px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+select.input-group-lg > .form-control,
+select.input-group-lg > .input-group-addon,
+select.input-group-lg > .input-group-btn > .btn {
+  height: 30px;
+  line-height: 30px;
+}
+
+textarea.input-group-lg > .form-control,
+textarea.input-group-lg > .input-group-addon,
+textarea.input-group-lg > .input-group-btn > .btn {
+  height: auto;
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn {
   height: 45px;
   padding: 10px 16px;
@@ -2264,14 +2290,17 @@ input[type="button"].btn-block {
   border-radius: 6px;
 }
 
-.input-group-sm > .form-control,
+select.input-group-sm > .form-control,
-.input-group-sm > .input-group-addon,
+select.input-group-sm > .input-group-addon,
-.input-group-lg > .input-group-btn > .btn {
+select.input-group-lg > .input-group-btn > .btn {
-  height: 30px;
+  height: 45px;
-  padding: 5px 10px;
+  line-height: 45px;
-  font-size: 12px;
+}
-  line-height: 1.5;
+
-  border-radius: 3px;
+textarea.input-group-sm > .form-control,
+textarea.input-group-sm > .input-group-addon,
+textarea.input-group-lg > .input-group-btn > .btn {
+  height: auto;
 }
 
 .input-group-addon,
@@ -2395,6 +2424,7 @@ input[type="button"].btn-block {
   min-width: 160px;
   padding: 5px 0;
   margin: 2px 0 0;
+  font-size: 14px;
   list-style: none;
   background-color: #ffffff;
   border: 1px solid #cccccc;
@@ -2593,7 +2623,6 @@ a.list-group-item:focus {
 }
 
 .panel {
-  padding: 15px;
   margin-bottom: 20px;
   background-color: #ffffff;
   border: 1px solid #dddddd;
@@ -2602,8 +2631,12 @@ a.list-group-item:focus {
           box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 
+.panel-body {
+  padding: 15px;
+}
+
 .panel .list-group {
-  margin: 15px -15px -15px;
+  margin-bottom: 0;
 }
 
 .panel .list-group .list-group-item {
@@ -2619,17 +2652,12 @@ a.list-group-item:focus {
   border-bottom: 0;
 }
 
-.panel-heading + .list-group {
-  margin-top: -15px;
-}
-
 .panel-heading + .list-group .list-group-item:first-child {
   border-top-width: 0;
 }
 
 .panel-heading {
   padding: 10px 15px;
-  margin: -15px -15px 15px;
   background-color: #f5f5f5;
   border-bottom: 1px solid #dddddd;
   border-top-right-radius: 3px;
@@ -2648,13 +2676,38 @@ a.list-group-item:focus {
 
 .panel-footer {
   padding: 10px 15px;
-  margin: 15px -15px -15px;
   background-color: #f5f5f5;
   border-top: 1px solid #dddddd;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 
+.panel-group .panel {
+  margin-bottom: 0;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.panel-group .panel + .panel {
+  margin-top: 5px;
+}
+
+.panel-group .panel-heading {
+  border-bottom: 0;
+}
+
+.panel-group .panel-heading + .panel-collapse .panel-body {
+  border-top: 1px solid #dddddd;
+}
+
+.panel-group .panel-footer {
+  border-top: 0;
+}
+
+.panel-group .panel-footer + .panel-collapse .panel-body {
+  border-bottom: 1px solid #dddddd;
+}
+
 .panel-primary {
   border-color: #428bca;
 }
@@ -2665,6 +2718,14 @@ a.list-group-item:focus {
   border-color: #428bca;
 }
 
+.panel-primary .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #428bca;
+}
+
+.panel-primary .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #428bca;
+}
+
 .panel-success {
   border-color: #d6e9c6;
 }
@@ -2675,6 +2736,14 @@ a.list-group-item:focus {
   border-color: #d6e9c6;
 }
 
+.panel-success .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #d6e9c6;
+}
+
+.panel-success .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #d6e9c6;
+}
+
 .panel-warning {
   border-color: #fbeed5;
 }
@@ -2685,6 +2754,14 @@ a.list-group-item:focus {
   border-color: #fbeed5;
 }
 
+.panel-warning .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #fbeed5;
+}
+
+.panel-warning .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #fbeed5;
+}
+
 .panel-danger {
   border-color: #eed3d7;
 }
@@ -2695,6 +2772,14 @@ a.list-group-item:focus {
   border-color: #eed3d7;
 }
 
+.panel-danger .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #eed3d7;
+}
+
+.panel-danger .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #eed3d7;
+}
+
 .panel-info {
   border-color: #bce8f1;
 }
@@ -2705,6 +2790,14 @@ a.list-group-item:focus {
   border-color: #bce8f1;
 }
 
+.panel-info .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #bce8f1;
+}
+
+.panel-info .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #bce8f1;
+}
+
 .well {
   min-height: 20px;
   padding: 19px;
@@ -3562,7 +3655,10 @@ button.close {
   outline: none;
 }
 
-.btn-group .btn + .btn {
+.btn-group .btn + .btn,
+.btn-group .btn + .btn-group,
+.btn-group .btn-group + .btn,
+.btn-group .btn-group + .btn-group {
   margin-left: -1px;
 }
 
@@ -3689,27 +3785,73 @@ button.close {
   border-bottom-width: 5px;
 }
 
-.btn-group-vertical > .btn {
+.btn-group-vertical > .btn,
+.btn-group-vertical > .btn-group {
   display: block;
   float: none;
   width: 100%;
   max-width: 100%;
 }
 
-.btn-group-vertical > .btn + .btn {
+.btn-group-vertical > .btn-group:before,
-  margin-top: -1px;
+.btn-group-vertical > .btn-group:after {
+  display: table;
+  content: " ";
 }
 
-.btn-group-vertical .btn:not(:first-child):not(:last-child) {
+.btn-group-vertical > .btn-group:after {
+  clear: both;
+}
+
+.btn-group-vertical > .btn-group:before,
+.btn-group-vertical > .btn-group:after {
+  display: table;
+  content: " ";
+}
+
+.btn-group-vertical > .btn-group:after {
+  clear: both;
+}
+
+.btn-group-vertical > .btn-group > .btn {
+  float: none;
+}
+
+.btn-group-vertical > .btn + .btn,
+.btn-group-vertical > .btn + .btn-group,
+.btn-group-vertical > .btn-group + .btn,
+.btn-group-vertical > .btn-group + .btn-group {
+  margin-top: -1px;
+  margin-left: 0;
+}
+
+.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
   border-radius: 0;
 }
 
-.btn-group-vertical .btn:first-child:not(:last-child) {
+.btn-group-vertical > .btn:first-child:not(:last-child) {
+  border-top-right-radius: 4px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.btn-group-vertical .btn:last-child:not(:first-child) {
+.btn-group-vertical > .btn:last-child:not(:first-child) {
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 0;
+}
+
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+
+.btn-group-vertical > .btn-group:first-child > .btn:last-child,
+.btn-group-vertical > .btn-group:first-child > .dropdown-toggle {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn-group-vertical > .btn-group:last-child > .btn:first-child {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
@@ -4696,31 +4838,6 @@ a.list-group-item.active > .badge,
   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);
 }
 
-.accordion {
-  margin-bottom: 20px;
-}
-
-.accordion-group {
-  margin-bottom: 2px;
-  border: 1px solid #e5e5e5;
-  border-radius: 4px;
-}
-
-.accordion-heading {
-  border-bottom: 0;
-}
-
-.accordion-heading .accordion-toggle {
-  display: block;
-  padding: 8px 15px;
-  cursor: pointer;
-}
-
-.accordion-inner {
-  padding: 9px 15px;
-  border-top: 1px solid #e5e5e5;
-}
-
 .carousel {
   position: relative;
 }

dist/js/bootstrap.js

@@ -539,7 +539,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
+    var actives = this.$parent && this.$parent.find('> .panel > .in')
 
     if (actives && actives.length) {
       var hasData = actives.data('bs.collapse')

getting-started.html

@@ -15,9 +15,14 @@ base_url: "../"
     </div>
     <p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
 
+    <h3>Download latest full source</h3>
+    <p class="lead">Until Bootstrap 3.0.0 is finalized, download the latest full source code (includes compiled and minified versions of our CSS and JavaScript under the <code>dist/</code> directory).</p>
+    <a href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest Bootstrap 3</a>
+    <!--
     <h3>Download compiled CSS and JS</h3>
     <p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
     <p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
+    -->
 
     <h3 id="download-options">More download options</h3>
     <div class="bs-docs-dl-options">
@@ -180,6 +185,9 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
       <li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
     </ul>
     <p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
+
+    <h3>Modals and mobile devices</h3>
+    <p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p>
   </div>
 
 

javascript.html

@@ -1401,42 +1401,48 @@ $('.nav-tabs').button()
     </div>
 
     <h2 id="collapse-examples">Example accordion</h2>
-    <p>Using the collapse plugin, we built a simple accordion style widget:</p>
+    <p>Using the collapse plugin, we built a simple accordion by extending the panel component.</p>
 
     <div class="bs-example">
-      <div class="accordion" id="accordion2">
+      <div class="panel-group" id="accordion">
-        <div class="accordion-group">
+        <div class="panel">
-          <div class="accordion-heading">
+          <div class="panel-heading">
-            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+            <h3 class="panel-title">
-              Collapsible Group Item #1
+              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
-            </a>
+                Collapsible Group Item #1
+              </a>
+            </h3>
           </div>
-          <div id="collapseOne" class="accordion-body collapse in">
+          <div id="collapseOne" class="panel-collapse collapse in">
-            <div class="accordion-inner">
+            <div class="panel-body">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>
           </div>
         </div>
-        <div class="accordion-group">
+        <div class="panel">
-          <div class="accordion-heading">
+          <div class="panel-heading">
-            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+            <h3 class="panel-title">
-              Collapsible Group Item #2
+              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
-            </a>
+                Collapsible Group Item #2
+              </a>
+            </h3>
           </div>
-          <div id="collapseTwo" class="accordion-body collapse">
+          <div id="collapseTwo" class="panel-collapse collapse">
-            <div class="accordion-inner">
+            <div class="panel-body">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>
           </div>
         </div>
-        <div class="accordion-group">
+        <div class="panel">
-          <div class="accordion-heading">
+          <div class="panel-heading">
-            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
+            <h3 class="panel-title">
-              Collapsible Group Item #3
+              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
-            </a>
+                Collapsible Group Item #3
+              </a>
+            </h3>
           </div>
-          <div id="collapseThree" class="accordion-body collapse">
+          <div id="collapseThree" class="panel-collapse collapse">
-            <div class="accordion-inner">
+            <div class="panel-body">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>
           </div>
@@ -1444,40 +1450,46 @@ $('.nav-tabs').button()
       </div>
     </div><!-- /example -->
 {% highlight html %}
-<div class="accordion" id="accordion2">
+<div class="panel-group" id="accordion">
-  <div class="accordion-group">
+  <div class="panel">
-    <div class="accordion-heading">
+    <div class="panel-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+      <h3 class="panel-title">
-        Collapsible Group Item #1
+        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
-      </a>
+          Collapsible Group Item #1
+        </a>
+      </h3>
     </div>
-    <div id="collapseOne" class="accordion-body collapse in">
+    <div id="collapseOne" class="panel-collapse collapse in">
-      <div class="accordion-inner">
+      <div class="panel-body">
-        ...
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
     </div>
   </div>
-  <div class="accordion-group">
+  <div class="panel">
-    <div class="accordion-heading">
+    <div class="panel-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+      <h3 class="panel-title">
-        Collapsible Group Item #2
+        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
-      </a>
+          Collapsible Group Item #2
+        </a>
+      </h3>
     </div>
-    <div id="collapseTwo" class="accordion-body collapse">
+    <div id="collapseTwo" class="panel-collapse collapse">
-      <div class="accordion-inner">
+      <div class="panel-body">
-        ...
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
     </div>
   </div>
-  <div class="accordion-group">
+  <div class="panel">
-    <div class="accordion-heading">
+    <div class="panel-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
+      <h3 class="panel-title">
-        Collapsible Group Item #3
+        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
-      </a>
+          Collapsible Group Item #3
+        </a>
+      </h3>
     </div>
-    <div id="collapseThree" class="accordion-body collapse">
+    <div id="collapseThree" class="panel-collapse collapse">
-      <div class="accordion-inner">
+      <div class="panel-body">
-        ...
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
     </div>
   </div>
@@ -1613,13 +1625,13 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
         </ol>
         <div class="carousel-inner">
           <div class="item active">
-            <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
+            <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
+            <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
+            <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
           </div>
         </div>
         <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
@@ -1675,21 +1687,21 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
         </ol>
         <div class="carousel-inner">
           <div class="item active">
-            <img data-src="holder.js/900x500/auto/#777:#777" alt="">
+            <img data-src="holder.js/900x500/auto/#777:#777" src="data:image/png;base64," alt="First slide image">
             <div class="carousel-caption">
               <h3>First slide label</h3>
               <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
             </div>
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#666:#666" alt="">
+            <img data-src="holder.js/900x500/auto/#666:#666" src="data:image/png;base64," alt="Second slide image">
             <div class="carousel-caption">
               <h3>Second slide label</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
             </div>
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#555:#5555" alt="">
+            <img data-src="holder.js/900x500/auto/#555:#5555" src="data:image/png;base64," alt="Third slide image">
             <div class="carousel-caption">
               <h3>Third slide label</h3>
               <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
@@ -1706,7 +1718,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
     </div><!-- /example -->
 {% highlight html %}
 <div class="item active">
-  <img src="..." alt="">
+  <img src="..." alt="...">
   <div class="carousel-caption">
     <h3>...</h3>
     <p>...</p>
@@ -1769,7 +1781,7 @@ $('.carousel').carousel()
 
     <h4>.carousel(options)</h4>
     <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
-{% highlight html %}
+{% highlight js %}
 $('.carousel').carousel({
   interval: 2000
 })

js/collapse.js

@@ -48,7 +48,7 @@
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
+    var actives = this.$parent && this.$parent.find('> .panel > .in')
 
     if (actives && actives.length) {
       var hasData = actives.data('bs.collapse')

less/accordion.less

@@ -1,31 +0,0 @@
-//
-// Accordion
-// --------------------------------------------------
-
-
-// Parent container
-.accordion {
-  margin-bottom: @line-height-computed;
-}
-
-// Group == heading + body
-.accordion-group {
-  margin-bottom: 2px;
-  border: 1px solid @accordion-border-color;
-  border-radius: @border-radius-base;
-}
-.accordion-heading {
-  border-bottom: 0;
-
-  .accordion-toggle {
-    display: block;
-    padding: 8px 15px;
-    cursor: pointer;
-  }
-}
-
-// Inner needs the styles because you can't animate properly with any styles on the element
-.accordion-inner {
-  padding: 9px 15px;
-  border-top: 1px solid @accordion-border-color;
-}

less/bootstrap.less

@@ -55,7 +55,6 @@
 @import "labels.less";
 @import "badges.less";
 @import "progress-bars.less";
-@import "accordion.less";
 @import "carousel.less";
 @import "jumbotron.less";
 

less/button-groups.less

@@ -55,8 +55,13 @@
 }
 
 // Prevent double borders when buttons are next to each other
-.btn-group .btn + .btn {
+.btn-group {
-  margin-left: -1px;
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -1px;
+  }
 }
 
 // Optional: Group multiple button groups together for a toolbar
@@ -163,26 +168,58 @@
 // Vertical button groups
 // ----------------------
 
-.btn-group-vertical > .btn {
+.btn-group-vertical {
-  display: block;
+  > .btn,
-  float: none;
+  > .btn-group {
-  width: 100%;
+    display: block;
-  max-width: 100%;
+    float: none;
-  + .btn {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  // Clear floats so dropdown menus can be properly placed
+  > .btn-group {
+    .clearfix();
+    > .btn {
+      float: none;
+    }
+  }
+
+  > .btn + .btn,
+  > .btn + .btn-group,
+  > .btn-group + .btn,
+  > .btn-group + .btn-group {
     margin-top: -1px;
+    margin-left: 0;
   }
 }
-.btn-group-vertical .btn {
+
+.btn-group-vertical > .btn {
   &:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
   &:first-child:not(:last-child) {
+    border-top-right-radius: @border-radius-base;
     .border-bottom-radius(0);
   }
   &:last-child:not(:first-child) {
+    border-bottom-left-radius: @border-radius-base;
     .border-top-radius(0);
   }
 }
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+.btn-group-vertical > .btn-group:first-child {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    .border-bottom-radius(0);
+  }
+}
+.btn-group-vertical > .btn-group:last-child > .btn:first-child {
+  .border-top-radius(0);
+}
+
 
 
 // Justified button groups

less/dropdowns.less

@@ -38,6 +38,7 @@
   padding: 5px 0;
   margin: 2px 0 0; // override default ul
   list-style: none;
+  font-size: @font-size-base;
   background-color: @dropdown-bg;
   border: 1px solid @dropdown-fallback-border; // IE8 fallback
   border: 1px solid @dropdown-border;

less/forms.less

@@ -208,43 +208,13 @@ input[type="number"] {
 }
 
 
-
 // Form control sizing
-//
+.input-sm {
-// Relative text size, padding, and border-radii changes for form controls. For
+  .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
-// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+}
-// element gets special love because it's special, and that's a fact!
 
 .input-lg {
-  height: @input-height-large;
+  .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
-  padding: @padding-large-vertical @padding-large-horizontal;
-  font-size: @font-size-large;
-  line-height: @line-height-large;
-  border-radius: @border-radius-large;
-}
-.input-sm {
-  height: @input-height-small;
-  padding: @padding-small-vertical @padding-small-horizontal;
-  font-size: @font-size-small;
-  line-height: @line-height-small;
-  border-radius: @border-radius-small;
-}
-
-select {
-  &.input-lg {
-    height: @input-height-large;
-    line-height: @input-height-large;
-  }
-  &.input-sm {
-    height: @input-height-small;
-    line-height: @input-height-small;
-  }
-}
-textarea {
-  &.input-lg,
-  &.input-sm {
-    height: auto;
-  }
 }
 
 

less/mixins.less

@@ -335,6 +335,14 @@
     color: @heading-text-color;
     background-color: @heading-bg-color;
     border-color: @heading-border;
+    + .panel-collapse .panel-body {
+      border-top-color: @border;
+    }
+  }
+  .panel-footer {
+    + .panel-collapse .panel-body {
+      border-bottom-color: @border;
+    }
   }
 }
 
@@ -393,6 +401,30 @@
   border-radius: @border-radius;
 }
 
+// Pagination
+// -------------------------
+.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
+  > li {
+    > a,
+    > span {
+      padding: @padding-vertical @padding-horizontal;
+      font-size: @font-size;
+    }
+    &:first-child {
+      > a,
+      > span {
+        .border-left-radius(@border-radius);
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        .border-right-radius(@border-radius);
+      }
+    }
+  }
+}
+
 // Labels
 // -------------------------
 .label-variant(@color) {
@@ -636,3 +668,26 @@
     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
   }
 }
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+
+.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  height: @input-height;
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+  
+  select& {
+    height: @input-height;
+    line-height: @input-height;
+  }
+  
+  textarea& {
+    height: auto;
+  }
+}

less/pagination.less

@@ -63,46 +63,10 @@
 
 // Large
 .pagination-lg {
-  > li {
+  .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
-    > a,
-    > span {
-      padding: @padding-large-vertical @padding-large-horizontal;
-      font-size: @font-size-large;
-    }
-    &:first-child {
-      > a,
-      > span {
-        .border-left-radius(@border-radius-large);
-      }
-    }
-    &:last-child {
-      > a,
-      > span {
-        .border-right-radius(@border-radius-large);
-      }
-    }
-  }
 }
 
 // Small
 .pagination-sm {
-  > li {
+  .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
-    > a,
-    > span {
-      padding: @padding-small-vertical @padding-small-horizontal;
-      font-size: @font-size-small;
-    }
-    &:first-child {
-      > a,
-      > span {
-        .border-left-radius(@border-radius-small);
-      }
-    }
-    &:last-child {
-      > a,
-      > span {
-        .border-right-radius(@border-radius-small);
-      }
-    }
-  }
 }

less/panels.less

@@ -5,14 +5,18 @@
 
 // Base class
 .panel {
-  padding: 15px;
+  margin-bottom: @line-height-computed;
-  margin-bottom: 20px;
   background-color: @panel-bg;
   border: 1px solid @panel-border;
   border-radius: @panel-border-radius;
   .box-shadow(0 1px 1px rgba(0,0,0,.05));
 }
 
+// Panel contents
+.panel-body {
+  padding: 15px;
+}
+
 // List groups in panels
 //
 // By default, space out list group content from panel headings to account for
@@ -20,7 +24,7 @@
 
 .panel {
   .list-group {
-    margin: 15px -15px -15px;
+    margin-bottom: 0;
 
     .list-group-item {
       border-width: 1px 0;
@@ -38,7 +42,6 @@
 }
 // Collapse space between when there's no additional content.
 .panel-heading + .list-group {
-  margin-top: -15px;
   .list-group-item:first-child {
     border-top-width: 0;
   }
@@ -46,7 +49,6 @@
 
 // Optional heading
 .panel-heading {
-  margin: -15px -15px 15px;
   padding: 10px 15px;
   background-color: @panel-heading-bg;
   border-bottom: 1px solid @panel-border;
@@ -65,13 +67,49 @@
 
 // Optional footer (stays gray in every modifier class)
 .panel-footer {
-  margin: 15px -15px -15px;
   padding: 10px 15px;
   background-color: @panel-footer-bg;
   border-top: 1px solid @panel-border;
   .border-bottom-radius(@panel-border-radius - 1);
 }
 
+
+// Collapsable panels (aka, accordion)
+//
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with
+// the help of our collapse JavaScript plugin.
+
+.panel-group {
+  // Tighten up margin so it's only between panels
+  .panel {
+    margin-bottom: 0;
+    border-radius: @panel-border-radius;
+    overflow: hidden; // crop contents when collapsed
+    + .panel {
+      margin-top: 5px;
+    }
+  }
+
+  .panel-heading {
+    border-bottom: 0;
+    + .panel-collapse .panel-body {
+      border-top: 1px solid @panel-border;
+    }
+  }
+  .panel-footer {
+    border-top: 0;
+    + .panel-collapse .panel-body {
+      border-bottom: 1px solid @panel-border;
+    }
+  }
+
+  // New subcomponent for wrapping collapsable content for proper animations
+  .panel-collapse {
+
+  }
+}
+
+
 // Contextual variations
 .panel-primary {
   .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);

package.json

@@ -25,6 +25,8 @@
     , "grunt-contrib-uglify": "~0.2.2"
     , "grunt-contrib-qunit": "~0.2.2"
     , "grunt-contrib-watch": "~0.5.1"
+    , "grunt-html-validation": "git://github.com/praveenvijayan/grunt-html-validation.git"
+    , "grunt-jekyll": "~0.3.8"
     , "grunt-recess": "~0.3.3"
     , "browserstack-runner": "~0.0.11"
   }