Merge branch 'master' into fix-12154

Conflicts: dist/css/bootstrap.css.map dist/css/bootstrap.min.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css
2026-06-02 16:04:07 +03:00 · 2014-02-08 16:52:22 -08:00
parent 4787a69efb 7f88009394
commit e9199718d6
160 changed files with 13088 additions and 10844 deletions
@@ -0,0 +1,19 @@
+- name: Coinbase
+  url: https://coinbase.com/
+  expo_url: http://expo.getbootstrap.com/2013/08/06/coinbase/
+  img: http://expo.getbootstrap.com/screenshots/coinbase.jpg
+
+- name: Localcrime
+  url: http://www.localcrimeapp.com/
+  expo_url: http://expo.getbootstrap.com/2013/08/08/localcrime/
+  img: http://expo.getbootstrap.com/screenshots/localcrime.jpg
+
+- name: Sentry
+  url: https://www.getsentry.com/
+  expo_url: http://expo.getbootstrap.com/2013/05/09/sentry/
+  img: http://expo.getbootstrap.com/screenshots/sentry.jpg
+
+- name: Fortrabbit
+  url: http://fortrabbit.com/
+  expo_url: http://expo.getbootstrap.com/2013/08/05/fortrabbit/
+  img: http://expo.getbootstrap.com/screenshots/fortrabbit.jpg
@@ -1,5 +1,5 @@

-<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-vars-form` Grunt task using the customizer-variables.jade template.-->
+<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->
 <h2 id="colors">Colors</h2>
 <p>Gray and brand colors for use across Bootstrap.</p>
 <div class="row">
@@ -131,7 +131,7 @@
  <div class="bs-customizer-input">
    <label for="input-@line-height-computed">@line-height-computed</label>
    <input id="input-@line-height-computed" type="text" value="floor((@font-size-base * @line-height-base))" data-var="@line-height-computed" class="form-control"/>
-    <p class="help-block">Computed &quot;line-height&quot; (<code>font-size</code> &amp;times; <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p>
+    <p class="help-block">Computed &quot;line-height&quot; (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@headings-font-family">@headings-font-family</label>
@@ -572,6 +572,37 @@
    <p class="help-block">Point at which the navbar begins collapsing.</p>
  </div>
 </div>
+<h2 id="container-sizes">Container sizes</h2>
+<p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
+<div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@container-tablet">@container-tablet</label>
+    <input id="input-@container-tablet" type="text" value="((720px + @grid-gutter-width))" data-var="@container-tablet" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@container-sm">@container-sm</label>
+    <input id="input-@container-sm" type="text" value="@container-tablet" data-var="@container-sm" class="form-control"/>
+    <p class="help-block">For <code>@screen-sm-min</code> and up.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@container-desktop">@container-desktop</label>
+    <input id="input-@container-desktop" type="text" value="((940px + @grid-gutter-width))" data-var="@container-desktop" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@container-md">@container-md</label>
+    <input id="input-@container-md" type="text" value="@container-desktop" data-var="@container-md" class="form-control"/>
+    <p class="help-block">For <code>@screen-md-min</code> and up.</p>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@container-large-desktop">@container-large-desktop</label>
+    <input id="input-@container-large-desktop" type="text" value="((1140px + @grid-gutter-width))" data-var="@container-large-desktop" class="form-control"/>
+  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@container-lg">@container-lg</label>
+    <input id="input-@container-lg" type="text" value="@container-large-desktop" data-var="@container-lg" class="form-control"/>
+    <p class="help-block">For <code>@screen-lg-min</code> and up.</p>
+  </div>
+</div>
 <h2 id="navbar">Navbar</h2>
 <p></p>
 <div class="row">
@@ -595,6 +626,10 @@
    <label for="input-@navbar-padding-vertical">@navbar-padding-vertical</label>
    <input id="input-@navbar-padding-vertical" type="text" value="((@navbar-height - @line-height-computed) / 2)" data-var="@navbar-padding-vertical" class="form-control"/>
  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@navbar-collapse-max-height">@navbar-collapse-max-height</label>
+    <input id="input-@navbar-collapse-max-height" type="text" value="340px" data-var="@navbar-collapse-max-height" class="form-control"/>
+  </div>
  <div class="bs-customizer-input">
    <label for="input-@navbar-default-color">@navbar-default-color</label>
    <input id="input-@navbar-default-color" type="text" value="#777" data-var="@navbar-default-color" class="form-control"/>
@@ -1117,7 +1152,7 @@
  <div class="bs-customizer-input">
    <label for="input-@modal-content-fallback-border-color">@modal-content-fallback-border-color</label>
    <input id="input-@modal-content-fallback-border-color" type="text" value="#999" data-var="@modal-content-fallback-border-color" class="form-control"/>
-    <p class="help-block">Modal content border color &lt;strong&gt;for IE8&lt;/strong&gt;</p>
+    <p class="help-block">Modal content border color <strong>for IE8</strong></p>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label>
@@ -1143,6 +1178,10 @@
    <label for="input-@modal-lg">@modal-lg</label>
    <input id="input-@modal-lg" type="text" value="900px" data-var="@modal-lg" class="form-control"/>
  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@modal-md">@modal-md</label>
+    <input id="input-@modal-md" type="text" value="600px" data-var="@modal-md" class="form-control"/>
+  </div>
  <div class="bs-customizer-input">
    <label for="input-@modal-sm">@modal-sm</label>
    <input id="input-@modal-sm" type="text" value="300px" data-var="@modal-sm" class="form-control"/>
@@ -1623,6 +1662,11 @@
    <input id="input-@blockquote-small-color" type="text" value="@gray-light" data-var="@blockquote-small-color" class="form-control"/>
    <p class="help-block">Blockquote small color</p>
  </div>
+  <div class="bs-customizer-input">
+    <label for="input-@blockquote-font-size">@blockquote-font-size</label>
+    <input id="input-@blockquote-font-size" type="text" value="(@font-size-base * 1.25)" data-var="@blockquote-font-size" class="form-control"/>
+    <p class="help-block">Blockquote font size</p>
+  </div>
  <div class="bs-customizer-input">
    <label for="input-@blockquote-border-color">@blockquote-border-color</label>
    <input id="input-@blockquote-border-color" type="text" value="@gray-lighter" data-var="@blockquote-border-color" class="form-control"/>
@@ -1648,35 +1692,4 @@
    <p class="help-block">Horizontal offset for forms and lists.</p>
  </div>
 </div>
-<h2 id="container-sizes">Container sizes</h2>
-<p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
-<div class="row">
-  <div class="bs-customizer-input">
-    <label for="input-@container-tablet">@container-tablet</label>
-    <input id="input-@container-tablet" type="text" value="((720px + @grid-gutter-width))" data-var="@container-tablet" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@container-sm">@container-sm</label>
-    <input id="input-@container-sm" type="text" value="@container-tablet" data-var="@container-sm" class="form-control"/>
-    <p class="help-block">For <code>@screen-sm-min</code> and up.</p>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@container-desktop">@container-desktop</label>
-    <input id="input-@container-desktop" type="text" value="((940px + @grid-gutter-width))" data-var="@container-desktop" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@container-md">@container-md</label>
-    <input id="input-@container-md" type="text" value="@container-desktop" data-var="@container-md" class="form-control"/>
-    <p class="help-block">For <code>@screen-md-min</code> and up.</p>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@container-large-desktop">@container-large-desktop</label>
-    <input id="input-@container-large-desktop" type="text" value="((1140px + @grid-gutter-width))" data-var="@container-large-desktop" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@container-lg">@container-lg</label>
-    <input id="input-@container-lg" type="text" value="@container-large-desktop" data-var="@container-lg" class="form-control"/>
-    <p class="help-block">For <code>@screen-lg-min</code> and up.</p>
-  </div>
-</div>
-<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-vars-form` Grunt task using the customizer-variables.jade template.-->
+<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->
@@ -1,11 +1,42 @@
+<!-- Footer
+================================================== -->
+<footer class="bs-footer" role="contentinfo">
+  <div class="container">
+    {% include social-buttons.html %}
+
+    <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+    <p>Maintained by the <a href="https://github.com/twbs?tab=members">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
+    <p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+    <ul class="footer-links muted">
+      <li>Currently v{{ site.current_version }}</li>
+      <li>&middot;</li>
+      <li><a href="{{ site.repo }}">GitHub</a></li>
+      <li>&middot;</li>
+      <li><a href="../getting-started/#examples">Examples</a></li>
+      <li>&middot;</li>
+      <li><a href="../2.3.2/">v2.3.2 docs</a></li>
+      <li>&middot;</li>
+      <li><a href="../about/">About</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ site.expo }}">Expo</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ site.blog }}">Blog</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ site.repo }}/releases">Releases</a></li>
+    </ul>
+  </div>
+</footer>
+
 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-<script src="{{ site.baseurl }}dist/js/bootstrap.min.js"></script>
-<script src="{{ site.baseurl }}assets/js/docs.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+<script src="../dist/js/bootstrap.min.js"></script>
+<script src="../assets/js/docs.min.js"></script>
 {% if page.slug == "customize" %}
-<script src="{{ site.baseurl }}assets/js/customize.min.js"></script>
+<script src="../assets/js/customize.min.js"></script>
 {% endif %}

 {% comment %}
@@ -1,6 +1,6 @@
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
 <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
@@ -14,11 +14,11 @@
 </title>

 <!-- Bootstrap core CSS -->
-<link href="{{ site.baseurl }}dist/css/bootstrap.min.css" rel="stylesheet">
+<link href="../dist/css/bootstrap.min.css" rel="stylesheet">

 <!-- Documentation extras -->
-<link href="{{ site.baseurl }}assets/css/pack.min.css" rel="stylesheet">
-<!--[if lt IE 9]><script src="{{ site.baseurl }}assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+<link href="../assets/css/docs.min.css" rel="stylesheet">
+<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
@@ -27,8 +27,8 @@
 <![endif]-->

 <!-- Favicons -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}assets/ico/apple-touch-icon-144-precomposed.png">
-                               <link rel="shortcut icon" href="{{ site.baseurl }}assets/ico/favicon.ico">
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
+                               <link rel="shortcut icon" href="../assets/ico/favicon.ico">

 <script>
  var _gaq = _gaq || [];
@@ -5,8 +5,5 @@
  <a href="#team">Team</a>
 </li>
 <li>
-  <a href="#community">Community</a>
-</li>
-<li>
-  <a href="#translations">Translations</a>
+  <a href="#brand">Brand guidelines</a>
 </li>
@@ -102,6 +102,7 @@
  <a href="#progress">Progress bars</a>
  <ul class="nav">
    <li><a href="#progress-basic">Basic example</a></li>
+    <li><a href="#progress-label">With label</a></li>
    <li><a href="#progress-alternatives">Contextual alternatives</a></li>
    <li><a href="#progress-striped">Striped</a></li>
    <li><a href="#progress-animated">Animated</a></li>
@@ -3,9 +3,8 @@
  <ul class="nav">
    <li><a href="#overview-doctype">HTML5 doctype</a></li>
    <li><a href="#overview-mobile">Mobile first</a></li>
-    <li><a href="#overview-responsive-images">Responsive images</a></li>
    <li><a href="#overview-type-links">Typography and links</a></li>
-    <li><a href="#overview-normalize">Normalize</a></li>
+    <li><a href="#overview-normalize">Normalize.css</a></li>
    <li><a href="#overview-container">Containers</a></li>
  </ul>
 </li>
@@ -15,7 +14,7 @@
    <li><a href="#grid-intro">Introduction</a></li>
    <li><a href="#grid-media-queries">Media queries</a></li>
    <li><a href="#grid-options">Grid options</a></li>
-    <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
+    <li><a href="#grid-example-basic">Ex: Stacked-to-horizontal</a></li>
    <li><a href="#grid-example-fluid">Ex: Fluid container</a></li>
    <li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
    <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
@@ -23,7 +22,7 @@
    <li><a href="#grid-offsetting">Offsetting columns</a></li>
    <li><a href="#grid-nesting">Nesting columns</a></li>
    <li><a href="#grid-column-ordering">Column ordering</a></li>
-    <li><a href="#grid-less">LESS mixins and variables</a></li>
+    <li><a href="#grid-less">Less mixins and variables</a></li>
  </ul>
 </li>
 <li>
@@ -85,6 +84,10 @@
 </li>
 <li>
  <a href="#images">Images</a>
+  <ul class="nav">
+    <li><a href="#images-responsive">Responsive images</a></li>
+    <li><a href="#images-shapes">Image shapes</a></li>
+  </ul>
 </li>
 <li>
  <a href="#helper-classes">Helper classes</a>
@@ -112,6 +115,7 @@
 <li>
  <a href="#less">Using Less</a>
  <ul class="nav">
+    <li><a href="#less-bootstrap">Compiling Bootstrap</a></li>
    <li><a href="#less-variables">Variables</a></li>
    <li><a href="#less-mixins-vendor">Vendor mixins</a></li>
    <li><a href="#less-mixins-utility">Utility mixins</a></li>
