update hero example and examples overview

3 files changed, 112 insertions, 34 deletions

diff --git a/docs/examples.html b/docs/examples.html
index 70a1a54dd..7d79fc0a0 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -82,20 +82,50 @@
 </header>
 
 
-
-<!-- EXAMPLES
-================================================== -->
-<section id="examples">
-  <div class="page-header">
-    <h1>Examples from 1.x</h1>
-  </div>
-
-<p><a href="../examples/container-app.html">Container app</a></p>
-<p><a href="../examples/fluid.html">Fluid layout</a></p>
-<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
-<p><a href="../examples/hero.html">Hero marketing site</a></p>
-
-</section>
+<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>
+    <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>
+  </li>
+  <li class="span4">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Simple layout</h3>
+    <p></p>
+  </li>
+</ul>
 
 
      <!-- Footer
diff --git a/docs/templates/pages/examples.mustache b/docs/templates/pages/examples.mustache
index 3c102bef2..850ac0fa6 100644
--- a/docs/templates/pages/examples.mustache
+++ b/docs/templates/pages/examples.mustache
@@ -10,17 +10,47 @@
 </header>
 
 
-
-<!-- EXAMPLES
-================================================== -->
-<section id="examples">
-  <div class="page-header">
-    <h1>{{_i}}Examples from 1.x{{/i}}</h1>
-  </div>
-
-<p><a href="../examples/container-app.html">Container app</a></p>
-<p><a href="../examples/fluid.html">Fluid layout</a></p>
-<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
-<p><a href="../examples/hero.html">Hero marketing site</a></p>
-
-</section>
+<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>
+    <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>
+  </li>
+  <li class="span4">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Simple layout</h3>
+    <p></p>
+  </li>
+</ul>
diff --git a/examples/hero.html b/examples/hero.html
index c43102ccb..1fa39922f 100644
--- a/examples/hero.html
+++ b/examples/hero.html
@@ -16,8 +16,10 @@
     <style type="text/css">
       body {
         padding-top: 60px;
+        padding-bottom: 40px;
       }
     </style>
+    <link href="../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
 
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="images/favicon.ico">
@@ -31,12 +33,19 @@
     <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>
-          <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 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>
@@ -46,7 +55,7 @@
       <!-- Main hero unit for a primary marketing message or call to action -->
       <div class="hero-unit">
         <h1>Hello, world!</h1>
-        <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+        <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 primary large">Learn more &raquo;</a></p>
       </div>
 
@@ -69,11 +78,20 @@
         </div>
       </div>
 
+      <hr>
+
       <footer>
         <p>&copy; Company 2012</p>
       </footer>
 
     </div> <!-- /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>