mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-07-27 00:19:50 +03:00
Merge branch 'agpl' of https://github.com/gitarno/bootstrap-material-design/
Conflicts: index.html
This commit is contained in:
Arno Roldão Junior
commit
68646d031e
176
index.html
176
index.html
|
|
@ -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>
|
||||
|
|
@ -156,7 +155,7 @@
|
|||
<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">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">
|
||||
|
|
@ -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">
|
||||
|
|
@ -1501,10 +1359,8 @@
|
|||
|
||||
$(".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");
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user