@@ -121,9 +125,6 @@
  <a href="#sass">Using Sass</a>
  <ul class="nav">
    <li><a href="#sass-contents">What's included</a></li>
-    <li><a href="#sass-installation-rails">Rails install</a></li>
-    <li><a href="#sass-installation-compass">Compass install</a></li>
-    <li><a href="#sass-installation-sass-only">Sass install</a></li>
-    <li><a href="#sass-usage">Usage</a></li>
+    <li><a href="#sass-installation">Rails install</a></li>
  </ul>
 </li>
@@ -1,40 +1,46 @@
-<li>
-  <a href="#less">LESS components</a>
-</li>
-<li>
-  <a href="#plugins">jQuery plugins</a>
-</li>
-<li>
-  <a href="#less-variables">LESS variables</a>
+
+<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.-->
+<li><a href="#less">Less components</a></li>
+<li><a href="#plugins">jQuery plugins</a></li>
+<li><a href="#less-variables">Less variables</a>
  <ul class="nav">
-    <li><a href="#variables-basics">Basics</a></li>
-    <li><a href="#variables-buttons">Buttons</a></li>
-    <li><a href="#variables-form-states">Form states</a></li>
-    <li><a href="#variables-alerts">Alerts</a></li>
-    <li><a href="#variables-navbar">Navbar</a></li>
-    <li><a href="#variables-nav">Nav</a></li>
-    <li><a href="#variables-tables">Tables</a></li>
-    <li><a href="#variables-forms">Forms</a></li>
-    <li><a href="#variables-dropdowns">Dropdowns</a></li>
-    <li><a href="#variables-panels-wells">Panels and wells</a></li>
-    <li><a href="#variables-accordion">Accordion</a></li>
-    <li><a href="#variables-badges">Badges</a></li>
-    <li><a href="#variables-breadcrumbs">Breadcrumbs</a></li>
-    <li><a href="#variables-jumbotron">Jumbotron</a></li>
-    <li><a href="#variables-modals">Modals</a></li>
-    <li><a href="#variables-carousel">Carousel</a></li>
-    <li><a href="#variables-list-group">List group</a></li>
-    <li><a href="#variables-thumbnails">Thumbnails</a></li>
-    <li><a href="#variables-progress">Progress bars</a></li>
-    <li><a href="#variables-pagination">Pagination</a></li>
-    <li><a href="#variables-pager">Pager</a></li>
-    <li><a href="#variables-labels">Labels</a></li>
-    <li><a href="#variables-tooltips-popovers">Tooltips and popovers</a></li>
-    <li><a href="#variables-close">Close button</a></li>
-    <li><a href="#variables-type">Type</a></li>
-    <li><a href="#variables-other">Other</a></li>
+    <li><a href="#colors">Colors</a></li>
+    <li><a href="#scaffolding">Scaffolding</a></li>
+    <li><a href="#typography">Typography</a></li>
+    <li><a href="#components">Components</a></li>
+    <li><a href="#tables">Tables</a></li>
+    <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#dropdowns">Dropdowns</a></li>
+    <li><a href="#media-queries-breakpoints">Media queries breakpoints</a></li>
+    <li><a href="#grid-system">Grid system</a></li>
+    <li><a href="#container-sizes">Container sizes</a></li>
+    <li><a href="#navbar">Navbar</a></li>
+    <li><a href="#navs">Navs</a></li>
+    <li><a href="#tabs">Tabs</a></li>
+    <li><a href="#pills">Pills</a></li>
+    <li><a href="#pagination">Pagination</a></li>
+    <li><a href="#pager">Pager</a></li>
+    <li><a href="#jumbotron">Jumbotron</a></li>
+    <li><a href="#form-states-and-alerts">Form states and alerts</a></li>
+    <li><a href="#tooltips">Tooltips</a></li>
+    <li><a href="#popovers">Popovers</a></li>
+    <li><a href="#labels">Labels</a></li>
+    <li><a href="#modals">Modals</a></li>
+    <li><a href="#alerts">Alerts</a></li>
+    <li><a href="#progress-bars">Progress bars</a></li>
+    <li><a href="#list-group">List group</a></li>
+    <li><a href="#panels">Panels</a></li>
+    <li><a href="#thumbnails">Thumbnails</a></li>
+    <li><a href="#wells">Wells</a></li>
+    <li><a href="#badges">Badges</a></li>
+    <li><a href="#breadcrumbs">Breadcrumbs</a></li>
+    <li><a href="#carousel">Carousel</a></li>
+    <li><a href="#close">Close</a></li>
+    <li><a href="#code">Code</a></li>
+    <li><a href="#type">Type</a></li>
+    <li><a href="#miscellaneous">Miscellaneous</a></li>
  </ul>
 </li>
-<li>
-  <a href="#download">Download</a>
-</li>
+<li><a href="#download">Download</a></li>
+<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.-->
@@ -1,10 +1,5 @@
 <li>
-  <a href="#download">Download Bootstrap</a>
-  <ul class="nav">
-    <li><a href="#download-compiled">Compiled CSS, JS, and fonts</a></li>
-    <li><a href="#download-additional">Additional downloads</a></li>
-    <li><a href="#download-cdn">Bootstrap CDN</a></li>
-  </ul>
+  <a href="#download">Download</a>
 </li>
 <li>
  <a href="#whats-included">What's included</a>
@@ -18,18 +13,21 @@
 </li>
 <li>
  <a href="#examples">Examples</a>
+  <ul class="nav">
+    <li><a href="#examples-framework">Using the framework</a></li>
+    <li><a href="#examples-navbars">Navbars in action</a></li>
+    <li><a href="#examples-custom">Custom components</a></li>
+    <li><a href="#examples-experiments">Experiments</a></li>
+  </ul>
+</li>
+<li>
+  <a href="#community">Community</a>
 </li>
 <li>
  <a href="#disable-responsive">Disabling responsiveness</a>
 </li>
 <li>
  <a href="#migration">Migrating from 2.x to 3.0</a>
-  <ul class="nav">
-    <li><a href="#migration-classes">Major class changes</a></li>
-    <li><a href="#migration-new">What's new</a></li>
-    <li><a href="#migration-dropped">What's removed</a></li>
-    <li><a href="#migration-notes">Additional notes</a></li>
-  </ul>
 </li>
 <li>
  <a href="#support">Browser and device support</a>
@@ -43,6 +41,7 @@
    <li><a href="#support-safari-percentages">Safari percent rounding</a></li>
    <li><a href="#support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</a></li>
    <li><a href="#support-browser-zooming">Browser zooming</a></li>
+    <li><a href="#support-printing">Printer viewports</a></li>
    <li><a href="#support-android-stock-browser">Android stock browser</a></li>
  </ul>
 </li>
@@ -58,3 +57,6 @@
 <li>
  <a href="#customizing">Customizing Bootstrap</a>
 </li>
+<li>
+  <a href="#translations">Translations</a>
+</li>
@@ -1,4 +1,4 @@
-<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
+<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
@@ -7,30 +7,29 @@
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
-      <a href="{{ site.baseurl }}" class="navbar-brand">Bootstrap</a>
+      <a href="../" class="navbar-brand">Bootstrap</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
-          <a href="{{ site.baseurl }}getting-started">Getting started</a>
+          <a href="../getting-started">Getting started</a>
        </li>
        <li{% if page.slug == "css" %} class="active"{% endif %}>
-          <a href="{{ site.baseurl }}css">CSS</a>
+          <a href="../css">CSS</a>
        </li>
        <li{% if page.slug == "components" %} class="active"{% endif %}>
-          <a href="{{ site.baseurl }}components">Components</a>
+          <a href="../components">Components</a>
        </li>
        <li{% if page.slug == "js" %} class="active"{% endif %}>
-          <a href="{{ site.baseurl }}javascript">JavaScript</a>
+          <a href="../javascript">JavaScript</a>
        </li>
        <li{% if page.slug == "customize" %} class="active"{% endif %}>
-          <a href="{{ site.baseurl }}customize">Customize</a>
+          <a href="../customize">Customize</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
-        <li{% if page.slug == "about" %} class="active"{% endif %}>
-          <a href="{{ site.baseurl }}about">About</a>
-        </li>
+        <li><a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Expo']);">Expo</a></li>
+        <li><a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Blog']);">Blog</a></li>
      </ul>
    </nav>
  </div>
@@ -0,0 +1,12 @@
+<li>
+  <a href="#classes">Major class changes</a>
+</li>
+<li>
+  <a href="#new">What's new</a>
+</li>
+<li>
+  <a href="#dropped">What's removed</a>
+</li>
+<li>
+  <a href="#notes">Additional notes</a>
+</li>
@@ -1,8 +0,0 @@
-<div class="bs-old-docs">
-  <div class="container">
-    <strong>
-      <a href="{{ site.baseurl }}2.3.2/">Looking for Bootstrap 2.3.2 docs?</a>
-    </strong>
-    We've moved it to a new home while we push forward with Bootstrap 3. <a href="http://blog.getbootstrap.com/">Read the blog</a> for details.
-  </div>
-</div>
@@ -10,7 +10,7 @@
      <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
    </li>
    <li class="tweet-btn">
-      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
+      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Bootstrap">Tweet</a>
    </li>
  </ul>
 </div>
@@ -19,12 +19,12 @@
      </div>
    </div>

-    <!-- Callout for the old docs link -->
-    {% include old-bs-docs.html %}
-
    <div class="container bs-docs-container">

      <div class="row">
+        <div class="col-md-9" role="main">
+          {{ content }}
+        </div>
        <div class="col-md-3">
          <div class="bs-sidebar hidden-print" role="complementary">
            <ul class="nav bs-sidenav">
@@ -40,48 +40,19 @@
                {% include nav-customize.html %}
              {% elsif page.slug == "about" %}
                {% include nav-about.html %}
+              {% elsif page.slug == "migration" %}
+                {% include nav-migration.html %}
              {% endif %}
            </ul>
+            <a class="back-to-top" href="#top">
+              Back to top
+            </a>
          </div>
        </div>
-        <div class="col-md-9" role="main">
-          {{ content }}
-        </div>
      </div>

    </div>

-    <!-- Footer
-    ================================================== -->
-    <footer class="bs-footer" role="contentinfo">
-      <div class="container">
-        {% include social-buttons.html %}
-
-        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
-        <p>Maintained by the <a href="https://github.com/twbs?tab=members">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
-        <p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <ul class="footer-links">
-          <li>Currently v{{ site.current_version }}</li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.baseurl }}2.3.2/">Bootstrap 2.3.2 docs</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.repo }}">GitHub project</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.baseurl }}getting-started/#examples">Examples</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.expo }}">Expo</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.blog }}">Blog</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
-          <li class="muted">&middot;</li>
-          <li><a href="{{ site.repo }}/releases">Releases</a></li>
-        </ul>
-      </div>
-    </footer>
-
-    <!-- JS and analytics only. -->
    {% include footer.html %}
-
  </body>
 </html>
@@ -13,41 +13,6 @@
    <!-- Page content of course! -->
    {{ content }}

-    <footer class="container" role="contentinfo">
-      {% include ads.html %}
-
-      {% include social-buttons.html %}
-
-      <ul class="bs-masthead-links">
-        <li class="current-version">
-          Currently v{{ site.current_version }}
-        </li>
-        <li>
-          <a href="{{ site.baseurl }}2.3.2/">Bootstrap 2.3.2 docs</a>
-        </li>
-        <li>
-          <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
-        </li>
-        <li>
-          <a href="{{ site.baseurl }}getting-started/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
-        </li>
-        <li>
-          <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Expo</a>
-        </li>
-        <li>
-          <a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Blog']);">Blog</a>
-        </li>
-        <li>
-          <a href="{{ site.repo }}/issues?state=open" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Issues']);">Issues</a>
-        </li>
-        <li>
-          <a href="{{ site.repo }}/releases" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Releases']);">Releases</a>
-        </li>
-      </ul>
-    </footer>
-
-    <!-- JS and analytics only. -->
    {% include footer.html %}
-
  </body>
 </html>
@@ -2,16 +2,15 @@
 layout: default
 title: About
 slug: about
-lead: "Learn about the history of Bootstrap, meet the core team, and check out the ever-growing community resources."
+lead: "Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand."
 ---


 <!-- History
 ================================================== -->
 <div class="bs-docs-section">
-  <div class="page-header">
-    <h1 id="history">History</h1>
-  </div>
+  <h1 id="history" class="page-header">History</h1>
+
  <p class="lead">Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
  <p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
  <p>Originally <a href="https://dev.twitter.com/blog/bootstrap-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
@@ -21,9 +20,8 @@ lead: "Learn about the history of Bootstrap, meet the core team, and check out t
 <!-- Team
 ================================================== -->
 <div class="bs-docs-section">
-  <div class="page-header">
-    <h1 id="team">Team</h1>
-  </div>
+  <h1 id="team" class="page-header">Team</h1>
+
  <p class="lead">Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>

  <h2 id="team-core">Core team</h2>
@@ -90,39 +88,62 @@ lead: "Learn about the history of Bootstrap, meet the core team, and check out t
      </a>
    </div>
  </div>
