<title>Bootswatch: Cyborg</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
- <link rel="stylesheet" href="./bootstrap.min.css" media="screen">
+ <link rel="stylesheet" href="./bootstrap.css" media="screen">
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../assets/css/bootswatch.min.css">
+ <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+ <!--[if lt IE 9]>
+ <script src="../bower_components/bootstrap/assets/js/html5shiv.js"></script>
+ <script src="../bower_components/bootstrap/assets/js/respond.min.js"></script>
+ <![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
<body>
<script src="../assets/js/bsa.js"></script>
- <div class="navbar navbar-fixed-top">
+ <div class="navbar navbar-default navbar-fixed-top">
<div class="container">
- <a href="../" class="navbar-brand">Bootswatch</a>
- <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <div class="nav-collapse collapse" id="navbar-main">
+ <div class="navbar-header">
+ <a href="../" class="navbar-brand">Bootswatch</a>
+ <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ </div>
+ <div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<li><a tabindex="-1" href="../simplex/">Simplex</a></li>
<li><a tabindex="-1" href="../slate/">Slate</a></li>
<li><a tabindex="-1" href="../spacelab/">Spacelab</a></li>
- <li><a tabindex="-1" href="../superhero/">Superhero</a></li>
<li><a tabindex="-1" href="../united/">United</a></li>
</ul>
</li>
+ <li>
+ <a href="../help/">Help</a>
+ </li>
+ <li>
+ <a href="http://news.bootswatch.com">Blog</a>
+ </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li><a tabindex="-1" href="./bootswatch.less">bootswatch.less</a></li>
</ul>
</li>
- <li>
- <a href="../help/">Help</a>
- </li>
- <li>
- <a href="http://news.bootswatch.com">Blog</a>
- </li>
</ul>
- <ul class="nav navbar-nav pull-right">
+ <ul class="nav navbar-nav navbar-right">
<li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li>
<li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li>
</ul>
</div>
<div class="bs-example">
- <div class="navbar">
- <div class="container">
+ <div class="navbar navbar-default">
+ <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
- <div class="nav-collapse collapse navbar-responsive-collapse">
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">Active</a></li>
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-header">Dropdown header</li>
- <li><a href="#">Separated link</a></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </li>
- </ul>
- <form class="navbar-form pull-left">
- <input type="text" class="form-control col-lg-8" placeholder="Search">
- </form>
- <ul class="nav navbar-nav pull-right">
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </li>
- </ul>
- </div><!-- /.nav-collapse -->
- </div><!-- /.container -->
+ </div>
+ <div class="navbar-collapse collapse navbar-responsive-collapse">
+ <ul class="nav navbar-nav">
+ <li class="active"><a href="#">Active</a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li class="dropdown-header">Dropdown header</li>
+ <li><a href="#">Separated link</a></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="navbar-form navbar-left">
+ <input type="text" class="form-control col-lg-8" placeholder="Search">
+ </form>
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /.nav-collapse -->
</div><!-- /.navbar -->
<div class="navbar navbar-inverse">
- <div class="container">
+ <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
- <div class="nav-collapse collapse navbar-inverse-collapse">
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">Active</a></li>
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-header">Dropdown header</li>
- <li><a href="#">Separated link</a></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </li>
- </ul>
- <form class="navbar-form pull-left">
- <input type="text" class="form-control col-lg-8" placeholder="Search">
- </form>
- <ul class="nav navbar-nav pull-right">
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </li>
- </ul>
- </div><!-- /.nav-collapse -->
- </div><!-- /.container -->
+ </div>
+ <div class="navbar-collapse collapse navbar-inverse-collapse">
+ <ul class="nav navbar-nav">
+ <li class="active"><a href="#">Active</a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li class="dropdown-header">Dropdown header</li>
+ <li><a href="#">Separated link</a></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="navbar-form navbar-left">
+ <input type="text" class="form-control col-lg-8" placeholder="Search">
+ </form>
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /.nav-collapse -->
</div><!-- /.navbar -->
</div><!-- /example -->
<div class="bs-example">
<p>
- <button type="button" class="btn btn-primary btn-large">Large button</button>
+ <button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
- <button type="button" class="btn btn-primary btn-small">Small button</button>
- <button type="button" class="btn btn-primary btn-mini">Mini button</button>
+ <button type="button" class="btn btn-primary btn-sm">Small button</button>
+ <button type="button" class="btn btn-primary btn-xs">Mini button</button>
</p>
</div>
<div class="bs-example">
<p>
- <button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
+ <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
<h1 id="tables">Tables</h1>
</div>
- <div class="bs-example">
+ <div class="bs-example table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
</div>
<div class="form-group">
<label class="control-label" for="inputLarge">Large input</label>
- <input class="form-control input-large" type="text" id="inputLarge">
+ <input class="form-control input-lg" type="text" id="inputLarge">
</div>
<div class="form-group">
<label class="control-label" for="inputDefault">Default input</label>
</div>
<div class="form-group">
<label class="control-label" for="inputSmall">Small input</label>
- <input class="form-control input-small" type="text" id="inputSmall">
+ <input class="form-control input-sm" type="text" id="inputSmall">
</div>
<div class="form-group">
<label class="control-label">Input addons</label>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
- <ul class="pagination pagination-large">
+ <ul class="pagination pagination-lg">
<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="#">»</a></li>
</ul>
- <ul class="pagination pagination-small">
+ <ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<div class="col-lg-12">
<h2>Alerts</h2>
<div class="bs-example">
- <div class="alert alert-block">
+ <div class="alert alert-dismissable alert-warning">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Warning!</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
</div>
<div class="row">
<div class="col-lg-4">
- <div class="alert alert-danger">
+ <div class="alert alert-dismissable alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
</div>
<div class="col-lg-4">
- <div class="alert alert-success">
+ <div class="alert alert-dismissable alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
</div>
<div class="col-lg-4">
- <div class="alert alert-info">
+ <div class="alert alert-dismissable alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="col-lg-4">
<h2>Labels</h2>
<div class="bs-example" style="margin-bottom: 40px;">
- <span class="label">Default</span>
+ <span class="label label-default">Default</span>
+ <span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
- <div class="panel">
- Basic panel
+ <div class="panel panel-default">
+ <div class="panel-body">
+ Basic panel
+ </div>
</div>
- <div class="panel">
+ <div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
- <div class="panel">
- Panel content
+ <div class="panel panel-default">
+ <div class="panel-body">
+ Panel content
+ </div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
<div class="panel-heading">
<h3 class="panel-title">Panel primary</h3>
</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel success</h3>
</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel warning</h3>
</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
</div>
<div class="col-lg-4">
<div class="panel-heading">
<h3 class="panel-title">Panel danger</h3>
</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel info</h3>
</div>
- Panel content
+ <div class="panel-body">
+ Panel content
+ </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
- <div class="well well-small">
+ <div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
<div class="col-lg-4">
- <div class="well well-large">
+ <div class="well well-lg">
Look, I'm in a large well!
</div>
</div>
<li><a href="http://feeds.feedburner.com/bootswatch">RSS</a></li>
<li><a href="https://twitter.com/thomashpark">Twitter</a></li>
<li><a href="https://github.com/thomaspark/bootswatch/">GitHub</a></li>
- <li><a data-toggle="tooltip" title="Drag to your bookmarks bar" href="javascript:(function(e,a,g,h,f,c,b,d)%7Bif(!(f%3De.jQuery)%7C%7Cg%3Ef.fn.jquery%7C%7Ch(f))%7Bc%3Da.createElement(%22script%22)%3Bc.type%3D%22text/javascript%22%3Bc.src%3D%22http://ajax.googleapis.com/ajax/libs/jquery/%22%2Bg%2B%22/jquery.min.js%22%3Bc.onload%3Dc.onreadystatechange%3Dfunction()%7Bif(!b%26%26(!(d%3Dthis.readyState)%7C%7Cd%3D%3D%22loaded%22%7C%7Cd%3D%3D%22complete%22))%7Bh((f%3De.jQuery).noConflict(1),b%3D1)%3Bf(c).remove()%7D%7D%3Ba.documentElement.childNodes%5B0%5D.appendChild(c)%7D%7D)(window,document,%221.3.2%22,function(%24,L)%7Bif(%24(%22.bootswatcher%22)%5B0%5D)%7B%24(%22.bootswatcher%22).remove()%7Delse%7Bvar%20%24e%3D%24(%27%3Cselect%20class%3D%22bootswatcher%22%3E%3Coption%3EAmelia%3C/option%3E%3Coption%3ECerulean%3C/option%3E%3Coption%3ECosmo%3C/option%3E%3Coption%3ECyborg%3C/option%3E%3Coption%3EJournal%3C/option%3E%3Coption%3EReadable%3C/option%3E%3Coption%3ESimplex%3C/option%3E%3Coption%3ESlate%3C/option%3E%3Coption%3ESpacelab%3C/option%3E%3Coption%3ESpruce%3C/option%3E%3Coption%3ESuperhero%3C/option%3E%3Coption%3EUnited%3C/option%3E%3C/select%3E%27)%3Bvar%20l%3D1%2BMath.floor(Math.random()*%24e.children().length)%3B%24e.css(%7B%22z-index%22:%2299999%22,position:%22fixed%22,top:%225px%22,right:%225px%22,opacity:%220.5%22%7D).hover(function()%7B%24(this).css(%22opacity%22,%221%22)%7D,function()%7B%24(this).css(%22opacity%22,%220.5%22)%7D).change(function()%7Bif(!%24(%22link.bootswatcher%22)%5B0%5D)%7B%24(%22head%22).append(%27%3Clink%20rel%3D%22stylesheet%22%20class%3D%22bootswatcher%22%3E%27)%7D%24(%22link.bootswatcher%22).attr(%22href%22,%22http://bootswatch.com/%22%2B%24(this).find(%22:selected%22).text().toLowerCase()%2B%22/bootstrap.min.css%22)%7D).find(%22option:nth-child(%22%2Bl%2B%22)%22).attr(%22selected%22,%22selected%22).end().trigger(%22change%22)%3B%24(%22body%22).append(%24e)%7D%3B%7D)%3B">Bookmarklet</a></li>
- <li><a href="http://news.bootswatch.com/post/22193315172/bootswatch-api">API</a></li>
+ <li><a href="../help/#api">API</a></li>
<li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=F22JEM3Q78JC2">Donate</a></li>
</ul>
<p>Made by <a href="http://thomaspark.me">Thomas Park</a>. Contact him at <a href="mailto:hello@thomaspark.me">hello@thomaspark.me</a>.</p>
projects / bootswatch / blobdiff