######Bootstrap is awesome! But for stylin' awesomeness in seconds Just add Bootswatch! Play with the API demo in this Gist here
☕ & ❤
PS. You can preview any gist with an ’index.html’ file by changing the URL.
https://gist.github.com/roachhd/0821324fb499eac293c7
https://bl.ocks.ork/roachhd/0821324fb499eac293c7
gist.github.com is changed to bl.ocks.org
bye
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Bootswatch API Demo</title> | |
| <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> | |
| <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> | |
| <style rel="stylesheet" href="style.css"> | |
| <script src="script.js</script> | |
| </head> | |
| <body> | |
| <h1>Bootstrap</h1> | |
| <div class="alert alert-info"> | |
| <h4>Alert!</h4> | |
| <p>This is a demo of the Bootswatch API.</p> | |
| </div> | |
| <select></select> | |
| </body> | |
| </html> |
| $.get("http://api.bootswatch.com/3/", function (data) { | |
| var themes = data.themes; | |
| var select = $("select"); | |
| select.show(); | |
| $(".alert").toggleClass("alert-info alert-success"); | |
| $(".alert h4").text("Success!"); | |
| themes.forEach(function(value, index){ | |
| select.append($("<option />") | |
| .val(index) | |
| .text(value.name)); | |
| }); | |
| select.change(function(){ | |
| var theme = themes[$(this).val()]; | |
| $("link").attr("href", theme.css); | |
| $("h1").text(theme.name); | |
| }).change(); | |
| }, "json").fail(function(){ | |
| $(".alert").toggleClass("alert-info alert-danger"); | |
| $(".alert h4").text("Failure!"); | |
| }); |
| body { | |
| padding: 2em; | |
| text-align: center; | |
| } | |
| h1 { | |
| margin-bottom: 1em; | |
| } | |
| select { | |
| display: none; | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| } |