Merge branch '2.0-wip'

Conflicts:
	docs/assets/bootstrap.zip

13 files changed, 111 insertions, 338 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 46178d1f86..df6bc2768f 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 2e6da9c797..c3a6848d74 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -61,6 +61,7 @@ hr.soften {
   position: relative;
 }
 .jumbotron h1 {
+  margin-bottom: 9px;
   font-size: 81px;
   letter-spacing: -1px;
   line-height: 1;
@@ -568,6 +569,13 @@ form.well {
   margin-left: 6px;
 }
 
+/* Eaxmples page
+------------------------- */
+.bootstrap-examples .thumbnail {
+  margin-bottom: 9px;
+  background-color: #fff;
+}
+
 
 /* Responsive Docs
 -------------------------------------------------- */
diff --git a/docs/assets/img/examples/bootstrap-example-fluid.jpg b/docs/assets/img/examples/bootstrap-example-fluid.jpg
new file mode 100644
index 0000000000..151b987cb7
--- /dev/null
+++ b/docs/assets/img/examples/bootstrap-example-fluid.jpg
diff --git a/docs/assets/img/examples/bootstrap-example-hero.jpg b/docs/assets/img/examples/bootstrap-example-hero.jpg
new file mode 100644
index 0000000000..cd4a321078
--- /dev/null
+++ b/docs/assets/img/examples/bootstrap-example-hero.jpg
diff --git a/docs/assets/img/examples/bootstrap-example-starter.jpg b/docs/assets/img/examples/bootstrap-example-starter.jpg
new file mode 100644
index 0000000000..09c8a066d8
--- /dev/null
+++ b/docs/assets/img/examples/bootstrap-example-starter.jpg
diff --git a/docs/examples.html b/docs/examples.html
index 4bdeec0557..6f35b71694 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -74,60 +74,35 @@
 
     <div class="container">
 
-<div class="alert">
-  <strong>Heads up!</strong> This page is still under construction and is missing plenty of documentation. Hang tight!
-</div>
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>Bootstrap examples</h1>
-  <p class="lead">Use these examples as starting points for your work with Bootstrap. We encourage everyone to iterate on these examples and not simply use them as an end result.</p>
+  <p class="lead">We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
 </header>
 
 
 <ul class="thumbnails bootstrap-examples">
   <li class="span4">
-    <a href="../examples/hero.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/hero.html">
+      <img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
     </a>
     <h3>Basic marketing site</h3>
-    <p></p>
+    <p>Featuring a hero unit for a primary message and three supporting elements.</p>
   </li>
   <li class="span4">
-    <a href="../examples/fluid.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/fluid.html">
+      <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
     </a>
     <h3>Fluid layout</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="../examples/fluid-reverse.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Fluid layout reversed</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="../examples/container-app.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Container application</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Fullscreen</h3>
-    <p></p>
+    <p>Uses are new responsive, fluid grid system to create seamless liquid layout.</p>
   </li>
   <li class="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/starter-template.html">
+      <img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
     </a>
-    <h3>Simple layout</h3>
-    <p></p>
+    <h3>Starter template</h3>
+    <p>A barebones HTML document with all the Bootstrap CSS and javascript included.</p>
   </li>
 </ul>
 
diff --git a/docs/less.html b/docs/less.html
index 05aee06bc9..4249822d7b 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -74,10 +74,6 @@
 
     <div class="container">
 
-<div class="alert">
-  <strong>Heads up!</strong> This page is still under construction and is missing plenty of documentation. Hang tight!
-</div>
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
diff --git a/docs/templates/pages/examples.mustache b/docs/templates/pages/examples.mustache
index 850ac0fa69..22d78b982b 100644
--- a/docs/templates/pages/examples.mustache
+++ b/docs/templates/pages/examples.mustache
@@ -1,56 +1,31 @@
-<div class="alert">
-  <strong>Heads up!</strong> This page is still under construction and is missing plenty of documentation. Hang tight!
-</div>
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Bootstrap examples{{/i}}</h1>
-  <p class="lead">{{_i}}Use these examples as starting points for your work with Bootstrap. We encourage everyone to iterate on these examples and not simply use them as an end result.{{/i}}</p>
+  <p class="lead">{{_i}}We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}</p>
 </header>
 
 
 <ul class="thumbnails bootstrap-examples">
   <li class="span4">
-    <a href="../examples/hero.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Basic marketing site</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="../examples/fluid.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Fluid layout</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="../examples/fluid-reverse.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Fluid layout reversed</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="../examples/container-app.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/hero.html">
+      <img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
     </a>
