<title>Bootswatch: Cerulean</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>
projects / bootswatch / blobdiff