-  <p>The <a href="{{ site.sass_repo }}">official Sass port of Bootstrap</a> was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.</p>
+  <p>The <a href="{{ site.sass_repo }}">official Sass port of Bootstrap</a> was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass <a href="https://github.com/twbs/bootstrap-sass/blob/master/CONTRIBUTING.md">contributing guidelines</a> for information on how the Sass port is developed.</p>
 </div>


-<!-- Community
+<!-- Brand
 ================================================== -->
 <div class="bs-docs-section">
-  <div class="page-header">
-    <h1 id="community">Community</h1>
-  </div>
-  <p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
-  <ul>
-    <li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
-    <li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
-    <li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
-  </ul>
-  <p>You can also follow <a href="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
-</div>
+  <h1 id="brand" class="page-header">Brand guidelines</h1>

+  <p class="lead">Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's <a href="http://mailchimp.com/about/brand-assets/" target="_blank">Brand Assets</a>.</p>

-<!-- Translations
-================================================== -->
-<div class="bs-docs-section">
-  <div class="page-header">
-    <h1 id="translations">Translations</h1>
+  <h2>Mark and logo</h2>
+  <p>Use either the Bootstrap mark (a capital <strong>B</strong>) or the standard logo (just <strong>Bootstrap</strong>). It should always appear in Helvetica Neue Bold. <strong>Do not use the Twitter bird</strong> in association with Bootstrap.</p>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <div class="bs-booticon bs-booticon-lg">B</div>
+    </div>
+    <div class="bs-brand-item inverse">
+      <div class="bs-booticon bs-booticon-lg bs-booticon-inverse">B</div>
+    </div>
  </div>
-  <p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and may not always be up to date.</p>
-  <ul>
-    <li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
-    <li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
-    <li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
-    <li><a href="http://twbs.site-konstruktor.com.ua">Bootstrap ua Українською (Ukrainian)</a></li>
-    <li><a href="http://www.oneskyapp.com/docs/bootstrap/fr">Bootstrap en Français (French)</a></li>
-  </ul>
-  <p>Have another language to add, or perhaps a different or better translation? Let us know by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a>.</p>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <h1>Bootstrap</h1>
+    </div>
+    <div class="bs-brand-item inverse">
+      <h1>Bootstrap</h1>
+    </div>
+  </div>
+
+  <h2>Name</h2>
+  <p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations except for one, a capital <strong>B</strong>.</p>
+  <div class="bs-brand-logos">
+    <div class="bs-brand-item">
+      <h3>Bootstrap</h3>
+      <span class="glyphicon glyphicon-ok"></span>
+    </div>
+    <div class="bs-brand-item">
+      <h3 class="text-muted">BootStrap</h3>
+      <span class="glyphicon glyphicon-remove"></span>
+    </div>
+    <div class="bs-brand-item">
+      <h3 class="text-muted">Twitter Bootstrap</h3>
+      <span class="glyphicon glyphicon-remove"></span>
+    </div>
+  </div>
+
+  <h2>Colors</h2>
+  <p>Our docs and branding use a handful of primary colors to differentiate what <em>is</em> Bootstrap from what <em>is in</em> Bootstrap. In other words, if it's purple, it's representative of Bootstrap.</p>
+  <div class="bs-brand">
+    <div class="color-swatches">
+      <div class="color-swatch bs-purple"></div>
+      <div class="color-swatch bs-purple-light"></div>
+      <div class="color-swatch bs-purple-lighter"></div>
+      <div class="color-swatch bs-gray"></div>
+    </div>
+  </div>
+
 </div>
@@ -4,7 +4,7 @@
 .err { color: #AA0000; background-color: #FFAAAA } /* Error */
 .k { color: #006699; } /* Keyword */
 .o { color: #555555 } /* Operator */
-.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
+.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
 .cp { color: #009999 } /* Comment.Preproc */
 .c1 { color: #999; } /* Comment.Single */
 .cs { color: #999; } /* Comment.Special */
@@ -3,8 +3,8 @@
 // ++++++++++++++++++++++++++++++++++++++++++

 /*!
+ * JavaScript for Bootstrap's docs (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
- *
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 * details, see http://creativecommons.org/licenses/by/3.0/.
 */
@@ -18,14 +18,13 @@
    //
    // See Getting Started docs for more information
    if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
-      var msViewportStyle = document.createElement('style');
+      var msViewportStyle = document.createElement('style')
      msViewportStyle.appendChild(
        document.createTextNode(
          '@-ms-viewport{width:auto!important}'
        )
-      );
-      document.querySelector('head').
-        appendChild(msViewportStyle);
+      )
+      document.querySelector('head').appendChild(msViewportStyle)
    }


@@ -36,7 +35,7 @@

    $body.scrollspy({
      target: '.bs-sidebar',
-      offset: navHeight
+      // offset: navHeight
    })

    $window.on('load', function () {
@@ -86,8 +85,7 @@
    })

    // popover demo
-    $('[data-toggle=popover]')
-      .popover()
+    $('[data-toggle=popover]').popover()

    // button state demo
    $('#loading-example-btn')
@@ -1,18 +1,19 @@
 /*!
+ * Bootstrap Customizer (http://getbootstrap.com/customize/)
 * Copyright 2011-2014 Twitter, Inc.
 *
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 * details, see http://creativecommons.org/licenses/by/3.0/.
 */

-/* jshint multistr:true */
+/* jshint multistr: true */

 window.onload = function () { // wait for load in a dumb way because B-0
  var cw = '/*!\n' +
-           ' * Bootstrap v3.0.3 (http://getbootstrap.com)\n' +
+           ' * Bootstrap v3.1.0 (http://getbootstrap.com)\n' +
           ' * Copyright 2011-2014 Twitter, Inc.\n' +
           ' * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n' +
-           ' */\n\n';
+           ' */\n\n'

  function showError(msg, err) {
    $('<div id="bsCustomizerAlert" class="bs-customizer-alert">\
@@ -39,9 +40,9 @@ window.onload = function () { // wait for load in a dumb way because B-0
  }

  function getQueryParam(key) {
-    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, '\\$&'); // escape RegEx meta chars
-    var match = location.search.match(new RegExp('[?&]' + key + '=([^&]+)(&|$)'));
-    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
+    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, '\\$&') // escape RegEx meta chars
+    var match = location.search.match(new RegExp('[?&]' + key + '=([^&]+)(&|$)'))
+    return match && decodeURIComponent(match[1].replace(/\+/g, ' '))
  }

  function createGist(configJson) {
@@ -0,0 +1,166 @@
+/* Blob.js
+ * A Blob implementation.
+ * 2013-12-27
+ * 
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/eboyjr
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+  plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+
+if (!(typeof Blob === "function" || typeof Blob === "object") || typeof URL === "undefined")
+if ((typeof Blob === "function" || typeof Blob === "object") && typeof webkitURL !== "undefined") self.URL = webkitURL;
+else var Blob = (function (view) {
+	"use strict";
+
+	var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || view.MSBlobBuilder || (function(view) {
+		var
+			  get_class = function(object) {
+				return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+			}
+			, FakeBlobBuilder = function BlobBuilder() {
+				this.data = [];
+			}
+			, FakeBlob = function Blob(data, type, encoding) {
+				this.data = data;
+				this.size = data.length;
+				this.type = type;
+				this.encoding = encoding;
+			}
+			, FBB_proto = FakeBlobBuilder.prototype
+			, FB_proto = FakeBlob.prototype
+			, FileReaderSync = view.FileReaderSync
+			, FileException = function(type) {
+				this.code = this[this.name = type];
+			}
+			, file_ex_codes = (
+				  "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+				+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+			).split(" ")
+			, file_ex_code = file_ex_codes.length
+			, real_URL = view.URL || view.webkitURL || view
+			, real_create_object_URL = real_URL.createObjectURL
+			, real_revoke_object_URL = real_URL.revokeObjectURL
+			, URL = real_URL
+			, btoa = view.btoa
+			, atob = view.atob
+			
+			, ArrayBuffer = view.ArrayBuffer
+			, Uint8Array = view.Uint8Array
+		;
+		FakeBlob.fake = FB_proto.fake = true;
+		while (file_ex_code--) {
+			FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+		}
+		if (!real_URL.createObjectURL) {
+			URL = view.URL = {};
+		}
+		URL.createObjectURL = function(blob) {
+			var
+				  type = blob.type
+				, data_URI_header
+			;
+			if (type === null) {
+				type = "application/octet-stream";
+			}
+			if (blob instanceof FakeBlob) {
+				data_URI_header = "data:" + type;
+				if (blob.encoding === "base64") {
+					return data_URI_header + ";base64," + blob.data;
+				} else if (blob.encoding === "URI") {
+					return data_URI_header + "," + decodeURIComponent(blob.data);
+				} if (btoa) {
+					return data_URI_header + ";base64," + btoa(blob.data);
+				} else {
+					return data_URI_header + "," + encodeURIComponent(blob.data);
+				}
+			} else if (real_create_object_URL) {
+				return real_create_object_URL.call(real_URL, blob);
+			}
+		};
+		URL.revokeObjectURL = function(object_URL) {
+			if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+				real_revoke_object_URL.call(real_URL, object_URL);
+			}
+		};
+		FBB_proto.append = function(data/*, endings*/) {
+			var bb = this.data;
+			// decode data to a binary string
+			if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+				var
+					  str = ""
+					, buf = new Uint8Array(data)
+					, i = 0
+					, buf_len = buf.length
+				;
+				for (; i < buf_len; i++) {
+					str += String.fromCharCode(buf[i]);
+				}
+				bb.push(str);
+			} else if (get_class(data) === "Blob" || get_class(data) === "File") {
+				if (FileReaderSync) {
+					var fr = new FileReaderSync;
+					bb.push(fr.readAsBinaryString(data));
+				} else {
+					// async FileReader won't work as BlobBuilder is sync
+					throw new FileException("NOT_READABLE_ERR");
+				}
+			} else if (data instanceof FakeBlob) {
+				if (data.encoding === "base64" && atob) {
+					bb.push(atob(data.data));
+				} else if (data.encoding === "URI") {
+					bb.push(decodeURIComponent(data.data));
+				} else if (data.encoding === "raw") {
+					bb.push(data.data);
+				}
+			} else {
+				if (typeof data !== "string") {
+					data += ""; // convert unsupported types to strings
+				}
+				// decode UTF-16 to binary string
+				bb.push(unescape(encodeURIComponent(data)));
+			}
+		};
+		FBB_proto.getBlob = function(type) {
+			if (!arguments.length) {
+				type = null;
+			}
+			return new FakeBlob(this.data.join(""), type, "raw");
+		};
+		FBB_proto.toString = function() {
+			return "[object BlobBuilder]";
+		};
+		FB_proto.slice = function(start, end, type) {
+			var args = arguments.length;
+			if (args < 3) {
+				type = null;
+			}
+			return new FakeBlob(
+				  this.data.slice(start, args > 1 ? end : this.data.length)
+				, type
+				, this.encoding
+			);
+		};
+		FB_proto.toString = function() {
+			return "[object Blob]";
+		};
+		return FakeBlobBuilder;
+	}(view));
+
+	return function Blob(blobParts, options) {
+		var type = options ? (options.type || "") : "";
+		var builder = new BlobBuilder();
+		if (blobParts) {
+			for (var i = 0, len = blobParts.length; i < len; i++) {
+				builder.append(blobParts[i]);
+			}
+		}
+		return builder.getBlob(type);
+	};
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
@@ -1,173 +1,6 @@
-/* Blob.js
- * A Blob implementation.
- * 2013-06-20
- *
- * By Eli Grey, http://eligrey.com
- * By Devin Samarin, https://github.com/eboyjr
- * License: X11/MIT
- *   See LICENSE.md
- */
-
-/*global self, unescape */
-/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
-  plusplus: true */
-
-/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
-
-if (!(typeof Blob === "function" || typeof Blob === "object") || typeof URL === "undefined")
-if ((typeof Blob === "function" || typeof Blob === "object") && typeof webkitURL !== "undefined") self.URL = webkitURL;
-else var Blob = (function (view) {
-	"use strict";
-
-	var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || view.MSBlobBuilder || (function(view) {
-		var
-			  get_class = function(object) {
-				return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
-			}
-			, FakeBlobBuilder = function BlobBuilder() {
-				this.data = [];
-			}
-			, FakeBlob = function Blob(data, type, encoding) {
-				this.data = data;
-				this.size = data.length;
-				this.type = type;
-				this.encoding = encoding;
-			}
-			, FBB_proto = FakeBlobBuilder.prototype
-			, FB_proto = FakeBlob.prototype
-			, FileReaderSync = view.FileReaderSync
-			, FileException = function(type) {
-				this.code = this[this.name = type];
-			}
-			, file_ex_codes = (
-				  "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
-				+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
-			).split(" ")
-			, file_ex_code = file_ex_codes.length
-			, real_URL = view.URL || view.webkitURL || view
-			, real_create_object_URL = real_URL.createObjectURL
-			, real_revoke_object_URL = real_URL.revokeObjectURL
-			, URL = real_URL
-			, btoa = view.btoa
-			, atob = view.atob
-
-			, ArrayBuffer = view.ArrayBuffer
-			, Uint8Array = view.Uint8Array
-		;
-		FakeBlob.fake = FB_proto.fake = true;
-		while (file_ex_code--) {
-			FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
-		}
-		if (!real_URL.createObjectURL) {
-			URL = view.URL = {};
-		}
-		URL.createObjectURL = function(blob) {
-			var
-				  type = blob.type
-				, data_URI_header
-			;
-			if (type === null) {
-				type = "application/octet-stream";
-			}
-			if (blob instanceof FakeBlob) {
-				data_URI_header = "data:" + type;
-				if (blob.encoding === "base64") {
-					return data_URI_header + ";base64," + blob.data;
-				} else if (blob.encoding === "URI") {
-					return data_URI_header + "," + decodeURIComponent(blob.data);
-				} if (btoa) {
-					return data_URI_header + ";base64," + btoa(blob.data);
-				} else {
-					return data_URI_header + "," + encodeURIComponent(blob.data);
-				}
-			} else if (real_create_object_URL) {
-				return real_create_object_URL.call(real_URL, blob);
-			}
-		};
-		URL.revokeObjectURL = function(object_URL) {
-			if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
-				real_revoke_object_URL.call(real_URL, object_URL);
-			}
-		};
-		FBB_proto.append = function(data/*, endings*/) {
-			var bb = this.data;
-			// decode data to a binary string
-			if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
-				var
-					  str = ""
-					, buf = new Uint8Array(data)
-					, i = 0
-					, buf_len = buf.length
-				;
-				for (; i < buf_len; i++) {
-					str += String.fromCharCode(buf[i]);
-				}
-				bb.push(str);
-			} else if (get_class(data) === "Blob" || get_class(data) === "File") {
-				if (FileReaderSync) {
-					var fr = new FileReaderSync;
-					bb.push(fr.readAsBinaryString(data));
-				} else {
-					// async FileReader won't work as BlobBuilder is sync
-					throw new FileException("NOT_READABLE_ERR");
-				}
-			} else if (data instanceof FakeBlob) {
-				if (data.encoding === "base64" && atob) {
-					bb.push(atob(data.data));
-				} else if (data.encoding === "URI") {
-					bb.push(decodeURIComponent(data.data));
-				} else if (data.encoding === "raw") {
-					bb.push(data.data);
-				}
-			} else {
-				if (typeof data !== "string") {
-					data += ""; // convert unsupported types to strings
-				}
-				// decode UTF-16 to binary string
-				bb.push(unescape(encodeURIComponent(data)));
-			}
-		};
-		FBB_proto.getBlob = function(type) {
-			if (!arguments.length) {
-				type = null;
-			}
-			return new FakeBlob(this.data.join(""), type, "raw");
-		};
-		FBB_proto.toString = function() {
-			return "[object BlobBuilder]";
-		};
-		FB_proto.slice = function(start, end, type) {
-			var args = arguments.length;
-			if (args < 3) {
-				type = null;
-			}
-			return new FakeBlob(
-				  this.data.slice(start, args > 1 ? end : this.data.length)
-				, type
-				, this.encoding
-			);
-		};
-		FB_proto.toString = function() {
-			return "[object Blob]";
-		};
-		return FakeBlobBuilder;
-	}(view));
-
-	return function Blob(blobParts, options) {
-		var type = options ? (options.type || "") : "";
-		var builder = new BlobBuilder();
-		if (blobParts) {
-			for (var i = 0, len = blobParts.length; i < len; i++) {
-				builder.append(blobParts[i]);
-			}
-		}
-		return builder.getBlob(type);
-	};
-}(self));
-
 /* FileSaver.js
 * A saveAs() FileSaver implementation.
- * 2013-10-21
+ * 2014-01-24
 *
 * By Eli Grey, http://eligrey.com
 * License: X11/MIT
@@ -181,9 +14,15 @@ else var Blob = (function (view) {
 /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */

 var saveAs = saveAs
