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

Merge branch 'agpl' of https://github.com/gitarno/bootstrap-material-design/

Browse Source 
Conflicts:
	index.html
This commit is contained in:
Arno Roldão Junior 2015-03-19 08:50:07 -03:00
commit 68646d031e
1 changed files with 1418 additions and 1562 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<!-- Dummy edit -->
<head>
<title>Material Design for Bootstrap</title>
@ -8,11 +9,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Twitter Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design for Bootstrap -->
<link href="dist/css/roboto.min.css" rel="stylesheet">
<link href="dist/css/material-fullpalette.min.css" rel="stylesheet">
<link href="dist/css/material-wfont.min.css" rel="stylesheet">
<link href="dist/css/ripples.min.css" rel="stylesheet">
<!-- Dropdown.js -->
@ -144,7 +144,6 @@
<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="http://fezvrasta.github.com/bootstrap-material-design/bootstrap-elements.html" target="_blank">Bootstrap elements <i class="mdi-action-open-in-new"></i></a></li>
<li class="withripple" data-target="#material-colors">Material Colors</li>
<li class="withripple" data-target="#checkbox">Checkbox</li>
@ -155,8 +154,8 @@
<li class="withripple" data-target="#progress-bar">Progress Bar</li>
<li class="withripple" data-target="#slider">Slider</li>
<li class="withripple">Tabs (To do)</li>
<li class="withripple" data-target="#button" >Button</li>
<li class="withripple" data-target="#icons" >Icon button</li>
<li class="withripple" data-target="#button">Button</li>
<li class="withripple">Icon button (To do)</li>
<li class="withripple" data-target="#floating-action-button">Floating Action Button</li>
<li class="withripple" data-target="#dropdown">Dropdown (Work in progress)</li>
<li class="withripple" data-target="#dropdown-menu">Dropdown Menu</li>
@ -234,87 +233,6 @@
<pre><code>bower install bootstrap-material-design</code></pre>
</div>
<div class="well page" id="getting-started">
<h1 class="header">Getting Started</h1>
<h3>Download</h3>
<hr>
<h4>Install with NPM - Coming Soon</h4>
<p>You can also install and manage Material Bootstrap using NPM</p>
<pre><code>npm install</code></pre>
<h4>Install with Bower</h4>
<p>You can also install and manage Material Bootstrap using Bower</p>
<pre><code>bower install bootstrap-material-design</code></pre>
<h4>Install with Meteor</h4>
<p>You can also install and manage Material Bootstrap using Meteor</p>
<pre><code>meteor add fezvrasta:bootstrap-material-design</code></pre>
<br />
<h3>What's included</h3>
<hr>
<p>Material Bootstrap is downloadable in a two forms. Material.css only supports the primary shades of the material color palette and Material-fullpalette.css supports every shade of the material color palette</p>
<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/" alt="Bootstrap Docs">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>
</div>
</div>
</div>
</div>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Material Bootstrap. You'll see something like this:</p>
<!-- This code must be aligned this way to render correctly -->
<pre><code class="language-bash" data-lang="bash">Material/
├── css/
│ ├── material.css
│ ├── material.css.map
│ ├── material.min.css
│ ├── material.min.css.map
│ ├── material-wfont.css
│ ├── material-wfont.css.map
│ ├── material-wfont.min.css
│ ├── material-wfont.min.css.map
│ ├── ripples
│ ├── 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
└── fonts/
├── Material-Design-Icons.eot
├── Material-Design-Icons.svg
├── Material-Design-Icons.ttf
├── Material-Design-Icons.woff
└── ADD REMAINING GOOGLE FONT FILES HERE
</code>
</pre>
<p>Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.</p>
<br />
<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>
</div>
<div class="well page" id="checkbox">
<h1 class="header">Checkbox</h1>
@ -489,20 +407,6 @@
</label>
</div>
<h1 class="header">Toggle Button Variations</h1>
<div class="togglebutton togglebutton-material-pink">
<label>
Wi-Fi
<input type="checkbox" checked>
</label>
</div>
<div class="togglebutton togglebutton-material-deep-orange">
<label>
Bluetooth
<input type="checkbox" checked>
</label>
</div>
<style>
#toggle-button h2 {
font-size: 18.7199993133545px;
@ -850,57 +754,14 @@
</style>
</div>
<div class="well page" id="icons">
<style>
.icon-preview {
display: inline-block;
padding: 10px;
margin: 10px;
background: #D5D5D5;
border-radius: 3px;
cursor: pointer;
}
</style>
<h2>Icones</h2>
<div id="icones">
</div>
<script>
$.ajax({
dataType: "json",
url: "json/list-icons.json",
success: function (data)
{
var icones = data.icones;
function loopIcons(pIcon) {
var icones = document.getElementById("icones");
icones.innerHTML += '<div class="icon-preview"><i class="' + pIcon + '"></i><span>' + pIcon + '</span></div>'
}
;
for (var i = 0; i < icones.length; i++) {
loopIcons(icones[i]);
}
;
}
});
</script>
</div>
<div class="well page" id="material-colors">
<h1 class="header">Material Color Samples</h1>
<p>This is the list of all the supported color variations. Each color can be applied to every element that supports variations.</p>
<pre>.btn-material-{{color}}<br>.navbar-material-{{color}}<br>.well-material-{{color}}<br>etc...</pre>
<p><b>material.css</b> includes only the primary color shades (red, pink, purple, deep-purple, etc...), if you want the entire palette please use <b>material-fullpalette.css</b></p>
<p>This is the list of all the supported color variations. Each color can be applied to every element that supports variations.
</p>
<pre><code>.btn-material-{{color}}
.navbar-material-{{color}}
.well-material-{{color}}
etc...</code></pre>
<div class="sampleOthers">
<button class="btn btn-black btn-lg">Black</button>
<button class="btn btn-white btn-lg">White</button>
@ -1326,14 +1187,11 @@
<option value="Sfogliatelle">Sfogliatelle</option>
</select>
<br>
<select class="form-control" disabled placeholder="Your favorite pastry">
<option value="disabled">Disabled</option>
</select>
</div>
<br>
<p>Dropdowns provided by <a href="https://github.com/FezVrasta/dropdown.js" target="_blank">Dropdown.js</a></p>
</div>
<div class="well page" id="dialog">
@ -1345,7 +1203,7 @@
<h2>Dialog with header and footer</h2>
<button class="btn btn-primary" data-toggle="modal" data-target="#complete-dialog">Open dialog</button>
<div id="simple-dialog" class="modal fade" tabindex="mdi-1">
<div id="simple-dialog" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
@ -1363,7 +1221,7 @@
</div>
</div>
<div id="complete-dialog" class="modal fade" tabindex="mdi-1">
<div id="complete-dialog" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -1410,7 +1268,7 @@
<div id="shadow-sample3" data-tap="0">tap</div>
<script>
$(document).on("click", "#shadow-sample2, #shadow-sample3", function () {
$(document).on("click", "#shadow-sample2, #shadow-sample3", function() {
var tap = ($(this).data("tap") * 1) + 1;
if (tap === 6) {
tap = 0;
@ -1468,7 +1326,7 @@
</div>
</div>
<div id="source-modal" class="modal fade" tabindex="mdi-1">
<div id="source-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
@ -1487,24 +1345,22 @@
<script>
window.page = window.location.hash || "#about";
$(document).ready(function () {
$(document).ready(function() {
if (window.page != "#about") {
$(".menu").find("li[data-target=" + window.page + "]").trigger("click");
}
});
$(window).on("resize", function () {
$(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 li").click(function() {
// Menu
if (!$(this).data("target"))
return;
if ($(this).is(".active"))
return;
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");
@ -1515,13 +1371,13 @@
page.show();
var totop = setInterval(function () {
$(".pages").animate({scrollTop: 0}, 0);
var totop = setInterval(function() {
$(".pages").animate({scrollTop:0}, 0);
}, 1);
setTimeout(function () {
setTimeout(function() {
page.addClass("active");
setTimeout(function () {
setTimeout(function() {
clearInterval(totop);
}, 1000);
}, 100);
@ -1536,7 +1392,7 @@
var indentSize = lines[0].length - lines[0].trim().length,
re = new RegExp(" {" + indentSize + "}");
lines = lines.map(function (line) {
lines = lines.map(function(line){
if (line.match(re)) {
line = line.substring(indentSize);
}
@ -1549,8 +1405,8 @@
return lines;
}
$("#opensource").click(function () {
$.get(window.location.href, function (data) {
$("#opensource").click(function() {
$.get(window.location.href, function(data){
var html = $(data).find(window.page).html();
html = cleanSource(html);
$("#source-modal pre").text(html);
@ -1560,7 +1416,7 @@
</script>
<!-- Twitter Bootstrap -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Material Design for Bootstrap -->
<script src="dist/js/material.min.js"></script>
@ -1573,7 +1429,7 @@
<!-- Sliders -->
<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
<script>
$(function () {
$(function() {
$.material.init();
$(".shor").noUiSlider({
start: 40,