diff options
Diffstat (limited to 'slate')
-rwxr-xr-x | slate/index.html | 415 |
1 files changed, 270 insertions, 145 deletions
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"> |