mdb-ui-kit/index.html

292 lines
20 KiB
HTML
Raw Normal View History

2014-08-18 18:25:33 +04:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
Bootstrap Material Design &middot; The most popular HTML, CSS, and JS Material Design library in the world.
</title>
2014-12-02 11:20:20 +03:00
<!-- Twitter -->
<meta name="twitter:site" content="@FezVrasta">
<meta name="twitter:creator" content="@FezVrasta">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Bootstrap Material Design">
<meta name="twitter:description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
<meta name="twitter:image" content="https://fezvrasta.github.io/assets/brand/bootstrap-social.png">
<!-- Facebook -->
<meta property="og:url" content="https://fezvrasta.github.io">
<meta property="og:title" content="Bootstrap Material Design">
<meta property="og:description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
<meta property="og:image" content="http://fezvrasta.github.io/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://fezvrasta.github.io/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
<meta name="author" content="Federico Zivolo and Bootstrap contributors">
<!-- Bootstrap core CSS -->
<link href="/bootstrap-material-design/dist/css/bootstrap-material-design.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" >
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2015-11-17 19:18:37 +03:00
<!-- Documentation extras -->
2015-11-17 19:18:37 +03:00
<link href="/bootstrap-material-design/assets/css/docs.min.css" rel="stylesheet">
2015-11-17 19:18:37 +03:00
<!-- Favicons -->
<link rel="apple-touch-icon" href="/bootstrap-material-design/apple-touch-icon.png">
<link rel="icon" href="/bootstrap-material-design/favicon.ico">
2015-11-17 19:18:37 +03:00
</head>
<body class="bd-home">
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Skip to main content</span>
</div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/bootstrap-material-design/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link active" href="/bootstrap-material-design/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/bootstrap-material-design/docs/4.0/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/bootstrap-material-design/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
<li class="nav-item partner creativetim">
<a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a>
</li>
<li class="nav-item partner creativetim">
<a class="nav-link" href="https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a>
</li>
<li class="nav-item partner mdbootstrap">
<a class="nav-link" href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/?utm_source=7e4bff&utm_id=7e4bff" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Design for Boostrap PRO');"
target="_blank" rel="noopener">Material Design for Bootstrap PRO</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v4.0
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/bootstrap-material-design/docs/4.0/">Latest (4.x)</a>
<a class="dropdown-item" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html">v3.x</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/FezVrasta/bootstrap-material-design" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/FezVrasta" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://spectrum.chat/bootstrap-md" target="_blank" rel="noopener" aria-label="Spectrum">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Spectrum</title>
<path fill="currentColor" fill-rule="evenodd" d="M256,51.2C21.5,51.2,0,83.4,0,222.2c0,94.2,9.7,139.3,89.1,158.7l0,0v58.4c0.5,12.4,11,22.1,23.5,21.6c4-0.2,8-1.4,11.4-3.6l98.8-63.5H256c234.5,0,256-32.3,256-171.5S490.5,51.2,256,51.2z M144.9,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C177.9,251,163,265.5,144.9,265.2C144.9,265.2,144.9,265.2,144.9,265.2zM256,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C289,251,274.1,265.5,256,265.2C256,265.2,256,265.2,256,265.2z M367.1,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C400.1,251,385.2,265.5,367.1,265.2C367.1,265.2,367.1,265.2,367.1,265.2z" />
</svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/FezVrasta/bootstrap-material-design/releases">Download</a>
</header>
<main class="bd-masthead" id="content" role="main">
<div class="container">
<div class="row align-items-center">
<div class="col-12 mx-auto col-md-12">
<h1 class="mb-3 bd-text-purple-bright text-center">Material Design for Bootstrap</h1>
<br /><br />
</div>
2015-11-07 03:02:34 +03:00
</div>
<div class="row align-items-center">
<div class="col-6 mx-auto col-md-6 order-md-2">
<img src="/bootstrap-material-design/assets/img/MD4B.svg" alt="" class="img-fluid mb-3 mb-md-0">
</div>
<div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
<p class="lead">
Build responsive, mobile-first projects on the web with the world's most popular Material Design front-end component library.
</p>
<p class="lead mb-4">
Material Design for Bootstrap is an open source toolkit based on Bootstrap for developing Material Design apps with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
</p>
<div class="d-flex flex-column flex-md-row lead mb-3">
<a href="/bootstrap-material-design/docs/4.0/getting-started/" class="btn btn-lg btn-primary" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
<a href="/bootstrap-material-design/docs/4.0/getting-started/download/" class="btn btn-lg btn-secondary" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download 4.0.0-beta.4');">Download</a>
</div>
<p class="text-muted mb-0">
Currently v4.0.0-beta.4
</p>
</div>
</div>
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
2016-07-07 13:23:14 +03:00
</div>
</main>
2016-07-07 13:23:14 +03:00
<div class="masthead-followup row m-0 border border-white">
<div class="col-12 col-md-6 p-3 p-md-5 bg-light border border-white">
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="32" height="32" fill="none" stroke="currentcolor" stroke-width="2" class="text-primary mb-2" viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Import icon</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>
<h3>Installation</h3>
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">npm install bootstrap-material-design@4.0.0-beta.4</code></pre></figure>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">gem install bootstrap-material-design -v 4.0.0.beta</code></pre></figure>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">bower install bootstrap-material-design#v4.0.0-beta.4</code></pre></figure>
<hr class="half-rule">
<a class="btn btn-outline-primary" href="/bootstrap-material-design/docs/4.0/getting-started/download">Read installation docs</a>
</div>
<div class="col-12 col-md-6 p-3 p-md-5 bg-light border border-white">
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="32" height="32" fill="none" stroke="currentcolor" stroke-width="2" class="text-primary mb-2" viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Download icon</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>
<h3>Bootstrap CDN</h3>
<p>When you only need to include Bootstrap's compiled CSS or JS, you can use the Bootstrap CDN.</p>
<h5>CSS only</h5>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span></code></pre></figure>
<h5>JS, Popper.js, and jQuery</h5>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.2.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js"</span> <span class="na">integrity=</span><span class="s">"sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/js/bootstrap-material-design.js"</span> <span class="na">integrity=</span><span class="s">"sha384-3xciOSDAlaXneEmyOo0ME/2grfpqzhhTcM4cE32Ce9+8DW/04AGoTACzQpphYGYe"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>
<hr class="half-rule">
<a class="btn btn-outline-primary" href="/bootstrap-material-design/docs/4.0/layout/overview/">Explore the docs</a>
</div>
</div>
<div class="masthead-followup row m-0 border border-white">
<div class="col-12 col-md-12 p-3 p-md-5 bg-white border border-white text-center">
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="32" height="32" fill="none" stroke="currentcolor" stroke-width="2" class="text-primary mb-2" viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Lightning icon</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>
<h3 class="partner mdbootstrap">Material Design for Bootstrap PRO</h3>
<p class="partner mdbootstrap">
2000+ material UI elements, 600+ material icons, 74 CSS animations, SASS files, templates, premium tutorials and many more
</p>
<a class="partner mdbootstrap" href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/?utm_source=7e4bff&utm_id=7e4bff" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Image - mdbootstrap');">
<img class="img-fluid mt-3 mx-auto" src="/bootstrap-material-design/assets/img/mdbootstrap.jpg" alt="Bootstrap Themes" width="1024" height="388">
</a>
<br /><br />
<a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/?utm_source=7e4bff&utm_id=7e4bff" class="btn btn-outline-primary partner mdbootstrap" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button - mdbootstrap');">Get Material Design for Bootstrap PRO</a>
<h3 class="partner creativetim">Official Pro Kits</h3>
<p class="partner creativetim">
Take Material Design for Bootstrap 4 to the next level with official Material Kit Pro and Material Dashboard Pro.
</p>
<a class="partner creativetim" href="https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Image - creativetim');">
<img class="img-fluid mt-3 mx-auto" src="/bootstrap-material-design/assets/img/mk-pro-banner.jpg" alt="Bootstrap Themes" width="1024" height="388">
</a>
<br /><br />
<a href="https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" class="btn btn-outline-primary partner creativetim" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button MKP - creativetim');">Material Kit Pro</a>
<a href="https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385" class="btn btn-outline-primary partner creativetim" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button MDP - creativetim');">Material Dashboard Pro</a>
</div>
</div>
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<ul class="bd-footer-links">
<li><a href="https://github.com/FezVrasta/bootstrap-material-design">GitHub</a></li>
<li><a href="/bootstrap-material-design/examples/">Examples</a></li>
<li><a href="/bootstrap-material-design/about/">About</a></li>
</ul>
<p>Designed and built by <a href="https://twitter.com/FezVrasta" target="_blank" rel="noopener">@FezVrasta</a> with the help of <a href="https://github.com/FezVrasta/bootstrap-material-design/graphs/contributors">our contributors</a>.</p>
<p>Currently v4.0.0-beta.4. Code licensed <a rel="license noopener" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license noopener" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
</div>
</footer>
<script src="/bootstrap-material-design/assets/js/vendor/split.min.js">
</script>
<script>
Split.setup({
creativetim: function () {document.body.classList.add('creativetim')},
mdbootstrap: function () {document.body.classList.add('mdbootstrap')},
});
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-80431047-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/bootstrap-material-design/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/bootstrap-material-design/assets/js/vendor/popper.min.js"></script>
<script src="/bootstrap-material-design/dist/js/bootstrap-material-design.js"></script>
<script src="/bootstrap-material-design/assets/js/vendor/anchor.min.js"></script>
<script src="/bootstrap-material-design/assets/js/vendor/clipboard.min.js"></script>
<script src="/bootstrap-material-design/assets/js/vendor/holder.min.js"></script>
<script src="/bootstrap-material-design/assets/js/src/application.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/bootstrap-material-design/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/bootstrap-material-design/assets/js/ie-emulation-modes-warning.js"></script>
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
</script>
</body>
2014-08-18 18:25:33 +04:00
</html>