<title>Bootswatch: Default Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
- <link rel="stylesheet" href="../united/bootstrap.min.css" media="screen">
+ <link rel="stylesheet" href="../amelia/bootstrap.css" media="screen" id="stylesheet">
<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]-->
<style>
body,
- .navbar {
+ .navbar,
+ .container {
width: 500px;
}
</head>
<body>
- <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=".bs-navbar-collapse">
- <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=".bs-navbar-collapse">
+ <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 active">
<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>
<div class="row">
<div class="col-12">
<div class="page-header">
- <h1>United</h1>
- <p class="lead">Ubuntu orange and unique font</p>
+ <h1 id="theme">Amelia</h1>
+ <p id="description" class="lead">Sweet and cheery</p>
<div class="bs-example">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
</div>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
+ <script>
+
+ $.get("http://api.bootswatch.com", function (data) {
+
+ var t_menu = "<div id='menu' style='position:fixed;top:10px;right:10px;'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>";
+ var t_previews = "{{#.}}<div class='preview hidden' id='{{name}}'><h1>{{name}}: {{description}}</h1><p><a href='{{preview}}'><img src='{{thumbnail}}'></a></p></div>{{/.}}";
+
+ var o_menu = Mustache.render(t_menu, data.themes);
+ var o_previews = Mustache.render(t_previews, data.themes);
+
+ $('body').append(o_menu);
+
+ $('#menu').change(function(){
+
+ var theme = $('#menu :selected');
+ $('#theme').text(theme.text());
+ $('#description').text(theme.data('description'));
+
+ theme = '../' + theme.text().toLowerCase() + '/bootstrap.min.css';
+ $('#stylesheet').attr('href', theme);
+ });
+
+ }, "json");
+
+ </script>
+
</body>
</html>
\ No newline at end of file
projects / bootswatch / blobdiff