Merge branch '3.0.0-wip' into bs3_theme

Conflicts:
	dist/css/bootstrap.min.css

.gitignore

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

.travis.yml

@@ -2,8 +2,10 @@ language: node_js
 node_js:
   - 0.8
 before_script:
+  - gem install jekyll
   - npm install -g grunt-cli
 env:
   global:
   - secure: Besg41eyU+2mfxrywQ4ydOShMdc34ImaO0S0ENP+aCOBuyNBIgP59wy5tBMmyai2/8eInYeVps4Td96mWInMMxzTe3Bar7eTLG5tWVKRSr/wc4NBPZ/ppoPAmCEsz9Y+VptRH9/FO8n7hsL9EFZ+xBKbG+C0SccGoyBDpA5j7/w=
   - secure: Ptiv7phCImFP3ALIz+sMQzrZg8k7C1gLZbFBhWxjnQr3g06wIfX3Ls5y9OHvxid+lOZZjISui3wzBVgpVHqwHUYf96+r0mo6/mJ+F4ffUmShZANVaIMD/JRTnXhUQJbvntGLvxn1EYWPdNM+2IHJrMipnjHxU9tkgAnlel4Zdew=
+  - TWBS_HAVE_OWN_BROWSERSTACK_KEY: ""

Gruntfile.js

@@ -34,6 +34,7 @@ module.exports = function(grunt) {
         src: ['js/tests/unit/*.js']
       }
     },
