git.roojs.org Git - bootswatch/blob - tests/thumbnail.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <title>Bootswatch: Default Bootstrap</title>
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6     <meta charset="utf-8">
   7     <link rel="stylesheet" href="../amelia/bootstrap.css" media="screen" id="stylesheet">
   8     <link rel="stylesheet" href="../assets/css/bootswatch.min.css">
   9     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  10     <!--[if lt IE 9]>
  11       <script src="../bower_components/html5shiv/dist/html5shiv.js"></script>
  12       <script src="../bower_components/respond/dest/respond.min.js"></script>
  13     <![endif]-->
  14     <style>
  15
  16         body,
  17         .navbar,
  18         .container {
  19           width: 500px;
  20         }
  21
  22         h1, p, .bs-example {
  23           text-align: center;
  24         }
  25
  26         .lead {
  27           margin-bottom: 2em;
  28         }
  29
  30         .page-header {
  31           border-bottom: none;
  32         }
  33
  34     </style>
  35   </head>
  36   <body>
  37
  38     <div class="navbar navbar-default navbar-fixed-top">
  39       <div class="container">
  40         <div class="navbar-header">
  41           <a href="../" class="navbar-brand">Bootswatch</a>
  42           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
  43             <span class="icon-bar"></span>
  44             <span class="icon-bar"></span>
  45             <span class="icon-bar"></span>
  46           </button>
  47         </div>
  48         <div class="navbar-collapse collapse" id="navbar-main">
  49           <ul class="nav navbar-nav">
  50             <li class="dropdown active">
  51               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
  52             </li>
  53             <li class="dropdown">
  54               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
  55             </li>
  56             <li>
  57               <a href="../help/">Help</a>
  58             </li>
  59             <li>
  60               <a href="http://news.bootswatch.com">Blog</a>
  61             </li>
  62           </ul>
  63
  64         </div>
  65       </div>
  66     </div>
  67
  68
  69
  70     <div class="container">
  71
  72       <div class="row">
  73         <div class="col-12">
  74           <div class="page-header">
  75             <h1 id="theme">Amelia</h1>
  76             <p id="description" class="lead">Sweet and cheery</p>
  77             <div class="bs-example">
  78               <button type="button" class="btn btn-default">Default</button>
  79               <button type="button" class="btn btn-primary">Primary</button>
  80               <button type="button" class="btn btn-success">Success</button>
  81               <button type="button" class="btn btn-info">Info</button>
  82               <button type="button" class="btn btn-warning">Warning</button>
  83               <button type="button" class="btn btn-danger">Danger</button>
  84             </div>
  85           </div>
  86         </div>
  87       </div>
  88
  89     </div>
  90
  91
  92     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  93     <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
  94     <script>
  95
  96       $.get("http://api.bootswatch.com/3/", function (data) {
  97           var menuTemplate = "<div id='menu' style='position:fixed;top:10px;right:10px;'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>",
  98               menuHTML = Mustache.render(menuTemplate, data.themes);
  99
 100           $('body').append(menuHTML);
 101
 102           $('#menu').change(function(){
 103             var theme = $('#menu :selected');
 104             $('#theme').text(theme.text());
 105             $('#description').text(theme.data('description'));
 106             theme = '../' + theme.text().toLowerCase() + '/bootstrap.min.css';
 107             $('#stylesheet').attr('href', theme);
 108           });
 109       }, "json");
 110
 111     </script>
 112   </body>
 113 </html>