Merge branch '3.0.0-wip' into bs3_makefile_separated_done

Conflicts:
	Makefile

5 files changed, 281 insertions, 13 deletions

diff --git a/docs/examples/grid.html b/docs/examples/grid.html
new file mode 100644
index 000000000..4fc724a5a
--- /dev/null
+++ b/docs/examples/grid.html
@@ -0,0 +1,64 @@
+---
+layout: example
+title: Grid template
+---
+
+<!-- Custom styles for this template -->
+<style>
+
+  /* Show grid styles from docs.css
+  -------------------------------------------------- */
+
+  .show-grid {
+    margin-bottom: 15px;
+  }
+  .show-grid [class^="span"] {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background-color: #eee;
+    border: 1px solid #ddd;
+  }
+  .show-grid [class*="span"]:hover {
+    background-color: #ddd;
+  }
+
+</style>
+
+
+<div class="container">
+
+  <div class="page-header">
+    <h1>Grids</h1>
+  </div>
+
+  <h2>Default grid columns</h2>
+  <div class="bs-docs-grid">
+    <div class="row show-grid">
+      <div class="span1">1</div>
+      <div class="span1">1</div>
+      <div class="span1">1</div>
+      <div class="span1">1</div>
+      <div class="span1">1</div>
+      <div class="span1">1</div>
+      <div class="span1">1</div>
+      <div class="span1">1</div>
+      <div class="span1">1</div>
+      <div class="span1">1</div>
+      <div class="span1">1</div>
+      <div class="span1">1</div>
+    </div>
+    <div class="row show-grid">
+      <div class="span4">4</div>
+      <div class="span4">4</div>
+      <div class="span4">4</div>
+    </div>
+    <div class="row show-grid">
+      <div class="span6">6</div>
+      <div class="span6">6</div>
+    </div>
+    <div class="row show-grid">
+      <div class="span12">12</div>
+    </div>
+  </div>
+
+</div> <!-- /container -->
diff --git a/docs/examples/jumbotron-narrow.html b/docs/examples/jumbotron-narrow.html
index 6a7390045..b9a26c757 100644
--- a/docs/examples/jumbotron-narrow.html
+++ b/docs/examples/jumbotron-narrow.html
@@ -12,7 +12,7 @@ title: Narrow page template
   }
 
   /* Everything but the jumbotron gets side spacing for mobile-first views */
-  .masthead,
+  .header,
   .marketing,
   .footer {
     padding-left: 15px;
@@ -20,17 +20,24 @@ title: Narrow page template
   }
 
   /* Custom page header */