+
     concat: {
       options: {
         banner: '<%= banner %><%= jqueryCheck %>',
@@ -57,6 +58,7 @@ module.exports = function(grunt) {
         dest: 'dist/js/<%= pkg.name %>.js'
       }
     },
+
     uglify: {
       options: {
         banner: '<%= banner %>'
@@ -90,6 +92,7 @@ module.exports = function(grunt) {
       },
       files: ['js/tests/*.html']
     },
+
     connect: {
       server: {
         options: {
@@ -99,6 +102,19 @@ module.exports = function(grunt) {
       }
     },
 
+    jekyll: {
+      docs: {}
+    },
+
+    validation: {
+      options: {
+        reset: true,
+      },
+      files: {
+        src: ["_gh_pages/**/*.html"]
+      }
+    },
+
     watch: {
       src: {
         files: '<%= jshint.src.src %>',
@@ -124,14 +140,22 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-qunit');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-html-validation');
+  grunt.loadNpmTasks('grunt-jekyll');
   grunt.loadNpmTasks('grunt-recess');
   grunt.loadNpmTasks('browserstack-runner');
 
+  // Docs HTML validation task
+  grunt.registerTask('validate-docs', ['jekyll', 'validation']);
 
   // Test task.
-  var testSubtasks = ['jshint', 'qunit'];
+  var testSubtasks = ['jshint', 'qunit', 'validate-docs'];
+  // Only run BrowserStack tests under Travis
   if (process.env.TRAVIS) {
-    testSubtasks.push('browserstack_runner');
+    // Only run BrowserStack tests if this is a mainline commit in twbs/bootstrap, or you have your own BrowserStack key
+    if ((process.env.TRAVIS_REPO_SLUG === 'twbs/bootstrap' && process.env.TRAVIS_PULL_REQUEST === 'false') || process.env.TWBS_HAVE_OWN_BROWSERSTACK_KEY) {
+      testSubtasks.push('browserstack_runner');
+    }
   }
   grunt.registerTask('test', testSubtasks);
 
@@ -145,5 +169,26 @@ module.exports = function(grunt) {
   grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);
 
   // Default task.
-  grunt.registerTask('default', ['test', 'dist']);
+  grunt.registerTask('default', ['test', 'dist', 'build-customizer']);
+
+  // task for building customizer
+  grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', function () {
+    var fs = require('fs')
+
+    function getFiles(type) {
+      var files = {}
+      fs.readdirSync(type)
+        .filter(function (path) {
+          return new RegExp('\\.' + type + '$').test(path)
+        })
+        .forEach(function (path) {
+          return files[path] = fs.readFileSync(type + '/' + path, 'utf8')
+        })
+      return 'var __' + type + ' = ' + JSON.stringify(files) + '\n'
+    }
+
+    var customize = fs.readFileSync('customize.html', 'utf-8')
+    var files = '<!-- generated -->\n<script id="files">\n' + getFiles('js') + getFiles('less') + '<\/script>\n<!-- /generated -->'
+    fs.writeFileSync('customize.html', customize.replace(/<!-- generated -->(.|[\n\r])*<!-- \/generated -->/, files))
+  });
 };

README.md

@@ -22,6 +22,8 @@ Read the [Getting Started page](http://getbootstrap.com/getting-started/) for in
 
 Have a bug or a feature request? [Please open a new issue](https://github.com/twbs/bootstrap/issues). Before opening any issue, please search for existing issues and read the [Issue Guidelines](https://github.com/necolas/issue-guidelines), written by [Nicolas Gallagher](https://github.com/necolas/).
 
+You may use [this JS Bin](http://jsbin.com/aFacAf/1/edit) as a template for your bug reports.
+
 
 
 ## Documentation

_config.yml

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

_includes/footer.html

@@ -9,6 +9,14 @@
 
 <script src="{{ page.base_url }}assets/js/application.js"></script>
 
+{% if page.slug == "customize" %}
+<script src="{{ page.base_url }}assets/js/less.js"></script>
+<script src="{{ page.base_url }}assets/js/jszip.js"></script>
+<script src="{{ page.base_url }}assets/js/uglify.js"></script>
+<script src="{{ page.base_url }}assets/js/jquery.bbq.min.js"></script>
+<script src="{{ page.base_url }}assets/js/customizer.js"></script>
+{% endif %}
+
 <!-- Analytics
 ================================================== -->
 <script>

_includes/nav-components.html

@@ -10,26 +10,28 @@
 <li>
   <a href="#btn-groups">Button groups</a>
   <ul class="nav">
-    <li><a href="#btn-groups-single">Basic button group</a></li>
+    <li><a href="#btn-groups-single">Basic example</a></li>
     <li><a href="#btn-groups-toolbar">Button toolbar</a></li>
+    <li><a href="#btn-groups-sizing">Sizing</a></li>
+    <li><a href="#btn-groups-nested">Nesting</a></li>
     <li><a href="#btn-groups-vertical">Vertical variation</a></li>
-    <li><a href="#btn-groups-justified">Justified link buttons</a></li>
+    <li><a href="#btn-groups-justified">Justified link variation</a></li>
   </ul>
 </li>
 <li>
   <a href="#btn-dropdowns">Button dropdowns</a>
   <ul class="nav">
-    <li><a href="#btn-dropdowns-single">Single button dropdown</a></li>
-    <li><a href="#btn-dropdowns-split">Split button dropdown</a></li>
-    <li><a href="#btn-dropdowns-sizes">Button sizes</a></li>
+    <li><a href="#btn-dropdowns-single">Single button dropdowns</a></li>
+    <li><a href="#btn-dropdowns-split">Split button dropdowns</a></li>
+    <li><a href="#btn-dropdowns-sizing">Sizing</a></li>
     <li><a href="#btn-dropdowns-dropup">Dropup variation</a></li>
   </ul>
 </li>
 <li>
   <a href="#input-groups">Input groups</a>
   <ul class="nav">
-    <li><a href="#input-groups-basic">Basic input group</a></li>
-    <li><a href="#input-groups-sizes">Sizing options</a></li>
+    <li><a href="#input-groups-basic">Basic example</a></li>
+    <li><a href="#input-groups-sizing">Sizing</a></li>
     <li><a href="#input-groups-checkboxes-radios">Checkbox and radios addons</a></li>
     <li><a href="#input-groups-buttons">Button addons</a></li>
     <li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li>
@@ -39,8 +41,8 @@
 <li>
   <a href="#nav">Navs</a>
   <ul class="nav">
-    <li><a href="#nav-tabs">Tabs nav</a></li>
-    <li><a href="#nav-pills">Pills nav</a></li>
+    <li><a href="#nav-tabs">Tabs</a></li>
+    <li><a href="#nav-pills">Pills</a></li>
     <li><a href="#nav-justified">Justified nav</a></li>
     <li><a href="#nav-disabled-links">Disabled links</a></li>
     <li><a href="#nav-alignment">Alignment options</a></li>
@@ -50,18 +52,14 @@
 <li>
   <a href="#navbar">Navbar</a>
   <ul class="nav">
-    <li><a href="#navbar-basic">Basic navbar</a></li>
-    <li><a href="#navbar-nav">Nav links</a></li>
-    <li><a href="#navbar-forms">Forms in navbars</a></li>
-    <li><a href="#navbar-buttons">Buttons in navbars</a></li>
-    <li><a href="#navbar-text">Text in navbars</a></li>
-    <li><a href="#navbar-links">Links in navbars</a></li>
+    <li><a href="#navbar-default">Default navbar</a></li>
+    <li><a href="#navbar-buttons">Buttons</a></li>
+    <li><a href="#navbar-text">Text</a></li>
+    <li><a href="#navbar-links">Non-nav links</a></li>
     <li><a href="#navbar-component-alignment">Component alignment</a></li>
-    <li><a href="#navbar-fixed-top">Fixed top navbar</a></li>
-    <li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
-    <li><a href="#navbar-static-top">Static top navbar</a></li>
-    <li><a href="#navbar-responsive">Responsive navbar</a></li>
-    <li><a href="#navbar-scrollable">Scrollable responsive navbar</a></li>
+    <li><a href="#navbar-fixed-top">Fixed to top</a></li>
+    <li><a href="#navbar-fixed-bottom">Fixed to bottom</a></li>
+    <li><a href="#navbar-static-top">Static top</a></li>
     <li><a href="#navbar-inverted">Inverted navbar</a></li>
   </ul>
 </li>
@@ -75,17 +73,12 @@
 </li>
 <li><a href="#labels">Labels</a></li>
 <li><a href="#badges">Badges</a></li>
-<li>
-  <a href="#type-components">Typography</a>
-  <ul class="nav">
-    <li><a href="#type-components-jumbotron">Jumbotron</a></li>
-    <li><a href="#type-components-page-header">Page header</a></li>
-  </ul>
-</li>
+<li><a href="#jumbotron">Jumbotron</a></li>
+<li><a href="#page-header">Page header</a></li>
 <li>
   <a href="#thumbnails">Thumbnails</a>
   <ul class="nav">
-    <li><a href="#thumbnails-default">Default thumbnails</a></li>
+    <li><a href="#thumbnails-default">Default example</a></li>
     <li><a href="#thumbnails-custom-content">Custom content</a></li>
   </ul>
 </li>
@@ -94,13 +87,14 @@
   <ul class="nav">
     <li><a href="#alerts-default">Default alert</a></li>
     <li><a href="#alerts-alternatives">Contextual alternatives</a></li>
+    <li><a href="#alerts-dismissable">Dismissable alerts</a></li>
     <li><a href="#alerts-links">Links in alerts</a></li>
   </ul>
 </li>
 <li>
   <a href="#progress">Progress bars</a>
   <ul class="nav">
-    <li><a href="#progress-basic">Basic progress bar</a></li>
+    <li><a href="#progress-basic">Basic example</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>
@@ -117,17 +111,16 @@
 <li>
   <a href="#list-group">List group</a>
   <ul class="nav">
-    <li><a href="#list-group-basic">Basic list group</a></li>
+    <li><a href="#list-group-basic">Basic example</a></li>
     <li><a href="#list-group-badges">Badges</a></li>
     <li><a href="#list-group-linked">Linked items</a></li>
     <li><a href="#list-group-custom-content">Custom content</a></li>
-    <!-- <li><a href="#list-group-pic">Leading picture</a></li> -->
   </ul>
 </li>
 <li>
   <a href="#panels">Panels</a>
   <ul class="nav">
-    <li><a href="#panels-basic">Basic panel</a></li>
+    <li><a href="#panels-basic">Basic example</a></li>
     <li><a href="#panels-heading">Panel with heading</a></li>
     <li><a href="#panels-alternatives">Contextual alternatives</a></li>
     <li><a href="#panels-list-group">With list groups</a>

_includes/nav-css.html

@@ -4,9 +4,9 @@
     <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">Type and links</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-container">Container</a></li>
+    <li><a href="#overview-container">Containers</a></li>
   </ul>
 </li>
 <li>
@@ -15,12 +15,14 @@
 <li>
   <a href="#grid">Grid system</a>
   <ul class="nav">
-    <li><a href="#grid-options">Available options</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-mixed">Ex: Mobile-desktop</a></li>
-    <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
-    <li><a href="#grid-offsetting">Offset columns</a></li>
-    <li><a href="#grid-nesting">Nested columns</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>
+    <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
+    <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>
   </ul>
@@ -42,21 +44,21 @@
   <a href="#tables">Tables</a>
   <ul class="nav">
     <li><a href="#tables-example">Basic example</a></li>
-    <li><a href="#tables-striped">Zebra striping</a></li>
-    <li><a href="#tables-bordered">Bordered tables</a></li>
+    <li><a href="#tables-striped">Striped rows</a></li>
+    <li><a href="#tables-bordered">Bordered table</a></li>
     <li><a href="#tables-hover-rows">Hover rows</a></li>
-    <li><a href="#tables-condensed">Condensed tables</a></li>
-    <li><a href="#tables-row-classes">Contextual row classes</a></li>
+    <li><a href="#tables-condensed">Condensed table</a></li>
+    <li><a href="#tables-contextual-classes">Contextual classes</a></li>
   </ul>
 </li>
 <li>
   <a href="#forms">Forms</a>
   <ul class="nav">
     <li><a href="#forms-example">Basic example</a></li>
-    <li><a href="#forms-inline">Inline variation</a></li>
-    <li><a href="#forms-horizontal">Horizontal variation</a></li>
+    <li><a href="#forms-inline">Inline form</a></li>
+    <li><a href="#forms-horizontal">Horizontal form</a></li>
     <li><a href="#forms-controls">Supported controls</a></li>
-    <li><a href="#forms-controls-static">Static form control</a></li>
+    <li><a href="#forms-controls-static">Static control</a></li>
     <li><a href="#forms-control-states">Control states</a></li>
     <li><a href="#forms-control-sizes">Control sizing</a></li>
     <li><a href="#forms-help-text">Help text</a></li>
@@ -65,9 +67,9 @@
 <li>
   <a href="#buttons">Buttons</a>
   <ul class="nav">
-    <li><a href="#buttons-options">Button options</a></li>
+    <li><a href="#buttons-options">Options</a></li>
     <li><a href="#buttons-sizes">Sizes</a></li>
-    <li><a href="#buttons-disabled">Disabled</a></li>
+    <li><a href="#buttons-disabled">Disabled state</a></li>
     <li><a href="#buttons-tags">Button tags</a></li>
   </ul>
 </li>

_includes/nav-getting-started.html

 <li>
   <a href="#download">Download Bootstrap</a>
   <ul class="nav">
-    <li><a href="#download-options">Download options</a></li>
+    <li><a href="#download-source">Download source</a></li>
+    <li><a href="#download-additional">Additional downloads</a></li>
     <li><a href="#download-cdn">Bootstrap CDN</a></li>
   </ul>
 </li>
@@ -11,12 +12,21 @@
 <li>
   <a href="#template">Basic template</a>
 </li>
+<li>
+  <a href="#examples">Examples</a>
+</li>
+<li>
+  <a href="#disable-responsive">Disabling responsiveness</a>
+</li>
 <li>
   <a href="#browsers">Browser support</a>
 </li>
 <li>
   <a href="#third-parties">Third party support</a>
 </li>
+<li>
+  <a href="#accessibility">Accessibility</a>
+</li>
 <li>
   <a href="#license-faqs">License FAQs</a>
 </li>

_includes/nav-javascript.html

@@ -4,7 +4,7 @@
     <li><a href="#js-individual-compiled">Individual or compiled</a></li>
     <li><a href="#js-data-attrs">Data attributes</a></li>
     <li><a href="#js-programmatic-api">Programmatic API</a></li>
-    <li><a href="#js-noconflict">No Conflict</a></li>
+    <li><a href="#js-noconflict">No conflict</a></li>
     <li><a href="#js-events">Events</a></li>
   </ul>
 </li>

_includes/nav-main.html

-<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
+<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
   <div class="container">
-    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-    </button>
-    <a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC1</a>
-    <div class="nav-collapse collapse bs-navbar-collapse">
+    <div class="navbar-header">
+      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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 href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC2</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="{{ page.base_url }}getting-started">Getting started</a>
@@ -24,6 +27,6 @@
           <a href="{{ page.base_url }}customize">Customize</a>
         </li>
       </ul>
-    </div>
+    </nav>
   </div>
-</div>
+</header>

_includes/social-buttons.html

 <div class="bs-social">
   <ul class="bs-social-buttons">
     <li>
-      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
     </li>
     <li>
-      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
+      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
     </li>
     <li class="follow-btn">
       <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://twbs.github.com/bootstrap/" 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 Twitter Bootstrap">Tweet</a>
     </li>
   </ul>
 </div>

_layouts/customize.html

-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <!-- Meta, title, CSS, favicons, etc. -->
-    {% include header.html %}
-    <!-- Place anything custom after this. -->
-  </head>
-  <body data-spy="scroll" data-target=".bs-sidebar">
-
-    <!-- Docs master nav -->
-    {% include nav-main.html %}
-
-    <!-- Docs page layout -->
-    <div class="bs-header">
-      <div class="container">
-        <h1>{{ page.title }}</h1>
-        <p>{{ page.lead }}</p>
-        {% include ads.html %}
-      </div>
-    </div>
-
-    <!-- Callout for the old docs link -->
-    {% include old-bs-docs.html %}
-
-    <div class="bs-customize-placeholder">
-      <div class="container bs-docs-container">
-        <p class="lead">Until RC2, the Bootstrap 3 customizer will be disabled. In the mean time, snag the <a href="{{ site.repo }}/releases">compiled CSS and JavaScript</a>. Hang tight!</p>
-      </div>
-    </div>
-
-    <!-- Footer
-    ================================================== -->
-    <footer class="bs-footer">
-      {% 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>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-      <ul class="footer-links">
-        <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>
-    </footer>
-
-    <!-- JS and analytics only. -->
-    {% include footer.html %}
-
-  </body>
-</html>

_layouts/default.html

@@ -6,12 +6,13 @@
     <!-- Place anything custom after this. -->
   </head>
   <body>
+    <a class="sr-only" href="#content">Skip navigation</a>
 
     <!-- Docs master nav -->
     {% include nav-main.html %}
 
     <!-- Docs page layout -->
-    <div class="bs-header">
+    <div class="bs-header" id="content">
       <div class="container">
         <h1>{{ page.title }}</h1>
         <p>{{ page.lead }}</p>
@@ -24,8 +25,8 @@
 
     <div class="container bs-docs-container">
       <div class="row">
-        <div class="col-lg-3">
-          <div class="bs-sidebar">
+        <div class="col-md-3">
+          <div class="bs-sidebar hidden-print" role="complementary">
             <ul class="nav bs-sidenav">
               {% if page.slug == "getting-started" %}
                 {% include nav-getting-started.html %}
@@ -41,7 +42,7 @@
             </ul>
           </div>
         </div>
-        <div class="col-lg-9">
+        <div class="col-md-9" role="main">
           {{ content }}
         </div>
       </div>
@@ -50,7 +51,7 @@
 
     <!-- Footer
     ================================================== -->
-    <footer class="bs-footer">
+    <footer class="bs-footer" role="contentinfo">
       {% 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>

_layouts/home.html

@@ -6,6 +6,7 @@
     <!-- Place anything custom after this. -->
   </head>
   <body class="bs-docs-home">
+    <a class="sr-only" href="#content">Skip navigation</a>
 
     <!-- Docs master nav -->
     {% include nav-main.html %}
@@ -16,7 +17,7 @@
     <!-- Callout for the old docs link -->
     {% include old-bs-docs.html %}
 
-    <div class="container">
+    <footer class="container" role="contentinfo">
       {% include social-buttons.html %}
 
       <ul class="bs-masthead-links">
@@ -24,16 +25,16 @@
           <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
         </li>
         <li>
-          <a href="{{ site.examples }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
+          <a href="{{ page.base_url }}getting-started#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
         </li>
         <li>
           <a href="{{ site.glyphicons }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Glyphicons']);">Glyphicons</a>
         </li>
         <li>
-          <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Bootstrap Expo</a>
+          <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Expo</a>
         </li>
       </ul>
-    </div>
+    </footer>
 
     <!-- JS and analytics only. -->
     {% include footer.html %}

assets/js/application.js

@@ -16,6 +16,10 @@
       offset: navHeight
     })
 
+    $window.on('load', function () {
+      $body.scrollspy('refresh')
+    })
+
     $('.bs-docs-container [href=#]').click(function (e) {
       e.preventDefault()
     })
@@ -46,7 +50,8 @@
 
     // tooltip demo
     $('.tooltip-demo').tooltip({
-      selector: "[data-toggle=tooltip]"
+      selector: "[data-toggle=tooltip]",
+      container: "body"
     })
 
     $('.tooltip-test').tooltip()
@@ -73,88 +78,6 @@
 
     // carousel demo
     $('.bs-docs-carousel-example').carousel()
-
-    // javascript build logic
-    var inputsComponent = $("#less input")
-      , inputsPlugin = $("#plugins input")
-      , inputsVariables = $("#less-variables input")
-
-    // toggle all plugin checkboxes
-    $('#less .toggle').on('click', function (e) {
-      e.preventDefault()
-      inputsComponent.prop('checked', !inputsComponent.is(':checked'))
-    })
-
-    $('#plugins .toggle').on('click', function (e) {
-      e.preventDefault()
-      inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
-    })
-
-    $('#less-variables .toggle').on('click', function (e) {
-      e.preventDefault()
-      inputsVariables.val('')
-    })
-
-    // request built javascript
-    $('.bs-customize-download .btn').on('click', function (e) {
-      e.preventDefault()
-
-      var css = $("#less input:checked")
-            .map(function () { return this.value })
-            .toArray()
-        , js = $("#plugins input:checked")
-            .map(function () { return this.value })
-            .toArray()
-        , vars = {}
-
-      $("#less-variables input")
-        .each(function () {
-          $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
-      })
-
-      $.ajax({
-        type: 'POST'
-      , url: /localhost/.test(window.location) ? 'http://localhost:9001' : 'http://bootstrap.herokuapp.com'
-      , dataType: 'jsonpi'
-      , params: {
-          js: js
-        , css: css
-        , vars: vars
-      }
-      })
-    })
-  })
-
-// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
-$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
-  var url = opts.url;
-
-  return {
-    send: function(_, completeCallback) {
-      var name = 'jQuery_iframe_' + jQuery.now()
-        , iframe, form
-
-      iframe = $('<iframe>')
-        .attr('name', name)
-        .appendTo('head')
-
-      form = $('<form>')
-        .attr('method', opts.type) // GET or POST
-        .attr('action', url)
-        .attr('target', name)
-
-      $.each(opts.params, function(k, v) {
-
-        $('<input>')
-          .attr('type', 'hidden')
-          .attr('name', k)
-          .attr('value', typeof v == 'string' ? v : JSON.stringify(v))
-          .appendTo(form)
-      })
-
-      form.appendTo('body').submit()
-    }
-  }
 })
 
 }(window.jQuery)