-    <h3>Container application</h3>
-    <p></p>
+    <h3>{{_i}}Basic marketing site{{/i}}</h3>
+    <p>{{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}</p>
   </li>
   <li class="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/fluid.html">
+      <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
     </a>
-    <h3>Fullscreen</h3>
-    <p></p>
+    <h3>{{_i}}Fluid layout{{/i}}</h3>
+    <p>{{_i}}Uses are new responsive, fluid grid system to create seamless liquid layout.{{/i}}</p>
   </li>
   <li class="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/starter-template.html">
+      <img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
     </a>
-    <h3>Simple layout</h3>
-    <p></p>
+    <h3>{{_i}}Starter template{{/i}}</h3>
+    <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}</p>
   </li>
 </ul>
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index 52ea659bb0..70432cea15 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -1,7 +1,3 @@
-<div class="alert">
-  <strong>Heads up!</strong> This page is still under construction and is missing plenty of documentation. Hang tight!
-</div>
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
diff --git a/examples/container-app.html b/examples/container-app.html
deleted file mode 100644
index b25ed55bf7..0000000000
--- a/examples/container-app.html
+++ /dev/null
@@ -1,114 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Bootstrap, from Twitter</title>
-    <meta name="description" content="">
-    <meta name="author" content="">
-
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
-    <!-- Le styles -->
-    <link href="../docs/assets/css/bootstrap.css" rel="stylesheet">
-    <style type="text/css">
-      /* Override some defaults */
-      html, body {
-        background-color: #eee;
-      }
-      body {
-        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
-      }
-      .container > footer p {
-        text-align: center; /* center align it with the container */
-      }
-      .container {
-        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 10 columns and not 12. */
-      }
-
-      /* The white background content wrapper */
-      .body-content {
-        background-color: #fff;
-        padding: 20px;
-        margin: 0 -20px 18px; /* negative indent the amount of the padding to maintain the grid system */
-        -webkit-border-radius: 0 0 6px 6px;
-           -moz-border-radius: 0 0 6px 6px;
-                border-radius: 0 0 6px 6px;
-        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-                box-shadow: 0 1px 2px rgba(0,0,0,.15);
-      }
-
-      /* Page header tweaks */
-      .page-header {
-        background-color: #f5f5f5;
-        padding: 20px 20px 10px;
-        margin: -20px -20px 20px;
-      }
-
-      /* Styles you shouldn't keep as they are for displaying this base example only */
-      .body-content .span7,
-      .body-content .span3 {
-        min-height: 500px;
-      }
-      /* Give a quick and non-cross-browser friendly divider */
-      .body-content .span3 {
-        margin-left: 0;
-        padding-left: 19px;
-        border-left: 1px solid #eee;
-      }
-    </style>
-
-    <!-- Le fav and touch icons -->
-    <link rel="shortcut icon" href="images/favicon.ico">
-    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
-  </head>
-
-  <body>
-
-    <div class="navbar navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="#">Project name</a>
-          <ul class="nav">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#about">About</a></li>
-            <li><a href="#contact">Contact</a></li>
-          </ul>
-          <form action="" class="form-search navbar-form pull-right">
-            <input class="input-small" type="text" placeholder="Username">
-            <input class="input-small" type="password" placeholder="Password">
-            <button class="btn" type="submit">Sign in</button>
-          </form>
-        </div>
-      </div>
-    </div>
-
-    <div class="container">
-
-      <div class="body-content">
-        <div class="page-header">
-          <h1>Page name <small>Supporting text or tagline</small></h1>
-        </div>
-        <div class="row">
-          <div class="span7">
-            <h2>Main content</h2>
-          </div>
-          <div class="span3">
-            <h3>Secondary content</h3>
-          </div>
-        </div>
-      </div>
-
-      <footer>
-        <p>&copy; Company 2012</p>
-      </footer>
-
-    </div> <!-- /container -->
-
-  </body>
-</html>
diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html
deleted file mode 100644
index 2812e21527..0000000000
--- a/examples/fluid-reverse.html
+++ /dev/null
@@ -1,141 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Bootstrap, from Twitter</title>
-    <meta name="description" content="">
-    <meta name="author" content="">
-
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
-    <!-- Le styles -->
-    <link href="../docs/assets/css/bootstrap.css" rel="stylesheet">
-    <style type="text/css">
-      body {
-        padding-top: 60px;
-        padding-bottom: 40px;
-      }
-      .sidebar-nav {
-        padding: 9px 0;
-      }
-    </style>
-    <link href="../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
-
-    <!-- Le fav and touch icons -->
-    <link rel="shortcut icon" href="images/favicon.ico">
-    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
-  </head>
-
-  <body>
-
-    <div class="navbar navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container-fluid">
-          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-            <span class="i-bar"></span>
-            <span class="i-bar"></span>
-            <span class="i-bar"></span>
-          </a>
-          <a class="brand" href="#">Project name</a>
-          <div class="nav-collapse">
-            <ul class="nav">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#about">About</a></li>
-              <li><a href="#contact">Contact</a></li>
-            </ul>
-            <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p>
-          </div><!--/.nav-collapse -->
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-      <div class="row-fluid">
-        <div class="span9">
-          <div class="hero-unit">
-            <h1>Hello, world!</h1>
-            <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
-            <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
-          </div>
-          <div class="row-fluid">
-            <div class="span4">
-              <h2>Heading</h2>
-              <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" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="span4">
-              <h2>Heading</h2>
-              <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" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="span4">
-              <h2>Heading</h2>
-              <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" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-          </div><!--/row-->
-          <div class="row-fluid">
-            <div class="span4">
-              <h2>Heading</h2>
-              <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" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="span4">
-              <h2>Heading</h2>
-              <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" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-            <div class="span4">
-              <h2>Heading</h2>
-              <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" href="#">View details &raquo;</a></p>
-            </div><!--/span-->
-          </div><!--/row-->
-        </div><!--/span-->
-        <div class="span3">
-          <div class="well sidebar-nav">
-            <ul class="nav list">
-              <li class="nav-header">Sidebar</li>
-              <li class="active"><a href="#">Link</a></li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Link</a></li>
-              <li class="nav-header">Sidebar</li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Link</a></li>
-              <li class="nav-header">Sidebar</li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Link</a></li>
-            </ul>
-          </div><!--/.well -->        
-        </div><!--/span-->
-      </div><!--/row-->
-
-      <hr>
-
-      <footer>
-        <p>&copy; Company 2012</p>
-      </footer>
-
-    </div><!--/.fluid-container-->
-
-
-    <!-- Le javascript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="../js/tests/vendor/jquery.js"></script>
-    <script src="../js/bootstrap-transition.js"></script>
-    <script src="../js/bootstrap-collapse.js"></script>
-
-  </body>
-</html>
diff --git a/examples/fluid.html b/examples/fluid.html
index 57ee5b0918..b38ff98708 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -58,7 +58,7 @@
       <div class="row-fluid">
         <div class="span3">
           <div class="well sidebar-nav">