-  .masthead {
+  .header {
     border-bottom: 1px solid #e5e5e5;
   }
   /* Make the masthead heading the same height as the navigation */
-  .masthead h3 {
+  .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;
@@ -43,10 +50,7 @@ title: Narrow page template
   /* Main marketing message and sign up button */
   .jumbotron {
     text-align: center;
-  }
-  .jumbotron h1 {
-    font-size: 72px;
-    line-height: 1;
+    border-bottom: 1px solid #e5e5e5;
   }
   .jumbotron .btn {
     font-size: 21px;
@@ -64,23 +68,27 @@ title: Narrow page template
   /* Responsive: Portrait tablets and up */
   @media screen and (min-width: 768px) {
     /* Remove the padding we set earlier */
-    .masthead,
+    .header,
     .marketing,
     .footer {
       padding-left: 0;
       padding-right: 0;
     }
     /* Space out the masthead */
-    .masthead {
+    .header {
       margin-bottom: 30px;
     }
+    /* Remove the bottom border on the jumbotron for visual effect */
+    .jumbotron {
+      border-bottom: 0;
+    }
   }
 </style>
 
 
 
 <div class="container-narrow">
-  <div class="masthead">
+  <div class="header">
     <ul class="nav nav-pills pull-right">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
@@ -90,7 +98,7 @@ title: Narrow page template
   </div>
 
   <div class="jumbotron">
-    <h1>Super awesome marketing speak!</h1>
+    <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>
@@ -119,8 +127,6 @@ title: Narrow page template
     </div>
   </div>
 
-  <hr>
-
   <div class="footer">
     <p>&copy; Company 2013</p>
   </div>
diff --git a/docs/examples/navbar-fixed-top.html b/docs/examples/navbar-fixed-top.html
new file mode 100644
index 000000000..e1f1c882a
--- /dev/null
+++ b/docs/examples/navbar-fixed-top.html
@@ -0,0 +1,67 @@
+---
+layout: example
+title: Fixed navbar template
+---
+
+<!-- Custom styles for this template -->
+<style>
+
+  body {
+    padding-top: 60px;
+  }
+
+  .jumbotron {
+    margin-top: 20px;
+  }
+
+</style>
+
+
+    <!-- Fixed navbar -->
+    <div class="navbar navbar-fixed-top">
+      <div class="container">
+        <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </a>
+        <a class="navbar-brand" href="#">Project name</a>
+        <div class="nav-collapse 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>
+            <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="nav-header">Nav header</li>
+                <li><a href="#">Separated link</a></li>
+                <li><a href="#">One more separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+          <ul class="nav pull-right">
+            <li><a href="/examples/navbar/">Default</a></li>
+            <li><a href="/examples/navbar-static-top/">Static top</a></li>
+            <li class="active"><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </div>
+
+    <div class="container">
+
+      <!-- Main component for a primary marketing message or call to action -->
+      <div class="jumbotron">
+        <h1>Navbar example</h1>
+        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+        <p>
+          <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
+        </p>
+      </div>
+
+    </div> <!-- /container -->
diff --git a/docs/examples/navbar-static-top.html b/docs/examples/navbar-static-top.html
new file mode 100644
index 000000000..2679a670b
--- /dev/null
+++ b/docs/examples/navbar-static-top.html
@@ -0,0 +1,64 @@
+---
+layout: example
+title: Static navbar template
+---
+
+<!-- Custom styles for this template -->
+<style>
+
+  .jumbotron {
+    margin-top: 30px;
+  }
+
+</style>
+
+
+<!-- Static navbar -->
+<div class="navbar navbar-static-top">
+  <div class="container">
+    <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </a>
+    <a class="navbar-brand" href="#">Project name</a>
+    <div class="nav-collapse 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>
+        <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="nav-header">Nav header</li>
+            <li><a href="#">Separated link</a></li>
+            <li><a href="#">One more separated link</a></li>
+          </ul>
+        </li>
+      </ul>
+    <ul class="nav pull-right">
+      <li><a href="/examples/navbar/">Default</a></li>
+      <li class="active"><a href="/examples/navbar-static-top/">Static top</a></li>
+      <li><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
+    </ul>
+    </div><!--/.nav-collapse -->
+  </div>
+</div>
+
+
+<div class="container">
+
+  <!-- Main component for a primary marketing message or call to action -->
+  <div class="jumbotron">
+    <h1>Navbar example</h1>
+    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+    <p>
+      <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
+    </p>
+  </div>
+
+</div> <!-- /container -->
diff --git a/docs/examples/navbar.html b/docs/examples/navbar.html
new file mode 100644
index 000000000..6cba51dc5
--- /dev/null
+++ b/docs/examples/navbar.html
@@ -0,0 +1,67 @@
+---
+layout: example
+title: Navbar template
+---
+
+<!-- Custom styles for this template -->
+<style>
+
+  body {
+    padding: 30px;
+  }
+
+  .navbar {
+    margin-bottom: 30px;
+  }
+
+</style>
+
+
+<div class="container">
+
+  <!-- Static navbar -->
+  <div class="navbar">
+    <div class="container">
+      <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </a>
+      <a class="navbar-brand" href="#">Project name</a>
+      <div class="nav-collapse 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>
+          <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="nav-header">Nav header</li>
+              <li><a href="#">Separated link</a></li>
+              <li><a href="#">One more separated link</a></li>
+            </ul>
+          </li>
+        </ul>
+        <ul class="nav pull-right">
+          <li class="active"><a href="/examples/navbar/">Default</a></li>
+          <li><a href="/examples/navbar-static-top/">Static top</a></li>
+          <li><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
+        </ul>
+      </div><!--/.nav-collapse -->
+    </div>
+  </div>
+
+  <!-- Main component for a primary marketing message or call to action -->
+  <div class="jumbotron">
+    <h1>Navbar example</h1>
+    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+    <p>
+      <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
+    </p>
+  </div>
+
+</div> <!-- /container -->