2014-08-18 18:25:33 +04:00
<!DOCTYPE html>
2015-11-25 03:04:20 +03:00
2014-08-18 18:25:33 +04:00
< html >
2014-12-02 11:20:20 +03:00
2015-11-06 18:28:16 +03:00
< head >
< title > Material Design for Bootstrap< / title >
2015-11-07 03:02:34 +03:00
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
2017-08-11 18:19:18 +03:00
< meta name = "theme-color" content = "#009587" >
2015-11-06 18:28:16 +03:00
<!-- Mobile support -->
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2015-11-25 01:49:15 +03:00
<!-- Material Design fonts -->
2015-11-24 02:43:41 +03:00
< link rel = "stylesheet" href = "http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type = "text/css" >
< link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" >
2015-11-25 01:49:15 +03:00
<!-- Bootstrap -->
2015-12-08 02:20:32 +03:00
< link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel = "stylesheet" >
2015-11-06 18:28:16 +03:00
2015-11-25 01:49:15 +03:00
<!-- Bootstrap Material Design -->
2015-11-22 19:44:56 +03:00
< link href = "dist/css/bootstrap-material-design.css" rel = "stylesheet" >
2015-11-06 18:28:16 +03:00
< link href = "dist/css/ripples.min.css" rel = "stylesheet" >
<!-- Dropdown.js -->
< link href = "//cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.css" rel = "stylesheet" >
<!-- Page style -->
2015-11-06 19:30:05 +03:00
< link href = "index.css" rel = "stylesheet" >
2015-11-06 18:28:16 +03:00
<!-- jQuery -->
< script src = "//code.jquery.com/jquery-1.10.2.min.js" > < / script >
< / head >
< body >
2016-06-06 17:42:19 +03:00
< a href = "https://github.com/FezVrasta/bootstrap-material-design" style = "position: absolute; top: 0; left: 0; border: 0; z-index: 10;" > < img src = "https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt = "Fork me on GitHub" data-canonical-src = "https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" > < / a >
2015-11-06 18:28:16 +03:00
< div class = "header-panel shadow-z-2" >
< div class = "container-fluid" >
< div class = "row" >
< div class = "col-xs-3" >
< h1 > Paper Elements< / h1 >
< / div >
< / div >
< / div >
< / div >
< div class = "container-fluid main" >
< div class = "row" >
< nav class = "col-xs-3 menu" >
< ul >
< li class = "active withripple" data-target = "#about" > Material Design for Bootstrap< / li >
< li class = "withripple" data-target = "#getting-started" > Getting Started< / li >
< li > < a href = "bootstrap-elements.html" target = "_blank" > Bootstrap elements < i class = "mdi-action-open-in-new" > < / i > < / a >
< / li >
< li class = "withripple" data-target = "#checkbox" > Checkbox< / li >
< li class = "withripple" data-target = "#radio-button" > Radio Button< / li >
< li class = "withripple" data-target = "#toggle-button" > Toggle Button< / li >
< li class = "withripple" data-target = "#input" > Input< / li >
2015-11-17 19:18:37 +03:00
< li class = "withripple" data-target = "#fileinput" > File Input< / li >
2015-11-06 18:28:16 +03:00
< li class = "withripple" data-target = "#navbar" > Navbar< / li >
< li class = "withripple" data-target = "#progress-bar" > Progress Bar< / li >
< li class = "withripple" data-target = "#slider" > Slider< / li >
< li class = "withripple" data-target = "#dropdown" > Dropdown (Work in progress)< / li >
< li class = "withripple" data-target = "#dropdown-menu" > Dropdown Menu< / li >
< li class = "withripple" data-target = "#dialog" > Dialog< / li >
< / ul >
< / nav >
< div class = "pages col-xs-9" >
2015-11-07 03:02:34 +03:00
< div class = "row" >
< div class = "col-xs-10" >
< div class = "well page active" id = "about" >
< h1 class = "header" > Material Design for Bootstrap< / h1 >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< p > Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new
< a href = "http://www.google.com/design/spec/material-design/" target = "_blank" > Google Material Design< / a > in your favorite front-end framework.
< / p >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< p > If you like this project you can support me by donating something on Gratipay, starring this repository, or
< a href = "https://github.com/FezVrasta/bootstrap-material-design/issues" > reporting bugs and ideas< / a > .< / p >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< p > Read more about Material Design for Bootstrap at the
< a href = "https://github.com/FezVrasta/bootstrap-material-design" > Github page< / a > .< / p >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< br >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< p > If you want support the development of this project please consider donate something:< / p >
< a href = "https://www.gratipay.com/FezVrasta/" target = "_blank" class = "btn btn-primary" > Donate with Gratipay< / a >
< form action = "https://www.paypal.com/cgi-bin/webscr" id = "paypal" method = "post" target = "_blank" style = "display: inline-block;" >
< input type = "hidden" name = "cmd" value = "_s-xclick" >
< div class = "btn btn-primary" >
< select name = "hosted_button_id" title = "I can't accept less than 5 euro due to accounting troubles" >
< option value = "DAAK965W2DKYE" > € 5,00< / option >
< option value = "28PH77JK5QWFE" > € 10,00< / option >
< option value = "6B6TJAJ2R99HS" > € 15,00< / option >
< option value = "GJCEKCQFMBVHA" > € 20,00< / option >
< option value = "U7QXM95C8RJ9W" > € 25,00< / option >
< option value = "55S3VBB3U4NAS" > € 50,00< / option >
< / select >
< input type = "submit" value = "DONATE WITH PAYPAL" name = "submit" >
< / div >
< / form >
< p > Thanks to all the people that donate me weekly on Gratipay and all the ones which has donated on PayPal! You are great guys!< / p >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< br >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< p > Would you like to use this theme for commercial projects? Visit
< a href = "http://www.mywebexpression.com" > MyWebExpression< / a > and contact me using the form on the bottom of the page. Thanks!
< / p >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< br >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< div class = "cbwrapper" >
< script async type = "text/javascript" src = "//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id = "_carbonads_js" > < / script >
< div id = "fakecb" > Seems like you are using AdBlock to hide banners... Carbon ADS are quite nice and don't take much space, you may consider disabling it on this website.< br > This is the only AD on the entire website.< br > < br > Thanks!
< / div >
< / div >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< br >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< p > You can get this theme downloading the source from Bower:< / p >
< pre > < code > bower install bootstrap-material-design< / code > < / pre >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< / div >
< div class = "well page" id = "getting-started" >
< h1 class = "header" > Getting Started< / h1 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< h3 > Download< / h3 >
< hr >
< h4 > Install with NPM - Coming Soon< / h4 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< p > You can also install and manage Material Bootstrap using NPM< / p >
< pre > < code > npm install< / code > < / pre >
< h4 > Install with Bower< / h4 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< p > You can also install and manage Material Bootstrap using Bower< / p >
< pre > < code > bower install bootstrap-material-design< / code > < / pre >
< br / >
< h3 > What's included< / h3 >
< hr >
2015-11-30 22:54:37 +03:00
< p > Material Design for Bootstrap is downloadable in a two forms. First, as less/sass source files. Second, as compiled .css files.< / p >
2015-11-07 03:02:34 +03:00
< div class = "panel panel-info" >
< div class = "panel-heading" >
< h3 class = "panel-title" > Required Frameworks< / h3 >
< / div >
< div class = "panel-body" >
< div class = "list-group" >
< div class = "list-group-item" >
< div class = "row-action-primary" >
< i class = "mdi-action-settings" > < / i >
< / div >
< div class = "row-content" >
< h4 class = "list-group-item-heading" > Bootstrap v3.0+< / h4 >
< p class = "list-group-item-text" > This theme extends, styles, and modifies Bootstrap's elements and styles. Without Bootstrap this project will not display correctly. To install Bootstrap please go to
< a href = "http://getbootstrap.com/getting-started/" > Get Bootstrap< / a > < / p >
< / div >
< / div >
< div class = "list-group-separator" > < / div >
< div class = "list-group-item" >
< div class = "row-action-primary" >
< i class = "mdi-action-settings" > < / i >
< / div >
< div class = "row-content" >
< h4 class = "list-group-item-heading" > jQuery 1.9.1+< / h4 >
< p class = "list-group-item-text" > All JavaScript plugins require jQuery to be included.< / p >
< / div >
2015-11-06 18:28:16 +03:00
< / div >
< / div >
< / div >
< / div >
2015-11-30 22:54:37 +03:00
< p > If downloading instead of using Bower, once downloaded, unzip the compressed folder to see the structure of (the compiled) Material Design for Bootstrap. You'll see something like this:< / p >
2015-11-07 03:02:34 +03:00
<!-- This code must be aligned this way to render correctly -->
2015-11-06 18:28:16 +03:00
< pre > < code class = "language-bash" data-lang = "bash" > Material/
├── css/
2015-11-30 22:54:37 +03:00
│ ├── bootstrap-material-design.css
│ ├── bootstrap-material-design.css.map
│ ├── bootstrap-material-design.min.css
│ ├── bootstrap-material-design.min.css.map
2015-11-06 18:28:16 +03:00
│ ├── ripples.css.map
│ ├── ripples.min.css
│ ├── ripples.min.css.map
├── js/
│ ├── material.js
│ ├── material.min.js
│ ├── material.min.js.map
│ ├── ripples.js
│ ├── ripples.min.js
│ ├── ripples.min.js.map
< / code >
< / pre >
2015-11-07 03:02:34 +03:00
< p > Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.< / p >
< br / >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< p > Once copied you need to initialize the material javascript by adding the following javascript to your site,< / p >
< pre > < code > $.material.init()< / code > < / pre >
2015-11-06 18:28:16 +03:00
< / div >
2015-11-21 22:17:53 +03:00
2015-11-07 03:02:34 +03:00
< div class = "well page" id = "checkbox" >
2015-11-21 22:17:53 +03:00
< h1 class = "header" > Checkbox< / h1 >
2015-11-07 03:02:34 +03:00
2015-11-21 22:17:53 +03:00
< h2 > Default < small > inside a < code > .form-group< / code > < / small > < / h2 >
2015-11-20 19:17:12 +03:00
< div class = "form-group" >
2015-11-07 03:02:34 +03:00
< div class = "checkbox" >
< label >
< input type = "checkbox" > Notifications
< / label >
< / div >
2015-11-20 19:17:12 +03:00
< p class = "help-block" > Notify me about updates to apps or games that I've downloaded< / p >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-20 19:17:12 +03:00
< div class = "form-group" >
2015-11-07 03:02:34 +03:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked > Auto-updates
< / label >
< / div >
2015-11-20 19:17:12 +03:00
< p class = "help-block" > Auto-update apps over wifi only< / p >
2015-11-06 18:28:16 +03:00
< / div >
2014-12-03 12:53:32 +03:00
2015-12-09 20:00:06 +03:00
< h2 > Horizontal form with column label variations< / h2 >
2015-11-20 19:17:12 +03:00
< form class = "form-horizontal" >
< div class = "form-group" >
< label class = "col-sm-2" for = "ch1" > Touch sounds< / label >
< div class = "col-sm-10" >
2015-12-09 20:00:06 +03:00
< div class = "checkbox" >
2015-11-20 19:17:12 +03:00
< label >
< input id = "ch1" type = "checkbox" checked >
< / label >
< / div >
< p class = "help-block" > This shows the generic label variant.< / p >
< / div >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-20 19:17:12 +03:00
< div class = "form-group" >
< label class = "col-sm-2 control-label" for = "ch3" > Vibrate on touch< / label >
< div class = "col-sm-10" >
2015-12-09 20:00:06 +03:00
< div class = "checkbox" >
2015-11-20 19:17:12 +03:00
< label >
< input id = "ch3" type = "checkbox" >
< / label >
< / div >
< p class = "help-block" > This shows the < code > control-label< / code > variant.< / p >
< / div >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-20 19:17:12 +03:00
< / form >
2015-11-21 22:17:53 +03:00
< h2 > Default < small > outside a < code > .form-group< / code > < / small > < / h2 >
< div class = "checkbox" >
< label >
< input type = "checkbox" > Notifications
< / label >
< / div >
< p class = "help-block" > Without a < code > .form-group< / code > , < code > .help-block< / code > always shows< / p >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked > Auto-updates
< / label >
< / div >
< p class = "help-block" > Without a < code > .form-group< / code > , < code > .help-block< / code > sizing is the same as the < code > label< / code > < / p >
2015-11-06 18:28:16 +03:00
< / div >
2015-11-07 03:02:34 +03:00
< div class = "well page" id = "radio-button" >
2015-11-21 22:17:53 +03:00
< h1 class = "header" > Radio buttons< / h1 >
2014-12-01 17:43:41 +03:00
2015-11-21 22:17:53 +03:00
< h2 > Default < small > outside a < code > .form-group< / code > < / small > < / h2 >
2015-11-25 03:04:20 +03:00
< div class = "radio" >
< label >
< input type = "radio" name = "sample1" value = "option1" checked = "" >
Always
< / label >
< / div >
< div class = "radio" >
< label >
< input type = "radio" name = "sample1" value = "option1" >
Only when plugged in
< / label >
< / div >
2015-11-21 22:17:53 +03:00
2015-12-09 19:29:44 +03:00
< h2 > Default inside a < small > < code > .form-group< / code > < / small > < / h2 >
2015-11-21 22:17:53 +03:00
< div class = "form-group" >
2015-12-09 19:29:44 +03:00
< div class = "radio" >
2015-11-21 22:17:53 +03:00
< label >
< input type = "radio" name = "sample1" value = "option1" checked = "" >
Always
< / label >
< / div >
2015-12-09 19:29:44 +03:00
< div class = "radio" >
2015-11-07 03:02:34 +03:00
< label >
< input type = "radio" name = "sample1" value = "option1" >
2015-11-21 22:17:53 +03:00
Only when plugged in
2015-11-07 03:02:34 +03:00
< / label >
< / div >
< / div >
< / div >
< div class = "well page" id = "toggle-button" >
< h1 class = "header" > Toggle Button< / h1 >
< div class = "togglebutton" >
2015-11-06 18:28:16 +03:00
< label >
2015-11-07 03:02:34 +03:00
Wi-Fi
< input type = "checkbox" checked >
2015-11-06 18:28:16 +03:00
< / label >
< / div >
2015-11-07 03:02:34 +03:00
< div class = "togglebutton" >
2015-11-06 18:28:16 +03:00
< label >
2015-11-07 03:02:34 +03:00
Bluetooth
< input type = "checkbox" >
2015-11-06 18:28:16 +03:00
< / label >
< / div >
< / div >
2015-11-07 03:02:34 +03:00
< div class = "well page" id = "input" >
2015-11-10 19:26:00 +03:00
< h1 class = "header" > Input
< small > < a href = "http://www.google.com/design/spec/components/text-fields.html" > specification< / a > < / small >
< / h1 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< div class = "inputs" >
2015-11-18 00:26:19 +03:00
< h2 > Input label styles
2015-11-07 03:02:34 +03:00
< small > default sizing< / small >
< / h2 >
2014-12-01 17:43:41 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group label-static" >
< label for = "i2" class = "control-label" > label-static< / label >
< input type = "email" class = "form-control" id = "i2" placeholder = "placeholder attribute" >
2015-11-20 19:17:12 +03:00
2015-11-11 19:36:57 +03:00
< p class = "help-block" > This is a hint as a < code > p.help-block.hint< / code > < / p >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-06 23:53:48 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group label-floating" >
< label for = "i5" class = "control-label" > label-floating< / label >
2015-11-07 03:02:34 +03:00
< input type = "email" class = "form-control" id = "i5" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > This is a hint as a < code > span.help-block.hint< / code > < / span >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-06 23:53:48 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group label-placeholder" >
< label for = "i5p" class = "control-label" > label-placeholder< / label >
< input type = "email" class = "form-control" id = "i5p" >
< span class = "help-block" > This is a hint as a < code > span.help-block.hint< / code > < / span >
< / div >
< form >
< div class = "form-group" >
2015-11-22 00:19:40 +03:00
< label for = "i5ps" class = "control-label col-sm-2" > Column label< / label >
2015-11-20 19:17:12 +03:00
2015-11-22 00:19:40 +03:00
< div class = "col-sm-10" >
2015-11-18 00:26:19 +03:00
< input type = "email" class = "form-control" id = "i5ps" placeholder = "placeholder attribute" >
< span class = "help-block" > This is a hint as a < code > span.help-block.hint< / code > < / span >
< / div >
< / div >
< / form >
2015-11-18 23:43:36 +03:00
< br / >
< br / >
2015-11-18 00:26:19 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Input - floating labels
< small > form-group sizing< / small >
< / h2 >
2015-11-18 00:26:19 +03:00
< div class = "form-group form-group-sm label-floating" >
< label for = "i4" class = "control-label" > Email address form-group-sm< / label >
2015-11-11 00:32:06 +03:00
< input type = "email" class = "form-control" id = "i4" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-11 00:32:06 +03:00
< / div >
2015-11-18 00:26:19 +03:00
< div class = "form-group label-floating" >
< label for = "i5i" class = "control-label" > Email address default size< / label >
2015-11-11 00:32:06 +03:00
< input type = "email" class = "form-control" id = "i5i" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-06 23:53:48 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group form-group-lg label-floating" >
< label for = "i6" class = "control-label" > Email address form-group-lg< / label >
2015-11-07 03:02:34 +03:00
< input type = "email" class = "form-control" id = "i6" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-07 01:46:05 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Input - static labels
< small > form-group sizing< / small >
< / h2 >
2015-11-07 01:46:05 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group form-group-sm label-static" >
2015-11-11 00:32:06 +03:00
< label for = "si4" class = "control-label" > Email address form-group-sm< / label >
< input type = "email" class = "form-control" id = "si4" placeholder = "Placeholder" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-11 00:32:06 +03:00
< / div >
2015-11-07 02:41:39 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group label-static" >
2015-11-11 00:32:06 +03:00
< label for = "si5i" class = "control-label" > Email address default size< / label >
< input type = "email" class = "form-control" id = "si5i" placeholder = "Placeholder" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-07 01:46:05 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group form-group-lg label-static" >
2015-11-11 00:32:06 +03:00
< label for = "si6" class = "control-label" > Email address form-group-lg< / label >
< input type = "email" class = "form-control" id = "si6" placeholder = "Placeholder" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-11 00:32:06 +03:00
< / div >
2015-11-07 02:41:39 +03:00
2015-11-11 18:29:35 +03:00
< h2 > Input - no labels
< small > form-group sizing< / small >
< / h2 >
< div class = "form-group form-group-sm" >
2015-11-18 00:26:19 +03:00
< label for = "si4n" class = "control-label" > Email address form-group-sm< / label >
< input type = "email" class = "form-control" id = "si4n" placeholder = "Placeholder" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-11 18:29:35 +03:00
< / div >
< div class = "form-group" >
2015-11-18 00:26:19 +03:00
< label for = "si5in" class = "control-label" > Email address default size< / label >
< input type = "email" class = "form-control" id = "si5in" placeholder = "Placeholder" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-11 18:29:35 +03:00
< / div >
< div class = "form-group form-group-lg" >
2015-11-18 00:26:19 +03:00
< label for = "si6n" class = "control-label" > Email address form-group-lg< / label >
< input type = "email" class = "form-control" id = "si6n" placeholder = "Placeholder" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-11 18:29:35 +03:00
< / div >
2015-11-11 00:32:06 +03:00
< h2 > Input -
< small > floating label feedback variants< / small >
< / h2 >
2015-11-18 00:26:19 +03:00
< div class = "form-group has-success label-floating" >
< label for = "f1" class = "control-label" > Email address has-success< / label >
2015-11-11 00:32:06 +03:00
< input type = "email" class = "form-control" id = "f1" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-11 00:32:06 +03:00
< / div >
2015-11-18 00:26:19 +03:00
< div class = "form-group has-warning label-floating" >
< label for = "f2" class = "control-label" > Email address has-warning< / label >
2015-11-11 00:32:06 +03:00
< input type = "email" class = "form-control" id = "f2" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-07 01:46:05 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group has-error label-floating" >
< label for = "f3" class = "control-label" > Email address has-error< / label >
2015-11-11 00:32:06 +03:00
< input type = "email" class = "form-control" id = "f3" >
2015-11-11 19:36:57 +03:00
< span class = "help-block" > Please enter a valid email address< / span >
2015-11-11 00:32:06 +03:00
< / div >
2015-11-07 03:02:34 +03:00
< h2 > Input - Legacy< / h2 >
<!-- Exercise backwards compatibility without form - group -->
< input type = "text" class = "form-control floating-label" placeholder = "Legacy floating label as placeholder attribute" data-hint = "This is a hint using a legacy <code>data-hint</code> attribute on the input" >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Textarea< / h2 >
2015-11-06 19:30:05 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group label-floating" >
< label for = "t1" class = "control-label" > Floating label< / label >
2015-11-11 18:37:36 +03:00
< textarea id = "t1" class = "form-control" > < / textarea >
2015-11-07 03:02:34 +03:00
< / div >
< div class = "form-group" >
2015-11-11 18:37:36 +03:00
< textarea class = "form-control" placeholder = "placeholder without label" > < / textarea >
< / div >
2015-11-18 00:26:19 +03:00
<!-- legacy markup -->
< textarea class = "form-control floating-label" placeholder = "legacy floating label as placeholder" > < / textarea >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Validation< / h2 >
2015-11-06 19:30:05 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group label-floating" >
2015-11-18 23:53:05 +03:00
< label for = "111" class = "control-label" > email< / label >
2015-11-18 00:26:19 +03:00
< input type = "email" class = "form-control" id = "111" >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-18 00:26:19 +03:00
< div class = "form-group label-floating" >
2015-11-18 23:53:05 +03:00
< label for = "222" class = "control-label" > number< / label >
2015-11-18 00:26:19 +03:00
< input type = "number" class = "form-control" id = "222" >
2015-11-07 03:02:34 +03:00
< / div >
2015-03-09 22:56:57 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Disabled< / h2 >
2015-11-06 19:30:05 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group label-floating" >
2015-11-18 23:53:05 +03:00
< label for = "333" class = "control-label" > email< / label >
2015-11-18 00:26:19 +03:00
< input disabled type = "text" class = "form-control" id = "333" >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-18 00:26:19 +03:00
< div class = "form-group label-floating" >
2015-11-18 23:53:05 +03:00
< label for = "444" class = "control-label" > number< / label >
2015-11-18 00:26:19 +03:00
< input disabled type = "text" class = "form-control" id = "444" >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Hints< / h2 >
2015-11-06 19:30:05 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group label-floating" >
2015-11-18 23:53:05 +03:00
< label for = "555" class = "control-label" > label< / label >
2015-11-18 00:26:19 +03:00
< input type = "text" class = "form-control" id = "555" >
2015-11-20 19:17:12 +03:00
2015-11-18 00:26:19 +03:00
< p class = "help-block" > Some helpful hint< / p >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-18 00:26:19 +03:00
< div class = "form-group label-floating" >
2015-11-18 23:53:05 +03:00
< label for = "676" class = "control-label" > label< / label >
2015-11-18 00:26:19 +03:00
< input type = "email" class = "form-control" id = "676" >
2015-11-20 19:17:12 +03:00
2015-11-18 00:26:19 +03:00
< p class = "help-block" > A valid email contains an @ character< / p >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Styling< / h2 >
2015-11-06 18:28:16 +03:00
2015-11-18 00:26:19 +03:00
< div class = "form-group has-success" >
< input type = "text" class = "form-control" placeholder = "placeholder" >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-18 00:26:19 +03:00
< div class = "form-group has-success label-floating" >
2015-11-18 23:53:05 +03:00
< label for = "777" class = "control-label" > floating label< / label >
2015-11-18 00:26:19 +03:00
< input type = "text" class = "form-control" id = "777" >
2015-11-07 03:02:34 +03:00
< / div >
2014-08-18 18:25:33 +04:00
< / div >
2015-11-06 18:28:16 +03:00
< / div >
2015-11-17 19:18:37 +03:00
< div class = "well page" id = "fileinput" >
< h1 class = "header" > File Input< / h1 >
< div class = "form-group" >
< label class = "control-label" for = "inputFile2" > Static label< / label >
< input type = "file" id = "inputFile2" multiple >
< input type = "text" readonly class = "form-control" placeholder = "Browse2..." >
< / div >
< div class = "form-group" >
<!-- <label class="control - label" for="inputFile3">File</label> -->
< input type = "file" id = "inputFile3" multiple >
< input type = "text" readonly class = "form-control" placeholder = "Placeholder only..." >
< / div >
< div class = "form-group" >
< input type = "file" id = "inputFile4" multiple >
< div class = "input-group" >
< input type = "text" readonly class = "form-control" placeholder = "Placeholder w/input-group..." >
2015-11-17 19:28:06 +03:00
< span class = "input-group-btn input-group-sm" >
2015-11-19 01:43:19 +03:00
< button type = "button" class = "btn btn-fab btn-fab-mini" >
2015-11-17 19:18:37 +03:00
< i class = "mdi-editor-attach-file" > < / i >
< / button >
< / span >
< / div >
< / div >
< / div >
2015-11-07 03:02:34 +03:00
< div class = "well page" id = "navbar" >
< h1 class = "header" > Navbar< / h1 >
< div class = "navbar navbar-default" >
< div class = "container-fluid" >
< 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 = "javascript:void(0)" > Brand< / a >
2015-11-06 19:30:05 +03:00
< / div >
2015-11-07 03:02:34 +03:00
< div class = "navbar-collapse collapse navbar-responsive-collapse" >
< ul class = "nav navbar-nav" >
< li class = "active" > < a href = "javascript:void(0)" > Active< / a > < / li >
< li > < a href = "javascript:void(0)" > Link< / a > < / li >
< li class = "dropdown" >
< a href = "http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html" data-target = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Dropdown
< b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li > < a href = "javascript:void(0)" > Action< / a > < / li >
< li > < a href = "javascript:void(0)" > Another action< / a > < / li >
< li > < a href = "javascript:void(0)" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li class = "dropdown-header" > Dropdown header< / li >
< li > < a href = "javascript:void(0)" > Separated link< / a > < / li >
< li > < a href = "javascript:void(0)" > One more separated link< / a > < / li >
< / ul >
< / li >
2014-12-01 17:43:41 +03:00
< / ul >
2015-11-07 03:02:34 +03:00
< form class = "navbar-form navbar-left" >
< div class = "form-group" >
2015-11-22 00:19:40 +03:00
< input type = "text" class = "form-control col-sm-8" placeholder = "Search" >
2015-11-07 03:02:34 +03:00
< / div >
< / form >
< ul class = "nav navbar-nav navbar-right" >
< li > < a href = "javascript:void(0)" > Link< / a > < / li >
< li class = "dropdown" >
< a href = "http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html" data-target = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Dropdown
< b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li > < a href = "javascript:void(0)" > Action< / a > < / li >
< li > < a href = "javascript:void(0)" > Another action< / a > < / li >
< li > < a href = "javascript:void(0)" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "javascript:void(0)" > Separated link< / a > < / li >
< / ul >
< / li >
< / ul >
< / div >
< / div >
2015-11-06 18:28:16 +03:00
< / div >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< div class = "navbar navbar-warning" >
< div class = "container-fluid" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-warning-collapse" >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "navbar-brand" href = "javascript:void(0)" > Brand< / a >
2015-11-06 19:30:05 +03:00
< / div >
2015-11-07 03:02:34 +03:00
< div class = "navbar-collapse collapse navbar-warning-collapse" >
< ul class = "nav navbar-nav" >
< li class = "active" > < a href = "javascript:void(0)" > Active< / a > < / li >
< li > < a href = "javascript:void(0)" > Link< / a > < / li >
< li class = "dropdown" >
< a href = "index.html" data-target = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Dropdown
< b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li > < a href = "javascript:void(0)" > Action< / a > < / li >
< li > < a href = "javascript:void(0)" > Another action< / a > < / li >
< li > < a href = "javascript:void(0)" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li class = "dropdown-header" > Dropdown header< / li >
< li > < a href = "javascript:void(0)" > Separated link< / a > < / li >
< li > < a href = "javascript:void(0)" > One more separated link< / a > < / li >
< / ul >
< / li >
< / ul >
< form class = "navbar-form navbar-left" >
< div class = "form-group" >
2015-11-22 00:19:40 +03:00
< input type = "text" class = "form-control col-sm-8" placeholder = "Search" >
2015-11-07 03:02:34 +03:00
< / div >
< / form >
< ul class = "nav navbar-nav navbar-right" >
< li > < a href = "javascript:void(0)" > Link< / a > < / li >
< li class = "dropdown" >
< a href = "index.html" data-target = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Dropdown
< b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li > < a href = "javascript:void(0)" > Action< / a > < / li >
< li > < a href = "javascript:void(0)" > Another action< / a > < / li >
< li > < a href = "javascript:void(0)" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "javascript:void(0)" > Separated link< / a > < / li >
< / ul >
< / li >
2014-12-01 17:43:41 +03:00
< / ul >
2015-11-07 03:02:34 +03:00
< / div >
< / div >
2015-11-06 18:28:16 +03:00
< / div >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< div class = "navbar navbar-inverse" >
< div class = "container-fluid" >
< 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 = "javascript:void(0)" > Brand< / a >
2015-11-06 19:30:05 +03:00
< / div >
2015-11-07 03:02:34 +03:00
< div class = "navbar-collapse collapse navbar-inverse-collapse" >
< ul class = "nav navbar-nav" >
< li class = "active" > < a href = "javascript:void(0)" > Active< / a > < / li >
< li > < a href = "javascript:void(0)" > Link< / a > < / li >
< li class = "dropdown" >
< a href = "index.html" data-target = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Dropdown
< b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li > < a href = "javascript:void(0)" > Action< / a > < / li >
< li > < a href = "javascript:void(0)" > Another action< / a > < / li >
< li > < a href = "javascript:void(0)" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li class = "dropdown-header" > Dropdown header< / li >
< li > < a href = "javascript:void(0)" > Separated link< / a > < / li >
< li > < a href = "javascript:void(0)" > One more separated link< / a > < / li >
< / ul >
< / li >
< / ul >
< form class = "navbar-form navbar-left" >
< div class = "form-group" >
2015-11-22 00:19:40 +03:00
< input type = "text" class = "form-control col-sm-8" placeholder = "Search" >
2015-11-07 03:02:34 +03:00
< / div >
< / form >
< ul class = "nav navbar-nav navbar-right" >
< li > < a href = "javascript:void(0)" > Link< / a > < / li >
< li class = "dropdown" >
< a href = "index.html" data-target = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Dropdown
< b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li > < a href = "javascript:void(0)" > Action< / a > < / li >
< li > < a href = "javascript:void(0)" > Another action< / a > < / li >
< li > < a href = "javascript:void(0)" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "javascript:void(0)" > Separated link< / a > < / li >
< / ul >
< / li >
2014-12-01 17:43:41 +03:00
< / ul >
2015-11-07 03:02:34 +03:00
< / div >
< / div >
2015-11-06 18:28:16 +03:00
< / div >
2014-08-18 18:25:33 +04:00
2016-03-25 19:06:20 +03:00
< div class = "navbar navbar-info" >
2015-11-07 03:02:34 +03:00
< div class = "container-fluid" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-material-light-blue-collapse" >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "navbar-brand" href = "javascript:void(0)" > Brand< / a >
2015-11-06 19:30:05 +03:00
< / div >
2015-11-07 03:02:34 +03:00
< div class = "navbar-collapse collapse navbar-material-light-blue-collapse" >
< ul class = "nav navbar-nav" >
< li class = "active" > < a href = "javascript:void(0)" > Active< / a > < / li >
< li > < a href = "javascript:void(0)" > Link< / a > < / li >
< li class = "dropdown" >
< a href = "index.html" data-target = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Dropdown
< b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li > < a href = "javascript:void(0)" > Action< / a > < / li >
< li > < a href = "javascript:void(0)" > Another action< / a > < / li >
< li > < a href = "javascript:void(0)" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li class = "dropdown-header" > Dropdown header< / li >
< li > < a href = "javascript:void(0)" > Separated link< / a > < / li >
< li > < a href = "javascript:void(0)" > One more separated link< / a > < / li >
< / ul >
< / li >
2014-12-01 17:43:41 +03:00
< / ul >
2015-11-07 03:02:34 +03:00
< form class = "navbar-form navbar-left" >
< div class = "form-group" >
2015-11-22 00:19:40 +03:00
< input type = "text" class = "form-control col-sm-8" placeholder = "Search" >
2015-11-07 03:02:34 +03:00
< / div >
< / form >
< ul class = "nav navbar-nav navbar-right" >
< li > < a href = "javascript:void(0)" > Link< / a > < / li >
< li class = "dropdown" >
< a href = "index.html" data-target = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Dropdown
< b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li > < a href = "javascript:void(0)" > Action< / a > < / li >
< li > < a href = "javascript:void(0)" > Another action< / a > < / li >
< li > < a href = "javascript:void(0)" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "javascript:void(0)" > Separated link< / a > < / li >
< / ul >
< / li >
< / ul >
< / div >
< / div >
2014-08-18 18:25:33 +04:00
< / div >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< / div >
< div class = "well page" id = "progress-bar" >
< h1 class = "header" > Progress Bar< / h1 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Basic< / h2 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< div class = "progress" >
< div class = "progress-bar" style = "width: 60%;" > < / div >
< / div >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Contextual alternatives< / h2 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< div class = "progress" >
< div class = "progress-bar progress-bar-info" style = "width: 20%" > < / div >
< / div >
< div class = "progress" >
< div class = "progress-bar progress-bar-success" style = "width: 40%" > < / div >
< / div >
< div class = "progress" >
< div class = "progress-bar progress-bar-warning" style = "width: 60%" > < / div >
< / div >
< div class = "progress" >
< div class = "progress-bar progress-bar-danger" style = "width: 80%" > < / div >
< / div >
2014-08-18 18:25:33 +04:00
2015-11-07 03:02:34 +03:00
< h2 > Striped< / h2 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< div class = "progress progress-striped" >
< div class = "progress-bar progress-bar-info" style = "width: 20%" > < / div >
< / div >
< div class = "progress progress-striped" >
< div class = "progress-bar progress-bar-success" style = "width: 40%" > < / div >
< / div >
< div class = "progress progress-striped" >
< div class = "progress-bar progress-bar-warning" style = "width: 60%" > < / div >
< / div >
< div class = "progress progress-striped" >
< div class = "progress-bar progress-bar-danger" style = "width: 80%" > < / div >
< / div >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Animated< / h2 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< div class = "progress progress-striped active" >
< div class = "progress-bar" style = "width: 45%" > < / div >
< / div >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Stacked< / h2 >
2014-08-18 18:25:33 +04:00
2015-11-07 03:02:34 +03:00
< div class = "progress" >
< div class = "progress-bar progress-bar-success" style = "width: 35%" > < / div >
< div class = "progress-bar progress-bar-warning" style = "width: 20%" > < / div >
< div class = "progress-bar progress-bar-danger" style = "width: 10%" > < / div >
< / div >
2015-11-06 18:28:16 +03:00
< / div >
2015-11-07 03:02:34 +03:00
< div class = "well page" id = "slider" >
< h1 class = "header" > Slider< / h1 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< div class = "sample1" >
< h2 > Music, video, games & other media< / h2 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< div class = "slider shor slider-material-orange" > < / div >
2014-08-18 18:25:33 +04:00
2015-11-07 03:02:34 +03:00
< h2 > Notifications< / h2 >
2014-12-03 12:31:59 +03:00
2015-11-07 03:02:34 +03:00
< div class = "slider shor slider-material-orange" > < / div >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Alarms< / h2 >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< div class = "slider shor slider-material-orange" > < / div >
< / div >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< div class = "sample2" >
< div class = "slider svert" > < / div >
< div class = "slider svert" > < / div >
< div class = "slider svert" > < / div >
< / div >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< p > Sliders are powered by < a href = "http://refreshless.com/nouislider/" target = "_blank" > noUiSlider< / a > < / p >
< / div >
< div class = "well page" id = "dropdown" >
< h1 class = "header" > Dropdown< / h1 >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< h2 > Simple dropdown< / h2 >
< span class = "dropdown" > < i class = "mdi-navigation-menu" > < / i > < / span >
< / div >
< div class = "well page" id = "dropdown-menu" >
< h1 class = "header" > Dropdown< / h1 >
< div class = "sample" >
< div class = "form-group" >
< label for = "s1" > Your favorite pastry< / label >
< select id = "s1" class = "form-control" >
< option value = "Apple fritter" > Apple fritter< / option >
< option value = "Croissant" > Croissant< / option >
< option value = "Donut" > Donut< / option >
< option value = "Financier" > Financier< / option >
< option value = "Jello" > Jello< / option >
< option value = "Madeleine" > Madeleine< / option >
< option value = "Pound cake" > Pound cake< / option >
< option value = "Pretzel" > Pretzel< / option >
< option value = "Sfogliatelle" > Sfogliatelle< / option >
< / select >
< / div >
< br >
2015-11-06 18:28:16 +03:00
2015-11-07 03:02:34 +03:00
< div class = "form-group" >
< label for = "s2" > Your favorite pastry< / label >
< select id = "s2" class = "form-control" disabled >
< option value = "disabled" > Disabled< / option >
< / select >
< / div >
2015-11-06 19:30:05 +03:00
< / div >
2015-11-06 18:28:16 +03:00
< br >
2015-11-07 03:02:34 +03:00
< p > Dropdowns provided by
< a href = "https://github.com/FezVrasta/dropdown.js" target = "_blank" > Dropdown.js< / a > < / p >
2014-12-01 17:43:41 +03:00
2015-11-07 03:02:34 +03:00
< / div >
< div class = "well page" id = "dialog" >
< h1 class = "header" > Dialog< / h1 >
< h2 > Simple Dialog< / h2 >
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#simple-dialog" > Open dialog< / button >
< h2 > Dialog with header and footer< / h2 >
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#complete-dialog" > Open dialog< / button >
2015-11-09 22:32:46 +03:00
<!-- dialog samples are at the end of the body to avoid z - index conflicts -->
2015-11-06 18:28:16 +03:00
< / div >
< / div >
2015-11-07 03:02:34 +03:00
< div class = "col-xs-2" >
< button type = "button" class = "btn btn-fab btn-material-grey-200 opensource" >
2016-03-25 19:03:22 +03:00
< i class = "material-icons" > grade< / i >
2015-11-07 03:02:34 +03:00
< / button >
2015-11-06 18:28:16 +03:00
< / div >
< / div >
< / div >
2015-11-09 22:32:46 +03:00
< / div >
< / div >
<!-- Modals -->
< div id = "simple-dialog" class = "modal fade" tabindex = "-1" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-body" >
< p > E dolore commodo, id anim aute sint cupidatat eu est anim tamen ad possumus,
legam officia firmissimum. Eram deserunt domesticarum, iis ita praetermissum,
nam aliquip quo probant, incididunt et occaecat an nam enim exquisitaque a
nescius velit admodum, non ad cohaerescant, probant o nulla tempor. Aute aut te
quis arbitror ubi ne aliqua consequat aliquip. Ad sunt laborum senserit, de do
quem possumus. Sint tractavissent cupidatat aute possumus ita elit ad cupidatat.
Arbitror ab fabulas o eu e veniam pariatur. Non voluptate comprehenderit ad nisi
id voluptate. Quis distinguantur quibusdam quae mentitum o si minim illum nisi
mandaremus.< / p >
< / div >
< / div >
< / div >
< / div >
< div id = "complete-dialog" class = "modal fade" tabindex = "-1" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × < / button >
< h4 class = "modal-title" > Dialog< / h4 >
< / div >
< div class = "modal-body" >
< p > Fore aut non quem incididunt, varias reprehenderit deserunt quem offendit,
cillum proident ne reprehenderit, quem ad laborum, quo possumus praetermissum,
si ne illustriora, hic appellat coniunctione, do labore aliqua quo probant. In
probant voluptatibus quo mentitum est laboris. Quorum mandaremus graviterque.
Mentitum id velit, dolor aut litteris, ea varias illustriora, ita commodo ita
ingeniis, iis nulla appellat incurreret, aut irure amet summis pariatur ita ubi
quis dolore veniam proident, consequat sed ingeniis.< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-primary" data-dismiss = "modal" > Dismiss< / button >
< / div >
2015-11-07 03:02:34 +03:00
< / div >
2015-11-06 19:30:05 +03:00
< / div >
< / div >
2015-11-06 18:28:16 +03:00
< div id = "source-modal" class = "modal fade" tabindex = "-1" >
< div class = "modal-dialog modal-lg" >
< div class = "modal-content" >
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × < / button >
< h4 class = "modal-title" > Source Code< / h4 >
< / div >
< div class = "modal-body" >
< pre > < / pre >
< / div >
< / div >
< / div >
< / div >
<!-- Open source code -->
< script >
window.page = window.location.hash || "#about";
$(document).ready(function () {
if (window.page != "#about") {
$(".menu").find("li[data-target=" + window.page + "]").trigger("click");
}
});
$(window).on("resize", function () {
$("html, body").height($(window).height());
$(".main, .menu").height($(window).height() - $(".header-panel").outerHeight());
$(".pages").height($(window).height());
}).trigger("resize");
$(".menu li").click(function () {
// Menu
if (!$(this).data("target")) return;
if ($(this).is(".active")) return;
$(".menu li").not($(this)).removeClass("active");
$(".page").not(page).removeClass("active").hide();
window.page = $(this).data("target");
var page = $(window.page);
window.location.hash = window.page;
$(this).addClass("active");
page.show();
var totop = setInterval(function () {
$(".pages").animate({scrollTop: 0}, 0);
}, 1);
setTimeout(function () {
page.addClass("active");
setTimeout(function () {
clearInterval(totop);
}, 1000);
}, 100);
});
function cleanSource(html) {
var lines = html.split(/\n/);
lines.shift();
lines.splice(-1, 1);
var indentSize = lines[0].length - lines[0].trim().length,
re = new RegExp(" {" + indentSize + "}");
lines = lines.map(function (line) {
if (line.match(re)) {
line = line.substring(indentSize);
}
2014-12-01 17:43:41 +03:00
2015-11-06 18:28:16 +03:00
return line;
});
lines = lines.join("\n");
return lines;
}
$("#opensource").click(function () {
$.get(window.location.href, function (data) {
var html = $(data).find(window.page).html();
html = cleanSource(html);
$("#source-modal pre").text(html);
$("#source-modal").modal();
});
});
< / script >
<!-- Twitter Bootstrap -->
2015-12-08 02:20:32 +03:00
< script src = "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" > < / script >
2015-11-06 18:28:16 +03:00
<!-- Material Design for Bootstrap -->
2015-11-11 01:35:08 +03:00
< script src = "dist/js/material.js" > < / script >
2015-11-06 18:28:16 +03:00
< script src = "dist/js/ripples.min.js" > < / script >
< script >
$.material.init();
< / script >
<!-- Sliders -->
< script src = "//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js" > < / script >
< script >
$(function () {
$.material.init();
$(".shor").noUiSlider({
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
2014-12-01 17:43:41 +03:00
}
2015-11-06 18:28:16 +03:00
});
$(".svert").noUiSlider({
orientation: "vertical",
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
}
});
});
< / script >
<!-- Dropdown.js -->
< script src = "https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js" > < / script >
< script >
$("#dropdown-menu select").dropdown();
< / script >
2014-12-01 17:43:41 +03:00
2015-11-06 18:28:16 +03:00
< / body >
2014-08-18 18:25:33 +04:00
< / html >
