index: new preview pages with tables, nav, labels, badges, blockquotes

1 files changed, 272 insertions, 146 deletions

diff --git a/spacelab/index.html b/spacelab/index.html
index 922f3d4c..9441ee05 100755
--- a/spacelab/index.html
+++ b/spacelab/index.html
@@ -7,31 +7,29 @@
     <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="bootstrap.min.css" rel="stylesheet">
     <link href="../default/bootstrap-responsive.min.css" rel="stylesheet">
     <link href="../css/docs.css" rel="stylesheet">
 
-	 <script type="text/javascript">
+   <script type="text/javascript">
 
-	   var _gaq = _gaq || [];
-		  _gaq.push(['_setAccount', 'UA-23019901-1']);
-		  _gaq.push(['_setDomainName', "bootswatch.com"]);
-  		  _gaq.push(['_setAllowLinker', true]);
-		  _gaq.push(['_trackPageview']);
+     var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-23019901-1']);
+      _gaq.push(['_setDomainName', "bootswatch.com"]);
+        _gaq.push(['_setAllowLinker', true]);
+      _gaq.push(['_trackPageview']);
 
-	   (function() {
-	     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-	     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-	     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-	   })();
+     (function() {
+       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+     })();
 
-	 </script>
+   </script>
 
   </head>
 
@@ -117,12 +115,15 @@
       <li><a href="#navbar">Navbar</a></li>
       <li><a href="#buttons">Buttons</a></li>
       <li><a href="#forms">Forms</a></li>
+      <li><a href="#tables">Tables</a></li>
       <li><a href="#miscellaneous">Miscellaneous</a></li>
     </ul>
   </div>
 </header>
 
 
+
+
 <!-- Typography
 ================================================== -->
 <section id="typography">
@@ -165,11 +166,25 @@
     </div>
 
   </div>
+  
+  <div class="row">
+    <div class="span6">
+      <blockquote>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+      </blockquote>
+    </div>
+    <div class="span6">
+      <blockquote class="pull-right">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+      </blockquote>
+    </div>
+  </div>
 
 </section>
 
 
-
 <!-- Navbar
 ================================================== -->
 <section id="navbar">
@@ -289,8 +304,8 @@
         <th>Large Button</th>
         <th>Small Button</th>
         <th>Disabled Button</th>
-		<th>Button with Icon</th>
-		<th>Split Button</th>
+    <th>Button with Icon</th>
+    <th>Split Button</th>
       </tr>
     </thead>
     <tbody>
@@ -300,19 +315,19 @@
         <td><a class="btn btn-small" href="#">Default</a></td>
         <td><a class="btn disabled" href="#">Default</a></td>
         <td><a class="btn" href="#"><i class="icon-cog"></i> Default</a></td>
-		<td>
-	        <div class="btn-group">
-	          <a class="btn" href="#">Default</a>
-	          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
-	          </ul>
-	        </div><!-- /btn-group -->
-		</td>
+    <td>
+          <div class="btn-group">
+            <a class="btn" href="#">Default</a>
+            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
+            </ul>
+          </div><!-- /btn-group -->
+    </td>
       </tr>
       <tr>
         <td><a class="btn btn-primary" href="#">Primary</a></td>
@@ -320,19 +335,19 @@
         <td><a class="btn btn-primary btn-small" href="#">Primary</a></td>
         <td><a class="btn btn-primary disabled" href="#">Primary</a></td>
         <td><a class="btn btn-primary" href="#"><i class="icon-shopping-cart icon-white"></i> Primary</a></td>
-		<td>
-	        <div class="btn-group">
-	          <a class="btn btn-primary" href="#">Primary</a>
-	          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
-	          </ul>
-	        </div><!-- /btn-group -->
-		</td>
+    <td>
+          <div class="btn-group">
+            <a class="btn btn-primary" href="#">Primary</a>
+            <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
+            </ul>
+          </div><!-- /btn-group -->
+    </td>
       </tr>
       <tr>
         <td><a class="btn btn-info" href="#">Info</a></td>
@@ -340,19 +355,19 @@
         <td><a class="btn btn-info btn-small" href="#">Info</a></td>
         <td><a class="btn btn-info disabled" href="#">Info</a></td>
         <td><a class="btn btn-info" href="#"><i class="icon-exclamation-sign icon-white"></i> Info</a></td>
-		<td>
-	        <div class="btn-group">
-	          <a class="btn btn-info" href="#">Info</a>
-	          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
-	          </ul>
-	        </div><!-- /btn-group -->
-		</td>
+    <td>
+          <div class="btn-group">
+            <a class="btn btn-info" href="#">Info</a>
+            <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
+            </ul>
+          </div><!-- /btn-group -->
+    </td>
       </tr>
       <tr>
         <td><a class="btn btn-success" href="#">Success</a></td>