-            <ul class="nav list">
+            <ul class="nav nav-list">
               <li class="nav-header">Sidebar</li>
               <li class="active"><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
diff --git a/examples/starter-template.html b/examples/starter-template.html
new file mode 100644
index 0000000000..99450aa035
--- /dev/null
+++ b/examples/starter-template.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap, from Twitter</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le styles -->
+    <link href="../docs/assets/css/bootstrap.css" rel="stylesheet">
+    <link href="../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
+    <style>
+      body {
+        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
+      }
+    </style>
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="images/favicon.ico">
+    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+  </head>
+
+  <body>
+
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+          </a>
+          <a class="brand" href="#">Project name</a>
+          <div class="nav-collapse">
+            <ul class="nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+          </div><!--/.nav-collapse -->
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+      <h1>Bootstrap starter template</h1>
+      <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
+
+    </div> <!-- /container -->
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+    <script src="../js/tests/vendor/jquery.js"></script>
+    <script src="../js/bootstrap-transition.js"></script>
+    <script src="../js/bootstrap-alert.js"></script>
+    <script src="../js/bootstrap-modal.js"></script>
+    <script src="../js/bootstrap-dropdown.js"></script>
+    <script src="../js/bootstrap-scrollspy.js"></script>
+    <script src="../js/bootstrap-tab.js"></script>
+    <script src="../js/bootstrap-tooltip.js"></script>
+    <script src="../js/bootstrap-popover.js"></script>
+    <script src="../js/bootstrap-button.js"></script>
+    <script src="../js/bootstrap-collapse.js"></script>
+    <script src="../js/bootstrap-carousel.js"></script>
+    <script src="../js/bootstrap-typeahead.js"></script>
+
+  </body>
+</html>