assets/js/customizer.js

+window.onload = function () { // wait for load in a dumb way because B-0
+  var cw = '/*!\n * Bootstrap v3.0.0-rc.2\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
+
+  function generateUrl() {
+    var vars = {}
+
+    $('#less-variables-section input')
+        .each(function () {
+          $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
+        })
+
+    var data = {
+      vars: vars,
+      css: $('#less-section input:not(:checked)').map(function () { return this.value }).toArray(),
+      js: $('#plugin-section input:not(:checked)').map(function () { return this.value }).toArray()
+    }
+
+    if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
+
+    window.location = jQuery.param.querystring('/customize/', data)
+  }
+
+  function parseUrl() {
+    var data = jQuery.deparam.querystring()
+
+    if (data.js) {
+      for (var i = 0; i < data.js.length; i++) {
+        var input = $('input[value="'+data.js[i]+'"]')
+        input && input.prop('checked', false)
+      }
+    }
+
+    if (data.css) {
+      for (var i = 0; i < data.css.length; i++) {
+        var input = $('input[value="'+data.css[i]+'"]')
+        input && input.prop('checked', false)
+      }
+    }
+
+    if (data.vars) {
+      // todo (fat): vars
+    }
+  }
+
+  function generateZip(css, js, complete) {
+    if (!css && !js) return alert('you want to build nothing… o_O')
+
+    var zip = new JSZip()
+
+    if (css) {
+      var cssFolder = zip.folder('css')
+      for (var fileName in css) {
+        cssFolder.file(fileName, css[fileName])
+      }
+    }
+
+    if (js) {
+      var jsFolder = zip.folder('js')
+      for (var fileName in js) {
+        jsFolder.file(fileName, js[fileName])
+      }
+    }
+
+    var content = zip.generate()
+
+    location.href = 'data:application/zip;base64,' + content
+
+    complete()
+  }
+
+  function generateCustomCSS(vars) {
+    var result = ''
+
+    for (var key in vars) {
+      result += key + ': ' + vars[key] + ';\n'
+    }
+
+    return result + '\n\n'
+  }
+
+  function generateCSS() {
+    var $checked = $('#less-section input:checked')
+
+    if (!$checked.length) return false
+
+    var result = {}
+    var vars = {}
+    var css = ''
+
+    $('#less-variables-section input')
+        .each(function () {
+          $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
+        })
+
+    css += __less['variables.less']
+    if (vars) css += generateCustomCSS(vars)
+    css += __less['mixins.less']
+    css += $checked
+      .map(function () { return __less[this.value] })
+      .toArray()
+      .join('\n')
+
+    css = css.replace(/@import[^\n]*/gi, '') //strip any imports
+
+    try {
+      var parser = new less.Parser({
+          paths: ['variables.less', 'mixins.less']
+        , optimization: 0
+        , filename: 'bootstrap.css'
+      }).parse(css, function (err, tree) {
+        if (err) return alert(err)
+
+        result = {
+          'bootstrap.css'     : cw + tree.toCSS(),
+          'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
+        }
+      })
+    } catch (err) {
+      return alert(err)
+    }
+
+    return result
+  }
+
+  function generateJavascript() {
+    var $checked = $('#plugin-section input:checked')
+    if (!$checked.length) return false
+
+    var js = $checked
+      .map(function () { return __js[this.value] })
+      .toArray()
+      .join('\n')
+
+    return {
+      'bootstrap.js': js,
+      'bootstrap.min.js': cw + uglify(js)
+    }
+  }
+
+  var $downloadBtn = $('#btn-download').on('click', function (e) {
+    e.preventDefault()
+    $downloadBtn.addClass('loading')
+    generateZip(generateCSS(), generateJavascript(), function () {
+      $downloadBtn.removeClass('loading')
+      setTimeout(function () {
+        generateUrl()
+      }, 1)
+    })
+  })
+
+  var inputsComponent = $('#less-section input')
+  var inputsPlugin    = $('#plugin-section input')
+  var inputsVariables = $('#less-variables-section input')
+
+  $('#less-section .toggle').on('click', function (e) {
+    e.preventDefault()
+    inputsComponent.prop('checked', !inputsComponent.is(':checked'))
+  })
+
+  $('#plugin-section .toggle').on('click', function (e) {
+    e.preventDefault()
+    inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
+  })
+
+  $('#less-variables-section .toggle').on('click', function (e) {
+    e.preventDefault()
+    inputsVariables.val('')
+  })
+
+  try {
+    parseUrl()
+  } catch (e) {
+    // maybe alert user that we can't parse their url
+  }
+}
\ No newline at end of file