@@ -360,19 +375,19 @@
         <td><a class="btn btn-success btn-small" href="#">Success</a></td>
         <td><a class="btn btn-success disabled" href="#">Success</a></td>
         <td><a class="btn btn-success" href="#"><i class="icon-ok icon-white"></i> Success</a></td>
-		<td>
-	        <div class="btn-group">
-	          <a class="btn btn-success" href="#">Success</a>
-	          <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
-	          </ul>
-	        </div><!-- /btn-group -->
-		</td>
+    <td>
+          <div class="btn-group">
+            <a class="btn btn-success" href="#">Success</a>
+            <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
+            </ul>
+          </div><!-- /btn-group -->
+    </td>
       </tr>
       <tr>
         <td><a class="btn btn-warning" href="#">Warning</a></td>
@@ -380,19 +395,19 @@
         <td><a class="btn btn-warning btn-small" href="#">Warning</a></td>
         <td><a class="btn btn-warning disabled" href="#">Warning</a></td>
         <td><a class="btn btn-warning" href="#"><i class="icon-warning-sign icon-white"></i> Warning</a></td>
-		<td>
-	        <div class="btn-group">
-	          <a class="btn btn-warning" href="#">Warning</a>
-	          <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
-	          </ul>
-	        </div><!-- /btn-group -->
-		</td>
+    <td>
+          <div class="btn-group">
+            <a class="btn btn-warning" href="#">Warning</a>
+            <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
+            </ul>
+          </div><!-- /btn-group -->
+    </td>
       </tr>
       <tr>
         <td><a class="btn btn-danger" href="#">Danger</a></td>
@@ -400,19 +415,19 @@
         <td><a class="btn btn-danger btn-small" href="#">Danger</a></td>
         <td><a class="btn btn-danger disabled" href="#">Danger</a></td>
         <td><a class="btn btn-danger" href="#"><i class="icon-remove icon-white"></i> Danger</a></td>
-		<td>
-	        <div class="btn-group">
-	          <a class="btn btn-danger" href="#">Danger</a>
-	          <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
-	          </ul>
-	        </div><!-- /btn-group -->
-		</td>
+    <td>
+          <div class="btn-group">
+            <a class="btn btn-danger" href="#">Danger</a>
+            <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
+            </ul>
+          </div><!-- /btn-group -->
+    </td>
       </tr>
       <tr>
         <td><a class="btn btn-inverse" href="#">Inverse</a></td>
@@ -420,19 +435,19 @@
         <td><a class="btn btn-inverse btn-small" href="#">Inverse</a></td>
         <td><a class="btn btn-inverse disabled" href="#">Inverse</a></td>
         <td><a class="btn btn-inverse" href="#"><i class="icon-random icon-white"></i> Inverse</a></td>
-		<td>
-	        <div class="btn-group">
-	          <a class="btn btn-inverse" href="#">Inverse</a>
-	          <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
-	          </ul>
-	        </div><!-- /btn-group -->
-		</td>
+    <td>
+          <div class="btn-group">
+            <a class="btn btn-inverse" href="#">Inverse</a>
+            <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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><a href="#">Separated link</a></li>
+            </ul>
+          </div><!-- /btn-group -->
+    </td>
       </tr>
     </tbody>
   </table>
@@ -450,10 +465,10 @@
   <div class="row">
     <div class="span7 offset1">
 
-	    <form class="well form-search">
-	      <input type="text" class="input-medium search-query">
-	      <button type="submit" class="btn">Search</button>
-	    </form>
+      <form class="well form-search">
+        <input type="text" class="input-medium search-query">
+        <button type="submit" class="btn">Search</button>
+      </form>
 
         <form class="well form-search">
           <input type="text" class="input-small" placeholder="Email">
@@ -589,6 +604,45 @@
 
 </section>
 
+<!-- Tables
+================================================== -->
+<section id="tables">
+  <div class="page-header">
+    <h1>Tables</h1>
+  </div>
+  
+  <table class="table table-bordered table-striped table-hover">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>First Name</th>
+        <th>Last Name</th>
+        <th>Username</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1</td>
+        <td>Mark</td>
+        <td>Otto</td>
+        <td>@mdo</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>Jacob</td>
+        <td>Thornton</td>
+        <td>@fat</td>
+      </tr>
+      <tr>
+        <td>3</td>
+        <td>Larry</td>
+        <td>the Bird</td>
+        <td>@twitter</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
 
 <!-- Miscellaneous
 ================================================== -->
@@ -598,7 +652,7 @@
   </div>
 
   <div class="row">
-    <div class="span5">
+    <div class="span4">
 
       <h3 id="breadcrumbs">Breadcrumbs</h3>
       <ul class="breadcrumb">
@@ -606,28 +660,14 @@
       </ul>
       <ul class="breadcrumb">
         <li><a href="#">Home</a> <span class="divider">/</span></li>
