diff options
| -rwxr-xr-x | amelia/index.html | 179 | ||||
| -rwxr-xr-x | cerulean/index.html | 415 | ||||
| -rwxr-xr-x | cosmo/index.html | 417 | ||||
| -rwxr-xr-x | cyborg/index.html | 415 | ||||
| -rwxr-xr-x | default/index.html | 420 | ||||
| -rwxr-xr-x | journal/index.html | 415 | ||||
| -rwxr-xr-x | readable/index.html | 415 | ||||
| -rwxr-xr-x | simplex/index.html | 418 | ||||
| -rwxr-xr-x | slate/index.html | 415 | ||||
| -rwxr-xr-x | spacelab/index.html | 418 | ||||
| -rwxr-xr-x | spruce/index.html | 419 | ||||
| -rwxr-xr-x | superhero/index.html | 419 | ||||
| -rwxr-xr-x | united/index.html | 419 |
13 files changed, 3410 insertions, 1774 deletions
diff --git a/amelia/index.html b/amelia/index.html index e44f9fc4..41716589 100755 --- a/amelia/index.html +++ b/amelia/index.html @@ -7,12 +7,10 @@ <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"> @@ -117,6 +115,7 @@ <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> @@ -167,6 +166,21 @@ </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> @@ -590,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 ================================================== --> @@ -599,7 +652,7 @@ </div> <div class="row"> - <div class="span5"> + <div class="span4"> <h3 id="breadcrumbs">Breadcrumbs</h3> <ul class="breadcrumb"> @@ -607,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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> @@ -646,26 +685,112 @@ </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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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 /> diff --git a/cerulean/index.html b/cerulean/index.html index ca41bd03..99968ce2 100755 --- a/cerulean/index.html +++ b/cerulean/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,6 +115,7 @@ <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> @@ -167,6 +166,21 @@ </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> @@ -290,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> @@ -301,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> @@ -321,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> @@ -341,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> @@ -361,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> @@ -381,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> @@ -401,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> @@ -421,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> @@ -451,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"> @@ -590,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 ================================================== --> @@ -599,7 +652,7 @@ </div> <div class="row"> - <div class="span5"> + <div class="span4"> <h3 id="breadcrumbs">Breadcrumbs</h3> <ul class="breadcrumb"> @@ -607,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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> @@ -646,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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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 ================================================== --> @@ -692,7 +817,7 @@ </div> </div> </div> - <br /> + <br /> <!-- Alerts & Messages @@ -702,13 +827,13 @@ <h3 id="alerts">Alerts</h3> <div class="row"> - <div class="span12"> - <div class="alert alert-block"> - <a class="close">×</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">×</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"> diff --git a/cosmo/index.html b/cosmo/index.html index c35957c0..aaa6e402 100755 --- a/cosmo/index.html +++ b/cosmo/index.html @@ -2,36 +2,34 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Bootswatch: Amelia</title> + <title>Bootswatch: Cosmo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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,6 +115,7 @@ <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> @@ -167,6 +166,21 @@ </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> @@ -290,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> @@ -301,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> @@ -321,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> @@ -341,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> @@ -361,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> @@ -381,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> @@ -401,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> @@ -421,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> @@ -451,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"> @@ -590,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 ================================================== --> @@ -599,7 +652,7 @@ </div> <div class="row"> - <div class="span5"> + <div class="span4"> <h3 id="breadcrumbs">Breadcrumbs</h3> <ul class="breadcrumb"> @@ -607,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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> @@ -646,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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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 ================================================== --> @@ -692,7 +817,7 @@ </div> </div> </div> - <br /> + <br /> <!-- Alerts & Messages @@ -702,13 +827,13 @@ <h3 id="alerts">Alerts</h3> <div class="row"> - <div class="span12"> - <div class="alert alert-block"> - <a class="close">×</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">×</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"> diff --git a/cyborg/index.html b/cyborg/index.html index 4565fe7f..93ac2ddf 100755 --- a/cyborg/index.html +++ b/cyborg/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,6 +115,7 @@ <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> @@ -167,6 +166,21 @@ </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> @@ -290,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> @@ -301,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> @@ -321,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> @@ -341,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> @@ -361,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> @@ -381,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> @@ -401,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> @@ -421,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> @@ -451,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"> @@ -590,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 ================================================== --> @@ -599,7 +652,7 @@ </div> <div class="row"> - <div class="span5"> + <div class="span4"> <h3 id="breadcrumbs">Breadcrumbs</h3> <ul class="breadcrumb"> @@ -607,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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> @@ -646,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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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 ================================================== --> @@ -692,7 +817,7 @@ </div> </div> </div> - <br /> + <br /> <!-- Alerts & Messages @@ -702,13 +827,13 @@ <h3 id="alerts">Alerts</h3> <div class="row"> - <div class="span12"> - <div class="alert alert-block"> - <a class="close">×</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">×</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"> diff --git a/default/index.html b/default/index.html index 7bb3eb32..4526ba0e 100755 --- a/default/index.html +++ b/default/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> @@ -102,7 +100,7 @@ <div class="row"> <div class="span6"> <h1>Default</h1> - <p class="lead">The default style of Twitter Bootstrap.</p> + <p class="lead">A preview of changes in this swatch.</p> </div> <div class="span6"> <div class="bsa well"> @@ -117,6 +115,7 @@ <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> @@ -124,6 +123,7 @@ + <!-- Typography ================================================== --> <section id="typography"> @@ -166,9 +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"> @@ -274,6 +290,7 @@ </section> + <!-- Buttons ================================================== --> <section id="buttons"> @@ -287,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> @@ -298,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> @@ -318,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> @@ -338,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> @@ -358,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> @@ -378,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> @@ -398,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> @@ -418,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> @@ -448,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"> @@ -587,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 ================================================== --> @@ -596,7 +652,7 @@ </div> <div class="row"> - <div class="span5"> + <div class="span4"> <h3 id="breadcrumbs">Breadcrumbs</h3> <ul class="breadcrumb"> @@ -604,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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> @@ -643,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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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 ================================================== --> @@ -689,7 +817,7 @@ </div> </div> </div> - <br /> + <br /> <!-- Alerts & Messages @@ -699,13 +827,13 @@ <h3 id="alerts">Alerts</h3> <div class="row"> - <div class="span12"> - <div class="alert alert-block"> - <a class="close">×</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">×</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"> diff --git a/journal/index.html b/journal/index.html index 612c02cb..a431b50f 100755 --- a/journal/index.html +++ b/journal/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,6 +115,7 @@ <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> @@ -167,6 +166,21 @@ </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> @@ -290,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> @@ -301,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> @@ -321,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> @@ -341,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> @@ -361,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> @@ -381,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> @@ -401,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> @@ -421,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> @@ -451,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"> @@ -590,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 ================================================== --> @@ -599,7 +652,7 @@ </div> <div class="row"> - <div class="span5"> + <div class="span4"> <h3 id="breadcrumbs">Breadcrumbs</h3> <ul class="breadcrumb"> @@ -607,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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> @@ -646,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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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 ================================================== --> @@ -692,7 +817,7 @@ </div> </div> </div> - <br /> + <br /> <!-- Alerts & Messages @@ -702,13 +827,13 @@ <h3 id="alerts">Alerts</h3> <div class="row"> - <div class="span12"> - <div class="alert alert-block"> - <a class="close">×</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">×</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"> diff --git a/readable/index.html b/readable/index.html index 85455bb2..d67447ed 100755 --- a/readable/index.html +++ b/readable/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,6 +115,7 @@ <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> @@ -167,6 +166,21 @@ </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> @@ -290,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> @@ -301,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> @@ -321,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> @@ -341,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> @@ -361,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> @@ -381,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> @@ -401,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> @@ -421,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> @@ -451,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"> @@ -590,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 ================================================== --> @@ -599,7 +652,7 @@ </div> <div class="row"> - <div class="span5"> + <div class="span4"> <h3 id="breadcrumbs">Breadcrumbs</h3> <ul class="breadcrumb"> @@ -607,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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> @@ -646,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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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 ================================================== --> @@ -692,7 +817,7 @@ </div> </div> </div> - <br /> + <br /> <!-- Alerts & Messages @@ -702,13 +827,13 @@ <h3 id="alerts">Alerts</h3> <div class="row"> - <div class="span12"> - <div class="alert alert-block"> - <a class="close">×</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">×</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"> diff --git a/simplex/index.html b/simplex/index.html index 9d5bce53..af41b57c 100755 --- a/simplex/index.html +++ b/simplex/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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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">×</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">×</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"> diff --git a/slate/index.html b/slate/index.html index 540577c4..e3d3511c 100755 --- a/slate/index.html +++ b/slate/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,6 +115,7 @@ <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> @@ -167,6 +166,21 @@ </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> @@ -290,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> @@ -301,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> @@ -321,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> @@ -341,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> @@ -361,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> @@ -381,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> @@ -401,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> @@ -421,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> @@ -451,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"> @@ -590,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 ================================================== --> @@ -599,7 +652,7 @@ </div> <div class="row"> - <div class="span5"> + <div class="span4"> <h3 id="breadcrumbs">Breadcrumbs</h3> <ul class="breadcrumb"> @@ -607,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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> @@ -646,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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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 ================================================== --> @@ -692,7 +817,7 @@ </div> </div> </div> - <br /> + <br /> <!-- Alerts & Messages @@ -702,13 +827,13 @@ <h3 id="alerts">Alerts</h3> <div class="row"> - <div class="span12"> - <div class="alert alert-block"> - <a class="close">×</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">×</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"> 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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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">×</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">×</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"> diff --git a/spruce/index.html b/spruce/index.html index fb754bf7..1901ca73 100755 --- a/spruce/index.html +++ b/spruce/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"> @@ -275,6 +290,7 @@ </section> + <!-- Buttons ================================================== --> <section id="buttons"> @@ -288,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> @@ -299,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> @@ -319,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> @@ -339,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> @@ -359,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> @@ -379,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> @@ -399,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> @@ -419,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> @@ -449,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"> @@ -588,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 ================================================== --> @@ -597,7 +652,7 @@ </div> <div class="row"> - <div class="span5"> + <div class="span4"> <h3 id="breadcrumbs">Breadcrumbs</h3> <ul class="breadcrumb"> @@ -605,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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> @@ -644,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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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 ================================================== --> @@ -690,7 +817,7 @@ </div> </div> </div> - <br /> + <br /> <!-- Alerts & Messages @@ -700,13 +827,13 @@ <h3 id="alerts">Alerts</h3> <div class="row"> - <div class="span12"> - <div class="alert alert-block"> - <a class="close">×</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">×</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"> diff --git a/superhero/index.html b/superhero/index.html index f3761319..355a321e 100755 --- a/superhero/index.html +++ b/superhero/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"> @@ -275,6 +290,7 @@ </section> + <!-- Buttons ================================================== --> <section id="buttons"> @@ -288,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> @@ -299,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> @@ -319,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> @@ -339,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> @@ -359,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> @@ -379,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> @@ -399,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> @@ -419,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> @@ -449,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"> @@ -588,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 ================================================== --> @@ -597,7 +652,7 @@ </div> <div class="row"> - <div class="span5"> + <div class="span4"> <h3 id="breadcrumbs">Breadcrumbs</h3> <ul class="breadcrumb"> @@ -605,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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> @@ -644,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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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 ================================================== --> @@ -690,7 +817,7 @@ </div> </div> </div> - <br /> + <br /> <!-- Alerts & Messages @@ -700,13 +827,13 @@ <h3 id="alerts">Alerts</h3> <div class="row"> - <div class="span12"> - <div class="alert alert-block"> - <a class="close">×</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">×</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"> diff --git a/united/index.html b/united/index.html index 173c197e..02d36708 100755 --- a/united/index.html +++ b/united/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"> @@ -275,6 +290,7 @@ </section> + <!-- Buttons ================================================== --> <section id="buttons"> @@ -288,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> @@ -299,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> @@ -319,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> @@ -339,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> @@ -359,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> @@ -379,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> @@ -399,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> @@ -419,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> @@ -449,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"> @@ -588,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 ================================================== --> @@ -597,7 +652,7 @@ </div> <div class="row"> - <div class="span5"> + <div class="span4"> <h3 id="breadcrumbs">Breadcrumbs</h3> <ul class="breadcrumb"> @@ -605,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="#">«</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="#">»</a></li> - </ul> - </div> - <div class="pagination"> - <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> @@ -644,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="#">← Older</a></li> + <li class="next"><a href="#">Newer →</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 ================================================== --> @@ -690,7 +817,7 @@ </div> </div> </div> - <br /> + <br /> <!-- Alerts & Messages @@ -700,13 +827,13 @@ <h3 id="alerts">Alerts</h3> <div class="row"> - <div class="span12"> - <div class="alert alert-block"> - <a class="close">×</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">×</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"> |