-  || (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
+  // IE 10+ (native saveAs)
+  || (navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
+  // Everyone else
  || (function(view) {
 	"use strict";
+	// IE <10 is explicitly unsupported
+	if (/MSIE [1-9]\./.test(navigator.userAgent)) {
+		return;
+	}
 	var
 		  doc = view.document
 		  // only get URL when necessary in case BlobBuilder.js hasn't overridden it yet
@@ -391,9 +230,13 @@ var saveAs = saveAs

 	view.addEventListener("unload", process_deletion_queue, false);
 	return saveAs;
-}(this.self || this.window || this.content));
+}(
+	   typeof self !== "undefined" && self
+	|| typeof window !== "undefined" && window
+	|| this.content
+));
 // `self` is undefined in Firefox for Android content script context
 // while `this` is nsIContentFrameMessageManager
 // with an attribute `content` that corresponds to the window

-if (typeof module !== 'undefined') module.exports = saveAs;
+if (typeof module !== "undefined") module.exports = saveAs;
@@ -1,35 +1,43 @@
-/*
+/*!

-Holder - 2.2 - client side image placeholders
-(c) 2012-2013 Ivan Malopinsky / http://imsky.co
+Holder - 2.3.1 - client side image placeholders
+(c) 2012-2014 Ivan Malopinsky / http://imsky.co

 Provided under the MIT License.
 Commercial use requires attribution.

 */