bower.json

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

composer.json

 {
     "name": "twbs/bootstrap"
-  , "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
+  , "description": "Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."
   , "keywords": ["bootstrap", "css"]
   , "homepage": "http://getbootstrap.com"
   , "authors": [

examples/carousel/carousel.css

+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+  padding-bottom: 40px;
+  color: #5a5a5a;
+}
+
+
+
+/* CUSTOMIZE THE NAVBAR
+-------------------------------------------------- */
+
+/* Special class on .container surrounding .navbar, used for positioning it into place. */
+.navbar-wrapper {
+  position: relative;
+  z-index: 15;
+}
+
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+  margin-bottom: 60px;
+
+  /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
+  margin-top: -90px;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+  z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel .item {
+  height: 500px;
+}
+.carousel-inner > .item > img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+  height: 500px;
+}
+
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Pad the edges of the mobile views a bit */
+.marketing {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+.marketing h2 {
+  font-weight: normal;
+}
+.marketing .col-lg-4 p {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+  margin: 80px 0; /* Space out the Bootstrap <hr> more */
+}
+
+/* Thin out the marketing headings */
+.featurette-heading {
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -1px;
+}
+
+
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 768px) {
+
+  /* Remve the edge padding needed for mobile */
+  .marketing {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  /* Navbar positioning foo */
+  .navbar-wrapper {
+    margin-top: 20px;
+  }
+  /* The navbar becomes detached from the top, so we round the corners */
+  .navbar-wrapper .navbar {
+    border-radius: 4px;
+  }
+
+  /* Bump up size of carousel content */
+  .carousel-caption p {
+    margin-bottom: 20px;
+    font-size: 21px;
+    line-height: 1.4;
+  }
+
+  .featurette-heading {
+    font-size: 50px;
+  }
+
+}
+
+@media (min-width: 992px) {
+  .featurette-heading {
+    margin-top: 120px;
+  }
+}

examples/carousel/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
+
+    <title>Carousel Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+    <link href="../../dist/css/bootstrap-glyphicons.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="carousel.css" rel="stylesheet">
+  </head>
+<!-- NAVBAR
+================================================== -->
+  <body>
+    <div class="navbar-wrapper">
+      <div class="container">
+
+        <div class="navbar navbar-inverse navbar-static-top">
+          <div class="container">
+            <div class="navbar-header">
+              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                <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="navbar-collapse 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>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+
+    <!-- Carousel
+    ================================================== -->
+    <div id="myCarousel" class="carousel slide">
+      <!-- Indicators -->
+      <ol class="carousel-indicators">
+        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+        <li data-target="#myCarousel" data-slide-to="1"></li>
+        <li data-target="#myCarousel" data-slide-to="2"></li>
+      </ol>
+      <div class="carousel-inner">
+        <div class="item active">
+          <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
+          <div class="container">
+            <div class="carousel-caption">
+              <h1>Example headline.</h1>
+              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+              <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="Second slide">
+          <div class="container">
+            <div class="carousel-caption">
+              <h1>Another example headline.</h1>
+              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+              <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="Third slide">
+          <div class="container">
+            <div class="carousel-caption">
+              <h1>One more for good measure.</h1>
+              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+              <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
+      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
+    </div><!-- /.carousel -->
+
+
+
+    <!-- Marketing messaging and featurettes
+    ================================================== -->
+    <!-- Wrap the rest of the page in another container to center all the content. -->
+
+    <div class="container marketing">
+
+      <!-- Three columns of text below the carousel -->
+      <div class="row">
+        <div class="col-lg-4">
+          <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
+          <h2>Heading</h2>
+          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
+          <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+        </div><!-- /.col-lg-4 -->
+        <div class="col-lg-4">
+          <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
+          <h2>Heading</h2>
+          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
+          <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+        </div><!-- /.col-lg-4 -->
+        <div class="col-lg-4">
+          <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
+          <h2>Heading</h2>
+          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+          <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+        </div><!-- /.col-lg-4 -->
+      </div><!-- /.row -->
+
+
+      <!-- START THE FEATURETTES -->
+
+      <hr class="featurette-divider">
+
+      <div class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+        </div>
+        <div class="col-md-5">
+          <img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <div class="row featurette">
+        <div class="col-md-5">
+          <img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+        </div>
+        <div class="col-md-7">
+          <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <div class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+        </div>
+        <div class="col-md-5">
+          <img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <!-- /END THE FEATURETTES -->
+
+
+      <!-- FOOTER -->
+      <footer>
+        <p class="pull-right"><a href="#">Back to top</a></p>
+        <p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
+      </footer>
+
+    </div><!-- /.container -->
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/jquery.js"></script>
+    <script src="../../assets/js/respond.min.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+    <script src="../../assets/js/holder.js"></script>
+  </body>
+</html>

examples/grid/grid.css

+.container {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+h4 {
+  margin-top: 25px;
+}
+.row {
+  margin-bottom: 20px;
+}
+.row .row {
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+[class*="col-"] {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  background-color: #eee;
+  border: 1px solid #ddd;
+  background-color: rgba(86,61,124,.15);
+  border: 1px solid rgba(86,61,124,.2);
+}
+
+hr {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
\ No newline at end of file

examples/grid/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
+
+    <title>Grid Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="grid.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <div class="container">
+
+      <div class="page-header">
+        <h1>Bootstrap grid examples</h1>
+        <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
+      </div>
+
+      <h3>Three equal columns</h3>
+      <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
+      <div class="row">
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
+      </div>
+
+      <h3>Three unequal columns</h3>
+      <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
+      <div class="row">
+        <div class="col-md-3">.col-md-3</div>
+        <div class="col-md-6">.col-md-6</div>
+        <div class="col-md-3">.col-md-3</div>
+      </div>
+
+      <h3>Two columns</h3>
+      <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
+      <div class="row">
+        <div class="col-md-8">.col-md-8</div>
+        <div class="col-md-4">.col-md-4</div>
+      </div>
+
+      <h3>Full width, single column</h3>
+      <p class="text-warning">No grid classes are necessary for full-width elements.</p>
+
+      <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>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
+      <div class="row">
+        <div class="col-md-8">
+          .col-md-8
+          <div class="row">
+            <div class="col-md-6">.col-md-6</div>
+            <div class="col-md-6">.col-md-6</div>
+          </div>
+        </div>
+        <div class="col-md-4">.col-md-4</div>
+      </div>
+
+      <hr>
+
+      <h3>Mixed: mobile and desktop</h3>
+      <p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
+      <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
+      <div class="row">
+        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6 col-md-6">.col-xs-6 .col-md-6</div>
+        <div class="col-xs-6 col-md-6">.col-xs-6 .col-md-6</div>
+      </div>
+
+      <hr>
+
+      <h3>Mixed: mobile, tablet, and desktop</h3>
+      <p></p>
+      <div class="row">
+        <div class="col-xs-12 col-sm-8 col-lg-8">.col-xs-12 .col-lg-8</div>
+        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-lg-4</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
+        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
+        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6 col-sm-6 col-lg-6">.col-xs-6 .col-sm-6 .col-lg-6</div>
+        <div class="col-xs-6 col-sm-6 col-lg-6">.col-xs-6 .col-sm-6 .col-lg-6</div>
+      </div>
+
+    </div> <!-- /container -->
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/respond.min.js"></script>
+  </body>
+</html>

examples/jumbotron-narrow/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
+
+    <title>Narrow Jumbotron Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="jumbotron-narrow.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="container-narrow">
+      <div class="header">
+        <ul class="nav nav-pills pull-right">
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+        <h3 class="text-muted">Project name</h3>
+      </div>
+
+      <div class="jumbotron">
+        <h1>Jumbotron heading</h1>
+        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+        <p><a class="btn btn-large btn-success" href="#">Sign up today</a></p>
+      </div>
+
+      <div class="row marketing">
+        <div class="col-lg-6">
+          <h4>Subheading</h4>
+          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
+
+          <h4>Subheading</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Subheading</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+
+        <div class="col-lg-6">
+          <h4>Subheading</h4>
+          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
+
+          <h4>Subheading</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Subheading</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+      </div>
+
+      <div class="footer">
+        <p>&copy; Company 2013</p>
+      </div>
+
+    </div> <!-- /container -->
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/respond.min.js"></script>
+  </body>
+</html>

examples/jumbotron-narrow/jumbotron-narrow.css

+/* Space out content a bit */
+body {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+/* Everything but the jumbotron gets side spacing for mobile-first views */
+.header,
+.marketing,
+.footer {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* Custom page header */
+.header {
+  border-bottom: 1px solid #e5e5e5;
+}
+/* Make the masthead heading the same height as the navigation */
+.header h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 40px;
+  padding-bottom: 19px;
+}
+
+/* Custom page footer */
+.footer {
+  padding-top: 19px;
+  color: #777;
+  border-top: 1px solid #e5e5e5;
+}
+
+/* Custom container */
+.container-narrow {
+  margin: 0 auto;
+  max-width: 700px;
+}
+.container-narrow > hr {
+  margin: 30px 0;
+}
+
+/* Main marketing message and sign up button */
+.jumbotron {
+  text-align: center;
+  border-bottom: 1px solid #e5e5e5;
+}
+.jumbotron .btn {
+  font-size: 21px;
+  padding: 14px 24px;
+}
+
+/* Supporting marketing content */
+.marketing {
+  margin: 40px 0;
+}
+.marketing p + h4 {
+  margin-top: 28px;
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Remove the padding we set earlier */
+  .header,
+  .marketing,
+  .footer {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  /* Space out the masthead */
+  .header {
+    margin-bottom: 30px;
+  }
+  /* Remove the bottom border on the jumbotron for visual effect */
+  .jumbotron {
+    border-bottom: 0;
+  }
+}

examples/jumbotron/jumbotron.css

+/* Move down content because we have a fixed navbar that is 50px tall */
+body {
+  padding-top: 50px;
+  padding-bottom: 20px;
+}
+
+/* Wrapping element */
+/* Set some basic padding to keep content from hitting the edges */
+.body-content {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Let the jumbotron breathe */
+  .jumbotron {
+    margin-top: 20px;
+  }
+  /* Remove padding from wrapping element since we kick in the grid classes here */
+  .body-content {
+    padding: 0;
+  }
+}
\ No newline at end of file

examples/navbar-fixed-top/navbar-fixed-top.css

+body {
+  min-height: 2000px;
+  padding-top: 70px;
+}

examples/navbar-static-top/navbar-static-top.css

+body {
+  min-height: 2000px;
+}
+
+.navbar-static-top {
+  margin-bottom: 19px;
+}
\ No newline at end of file

examples/navbar/navbar.css

+body {
+padding: 30px;
+}
+
+.navbar {
+margin-bottom: 30px;
+}
\ No newline at end of file

examples/non-responsive/non-responsive.css

+.container {
+  max-width: none !important;
+  width: 970px;
+}
+
+.col-xs-4 {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  background-color: #eee;
+  border: 1px solid #ddd;
+  background-color: rgba(86,61,124,.15);
+  border: 1px solid rgba(86,61,124,.2);
+}

examples/offcanvas/offcanvas.js

+$(document).ready(function() {
+  $('[data-toggle=offcanvas]').click(function() {
+    $('.row-offcanvas').toggleClass('active');
+  });
+});
\ No newline at end of file