<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<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/html5shiv/dist/html5shiv.js"></script>
+ <script src="../bower_components/respond/dest/respond.min.js"></script>
+ <![endif]-->
<style>
body,
- .navbar {
+ .navbar,
+ .container {
width: 500px;
}
<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>
- <ul class="dropdown-menu" aria-labelledby="themes">
- <li><a tabindex="-1" href="../default/">Default</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="../amelia/">Amelia</a></li>
- <li><a tabindex="-1" href="../cerulean/">Cerulean</a></li>
- <li><a tabindex="-1" href="../cosmo/">Cosmo</a></li>
- <li><a tabindex="-1" href="../cyborg/">Cyborg</a></li>
- <li><a tabindex="-1" href="../flatly/">Flatly</a></li>
- <li><a tabindex="-1" href="../journal/">Journal</a></li>
- <li><a tabindex="-1" href="../readable/">Readable</a></li>
- <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="../united/">United</a></li>
- </ul>
</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="../default/">bootstrap.min.css</a></li>
- <li><a tabindex="-1" href="../amelia/">bootstrap.css</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="../cerulean/">variables.less</a></li>
- <li><a tabindex="-1" href="../cosmo/">bootswatch.less</a></li>
- </ul>
</li>
<li>
<a href="../help/">Help</a>
</div>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+ <script src="https://code.jquery.com/jquery-1.10.2.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) {
+ $.get("http://api.bootswatch.com/3/", function (data) {
+ var menuTemplate = "<div id='menu' style='position:fixed;top:10px;right:10px;'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>",
+ menuHTML = Mustache.render(menuTemplate, data.themes);
- 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);
+ $('body').append(menuHTML);
$('#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
+</html>