-
 var Holder = Holder || {};
 (function (app, win) {
-
-var preempted = false,
-fallback = false,
+var system_config = {
+	use_svg: false,
+	use_canvas: false,
+	use_fallback: false
+};
+var instance_config = {};
+var preempted = false;
 canvas = document.createElement('canvas');
 var dpr = 1, bsr = 1;
 var resizable_images = [];

 if (!canvas.getContext) {
-	fallback = true;
+	system_config.use_fallback = true;
 } else {
 	if (canvas.toDataURL("image/png")
 		.indexOf("data:image/png") < 0) {
 		//Android doesn't support data URI
-		fallback = true;
+		system_config.use_fallback = true;
 	} else {
 		var ctx = canvas.getContext("2d");
 	}
 }

-if(!fallback){
+if(!!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect){
+	system_config.use_svg = true;
+	system_config.use_canvas = false;
+}
+
+if(!system_config.use_fallback){
    dpr = window.devicePixelRatio || 1,
    bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
 }
@@ -129,46 +137,6 @@ app.flags = {
 	}
 }

-//getElementsByClassName polyfill
-document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
-
-//getComputedStyle polyfill
-window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
-
-//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
-function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}
-
-//https://gist.github.com/991057 by Jed Schmidt with modifications
-function selector(a){
-	a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
-	var ret=[];	b!==null&&(b.length?ret=b:b.length===0?ret=b:ret=[b]);	return ret;
-}
-
-//shallow object property extend
-function extend(a,b){
-	var c={};
-	for(var i in a){
-		if(a.hasOwnProperty(i)){
-			c[i]=a[i];
-		}
-	}
-	for(var i in b){
-		if(b.hasOwnProperty(i)){
-			c[i]=b[i];
-		}
-	}
-	return c
-}
-
-//hasOwnProperty polyfill
-if (!Object.prototype.hasOwnProperty)
-    /*jshint -W001, -W103 */
-    Object.prototype.hasOwnProperty = function(prop) {
-		var proto = this.__proto__ || this.constructor.prototype;
-		return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
-	}
-    /*jshint +W001, +W103 */
-
 function text_size(width, height, template) {
 	height = parseInt(height, 10);
 	width = parseInt(width, 10);
@@ -181,20 +149,68 @@ function text_size(width, height, template) {
 	}
 }

-function draw(args) {
-	var ctx = args.ctx;
-	var dimensions = args.dimensions;
-	var template = args.template;
-	var ratio = args.ratio;
-	var holder = args.holder;
-	var literal = holder.textmode == "literal";
-	var exact = holder.textmode == "exact";
+var svg_el = (function(){
+	//Prevent IE <9 from initializing SVG renderer
+	if(!window.XMLSerializer) return;
+	var serializer = new XMLSerializer();
+	var svg_ns = "http://www.w3.org/2000/svg"
+	var svg = document.createElementNS(svg_ns, "svg");
+	//IE throws an exception if this is set and Chrome requires it to be set
+	if(svg.webkitMatchesSelector){
+		svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+	}
+	var bg_el = document.createElementNS(svg_ns, "rect")
+	var text_el = document.createElementNS(svg_ns, "text")
+	var textnode_el = document.createTextNode(null)
+	text_el.setAttribute("text-anchor", "middle")
+	text_el.appendChild(textnode_el)
+	svg.appendChild(bg_el)
+	svg.appendChild(text_el)
+
+	return function(props){
+		svg.setAttribute("width",props.width);
+		svg.setAttribute("height", props.height);
+		bg_el.setAttribute("width", props.width);
+		bg_el.setAttribute("height", props.height);
+		bg_el.setAttribute("fill", props.template.background);
+		text_el.setAttribute("x", props.width/2)
+		text_el.setAttribute("y", props.height/2)
+		textnode_el.nodeValue=props.text
+		text_el.setAttribute("style", css_properties({
+		"fill": props.template.foreground,
+		"font-weight": "bold",
+		"font-size": props.text_height+"px",
+		"font-family":props.font,
+		"dominant-baseline":"central"
+		}))
+		return serializer.serializeToString(svg)
+	}
+})()
+
+function css_properties(props){
+	var ret = [];
+	for(p in props){
+		if(props.hasOwnProperty(p)){
+			ret.push(p+":"+props[p])
+		}
+	}
+	return ret.join(";")
+}
+
+function draw_canvas(args) {
+	var ctx = args.ctx,
+		dimensions = args.dimensions,
+		template = args.template,
+		ratio = args.ratio,
+		holder = args.holder,
+		literal = holder.textmode == "literal",
+		exact = holder.textmode == "exact";

 	var ts = text_size(dimensions.width, dimensions.height, template);
 	var text_height = ts.height;
 	var width = dimensions.width * ratio,
 		height = dimensions.height * ratio;
-	var font = template.font ? template.font : "sans-serif";
+	var font = template.font ? template.font : "Arial,Helvetica,sans-serif";
 	canvas.width = width;
 	canvas.height = height;
 	ctx.textAlign = "center";
@@ -222,8 +238,50 @@ function draw(args) {
 	return canvas.toDataURL("image/png");
 }

-function render(mode, el, holder, src) {
+function draw_svg(args){
+	var dimensions = args.dimensions,
+		template = args.template,
+		holder = args.holder,
+		literal = holder.textmode == "literal",
+		exact = holder.textmode == "exact";
+
+	var ts = text_size(dimensions.width, dimensions.height, template);
+	var text_height = ts.height;
+	var width = dimensions.width,
+		height = dimensions.height;
+		
+	var font = template.font ? template.font : "Arial,Helvetica,sans-serif";
+	var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
 	
+	if (literal) {
+		var dimensions = holder.dimensions;
+		text = dimensions.width + "x" + dimensions.height;
+	}
+	else if(exact && holder.exact_dimensions){
+		var dimensions = holder.exact_dimensions;
+		text = (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
+	}
+	var string = svg_el({
+		text: text, 
+		width:width, 
+		height:height, 
+		text_height:text_height, 
+		font:font, 
+		template:template
+	})
+	return "data:image/svg+xml;base64,"+btoa(string);
+}
+
+function draw(args) {
+	if(instance_config.use_canvas && !instance_config.use_svg){
+		return draw_canvas(args);
+	}
+	else{
+		return draw_svg(args);
+	}
+}
+
+function render(mode, el, holder, src) {
 	var dimensions = holder.dimensions,
 		theme = holder.theme,
 		text = holder.text ? decodeURIComponent(holder.text) : holder.text;
@@ -240,11 +298,11 @@ function render(mode, el, holder, src) {
 	
 	if (mode == "image") {
 		el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
-		if (fallback || !holder.auto) {
+		if (instance_config.use_fallback || !holder.auto) {
 			el.style.width = dimensions.width + "px";
 			el.style.height = dimensions.height + "px";
 		}
-		if (fallback) {
+		if (instance_config.use_fallback) {
 			el.style.backgroundColor = theme.background;
 		} else {
 			el.setAttribute("src", draw({ctx: ctx, dimensions: dimensions, template: theme, ratio:ratio, holder: holder}));
@@ -256,7 +314,7 @@ function render(mode, el, holder, src) {
 			
 		}
 	} else if (mode == "background") {
-		if (!fallback) {
+		if (!instance_config.use_fallback) {
 			el.style.backgroundImage = "url(" + draw({ctx:ctx, dimensions: dimensions, template: theme, ratio: ratio, holder: holder}) + ")";
 			el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
 		}
@@ -264,18 +322,21 @@ function render(mode, el, holder, src) {
 		el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
 		if (dimensions.height.slice(-1) == "%") {
 			el.style.height = dimensions.height
-		} else {
+		} else if(holder.auto == null || !holder.auto){
 			el.style.height = dimensions.height + "px"
 		}
 		if (dimensions.width.slice(-1) == "%") {
 			el.style.width = dimensions.width
-		} else {
+		} else if(holder.auto == null || !holder.auto){
 			el.style.width = dimensions.width + "px"
 		}
 		if (el.style.display == "inline" || el.style.display === "" || el.style.display == "none") {
 			el.style.display = "block";
 		}
-		if (fallback) {
+		
+		set_initial_dimensions(el)
+		
+		if (instance_config.use_fallback) {
 			el.style.backgroundColor = theme.background;
 		} else {
 			resizable_images.push(el);
@@ -290,19 +351,36 @@ function dimension_check(el, callback) {
 		width: el.clientWidth
 	};
 	if (!dimensions.height && !dimensions.width) {
-		if (el.hasAttribute("data-holder-invisible")) {
-			throw new Error("Holder: placeholder is not visible");
-		} else {
-			el.setAttribute("data-holder-invisible", true)
-			setTimeout(function () {
-				callback.call(this, el)
-			}, 1)
-			return null;
+		el.setAttribute("data-holder-invisible", true)
+		callback.call(this, el)
+	}
+	else{
+		el.removeAttribute("data-holder-invisible")
+		return dimensions;
+	}
+}
+
+function set_initial_dimensions(el){
+	if(el.holder_data){
+		var dimensions = dimension_check(el, app.invisible_error_fn( set_initial_dimensions))
+		if(dimensions){
+			var holder = el.holder_data;
+			holder.initial_dimensions = dimensions;
+			holder.fluid_data = {
+				fluid_height: holder.dimensions.height.slice(-1) == "%",
+				fluid_width: holder.dimensions.width.slice(-1) == "%",
+				mode: null
+			}
+			if(holder.fluid_data.fluid_width && !holder.fluid_data.fluid_height){
+				holder.fluid_data.mode = "width"
+				holder.fluid_data.ratio = holder.initial_dimensions.width / parseFloat(holder.dimensions.height)
+			}
+			else if(!holder.fluid_data.fluid_width && holder.fluid_data.fluid_height){
+				holder.fluid_data.mode = "height";
+				holder.fluid_data.ratio = parseFloat(holder.dimensions.width) / holder.initial_dimensions.height
+			}
 		}
-	} else {
-		el.removeAttribute("data-holder-invisible")
 	}
-	return dimensions;
 }

 function resizable_update(element) {
@@ -319,9 +397,19 @@ function resizable_update(element) {
 		var el = images[i]
 		if (el.holder_data) {
 			var holder = el.holder_data;
-			var dimensions = dimension_check(el, resizable_update)
+			var dimensions = dimension_check(el, app.invisible_error_fn( resizable_update))
 			if(dimensions){
 				if(holder.fluid){
+					if(holder.auto){
+						switch(holder.fluid_data.mode){
+							case "width":
+								dimensions.height = dimensions.width / holder.fluid_data.ratio;
+							break;
+							case "height":
+								dimensions.width = dimensions.height * holder.fluid_data.ratio;
+							break;
+						}
+					}
 					el.setAttribute("src", draw({
 						ctx: ctx,
 						dimensions: dimensions,
@@ -350,7 +438,7 @@ function parse_flags(flags, options) {
 		theme: extend(settings.themes.gray, {})
 	};
 	var render = false;
-	for (sl = flags.length, j = 0; j < sl; j++) {
+	for (var fl = flags.length, j = 0; j < fl; j++) {
 		var flag = flags[j];
 		if (app.flags.dimensions.match(flag)) {
 			render = true;
@@ -385,10 +473,20 @@ for (var flag in app.flags) {
 		return val.match(this.regex)
 	}
 }
+
+app.invisible_error_fn = function(fn){
+	return function(el){
+		if(el.hasAttribute("data-holder-invisible")){
+			throw new Error("Holder: invisible placeholder")
+		}
+	}
+}
+
 app.add_theme = function (name, theme) {
 	name != null && theme != null && (settings.themes[name] = theme);
 	return app;
 };
+
 app.add_image = function (src, el) {
 	var node = selector(el);
 	if (node.length) {
@@ -400,21 +498,31 @@ app.add_image = function (src, el) {
 	}
 	return app;
 };
+
 app.run = function (o) {
+	instance_config = extend({}, system_config)
 	preempted = true;
-	
+
 	var options = extend(settings, o),
 		images = [],
 		imageNodes = [],
 		bgnodes = [];
+		
+	if(options.use_canvas != null && options.use_canvas){
+		instance_config.use_canvas = true;
+		instance_config.use_svg = false;
+	}
+		
 	if (typeof (options.images) == "string") {
 		imageNodes = selector(options.images);
 	} else if (window.NodeList && options.images instanceof window.NodeList) {
 		imageNodes = options.images;
 	} else if (window.Node && options.images instanceof window.Node) {
 		imageNodes = [options.images];
+	} else if(window.HTMLCollection && options.images instanceof window.HTMLCollection){
+		imageNodes = options.images
 	}
-	
+
 	if (typeof (options.bgnodes) == "string") {
 		bgnodes = selector(options.bgnodes);
 	} else if (window.NodeList && options.elements instanceof window.NodeList) {
@@ -469,8 +577,7 @@ app.run = function (o) {
 			src = attr_datasrc;
 		}
 		if (src) {
-			var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1)
-				.split("/"), options);
+			var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1).split("/"), options);
 			if (holder) {
 				if (holder.fluid) {
 					render("fluid", images[i], holder, src)
@@ -482,6 +589,7 @@ app.run = function (o) {
 	}
 	return app;
 };
+
 contentLoaded(win, function () {
 	if (window.addEventListener) {
 		window.addEventListener("resize", resizable_update, false);
@@ -489,7 +597,7 @@ contentLoaded(win, function () {
 	} else {
 		window.attachEvent("onresize", resizable_update)
 	}
-	preempted || app.run();
+	preempted || app.run({});
 });
 if (typeof define === "function" && define.amd) {
 	define([], function () {
@@ -497,4 +605,44 @@ if (typeof define === "function" && define.amd) {
 	});
 }

+//github.com/davidchambers/Base64.js
+(function(){function t(t){this.message=t}var e="undefined"!=typeof exports?exports:this,r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";t.prototype=Error(),t.prototype.name="InvalidCharacterError",e.btoa||(e.btoa=function(e){for(var o,n,a=0,i=r,c="";e.charAt(0|a)||(i="=",a%1);c+=i.charAt(63&o>>8-8*(a%1))){if(n=e.charCodeAt(a+=.75),n>255)throw new t("'btoa' failed");o=o<<8|n}return c}),e.atob||(e.atob=function(e){if(e=e.replace(/=+$/,""),1==e.length%4)throw new t("'atob' failed");for(var o,n,a=0,i=0,c="";n=e.charAt(i++);~n&&(o=a%4?64*o+n:n,a++%4)?c+=String.fromCharCode(255&o>>(6&-2*a)):0)n=r.indexOf(n);return c})})();
+
+//getElementsByClassName polyfill
+document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
+
+//getComputedStyle polyfill
+window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
+
+//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
+function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}
+
+//https://gist.github.com/991057 by Jed Schmidt with modifications
+function selector(a,b){var a=a.match(/^(\W)?(.*)/),b=b||document,c=b["getElement"+(a[1]?"#"==a[1]?"ById":"sByClassName":"sByTagName")],d=c.call(b,a[2]),e=[];return null!==d&&(e=d.length||0===d.length?d:[d]),e}
+
+//shallow object property extend
+function extend(a,b){
+	var c={};
+	for(var i in a){
+		if(a.hasOwnProperty(i)){
+			c[i]=a[i];
+		}
+	}
+	for(var i in b){
+		if(b.hasOwnProperty(i)){
+			c[i]=b[i];
+		}
+	}
+	return c
+}
+
+//hasOwnProperty polyfill
+if (!Object.prototype.hasOwnProperty)
+    /*jshint -W001, -W103 */
+    Object.prototype.hasOwnProperty = function(prop) {
+		var proto = this.__proto__ || this.constructor.prototype;
+		return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
+	}
+    /*jshint +W001, +W103 */
+
 })(Holder, window);
@@ -1,4 +1,4 @@
-/** @license uglifyweb Copyright (c) 2011, The Dojo Foundation All Rights Reserved.
+/*! @license uglifyweb Copyright (c) 2011, The Dojo Foundation All Rights Reserved.
 * The parts that are unique to this repo (not much, just some wrapper code) are
 * released under the new BSD and MIT licenses.
 *
@@ -2,17 +2,16 @@
 layout: default
 title: Customize and download
 slug: customize
-lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
+lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
 ---

 <!-- Customizer form -->
 <form class="bs-customizer" role="form">
  <div class="bs-docs-section" id="less-section">
-    <div class="page-header">
-      <button class="btn btn-default toggle" type="button">Toggle all</button>
-      <h1 id="less">LESS files</h1>
-    </div>
-    <p class="lead">Choose which LESS files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>
+    <button class="btn btn-default toggle" type="button">Toggle all</button>
+    <h1 id="less" class="page-header">Less files</h1>
+
+    <p class="lead">Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>

    <div class="row">
      <div class="col-xs-6 col-sm-4">
@@ -71,13 +70,13 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
        </div>
        <div class="checkbox">
          <label>
-            <input type="checkbox" checked value="button-groups.less" data-dependency="buttons.less">
+            <input type="checkbox" checked value="button-groups.less" data-dependencies="buttons.less">
            Button groups
          </label>
        </div>
        <div class="checkbox">
          <label>
-            <input type="checkbox" checked value="input-groups.less" data-dependency="forms.less">
+            <input type="checkbox" checked value="input-groups.less" data-dependencies="forms.less">
            Input groups
          </label>
        </div>
@@ -238,10 +237,9 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge


  <div class="bs-docs-section" id="plugin-section">
-    <div class="page-header">
-      <button class="btn btn-default toggle" type="button">Toggle all</button>
-      <h1 id="plugins">jQuery plugins</h1>
-    </div>
+    <button class="btn btn-default toggle" type="button">Toggle all</button>
+    <h1 id="plugins" class="page-header">jQuery plugins</h1>
+
    <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="../javascript/">JavaScript</a> page in the docs.</p>
    <div class="row">
      <div class="col-lg-6">
@@ -284,7 +282,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
        </div>
        <div class="checkbox">
          <label>
-            <input type="checkbox" checked value="popover.js" data-dependency="tooltip.js">
+            <input type="checkbox" checked value="popover.js" data-dependencies="tooltip.js">
            Popovers <small>(requires Tooltips)</small>
          </label>
        </div>
@@ -338,18 +336,18 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge


  <div class="bs-docs-section" id="less-variables-section">
-    <div class="page-header">
-      <button class="btn btn-default toggle" type="button">Reset to defaults</button>
-      <h1 id="less-variables">LESS variables</h1>
-    </div>
-    <p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
+    <button class="btn btn-default toggle" type="button">Reset to defaults</button>
+    <h1 id="less-variables" class="page-header">Less variables</h1>
+
+    <p class="lead">Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
    {% include customizer-variables.html %}
  </div>

+
+
  <div class="bs-docs-section">
-    <div class="page-header">
-      <h1 id="download">Download</h1>
-    </div>
+    <h1 id="download" class="page-header">Download</h1>
+
    <p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
    <div class="bs-customize-download">
      <button type="submit" id="btn-compile" class="btn btn-block btn-lg btn-outline" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Compile and Download</button>
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v3.0.3 (http://getbootstrap.com)
+ * Bootstrap v3.1.0 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@@ -13,10 +13,10 @@ h3, .h3,
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
+  margin-top: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #333;
-  margin-top: 0;
 }


@@ -41,9 +41,6 @@ h6, .h6 {
 }

 /* Nav links */
-.blog-nav {
-
-}
 .blog-nav-item {
  position: relative;
  display: inline-block;
@@ -65,15 +62,14 @@ h6, .h6 {
  position: absolute;
  bottom: 0;
  left: 50%;
-  display: block;
-  content: " ";
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
+  content: " ";
  border-right:  5px solid transparent;
-  border-left:   5px solid transparent;
  border-bottom: 5px solid;
+  border-left:   5px solid transparent;
 }


@@ -165,4 +161,3 @@ h6, .h6 {
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
 }
-
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -164,8 +164,8 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
-    <script src="../../assets/js/holder.js"></script>
+    <script src="../../assets/js/docs.min.js"></script>
  </body>
 </html>
@@ -16,19 +16,19 @@ body {
 .navbar-wrapper {
  position: absolute;
  top: 0;
-  left: 0;
  right: 0;
+  left: 0;
  z-index: 20;
 }

 /* Flip around the padding for proper display in narrow viewports */
 .navbar-wrapper .container {
-  padding-left: 0;
  padding-right: 0;
+  padding-left: 0;
 }
 .navbar-wrapper .navbar {
-  padding-left: 15px;
  padding-right: 15px;
+  padding-left: 15px;
 }


@@ -65,21 +65,21 @@ body {

 /* Pad the edges of the mobile views a bit */
 .marketing {
-  padding-left: 15px;
  padding-right: 15px;
+  padding-left: 15px;
 }

 /* Center align the text within the three columns below the carousel */
 .marketing .col-lg-4 {
-  text-align: center;
  margin-bottom: 20px;
+  text-align: center;
 }
 .marketing h2 {
  font-weight: normal;
 }
 .marketing .col-lg-4 p {
-  margin-left: 10px;
  margin-right: 10px;
+  margin-left: 10px;
 }


@@ -106,8 +106,8 @@ body {

  /* Remove the edge padding needed for mobile */
  .marketing {
-    padding-left: 0;
    padding-right: 0;
+    padding-left: 0;
  }

  /* Navbar positioning foo */
@@ -115,12 +115,12 @@ body {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
-    padding-left:  15px;
    padding-right: 15px;
+    padding-left:  15px;
  }
  .navbar-wrapper .navbar {
-    padding-left:  0;
    padding-right: 0;
+    padding-left:  0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
@@ -138,7 +138,6 @@ body {
  .featurette-heading {
    font-size: 50px;
  }
-
 }

@media (min-width: 992px) {
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -199,8 +199,8 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
-    <script src="../../assets/js/holder.js"></script>
+    <script src="../../assets/js/docs.min.js"></script>
  </body>
 </html>
@@ -48,8 +48,8 @@ body {
  vertical-align: top;
 }
 .cover-container {
-  margin-left: auto;
  margin-right: auto;
+  margin-left: auto;
 }

 /* Padding for spacing */
@@ -73,8 +73,8 @@ body {
  margin-left: 20px;
 }
 .masthead-nav > li > a {
-  padding-left: 0;
  padding-right: 0;
+  padding-left: 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff; /* IE8 proofing */
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -68,8 +68,8 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
-    <script src="../../assets/js/holder.js"></script>
+    <script src="../../assets/js/docs.min.js"></script>
  </body>
 </html>
@@ -29,12 +29,14 @@ body {
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
-    top: 0;
-    left: 0;
+    top: 51px;
    bottom: 0;
+    left: 0;
    z-index: 1000;
    display: block;
-    padding: 70px 20px 20px;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
@@ -42,13 +44,13 @@ body {

 /* Sidebar navigation */
 .nav-sidebar {
-  margin-left: -20px;
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
+  margin-left: -20px;
 }
 .nav-sidebar > li > a {
-  padding-left: 20px;
  padding-right: 20px;
+  padding-left: 20px;
 }
 .nav-sidebar > .active > a {
  color: #fff;
@@ -65,8 +67,8 @@ body {
 }
@media (min-width: 768px) {
  .main {
+    padding-right: 40px;
    padding-left: 40px;
-    pading-right: 40px;
  }
 }
 .main .page-header {
@@ -89,5 +91,6 @@ body {
  margin-bottom: 20px;
 }
 .placeholder img {
+  display: inline-block;
  border-radius: 50%;
 }
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -236,8 +236,8 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
-    <script src="../../assets/js/holder.js"></script>
+    <script src="../../assets/js/docs.min.js"></script>
  </body>
 </html>
@@ -1,6 +1,6 @@
 .container {
-  padding-left: 15px;
  padding-right: 15px;
+  padding-left: 15px;
 }

 h4 {
@@ -17,12 +17,12 @@ h4 {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
-  border: 1px solid #ddd;
  background-color: rgba(86,61,124,.15);
+  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
 }

 hr {
  margin-top: 40px;
  margin-bottom: 40px;
-}
+}
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -63,7 +63,7 @@
      <hr>

      <h3>Two columns with two nested columns</h3>
-      <p>Per the documentation, nesting is easy—just put a row of columns within an existing row. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
+      <p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
      <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
      <div class="row">
        <div class="col-md-8">
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -8,8 +8,8 @@ body {
 .header,
 .marketing,
 .footer {
-  padding-left: 15px;
  padding-right: 15px;
+  padding-left: 15px;
 }

 /* Custom page header */
@@ -18,10 +18,10 @@ body {
 }
 /* Make the masthead heading the same height as the navigation */
 .header h3 {
+  padding-bottom: 19px;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
-  padding-bottom: 19px;
 }

 /* Custom page footer */
@@ -47,8 +47,8 @@ body {
  border-bottom: 1px solid #e5e5e5;
 }
 .jumbotron .btn {
-  font-size: 21px;
  padding: 14px 24px;
+  font-size: 21px;
 }

 /* Supporting marketing content */
@@ -65,8 +65,8 @@ body {
  .header,
  .marketing,
  .footer {
-    padding-left: 0;
    padding-right: 0;
+    padding-left: 0;
  }
  /* Space out the masthead */
  .header {
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -93,7 +93,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -53,7 +53,7 @@
      <div class="row">
        <div class="col-lg-4">
          <h2>Safari bug warning!</h2>
-          <p class="text-danger">Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
+          <p class="text-danger">As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
@@ -3,10 +3,10 @@ body {
 }

 .footer {
-  border-top: 1px solid #eee;
-  margin-top: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
+  margin-top: 40px;
+  border-top: 1px solid #eee;
 }

 /* Main marketing message and sign up button */
@@ -15,33 +15,33 @@ body {
  background-color: transparent;
 }
 .jumbotron .btn {
-  font-size: 21px;
  padding: 14px 24px;
+  font-size: 21px;
 }

 /* Customize the nav-justified links to be fill the entire space of the .navbar */

 .nav-justified {
  background-color: #eee;
-  border-radius: 5px;
  border: 1px solid #ccc;
+  border-radius: 5px;
 }
 .nav-justified > li > a {
-  margin-bottom: 0;
  padding-top: 15px;
  padding-bottom: 15px;
-  color: #777;
+  margin-bottom: 0;
  font-weight: bold;
+  color: #777;
  text-align: center;
-  border-bottom: 1px solid #d5d5d5;
  background-color: #e5e5e5; /* Old browsers */
-  background-repeat: repeat-x; /* Repeat the gradient */
-  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
+  background-image:    -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
-  background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
+  background-image:         linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
-  background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
+  background-repeat: repeat-x; /* Repeat the gradient */
+  border-bottom: 1px solid #d5d5d5;
 }
 .nav-justified > .active > a,
 .nav-justified > .active > a:hover,
@@ -63,16 +63,16 @@ body {
    max-height: 52px;
  }
  .nav-justified > li > a {
-    border-left: 1px solid #fff;
    border-right: 1px solid #d5d5d5;
+    border-left: 1px solid #fff;
  }
  .nav-justified > li:first-child > a {
    border-left: 0;
    border-radius: 5px 0 0 5px;
  }
  .nav-justified > li:last-child > a {
-    border-radius: 0 5px 5px 0;
    border-right: 0;
+    border-radius: 0 5px 5px 0;
  }
 }

@@ -82,7 +82,7 @@ body {
  .masthead,
  .marketing,
  .footer {
-    padding-left: 0;
    padding-right: 0;
+    padding-left: 0;
  }
 }
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -85,7 +85,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -86,7 +86,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -4,4 +4,4 @@ body {

 .navbar-static-top {
  margin-bottom: 19px;
-}
+}
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -84,7 +84,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -77,7 +77,7 @@
      </div>

      <h3>What changes</h3>
-      <p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.</p>
+      <p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.</p>

      <h3>Regarding navbars</h3>
      <p>As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar.</p>
@@ -99,7 +99,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -6,9 +6,9 @@

 /* Account for fixed navbar */
 body {
+  min-width: 970px;
  padding-top: 70px;
  padding-bottom: 30px;
-  min-width: 970px;
 }

 /* Finesse the page header spacing */
@@ -28,8 +28,8 @@ body {

 /* Reset the container */
 .container {
-  max-width: none !important;
  width: 970px;
+  max-width: none !important;
 }

 /* Demonstrate the grids */
@@ -37,8 +37,8 @@ body {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
-  border: 1px solid #ddd;
  background-color: rgba(86,61,124,.15);
+  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
 }

@@ -94,12 +94,12 @@ body {
  position: absolute;
  float: left;
  background-color: #fff;
-  border: 1px solid #cccccc;
-  border: 1px solid rgba(0, 0, 0, 0.15);
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, .15);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 }
 .navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #333;
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -123,7 +123,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="offcanvas.js"></script>
  </body>
@@ -20,9 +20,9 @@ footer {
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
-    -webkit-transition: all 0.25s ease-out;
-    -moz-transition: all 0.25s ease-out;
-    transition: all 0.25s ease-out;
+    -webkit-transition: all .25s ease-out;
+       -moz-transition: all .25s ease-out;
+            transition: all .25s ease-out;
  }

  .row-offcanvas-right
@@ -1,5 +1,5 @@
-$(document).ready(function() {
-  $('[data-toggle=offcanvas]').click(function() {
-    $('.row-offcanvas').toggleClass('active');
+$(document).ready(function () {
+  $('[data-toggle=offcanvas]').click(function () {
+    $('.row-offcanvas').toggleClass('active')
  });
 });
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -32,7 +32,7 @@

      <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="email" class="form-control" placeholder="Email address" required autofocus>
        <input type="password" class="form-control" placeholder="Password" required>
        <label class="checkbox">
          <input type="checkbox" value="remember-me"> Remember me
@@ -18,23 +18,23 @@ body {
 }
 .form-signin .form-control {
  position: relative;
-  font-size: 16px;
  height: auto;
-  padding: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
+  padding: 10px;
+  font-size: 16px;
 }
 .form-signin .form-control:focus {
  z-index: 2;
 }
-.form-signin input[type="text"] {
+.form-signin input[type="email"] {
  margin-bottom: -1px;
-  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
 .form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
-}
+}
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -62,7 +62,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -28,53 +28,49 @@

  <body>

-    <!-- Wrap all page content here -->
-    <div id="wrap">
-
-      <!-- Fixed navbar -->
-      <div class="navbar navbar-default navbar-fixed-top" role="navigation">
-        <div class="container">
-          <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="#">Project name</a>
-          </div>
-          <div class="collapse navbar-collapse">
-            <ul class="nav navbar-nav">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#about">About</a></li>
-              <li><a href="#contact">Contact</a></li>
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-                <ul class="dropdown-menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li class="dropdown-header">Nav header</li>
-                  <li><a href="#">Separated link</a></li>
-                  <li><a href="#">One more separated link</a></li>
-                </ul>
-              </li>
-            </ul>
-          </div><!--/.nav-collapse -->
-        </div>
-      </div>
-
-      <!-- Begin page content -->
+    <!-- Fixed navbar -->
+    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
-        <div class="page-header">
-          <h1>Sticky footer with fixed navbar</h1>
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Project name</a>
        </div>
-        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
-        <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
+        <div class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Nav header</li>
+                <li><a href="#">Separated link</a></li>
+                <li><a href="#">One more separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div><!--/.nav-collapse -->
      </div>
    </div>

+    <!-- Begin page content -->
+    <div class="container">
+      <div class="page-header">
+        <h1>Sticky footer with fixed navbar</h1>
+      </div>
+      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
+      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
+    </div>
+
    <div id="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
@@ -85,7 +81,7 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
 </html>
@@ -1,24 +1,18 @@
 /* Sticky footer styles
 -------------------------------------------------- */
-
-html,
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-}
-
-/* Wrapper for page content to push down footer */
-#wrap {
+html {
+  position: relative;
  min-height: 100%;
-  height: auto;
-  /* Negative indent footer by its height */
-  margin: 0 auto -60px;
-  /* Pad bottom by footer height */
-  padding: 0 0 60px;
 }
-
-/* Set the fixed height of the footer here */
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+}
 #footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
 }
@@ -28,7 +22,7 @@ body {
 -------------------------------------------------- */
 /* Not required for template or sticky footer method. */

-#wrap > .container {
+body > .container {
  padding: 60px 15px 0;
 }
 .container .text-muted {
@@ -36,8 +30,8 @@ body {
 }

 #footer > .container {
-  padding-left: 15px;
  padding-right: 15px;
+  padding-left: 15px;
 }

 code {
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -28,17 +28,13 @@

  <body>

-    <!-- Wrap all page content here -->
-    <div id="wrap">
-
-      <!-- Begin page content -->
-      <div class="container">
-        <div class="page-header">
-          <h1>Sticky footer</h1>
-        </div>
-        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
-        <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
+    <!-- Begin page content -->
+    <div class="container">
+      <div class="page-header">
+        <h1>Sticky footer</h1>
      </div>
+      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
+      <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
    </div>

    <div id="footer">
@@ -1,24 +1,18 @@
 /* Sticky footer styles
 -------------------------------------------------- */
-
-html,
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-}
-
-/* Wrapper for page content to push down footer */
-#wrap {
+html {
+  position: relative;
  min-height: 100%;
-  height: auto;
-  /* Negative indent footer by its height */
-  margin: 0 auto -60px;
-  /* Pad bottom by footer height */
-  padding: 0 0 60px;
 }
-
-/* Set the fixed height of the footer here */
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+}
 #footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
 }
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
@@ -28,7 +28,7 @@
    <![endif]-->
  </head>

-  <body>
+  <body role="document">

    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
@@ -64,7 +64,7 @@
      </div>
    </div>

-    <div class="container theme-showcase">
+    <div class="container theme-showcase" role="main">

      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron">
@@ -377,8 +377,8 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
-    <script src="../../assets/js/holder.js"></script>
+    <script src="../../assets/js/docs.min.js"></script>
  </body>
 </html>
@@ -4,11 +4,11 @@ body {
 }

 .theme-dropdown .dropdown-menu {
-  display: block;
  position: static;
+  display: block;
  margin-bottom: 20px;
 }

 .theme-showcase > p > .btn {
  margin: 5px 0;
-}
+}
@@ -1,27 +0,0 @@
-/* jshint node: true */
-
-var fs = require('fs')
-
-module.exports = function generateGlyphiconsData() {
-  // Pass encoding, utf8, so `readFileSync` will return a string instead of a
-  // buffer
-  var glyphiconsFile = fs.readFileSync('less/glyphicons.less', 'utf8')
-  var glpyhiconsLines = glyphiconsFile.split('\n')
-
-  // Use any line that starts with ".glyphicon-" and capture the class name
-  var iconClassName = /^\.(glyphicon-[^\s]+)/
-  var glyphiconsData = '# This file is generated via Grunt task. **Do not edit directly.** \n' +
-                       '# See the \'build-glyphicons-data\' task in Gruntfile.js.\n\n';
-  for (var i = 0, len = glpyhiconsLines.length; i < len; i++) {
-    var match = glpyhiconsLines[i].match(iconClassName)
-
-    if (match != null) {
-      glyphiconsData += '- ' + match[1] + '\n'
-    }
-  }
-
-  // Create the `_data` directory if it doesn't already exist
-  if (!fs.existsSync('docs/_data')) fs.mkdirSync('docs/_data')
-
-  fs.writeFileSync('docs/_data/glyphicons.yml', glyphiconsData)
-}
@@ -1,228 +0,0 @@
-/* jshint node: true */
-
-var markdown = require('markdown').markdown;
-
-function markdown2html(markdownString) {
-  // the slice removes the <p>...</p> wrapper output by Markdown processor
-  return markdown.toHTML(markdownString.trim()).slice(3, -4);
-}
-
-
-/*
-Mini-language:
-  //== This is a normal heading, which starts a section. Sections group variables together.
-  //## Optional description for the heading
-
-  //** Optional description for the following variable. You **can** use Markdown in descriptions to discuss `<html>` stuff.
-  @foo: #ffff;
-
-  //-- This is a heading for a section whose variables shouldn't be customizable
-
-  All other lines are ignored completely.
-*/
-
-
-var CUSTOMIZABLE_HEADING = /^[/]{2}={2}(.*)$/;
-var UNCUSTOMIZABLE_HEADING = /^[/]{2}-{2}(.*)$/;
-var SUBSECTION_HEADING = /^[/]{2}={3}(.*)$/;
-var SECTION_DOCSTRING = /^[/]{2}#{2}(.*)$/;
-var VAR_ASSIGNMENT = /^(@[a-zA-Z0-9_-]+):[ ]*([^ ;][^;]+);[ ]*$/;
-var VAR_DOCSTRING = /^[/]{2}[*]{2}(.*)$/;
-
-function Section(heading, customizable) {
-  this.heading = heading.trim();
-  this.id = this.heading.replace(/\s+/g, '-').toLowerCase();
-  this.customizable = customizable;
-  this.docstring = null;
-  this.subsections = [];
-}
-
-Section.prototype.addSubSection = function (subsection) {
-  this.subsections.push(subsection);
-}
-
-function SubSection(heading) {
-  this.heading = heading.trim();
-  this.id = this.heading.replace(/\s+/g, '-').toLowerCase();
-  this.variables = [];
-}
-
-SubSection.prototype.addVar = function (variable) {
-  this.variables.push(variable);
-};
-
-function VarDocstring(markdownString) {
-  this.html = markdown2html(markdownString);
-}
-
-function SectionDocstring(markdownString) {
-  this.html = markdown2html(markdownString);
-}
-
-function Variable(name, defaultValue) {
-  this.name = name;
-  this.defaultValue = defaultValue;
-  this.docstring = null;
-}
-
-function Tokenizer(fileContent) {
-  this._lines = fileContent.split('\n');
-  this._next = undefined;
-}
-
-Tokenizer.prototype.unshift = function (token) {
-  if (this._next !== undefined) {
-    throw new Error('Attempted to unshift twice!');
-  }
-  this._next = token;
-};
-
-Tokenizer.prototype._shift = function () {
-  // returning null signals EOF
-  // returning undefined means the line was ignored
-  if (this._next !== undefined) {
-    var result = this._next;
-    this._next = undefined;
-    return result;
-  }
-  if (this._lines.length <= 0) {
-    return null;
-  }
-  var line = this._lines.shift();
-  var match = null;
-  match = SUBSECTION_HEADING.exec(line);
-  if (match !== null) {
-    return new SubSection(match[1]);
-  }
-  match = CUSTOMIZABLE_HEADING.exec(line);
-  if (match !== null) {
-    return new Section(match[1], true);
-  }
-  match = UNCUSTOMIZABLE_HEADING.exec(line);
-  if (match !== null) {
-    return new Section(match[1], false);
-  }
-  match = SECTION_DOCSTRING.exec(line);
-  if (match !== null) {
-    return new SectionDocstring(match[1]);
-  }
-  match = VAR_DOCSTRING.exec(line);
-  if (match !== null) {
-    return new VarDocstring(match[1]);
-  }
-  var commentStart = line.lastIndexOf('//');
-  var varLine = (commentStart === -1) ? line : line.slice(0, commentStart);
-  match = VAR_ASSIGNMENT.exec(varLine);
-  if (match !== null) {
-    return new Variable(match[1], match[2]);
-  }
-  return undefined;
-};
-
-Tokenizer.prototype.shift = function () {
-  while (true) {
-    var result = this._shift();
-    if (result === undefined) {
-      continue;
-    }
-    return result;
-  }
-};
-
-function Parser(fileContent) {
-  this._tokenizer = new Tokenizer(fileContent);
-}
-
-Parser.prototype.parseFile = function () {
-  var sections = [];
-  while (true) {
-    var section = this.parseSection();
-    if (section === null) {
-      if (this._tokenizer.shift() !== null) {
-        throw new Error('Unexpected unparsed section of file remains!');
-      }
-      return sections;
-    }
-    sections.push(section);
-  }
-};
-
-Parser.prototype.parseSection = function () {
-  var section = this._tokenizer.shift();
-  if (section === null) {
-    return null;
-  }
-  if (!(section instanceof Section)) {
-    throw new Error('Expected section heading; got: ' + JSON.stringify(section));
-  }
-  var docstring = this._tokenizer.shift();
-  if (docstring instanceof SectionDocstring) {
-    section.docstring = docstring;
-  }
-  else {
-    this._tokenizer.unshift(docstring);
-  }
-  this.parseSubSections(section);
-
-  return section;
-};
-
-Parser.prototype.parseSubSections = function (section) {
-  while (true) {
-    var subsection = this.parseSubSection();
-    if (subsection === null) {
-      if (section.subsections.length === 0) {
-        // Presume an implicit initial subsection
-        subsection = new SubSection('');
-        this.parseVars(subsection);
-      }
-      else {
-        break;
-      }
-    }
-    section.addSubSection(subsection);
-  }
-
-  if (section.subsections.length === 1 && !(section.subsections[0].heading) && section.subsections[0].variables.length === 0) {
-    // Ignore lone empty implicit subsection
-    section.subsections = [];
-  }
-};
-
-Parser.prototype.parseSubSection = function () {
-  var subsection = this._tokenizer.shift();
-  if (subsection instanceof SubSection) {
-    this.parseVars(subsection);
-    return subsection;
-  }
-  this._tokenizer.unshift(subsection);
-  return null;
-};
-
-Parser.prototype.parseVars = function (subsection) {
-  while (true) {
-    var variable = this.parseVar();
-    if (variable === null) {
-      return;
-    }
-    subsection.addVar(variable);
-  }
-};
-
-Parser.prototype.parseVar = function () {
-  var docstring = this._tokenizer.shift();
-  if (!(docstring instanceof VarDocstring)) {
-    this._tokenizer.unshift(docstring);
-    docstring = null;
-  }
-  var variable = this._tokenizer.shift();
-  if (variable instanceof Variable) {
-    variable.docstring = docstring;
-    return variable;
-  }
-  this._tokenizer.unshift(variable);
-  return null;
-};
-
-
-module.exports = Parser;
@@ -1,22 +0,0 @@
-/* jshint node: true */
-
-var btoa = require('btoa') // jshint ignore:line
-var fs = require('fs')
-
-function getFiles(type) {
-  var files = {}
-  fs.readdirSync(type)
-    .filter(function (path) {
-      return type == 'fonts' ? true : new RegExp('\\.' + type + '$').test(path)
-    })
-    .forEach(function (path) {
-      var fullPath = type + '/' + path
-      return files[path] = (type == 'fonts' ? btoa(fs.readFileSync(fullPath)) : fs.readFileSync(fullPath, 'utf8'))
-    })
-  return 'var __' + type + ' = ' + JSON.stringify(files) + '\n'
-}
-
-module.exports = function generateRawFilesJs() {
-  var files = getFiles('js') + getFiles('less') + getFiles('fonts')
-  fs.writeFileSync('docs/assets/js/raw-files.js', files)
-}
@@ -5,11 +5,68 @@ title: Bootstrap

 <main class="bs-masthead" id="content" role="main">
  <div class="container">
-    <h1>Bootstrap</h1>
-    <p class="lead">Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
-    <p>
-      <a href="{{ site.download.dist }}" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);">Download Bootstrap</a>
-      <a href="{{ site.download.source }}" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version source }}']);">Download source</a>
+    <span class="bs-booticon bs-booticon-lg bs-booticon-outline">B</span>
+    <!-- <h1>Bootstrap</h1> -->
+    <p class="lead">The most popular front-end framework for developing responsive, mobile first projects on the web.</p>
+    <p class="lead">
+      <a href="getting-started#download" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);">Download Bootstrap</a>
    </p>
+    {% include ads.html %}
  </div>
 </main>
+
+<div class="bs-featurette">
+  <div class="container">
+    <h2 class="bs-featurette-title">Designed for everyone, everywhere.</h2>
+    <p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
+
+    <hr class="half-rule">
+
+    <div class="row">
+      <div class="col-sm-4">
+        <img src="assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
+        <h3>Preprocessors</h3>
+        <p>In addition to vanilla CSS, Bootstrap includes support for the two most popular CSS preprocessors, <a href="../css/#less">Less</a> and <a href="../css/#sass">Sass</a>.</p>
+      </div>
+      <div class="col-sm-4">
+        <img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
+        <h3>One framework, every device.</h3>
+        <p>Bootstrap easily and efficiently scales your project with one code base, from phones to tablets to desktops.</p>
+      </div>
+      <div class="col-sm-4">
+        <img src="assets/img/components.png" alt="Components" class="img-responsive">
+        <h3>Comprehensive docs</h3>
+        <p>With Bootstrap, you get extensive and beautiful documentation with hundreds of live examples, code snippets, and more.</p>
+      </div>
+    </div>
+
+    <hr class="half-rule">
+
+    <p class="lead">Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
+    <a href="{{ site.repo }}" class="btn btn-outline btn-lg">View the GitHub project</a>
+  </div>
+</div>
+
+<div class="bs-featurette">
+  <div class="container">
+    <h2 class="bs-featurette-title">Built with Bootstrap.</h2>
+    <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
+
+    <hr class="half-rule">
+
+    <div class="row bs-featured-sites">
+    {% for showcase in site.data.showcase %}
+      <div class="col-sm-3">
+        <a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}">
+          <img src="{{ showcase.img }}" alt="{{ showcase.name }}" class="img-responsive">
+        </a>
+      </div>
+    {% endfor %}
+    </div>
+
+    <hr class="half-rule">
+
+    <p class="lead">We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
+    <a href="{{ site.expo }}" class="btn btn-outline btn-lg">Explore the Expo</a>
+  </div>
+</div>
@@ -0,0 +1,15 @@
+// NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.
+li
+  a(href='#less') Less components
+li
+  a(href='#plugins') jQuery plugins
+li
+  a(href='#less-variables') Less variables
+  ul.nav
+    each section in sections
+      if section.customizable
+        li
+          a(href='#'+section.id)= section.heading
+li
+  a(href='#download') Download
+// NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.
@@ -1,4 +1,4 @@
-// NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-vars-form` Grunt task using the customizer-variables.jade template.
+// NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.
 each section in sections
  if section.customizable
    h2(id=section.id)= section.heading
@@ -18,4 +18,4 @@ each section in sections
              data-var=variable.name)
            if variable.docstring
              p.help-block!= variable.docstring.html
-// NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-vars-form` Grunt task using the customizer-variables.jade template.
+// NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.
@@ -0,0 +1,434 @@
+---
+layout: default
+title: Migrating to v3.x
+slug: migration
+lead: "Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed."
+---
+
+
+
+<!-- Migration
+================================================== -->
+<div class="bs-docs-section">
+  <h1 class="page-header">Migrating from 2.x to 3.0</h1>
+
+  <p class="lead">Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">what's new</a> in the v3.0 release announcement.</p>
+
+  <h2 id="classes">Major class changes</h2>
+  <p>This table shows the style changes between v2.x and v3.0.</p>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped">
+      <thead>
+        <tr>
+          <th>Bootstrap 2.x</th>
+          <th>Bootstrap 3.0</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>.row-fluid</code></td>
+          <td><code>.row</code></td>
+        </tr>
+        <tr>
+          <td><code>.span*</code></td>
+          <td><code>.col-md-*</code></td>
+        </tr>
+        <tr>
+          <td><code>.offset*</code></td>
+          <td><code>.col-md-offset-*</code></td>
+        </tr>
+        <tr>
+          <td><code>.brand</code></td>
+          <td><code>.navbar-brand</code></td>
+        </tr>
+        <tr>
+          <td><code>.nav-collapse</code></td>
+          <td><code>.navbar-collapse</code></td>
+        </tr>
+        <tr>
+          <td><code>.nav-toggle</code></td>
+          <td><code>.navbar-toggle</code></td>
+        </tr>
+        <tr>
+          <td><code>.btn-navbar</code></td>
+          <td><code>.navbar-btn</code></td>
+        </tr>
+        <tr>
+          <td><code>.hero-unit</code></td>
+          <td><code>.jumbotron</code></td>
+        </tr>
+        <tr>
+          <td><code>.icon-*</code></td>
+          <td><code>.glyphicon .glyphicon-*</code></td>
+        </tr>
+        <tr>
+          <td><code>.btn</code></td>
+          <td><code>.btn .btn-default</code></td>
+        </tr>
+        <tr>
+          <td><code>.btn-mini</code></td>
+          <td><code>.btn-xs</code></td>
+        </tr>
+        <tr>
+          <td><code>.btn-small</code></td>
+          <td><code>.btn-sm</code></td>
+        </tr>
+        <tr>
+          <td><code>.btn-large</code></td>
+          <td><code>.btn-lg</code></td>
+        </tr>
+        <tr>
+          <td><code>.alert-error</code></td>
+          <td><code>.alert-danger</code></td>
+        </tr>
+        <tr>
+          <td><code>.visible-phone</code></td>
+          <td><code>.visible-xs</code></td>
+        </tr>
+        <tr>
+          <td><code>.visible-tablet</code></td>
+          <td><code>.visible-sm</code></td>
+        </tr>
+        <tr>
+          <td><code>.visible-desktop</code></td>
+          <td>Split into <code>.visible-md .visible-lg</code></td>
+        </tr>
+        <tr>
+          <td><code>.hidden-phone</code></td>
+          <td><code>.hidden-xs</code></td>
+        </tr>
+        <tr>
+          <td><code>.hidden-tablet</code></td>
+          <td><code>.hidden-sm</code></td>
+        </tr>
+        <tr>
+          <td><code>.hidden-desktop</code></td>
+          <td>Split into <code>.hidden-md .hidden-lg</code></td>
+        </tr>
+        <tr>
+          <td><code>.input-block-level</code></td>
+          <td><code>.form-control</code></td>
+        </tr>
+        <tr>
+          <td><code>.control-group</code></td>
+          <td><code>.form-group</code></td>
+        </tr>
+        <tr>
+          <td><code>.control-group.warning .control-group.error .control-group.success</code></td>
+          <td><code>.form-group.has-*</code></td>
+        </tr>
+        <tr>
+          <td><code>.checkbox.inline</code> <code>.radio.inline</code></td>
+          <td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
+        </tr>
+        <tr>
+          <td><code>.input-prepend</code> <code>.input-append</code></td>
+          <td><code>.input-group</code></td>
+        </tr>
+        <tr>
+          <td><code>.add-on</code></td>
+          <td><code>.input-group-addon</code></td>
+        </tr>
+        <tr>
+          <td><code>.img-polaroid</code></td>
+          <td><code>.img-thumbnail</code></td>
+        </tr>
+        <tr>
+          <td><code>ul.unstyled</code></td>
+          <td><code>.list-unstyled</code></td>
+        </tr>
+        <tr>
+          <td><code>ul.inline</code></td>
+          <td><code>.list-inline</code></td>
+        </tr>
+        <tr>
+          <td><code>.muted</code></td>
+          <td><code>.text-muted</code></td>
+        </tr>
+        <tr>
+          <td><code>.label</code></td>
+          <td><code>.label .label-default</code></td>
+        </tr>
+        <tr>
+          <td><code>.label-important</code></td>
+          <td><code>.label-danger</code></td>
+        </tr>
+        <tr>
+          <td><code>.text-error</code></td>
+          <td><code>.text-danger</code></td>
+        </tr>
+        <tr>
+          <td><code>.table .error</code></td>
+          <td><code>.table .danger</code></td>
+        </tr>
+        <tr>
+          <td><code>.bar</code></td>
+          <td><code>.progress-bar</code></td>
+        </tr>
+        <tr>
+          <td><code>.bar-*</code></td>
+          <td><code>.progress-bar-*</code></td>
+        </tr>
+        <tr>
+          <td><code>.accordion</code></td>
+          <td><code>.panel-group</code></td>
+        </tr>
+        <tr>
+          <td><code>.accordion-group</code></td>
+          <td><code>.panel .panel-default</code></td>
+        </tr>
+        <tr>
+          <td><code>.accordion-heading</code></td>
+          <td><code>.panel-heading</code></td>
+        </tr>
+        <tr>
+          <td><code>.accordion-body</code></td>
+          <td><code>.panel-collapse</code></td>
+        </tr>
+        <tr>
+          <td><code>.accordion-inner</code></td>
+          <td><code>.panel-body</code></td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /.table-responsive -->
+
+  <h2 id="new">What's new</h2>
+  <p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped">
+      <thead>
+        <tr>
+          <th>Element</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Panels</td>
+          <td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td>
+        </tr>
+        <tr>
+          <td>List groups</td>
+          <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td>
+        </tr>
+        <tr>
+          <td>Glyphicons</td>
+          <td><code>.glyphicon</code></td>
+        </tr>
+        <tr>
+          <td>Jumbotron</td>
+          <td><code>.jumbotron</code></td>
+        </tr>
+        <tr>
+          <td>Extra small grid (&lt;768px)</td>
+          <td><code>.col-xs-*</code></td>
+        </tr>
+        <tr>
+          <td>Small grid (&ge;768px)</td>
+          <td><code>.col-sm-*</code></td>
+        </tr>
+        <tr>
+          <td>Medium grid (&ge;992px)</td>
+          <td><code>.col-md-*</code></td>
+        </tr>
+        <tr>
+          <td>Large grid (&ge;1200px)</td>
+          <td><code>.col-lg-*</code></td>
+        </tr>
+        <tr>
+          <td>Responsive utility classes (&ge;1200px)</td>
+          <td><code>.visible-lg</code> <code>.hidden-lg</code></td>
+        </tr>
+        <tr>
+          <td>Offsets</td>
+          <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td>
+        </tr>
+        <tr>
+          <td>Push</td>
+          <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td>
+        </tr>
+        <tr>
+          <td>Pull</td>
+          <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td>
+        </tr>
+        <tr>
+          <td>Input height sizes</td>
+          <td><code>.input-sm</code> <code>.input-lg</code></td>
+        </tr>
+        <tr>
+          <td>Input groups</td>
+          <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td>
+        </tr>
+        <tr>
+          <td>Form controls</td>
+          <td><code>.form-control</code> <code>.form-group</code></td>
+        </tr>
+        <tr>
+          <td>Button group sizes</td>
+          <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td>
+        </tr>
+        <tr>
+          <td>Navbar text</td>
+          <td><code>.navbar-text</code></td>
+        </tr>
+        <tr>
+          <td>Navbar header</td>
+          <td><code>.navbar-header</code></td>
+        </tr>
+        <tr>
+          <td>Justified tabs / pills</td>
+          <td><code>.nav-justified</code></td>
+        </tr>
+        <tr>
+          <td>Responsive images</td>
+          <td><code>.img-responsive</code></td>
+        </tr>
+        <tr>
+          <td>Contextual table rows</td>
+          <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code> <code>.info</code></td>
+        </tr>
+        <tr>
+          <td>Contextual panels</td>
+          <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
+        </tr>
+        <tr>
+          <td>Modal</td>
+          <td><code>.modal-dialog</code> <code>.modal-content</code></td>
+        </tr>
+        <tr>
+          <td>Thumbnail image</td>
+          <td><code>.img-thumbnail</code></td>
+        </tr>
+        <tr>
+          <td>Well sizes</td>
+          <td><code>.well-sm</code> <code>.well-lg</code></td>
+        </tr>
+        <tr>
+          <td>Alert links</td>
+          <td><code>.alert-link</code></td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /.table-responsive -->
+
+
+  <h2 id="dropped">What's removed</h2>
+  <p>The following elements have been dropped or changed in v3.0.</p>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped">
+      <thead>
+        <tr>
+          <th>Element</th>
+          <th>Removed from 2.x</th>
+          <th>3.0 Equivalent</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Form actions</td>
+          <td><code>.form-actions</code></td>
+          <td class="text-muted">N/A</td>
+        </tr>
+        <tr>
+          <td>Search form</td>
+          <td><code>.form-search</code></td>
+          <td class="text-muted">N/A</td>
+        </tr>
+        <tr>
+          <td>Form group with info</td>
+          <td><code>.control-group.info</code></td>
+          <td class="text-muted">N/A</td>
+        </tr>
+        <tr>
+          <td>Fixed-width input sizes</td>
+          <td><code>.input-mini</code> <code>.input-small</code> <code>.input-medium</code> <code>.input-large</code> <code>.input-xlarge</code> <code>.input-xxlarge</code></td>
+          <td>Use <a href="../css/#forms-controls"><code>.form-control</code></a> and <a href="../css/#grid">the grid system</a> instead.</td>
+        </tr>
+        <tr>
+          <td>Block level form input</td>
+          <td><code>.input-block-level</code></td>
+          <td>No direct equivalent, but <a href="../css/#forms-controls">forms controls</a> are similar.</td>
+        </tr>
+        <tr>
+          <td>Inverse buttons</td>
+          <td><code>.btn-inverse</code></td>
+          <td class="text-muted">N/A</td>
+        </tr>
+        <tr>
+          <td>Fluid row</td>
+          <td><code>.row-fluid</code></td>
+          <td><code>.row</code> (no more fixed grid)</td>
+        </tr>
+        <tr>
+          <td>Controls wrapper</td>
+          <td><code>.controls</code></td>
+          <td class="text-muted">N/A</td>
+        </tr>
+        <tr>
+          <td>Controls row</td>
+          <td><code>.controls-row</code></td>
+          <td><code>.row</code> or <code>.form-group</code></td>
+        </tr>
+        <tr>
+          <td>Navbar inner</td>
+          <td><code>.navbar-inner</code></td>
+          <td class="text-muted">N/A</td>
+        </tr>
+        <tr>
+          <td>Navbar vertical dividers</td>
+          <td><code>.navbar .divider-vertical</code></td>
+          <td class="text-muted">N/A</td>
+        </tr>
+        <tr>
+          <td>Dropdown submenu</td>
+          <td><code>.dropdown-submenu</code></td>
+          <td class="text-muted">N/A</td>
+        </tr>
+        <tr>
+          <td>Tab alignments</td>
+          <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
+          <td class="text-muted">N/A</td>
+        </tr>
+        <tr>
+          <td>Pill-based tabbable area</td>
+          <td><code>.pill-content</code></td>
+          <td><code>.tab-content</code></td>
+        </tr>
+        <tr>
+          <td>Pill-based tabbable area pane</td>
+          <td><code>.pill-pane</code></td>
+          <td><code>.tab-pane</code></td>
+        </tr>
+        <tr>
+          <td>Nav lists</td>
+          <td><code>.nav-list</code> <code>.nav-header</code></td>
+          <td>No direct equivalent, but <a href="../components/#list-group">list groups</a> and <a href="../javascript/#collapse"><code>.panel-group</code>s</a> are similar.</td>
+        </tr>
+        <tr>
+          <td>Inline help for form controls</td>
+          <td><code>.help-inline</code></td>
+          <td>No exact equivalent, but <code>.help-block</code> is similar.</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /.table-responsive -->
+
+
+  <h2 id="notes">Additional notes</h2>
+  <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p>
+  <ul>
+    <li>By default, text-based form controls now receive only minimal styling.  For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li>
+    <li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code>&lt;div class="col-*"&gt;&lt;/div&gt;</code> to control input widths.</li>
+    <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li>
+    <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li>
+    <li><code>.row</code> is now fluid.</li>
+    <li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code>&lt;img&gt;</code> size.</li>
+    <li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li>
+    <li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
+    <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior. Also, you should no longer apply <code>.hide</code> to <code>.modal</code> in your markup.</li>
+    <li>As of v3.1.0, the HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal-content</code> (from v3.0.0 to v3.0.3, into the <code>.modal</code>) instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li>
+    <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li>
+  </ul>
+  <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p>
+</div>