mdb-ui-kit/index.html

348 lines
18 KiB
HTML
Raw Permalink Normal View History

2014-08-18 18:25:33 +04:00
<!DOCTYPE html>
<html lang="en">
2020-10-05 16:31:38 +03:00
<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.
2014-12-02 11:20:20 +03:00
2020-10-05 16:31:38 +03:00
</title>
<!-- Twitter -->
2020-10-06 09:46:19 +03:00
<meta name="twitter:site" content="@MDBootstrap">
<meta name="twitter:creator" content="@MDBootstrap">
<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.">
2020-10-09 14:33:49 +03:00
<meta name="twitter:image"
content="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/mdb5-about-v2.jpg">
2020-10-05 16:31:38 +03:00
<!-- Facebook -->
2020-10-06 09:46:19 +03:00
<meta property="og:url" content="https://mdbootstrap.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.">
2020-10-09 14:33:49 +03:00
<meta property="og:image"
content="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/mdb5-about-v2.jpg">
<meta property="og:image:secure_url"
content="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/_main/assets/mdb5-about-v2.jpg">
2020-10-05 16:31:38 +03:00
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
2020-10-05 16:31:38 +03:00
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
2020-10-06 09:46:19 +03:00
<meta name="author" content="MDB Team">
2020-10-05 16:31:38 +03:00
<!-- Bootstrap core CSS -->
<link href="/bootstrap-material-design/dist/css/bootstrap-material-design.css" rel="stylesheet">
2020-10-05 16:31:38 +03:00
<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
2020-10-05 16:31:38 +03:00
<!-- Documentation extras -->
2015-11-17 19:18:37 +03:00
2020-10-05 16:31:38 +03:00
<link href="/bootstrap-material-design/assets/css/docs.min.css" rel="stylesheet">
2015-11-17 19:18:37 +03:00
2020-10-05 16:31:38 +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">
2020-10-09 14:33:49 +03:00
<!--Search console-->
<meta name="google-site-verification" content="CDRxMQ1vslfeJg3-UW8Kk095p9hnV1Ym6-U7akwCyNY" />
2020-10-05 16:31:38 +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>
2015-11-17 19:18:37 +03:00
</a>
2020-10-05 16:31:38 +03:00
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
2020-10-09 14:33:49 +03:00
<a class="nav-link active" href="/bootstrap-material-design/">Home</a>
2020-10-05 16:31:38 +03:00
</li>
<li class="nav-item">
2020-10-09 14:33:49 +03:00
<a class="nav-link "
href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">Documentation</a>
2020-10-05 16:31:38 +03:00
</li>
<li class="nav-item">
2020-10-09 14:33:49 +03:00
<a class="nav-link " href="/bootstrap-material-design/docs/4.0/examples/">Examples</a>
2020-10-06 09:22:43 +03:00
</li>
2020-10-09 14:33:49 +03:00
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/pro/">Material Kit Pro</a>
2020-10-06 09:22:43 +03:00
</li>
2020-10-05 16:31:38 +03:00
</ul>
</div>
2020-10-05 16:31:38 +03:00
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
2020-10-06 09:22:43 +03:00
2020-10-05 16:31:38 +03:00
<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">
2020-10-06 09:46:19 +03:00
v4.x
2020-10-05 16:31:38 +03:00
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
2020-10-09 14:33:49 +03:00
<a class="dropdown-item" href="https://mdbootstrap.com/docs/standard/?utm_ref_id=28683">Latest (5.x)</a>
2020-10-06 09:22:43 +03:00
<a class="dropdown-item active" href="/bootstrap-material-design/docs/4.0/">Default (4.x)</a>
2020-10-05 16:31:38 +03:00
</div>
</li>
<li class="nav-item">
2020-10-06 09:16:48 +03:00
<a class="nav-link p-2" href="https://github.com/mdbootstrap/bootstrap-material-design" target="_blank"
2020-10-05 16:31:38 +03:00
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">
2020-10-06 09:16:48 +03:00
<a class="nav-link p-2" href="https://twitter.com/MDBootstrap" target="_blank" rel="noopener"
2020-10-05 16:31:38 +03:00
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>
</ul>
2020-10-05 16:31:38 +03:00
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3"
2020-10-06 09:16:48 +03:00
href="https://github.com/mdbootstrap/bootstrap-material-design/releases">Download</a>
2020-10-05 16:31:38 +03:00
</header>
2020-10-05 16:31:38 +03:00
<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>
</div>
2020-10-05 16:31:38 +03:00
<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">
2020-10-09 14:33:49 +03:00
<a href="/bootstrap-material-design/docs/4.0/getting-started/" class="btn btn-lg btn-primary">Get
started</a>
<a href="/bootstrap-material-design/docs/4.0/getting-started/download/"
class="btn btn-lg btn-secondary">Download</a>
2020-10-05 16:31:38 +03:00
</div>
<p class="text-muted mb-0">
Currently v4.1.1
</p>
</div>
</div>
2020-10-09 14:33:49 +03:00
2020-10-05 16:34:06 +03:00
<div class="row">
2020-10-09 14:33:49 +03:00
<div class="col-md-6 text-center">
2020-12-02 13:37:27 +03:00
<div class="alert alert-success" role="alert">
<p class="font-weight-bold">New version available - Material Design for Bootstrap 5</p>
2020-10-09 14:33:49 +03:00
<hr>
2020-12-02 13:37:27 +03:00
<p>Material Design 2.0 + latest Bootstrap 5 based on plain JavaScript (but works also with jQuery). 500+ material UI components, super simple, 1 minute installation, free templates &amp; much more</p>
2020-12-02 13:49:03 +03:00
<a type="button" id="myBtn" href="https://mdbootstrap.com/download/mdb-ui-kit/free/221KdmzSCAwdMdUHrCL/MDB-UI-KIT-Free-2.2.1.zip" class="btn btn-danger active mt-3" role="button">Free Download</a>
2020-12-02 13:37:27 +03:00
</div>
2020-10-09 14:33:49 +03:00
</div>
2020-11-20 17:39:49 +03:00
<script>
2020-12-02 13:37:27 +03:00
const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => {
setTimeout(() => {
window.location.href = 'https://mdbootstrap.com/docs/standard/?utm_ref_id=28683';
}, 500);
});
2020-11-20 17:39:49 +03:00
</script>
2020-10-06 09:22:43 +03:00
</div>
2020-10-05 16:31:38 +03:00
</div>
</main>
<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.1.1</code></pre>
</figure>
<figure class="highlight">
<pre><code class="language-sh" data-lang="sh">gem install bootstrap-material-design -v 4.1.1</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>
2020-10-05 16:31:38 +03:00
<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.1.1/dist/css/bootstrap-material-design.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX"</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>
2020-10-05 16:31:38 +03:00
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js"</span> <span class="na">integrity=</span><span class="s">"sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9"</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>
2020-10-05 16:31:38 +03:00
<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>
2020-10-05 16:34:06 +03:00
<h3 class="">Material Design for Bootstrap PRO</h3>
<p class="">
2020-10-09 14:33:49 +03:00
Latest Bootstrap 5 with Material Design 2.0. 5000+ material UI elements, 1500+ icons, 70+ CSS animations, SASS
files, templates, premium tutorials and
many more.
2020-10-05 16:31:38 +03:00
</p>
2020-10-09 14:33:49 +03:00
<a class="" href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683">
2020-10-05 16:31:38 +03:00
<img class="img-fluid mt-3 mx-auto" src="/bootstrap-material-design/assets/img/mdbootstrap-alt.jpg"
alt="Bootstrap Themes" width="1024" height="388">
</a>
<br /><br />
2020-10-09 14:33:49 +03:00
<a href="https://mdbootstrap.com/docs/standard/pro/?utm_ref_id=28683" class="btn btn-outline-primary">Get Material
2020-10-06 09:22:43 +03:00
Design for Bootstrap PRO</a>
2020-10-05 16:31:38 +03:00
</div>
</div>
2020-10-05 16:31:38 +03:00
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<ul class="bd-footer-links">
2020-10-06 09:16:48 +03:00
<li><a href="https://github.com/mdbootstrap/bootstrap-material-design">GitHub</a></li>
2020-10-05 16:31:38 +03:00
<li><a href="/bootstrap-material-design/examples/">Examples</a></li>
<li><a href="/bootstrap-material-design/about/">About</a></li>
</ul>
2020-10-06 09:46:19 +03:00
<p>Designed and built by <a href="https://twitter.com/MDBootstrap" target="_blank" rel="noopener">@MDBootstrap</a>
2020-10-06 09:16:48 +03:00
with the help of <a href="https://github.com/mdbootstrap/bootstrap-material-design/graphs/contributors">our
2020-10-05 16:31:38 +03:00
contributors</a>.</p>
<p>Currently v4.1.1. 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>
2020-10-06 09:22:43 +03:00
2020-10-05 16:31:38 +03:00
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
2020-10-05 16:40:56 +03:00
2020-10-05 16:31:38 +03:00
<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="https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js" crossorigin="anonymous"></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>
2020-10-05 16:31:38 +03:00
<!-- 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>
2020-10-05 16:31:38 +03:00
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
</script>
2020-10-05 16:31:38 +03:00
</body>
2020-10-05 16:31:38 +03:00
</html>