mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-12 01:02:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

new index

Browse Source
This commit is contained in:
shockwork 2014-10-03 12:59:15 +02:00
parent 83fc82a58c
commit 16f4c0436b
1 changed files with 24 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -2,18 +2,16 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no">
<title>Bootstrap Material</title> <title>Bootstrap Material</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="material/ripples.css" rel="stylesheet"> <link href="css-compiled/ripples.css" rel="stylesheet">
<link href="material/material.css" rel="stylesheet"> <link href="css-compiled/material.css" rel="stylesheet">
<link href="material/icons/icons-material-design.css" rel="stylesheet"> <link href="icons/icons-material-design.css" rel="stylesheet">
<link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet"> <link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
<style> <style>
body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold;padding: 5px 10px;}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 0;background-color:#141d27;color:#fff;text-align:center}.splash h1{font-size:4em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor a:hover{text-decoration:none}@media (max-width:767px){#banner{margin-bottom:2em;text-align:center}} body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold;padding: 5px 10px;}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 0;background-color:#141d27;color:#fff;text-align:center}.splash h1{font-size:4em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor a:hover{text-decoration:none}@media (max-width:767px){#banner{margin-bottom:2em;text-align:center}}
.infobox .btn-sup { color: rgba(0,0,0,0.5); font-weight: bold; font-size: 15px; line-height: 30px; } .infobox .btn-sup { color: rgba(0,0,0,0.5); font-weight: bold; font-size: 15px; line-height: 30px; }
.infobox .btn-sup img, .infobox .btn-sup i { opacity: 0.5; height: 30px; color: #000;} .infobox .btn-sup img { opacity: 0.5; height: 30px;}
.infobox i { font-size: 150%; position: relative; top: 5px;}
.infobox .btn-sup span { padding-left: 10px; position: relative; top: 2px; } .infobox .btn-sup span { padding-left: 10px; position: relative; top: 2px; }
.icons-material .row { margin-bottom: 20px; } .icons-material .row { margin-bottom: 20px; }
.icons-material .col-xs-2 { text-align: center; } .icons-material .col-xs-2 { text-align: center; }
@ -39,15 +37,15 @@
<p>Read more about Material Design for Bootstrap <a href="https://github.com/FezVrasta/bootstrap-material-design">visiting the Github page</a>.</p> <p>Read more about Material Design for Bootstrap <a href="https://github.com/FezVrasta/bootstrap-material-design">visiting the Github page</a>.</p>
<a href="https://github.com/FezVrasta/bootstrap-material-design/archive/master.zip" class="btn btn-sup btn-material-pink btn-raised"> <a href="https://github.com/FezVrasta/bootstrap-material-design/archive/master.zip" class="btn btn-sup btn-material-pink btn-raised">
<i class="icon icon-material-cloud-download"></i> <img src="demo/imgs/download.png" alt="gittip" height=30>
<span>DOWNLOAD</span> <span>DOWNLOAD</span>
</a> </a>
<a href="https://www.gratipay.com/FezVrasta/" class="btn btn-sup btn-material-brown"> <a href="https://www.gittip.com/FezVrasta/" class="btn btn-sup btn-material-brown">
<img src="imgs/gittip.png" alt="gratipay" height=30> <img src="demo/imgs/gittip.png" alt="gittip" height=30>
<span>GITTIP</span> <span>GITTIP</span>
</a> </a>
<a href="https://github.com/FezVrasta/bootstrap-material-design/issues" class="btn btn-sup btn-material-deeppurple"> <a href="https://github.com/FezVrasta/bootstrap-material-design/issues" class="btn btn-sup btn-material-deeppurple">
<img src="imgs/issue.png" alt="issue" height=30> <img src="demo/imgs/issue.png" alt="gittip" height=30>
<span>ISSUES</span> <span>ISSUES</span>
</a> </a>
</div> </div>
@ -507,10 +505,10 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="page-header"> <div class="page-header">
<h1 id="icons">Icons</h1> <h1 id="type">Icons</h1>
<p>Material Design for Bootstrap includes 490 original Material Design icons!<br> <p>Material Design for Bootstrap includes 490 original Material Design icons!<br>
These icons are extracted from the original Google sources and are licensed under BSD license.<br> These icons are extracted from the original Google sources and are licensed under BSD license.<br>
They are provided as an iconic font for easy use. Them are provided as an iconic font easy to use.
</p> </p>
<p>Variations are available for every icon, included for the original Bootstrap icons.<br> <p>Variations are available for every icon, included for the original Bootstrap icons.<br>
<br>Example:<br><br> <br>Example:<br><br>
@ -560,12 +558,12 @@
<div class="col-xs-2"><i class="icon icon-material-backup"></i></div> <div class="col-xs-2"><i class="icon icon-material-backup"></i></div>
<div class="col-xs-2"><i class="icon icon-material-beenhere"></i></div> <div class="col-xs-2"><i class="icon icon-material-beenhere"></i></div>
<div class="col-xs-2"><i class="icon icon-material-block"></i></div> <div class="col-xs-2"><i class="icon icon-material-block"></i></div>
<div class="col-xs-2"><i class="icon icon-material-bluetooth2"></i></div> <div class="col-xs-2"><i class="icon icon-material-bluetooth 2"></i></div>
<div class="col-xs-2"><i class="icon icon-material-bluetooth"></i></div> <div class="col-xs-2"><i class="icon icon-material-bluetooth"></i></div>
<div class="col-xs-2"><i class="icon icon-material-bluetooth-audio"></i></div> <div class="col-xs-2"><i class="icon icon-material-bluetooth-audio"></i></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-2"><i class="icon icon-material-bluetooth-connected2"></i></div> <div class="col-xs-2"><i class="icon icon-material-bluetooth-connected 2"></i></div>
<div class="col-xs-2"><i class="icon icon-material-bluetooth-connected"></i></div> <div class="col-xs-2"><i class="icon icon-material-bluetooth-connected"></i></div>
<div class="col-xs-2"><i class="icon icon-material-bluetooth-disabled"></i></div> <div class="col-xs-2"><i class="icon icon-material-bluetooth-disabled"></i></div>
<div class="col-xs-2"><i class="icon icon-material-bluetooth-searching"></i></div> <div class="col-xs-2"><i class="icon icon-material-bluetooth-searching"></i></div>
@ -701,10 +699,10 @@
<div class="col-xs-2"><i class="icon icon-material-earth"></i></div> <div class="col-xs-2"><i class="icon icon-material-earth"></i></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-2"><i class="icon icon-material-email2"></i></div> <div class="col-xs-2"><i class="icon icon-material-email 2"></i></div>
<div class="col-xs-2"><i class="icon icon-material-email"></i></div> <div class="col-xs-2"><i class="icon icon-material-email"></i></div>
<div class="col-xs-2"><i class="icon icon-material-error"></i></div> <div class="col-xs-2"><i class="icon icon-material-error"></i></div>
<div class="col-xs-2"><i class="icon icon-material-event2"></i></div> <div class="col-xs-2"><i class="icon icon-material-event 2"></i></div>
<div class="col-xs-2"><i class="icon icon-material-event"></i></div> <div class="col-xs-2"><i class="icon icon-material-event"></i></div>
<div class="col-xs-2"><i class="icon icon-material-exit-to-app"></i></div> <div class="col-xs-2"><i class="icon icon-material-exit-to-app"></i></div>
</div> </div>
@ -746,7 +744,7 @@
<div class="col-xs-2"><i class="icon icon-material-games"></i></div> <div class="col-xs-2"><i class="icon icon-material-games"></i></div>
<div class="col-xs-2"><i class="icon icon-material-gesture"></i></div> <div class="col-xs-2"><i class="icon icon-material-gesture"></i></div>
<div class="col-xs-2"><i class="icon icon-material-glass"></i></div> <div class="col-xs-2"><i class="icon icon-material-glass"></i></div>
<div class="col-xs-2"><i class="icon icon-material-gmail2"></i></div> <div class="col-xs-2"><i class="icon icon-material-gmail 2"></i></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-2"><i class="icon icon-material-gmail"></i></div> <div class="col-xs-2"><i class="icon icon-material-gmail"></i></div>
@ -759,7 +757,7 @@
<div class="row"> <div class="row">
<div class="col-xs-2"><i class="icon icon-material-group"></i></div> <div class="col-xs-2"><i class="icon icon-material-group"></i></div>
<div class="col-xs-2"><i class="icon icon-material-group-add"></i></div> <div class="col-xs-2"><i class="icon icon-material-group-add"></i></div>
<div class="col-xs-2"><i class="icon icon-material-hangout2"></i></div> <div class="col-xs-2"><i class="icon icon-material-hangout 2"></i></div>
<div class="col-xs-2"><i class="icon icon-material-hangout"></i></div> <div class="col-xs-2"><i class="icon icon-material-hangout"></i></div>
<div class="col-xs-2"><i class="icon icon-material-hangout-video"></i></div> <div class="col-xs-2"><i class="icon icon-material-hangout-video"></i></div>
<div class="col-xs-2"><i class="icon icon-material-hangout-video-off"></i></div> <div class="col-xs-2"><i class="icon icon-material-hangout-video-off"></i></div>
@ -783,7 +781,7 @@
<div class="row"> <div class="row">
<div class="col-xs-2"><i class="icon icon-material-info-outline"></i></div> <div class="col-xs-2"><i class="icon icon-material-info-outline"></i></div>
<div class="col-xs-2"><i class="icon icon-material-invert-colors"></i></div> <div class="col-xs-2"><i class="icon icon-material-invert-colors"></i></div>
<div class="col-xs-2"><i class="icon icon-material-keep2"></i></div> <div class="col-xs-2"><i class="icon icon-material-keep 2"></i></div>
<div class="col-xs-2"><i class="icon icon-material-keep"></i></div> <div class="col-xs-2"><i class="icon icon-material-keep"></i></div>
<div class="col-xs-2"><i class="icon icon-material-keyboard"></i></div> <div class="col-xs-2"><i class="icon icon-material-keyboard"></i></div>
<div class="col-xs-2"><i class="icon icon-material-keyboard-alt"></i></div> <div class="col-xs-2"><i class="icon icon-material-keyboard-alt"></i></div>
@ -879,7 +877,7 @@
<div class="row"> <div class="row">
<div class="col-xs-2"><i class="icon icon-material-person-location"></i></div> <div class="col-xs-2"><i class="icon icon-material-person-location"></i></div>
<div class="col-xs-2"><i class="icon icon-material-person-outline"></i></div> <div class="col-xs-2"><i class="icon icon-material-person-outline"></i></div>
<div class="col-xs-2"><i class="icon icon-material-phone2"></i></div> <div class="col-xs-2"><i class="icon icon-material-phone 2"></i></div>
<div class="col-xs-2"><i class="icon icon-material-phone"></i></div> <div class="col-xs-2"><i class="icon icon-material-phone"></i></div>
<div class="col-xs-2"><i class="icon icon-material-phone-bluetooth-speaker"></i></div> <div class="col-xs-2"><i class="icon icon-material-phone-bluetooth-speaker"></i></div>
<div class="col-xs-2"><i class="icon icon-material-phone-forwarded"></i></div> <div class="col-xs-2"><i class="icon icon-material-phone-forwarded"></i></div>
@ -1058,7 +1056,7 @@
<div class="col-xs-2"><i class="icon icon-material-unknown-5"></i></div> <div class="col-xs-2"><i class="icon icon-material-unknown-5"></i></div>
<div class="col-xs-2"><i class="icon icon-material-unknown-6"></i></div> <div class="col-xs-2"><i class="icon icon-material-unknown-6"></i></div>
<div class="col-xs-2"><i class="icon icon-material-unknown-7"></i></div> <div class="col-xs-2"><i class="icon icon-material-unknown-7"></i></div>
<div class="col-xs-2"><i class="icon icon-material-usb2"></i></div> <div class="col-xs-2"><i class="icon icon-material-usb 2"></i></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-2"><i class="icon icon-material-usb"></i></div> <div class="col-xs-2"><i class="icon icon-material-usb"></i></div>
@ -1289,7 +1287,7 @@
<div class="form-group"> <div class="form-group">
<label for="inputFile" class="col-lg-2 control-label">File</label> <label for="inputFile" class="col-lg-2 control-label">File</label>
<div class="col-lg-10"> <div class="col-lg-10">
<input type="text" readonly tabindex="-1" class="form-control floating-label" placeholder="Browse..."> <input type="text" readonly class="form-control floating-label" placeholder="Browse...">
<input type="file" id="inputFile" multiple> <input type="file" id="inputFile" multiple>
</div> </div>
</div> </div>
@ -2080,7 +2078,7 @@
</div> </div>
<br> <br>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script> <script>
(function(){ (function(){
@ -2136,12 +2134,12 @@
})(); })();
</script> </script>
<script src="material/ripples.js"></script> <script src="scripts/ripples.js"></script>
<script src="material/material.js"></script> <script src="scripts/material.js"></script>
<script src="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.js"></script> <script src="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.js"></script>
<script src="vendor/noUiSlider/jquery.nouislider.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
<script> <script>
$(function() { $(function() {
$(".slider").noUiSlider({ $(".slider").noUiSlider({