mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-27 08:29:53 +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

176
index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<!-- Dummy edit -->
<head> <head>
<title>Material Design for Bootstrap</title> <title>Material Design for Bootstrap</title>
@ -8,11 +9,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Twitter Bootstrap --> <!-- 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 --> <!-- Material Design for Bootstrap -->
<link href="dist/css/roboto.min.css" rel="stylesheet"> <link href="dist/css/material-wfont.min.css" rel="stylesheet">
<link href="dist/css/material-fullpalette.min.css" rel="stylesheet">
<link href="dist/css/ripples.min.css" rel="stylesheet"> <link href="dist/css/ripples.min.css" rel="stylesheet">
<!-- Dropdown.js --> <!-- Dropdown.js -->
@ -144,7 +144,6 @@
<nav class="col-xs-3 menu"> <nav class="col-xs-3 menu">
<ul> <ul>
<li class="active withripple" data-target="#about">Material Design for Bootstrap</li> <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><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="#material-colors">Material Colors</li>
<li class="withripple" data-target="#checkbox">Checkbox</li> <li class="withripple" data-target="#checkbox">Checkbox</li>
@ -156,7 +155,7 @@
<li class="withripple" data-target="#slider">Slider</li> <li class="withripple" data-target="#slider">Slider</li>
<li class="withripple">Tabs (To do)</li> <li class="withripple">Tabs (To do)</li>
<li class="withripple" data-target="#button">Button</li> <li class="withripple" data-target="#button">Button</li>
<li class="withripple" data-target="#icons" >Icon 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="#floating-action-button">Floating Action Button</li>
<li class="withripple" data-target="#dropdown">Dropdown (Work in progress)</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="#dropdown-menu">Dropdown Menu</li>
@ -234,87 +233,6 @@
<pre><code>bower install bootstrap-material-design</code></pre> <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>
<div class="well page" id="checkbox"> <div class="well page" id="checkbox">
<h1 class="header">Checkbox</h1> <h1 class="header">Checkbox</h1>
@ -489,20 +407,6 @@
</label> </label>
</div> </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> <style>
#toggle-button h2 { #toggle-button h2 {
font-size: 18.7199993133545px; font-size: 18.7199993133545px;
@ -850,57 +754,14 @@
</style> </style>
</div> </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"> <div class="well page" id="material-colors">
<h1 class="header">Material Color Samples</h1> <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> <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> <pre><code>.btn-material-{{color}}
.navbar-material-{{color}}
<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> .well-material-{{color}}
etc...</code></pre>
<div class="sampleOthers"> <div class="sampleOthers">
<button class="btn btn-black btn-lg">Black</button> <button class="btn btn-black btn-lg">Black</button>
<button class="btn btn-white btn-lg">White</button> <button class="btn btn-white btn-lg">White</button>
@ -1326,14 +1187,11 @@
<option value="Sfogliatelle">Sfogliatelle</option> <option value="Sfogliatelle">Sfogliatelle</option>
</select> </select>
<br>
<select class="form-control" disabled placeholder="Your favorite pastry"> <select class="form-control" disabled placeholder="Your favorite pastry">
<option value="disabled">Disabled</option> <option value="disabled">Disabled</option>
</select> </select>
</div> </div>
<br>
<p>Dropdowns provided by <a href="https://github.com/FezVrasta/dropdown.js" target="_blank">Dropdown.js</a></p>
</div> </div>
<div class="well page" id="dialog"> <div class="well page" id="dialog">
@ -1345,7 +1203,7 @@
<h2>Dialog with header and footer</h2> <h2>Dialog with header and footer</h2>
<button class="btn btn-primary" data-toggle="modal" data-target="#complete-dialog">Open dialog</button> <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-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-body"> <div class="modal-body">
@ -1363,7 +1221,7 @@
</div> </div>
</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-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -1468,7 +1326,7 @@
</div> </div>
</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-dialog modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -1501,10 +1359,8 @@
$(".menu li").click(function() { $(".menu li").click(function() {
// Menu // Menu
if (!$(this).data("target")) if (!$(this).data("target")) return;
return; if ($(this).is(".active")) return;
if ($(this).is(".active"))
return;
$(".menu li").not($(this)).removeClass("active"); $(".menu li").not($(this)).removeClass("active");
$(".page").not(page).removeClass("active").hide(); $(".page").not(page).removeClass("active").hide();
window.page = $(this).data("target"); window.page = $(this).data("target");
@ -1560,7 +1416,7 @@
</script> </script>
<!-- Twitter Bootstrap --> <!-- 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 --> <!-- Material Design for Bootstrap -->
<script src="dist/js/material.min.js"></script> <script src="dist/js/material.min.js"></script>