-        <li class="active">Library</li>
-      </ul>
-      <ul class="breadcrumb">
-        <li><a href="#">Home</a> <span class="divider">/</span></li>
         <li><a href="#">Library</a> <span class="divider">/</span></li>
         <li class="active">Data</li>
       </ul>
     </div>
-    <div class="span6 offset1">
+    <div class="span4">
       <h3 id="pagination">Pagination</h3>
       <div class="pagination">
         <ul>
-          <li class="disabled"><a href="#">&laquo;</a></li>
-          <li class="active"><a href="#">1</a></li>
-          <li><a href="#">2</a></li>
-          <li><a href="#">3</a></li>
-          <li><a href="#">4</a></li>
-          <li><a href="#">&raquo;</a></li>
-        </ul>
-      </div>
-      <div class="pagination">
-        <ul>
           <li><a href="#">&larr;</a></li>
           <li class="active"><a href="#">10</a></li>
           <li class="disabled"><a href="#">...</a></li>
@@ -645,28 +685,114 @@
         </ul>
       </div>
     </div>
+    
+    <div class="span4">
+      <h3 id="pager">Pagers</h3>
+        
+        <ul class="pager">
+          <li><a href="#">Previous</a></li>
+          <li><a href="#">Next</a></li>
+        </ul>
+        
+        <ul class="pager">
+          <li class="previous disabled"><a href="#">&larr; Older</a></li>
+          <li class="next"><a href="#">Newer &rarr;</a></li>
+        </ul>
+    </div>
   </div>
 
 
+  <!-- Navs
+  ================================================== -->
+
+  <div class="row">
+    <div class="span4">
+
+      <h3 id="tabs">Tabs</h3>
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
+        <li><a href="#B" data-toggle="tab">Section 2</a></li>
+        <li><a href="#C" data-toggle="tab">Section 3</a></li>
+      </ul>
+      <div class="tabbable">
+        <div class="tab-content">
+          <div class="tab-pane active" id="A">
+            <p>I'm in Section A.</p>
+          </div>
+          <div class="tab-pane" id="B">
+            <p>Howdy, I'm in Section B.</p>
+          </div>
+          <div class="tab-pane" id="C">
+            <p>What up girl, this is Section C.</p>
+          </div>
+        </div>
+      </div> <!-- /tabbable -->
+      
+    </div>
+    <div class="span4">
+      <h3 id="pills">Pills</h3>
+      <ul class="nav nav-pills">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">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><a href="#">Separated link</a></li>
+          </ul>
+        </li>
+        <li class="disabled"><a href="#">Disabled link</a></li>
+      </ul>
+    </div>
+    
+    <div class="span4">
+      
+      <h3 id="list">Lists</h3>
+        
+      <div class="well" style="padding: 8px 0;">
+        <ul class="nav nav-list">
+          <li class="nav-header">List header</li>
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#">Library</a></li>
+          <li><a href="#">Applications</a></li>
+          <li class="nav-header">Another list header</li>
+          <li><a href="#">Profile</a></li>
+          <li><a href="#">Settings</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Help</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
 
 <!-- Labels
 ================================================== -->
 
   <div class="row">
-    <div class="span12">
-
+    <div class="span6">
       <h3 id="labels">Labels</h3>
-
-
       <span class="label">Default</span>
       <span class="label label-success">Success</span>
-	  <span class="label label-warning">Warning</span>
-	  <span class="label label-important">Important</span>
-	  <span class="label label-info">Info</span>
-
-	</div>
+      <span class="label label-warning">Warning</span>
+      <span class="label label-important">Important</span>
+      <span class="label label-info">Info</span>
+      <span class="label label-inverse">Inverse</span>
+    </div>
+    <div class="span6">
+      <h3 id="badges">Badges</h3>
+      <span class="badge">Default</span>
+      <span class="badge badge-success">Success</span>
+      <span class="badge badge-warning">Warning</span>
+      <span class="badge badge-important">Important</span>
+      <span class="badge badge-info">Info</span>
+      <span class="badge badge-inverse">Inverse</span>
+    </div>
   </div>
-	<br />
+  <br />
 
 <!-- Progress bars
 ================================================== -->
@@ -691,7 +817,7 @@
       </div>
     </div>
   </div>
-	<br />
+  <br />
 
 
 <!-- Alerts & Messages
@@ -701,13 +827,13 @@
   <h3 id="alerts">Alerts</h3>
 
   <div class="row">
-	  <div class="span12">
-	      <div class="alert alert-block">
-	        <a class="close">&times;</a>
-	        <h4 class="alert-heading">Alert block</h4>
-	        <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-	      </div>
-	  </div>
+    <div class="span12">
+        <div class="alert alert-block">
+          <a class="close">&times;</a>
+          <h4 class="alert-heading">Alert block</h4>
+          <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+        </div>
+    </div>
   </div>
   <div class="row">
     <div class="span4">