metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Examples :: Metro 4 - Popular HTML, CSS and JS library</title> <style> h4 { white-space: nowrap; } @media all and (min-width: 768px) { .hero { padding: 160px 80px 120px; } .neb-white { height: auto; } } [class*=cell-md-3] { display: flex; flex-flow: column; justify-content: flex-start; } [class*=cell-md-3] div:last-child { display: flex; justify-content: space-between; margin-top: auto!important; } </style> </head> <body class="m4-cloak" style="padding-top: 50px"> <div class="container-fluid bg-darkMagenta fg-white pos-fixed fixed-top z-top"> <header class="app-bar container bg-darkMagenta fg-white pos-relative" data-role="appbar" data-expand-point="md"> <a href="index.html" class="brand fg-white no-hover">METRO 4</a> <ul class="app-bar-menu ml-auto text-upper"> <li><a href="intro.html">Guide</a></li> <li><a href="https://sandbox.org.ua">Sandbox</a></li> <li><a href="https://builder.metroui.org.ua">Builder</a></li> <li><a href="examples.html">Examples</a></li> <li><a href="support.html" class="text-bold fg-yellow"><span class="d-block ani-vertical">Support Me</span></a></li> <li><a href="https://forum.metroui.org.ua">Forum</a></li> <li> <a href="https://github.com/olton/Metro-UI-CSS" target="_blank"> <span class="mif-github mif-2x d-none d-block-md"></span> <span class="d-block d-none-md">Github</span> </a> </li> </ul> </header> </div> <div class="hero hero-bg text-center neb neb-hero"> <a href="/" class="no-decor fg-white border bd-white border-radius p-4 h1 mb-10">m<sup>4</sup></a> <h1 class="fg-white mt-10"><span class="reduce-1 enlarge-1-md">Metro 4 Examples</span></h1> <div class="container mt-10 text-leader fg-white pl-5-fs pr-5-fs pl-20-md pr-20-md"> <p class=" reduce-1 enlarge-1-md"> These examples demonstrate how to use various aspects in Metro 4 Components Library. </p> </div> </div> <div class="container-fluid"> <div class="container mt-4 mb-4 pt-20">  <div class="example no-border p-0"></div> <h2 class="mt-20">Metro 4 Features</h2> <div class="row mt-10"> <div class="cell-md-3"> <h4 class="text-light">Start page</h4> <div class="img-container img-thumbnail"> <img src="images/examples-tiles-start.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates the use of tiles.</p> </div> </div> <div class="mt-2"> <a href="examples/tiles/start.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/tiles">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Login page</h4> <div class="img-container img-thumbnail"> <img src="images/examples-forms-login.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates how to create login form.</p> </div> </div> <div class="mt-2"> <a href="examples/forms/login.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/forms">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Color schemes</h4> <div class="img-container img-thumbnail"> <img src="images/examples-colors-schemes.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates colors schemes.</p> </div> </div> <div class="mt-2"> <a href="examples/schemes/scheme.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/schemes">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Dialogs</h4> <div class="img-container img-thumbnail"> <img src="images/examples-dialogs.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates how to use dialogs.</p> </div> </div> <div class="mt-2"> <a href="examples/dialogs/dialogs.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/dialogs">Source</a> </div> </div> </div> <div class="row mt-6"> <div class="cell-md-3"> <h4 class="text-light">Desktop</h4> <div class="img-container img-thumbnail"> <img src="images/examples-desktop.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates how to use windows.</p> </div> </div> <div class="mt-2"> <a href="examples/desktop/desktop.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/desktop">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Cube</h4> <div class="img-container img-thumbnail"> <img src="images/examples-cube.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates how to use cube.</p> </div> </div> <div class="mt-2"> <a href="examples/cube/cube.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/cube">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Cube custom</h4> <div class="img-container img-thumbnail"> <img src="images/examples-cube-custom-func.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates how to use cube.</p> </div> </div> <div class="mt-2"> <a href="examples/cube/cube-custom-func.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/cube">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Select in runtime</h4> <div class="img-container img-thumbnail"> <img src="images/examples-select-options.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates how to change options in select at runtime.</p> </div> </div> <div class="mt-2"> <a href="examples/ajax/select.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/ajax">Source</a> </div> </div> </div> <div class="row mt-6"> <div class="cell-md-3"> <h4 class="text-light">Color module</h4> <div class="img-container img-thumbnail"> <img src="images/examples-color-module-all.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates capabilities color module.</p> </div> </div> <div class="mt-2"> <a href="examples/colors/color-schemes.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/colors">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Colors generator</h4> <div class="img-container img-thumbnail"> <img src="images/examples-color-module-generator.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates capabilities color module.</p> </div> </div> <div class="mt-2"> <a href="examples/colors/color-schemes-2.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/colors">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Colors grayscale</h4> <div class="img-container img-thumbnail"> <img src="images/examples-color-module-grayscale.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates capabilities color module.</p> </div> </div> <div class="mt-2"> <a href="examples/colors/color-schemes-grayscale.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/colors">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Date picker</h4> <div class="img-container img-thumbnail"> <img src="images/examples-datepicker.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates date picker component.</p> </div> </div> <div class="mt-2"> <a href="examples/datetime/datepicker.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/datetime">Source</a> </div> </div> </div> <div class="row mt-6"> <div class="cell-md-3"> <h4 class="text-light">Github page</h4> <div class="img-container img-thumbnail"> <img src="images/examples-github.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates any aspects of Metro 4.</p> </div> </div> <div class="mt-2"> <a href="examples/github/github.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/github">Source</a> </div> </div> </div> <div class="row mt-6"> <div class="cell-md-3"> <h4 class="text-light">Table HTML</h4> <div class="img-container img-thumbnail"> <img src="images/examples-table-html.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates table component.</p> </div> </div> <div class="mt-2"> <a href="examples/table/table-html.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/table">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Table JSON</h4> <div class="img-container img-thumbnail"> <img src="images/examples-table-json.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates table component with 100K records.</p> </div> </div> <div class="mt-2"> <a href="examples/table/table-100K.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/table">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Table Methods</h4> <div class="img-container img-thumbnail"> <img src="images/examples-table-methods.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates table methods.</p> </div> </div> <div class="mt-2"> <a href="examples/table/table-methods.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/table">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Table inspector</h4> <div class="img-container img-thumbnail"> <img src="images/examples-table-inspector-export-custom-func.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates table inspector, table export and custom filter for table component.</p> </div> </div> <div class="mt-2"> <a href="examples/table/table-inspector-exprot-custom-func.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/table">Source</a> </div> </div> </div> <h2 class="mt-20">Metro 4 third-party plugins support</h2> <div class="row mt-10"> <div class="cell-md-3"> <h4 class="text-light">Datatable</h4> <div class="img-container img-thumbnail"> <img src="images/examples-datatable.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates using Datatable plugin in Metro 4.</p> </div> </div> <div class="mt-2"> <a href="examples/third-party/datatable.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/third-party">Source</a> </div> </div> <div class="cell-md-3"> <h4 class="text-light">Select2</h4> <div class="img-container img-thumbnail"> <img src="images/examples-select2.jpg"> <div class="image-overlay d-flex flex-align-center"> <p class="h5 text-light">The example demonstrates using Select2 plugin in Metro 4.</p> </div> </div> <div class="mt-2"> <a href="examples/third-party/select2.html">Demo</a> <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/third-party">Source</a> </div> </div> </div> </div> </div> <footer class="footer-bg"> <div class="container pt-20 pb-20"> <div class="text-center"> <ul class="inline-list reduce-1" id="social-menu"> <li><a href="https://www.facebook.com/metrouicss/"><span class="mif-facebook"></span></a></li> <li><a href="https://twitter.com/MetroUI"><span class="mif-twitter"></span></a></li> <li><a href="#"><span class="mif-youtube"></span></a></li> <li><a href="https://github.com/olton/Metro-UI-CSS"><span class="mif-github"></span></a></li> </ul> </div> <div class="text-center mt-10"> <ul class="inline-list reduce-1" id="footer-menu"> <li><a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">License</a></li> <li><a href="mailto:sergey@pimenov.com.ua">Author</a></li> <li><a href="https://forum.metroui.org.ua">Forum</a></li> <li><a href="https://github.com/olton/Metro-UI-CSS/issues">Issues</a></li> <li><a href="https://github.com/olton/Metro-UI-CSS/releases">Releases</a></li> </ul> </div> <div class="text-center mt-10 reduce-1"> Metro 4 (Metro UI CSS) © 2012-2018 by <a href="mailto:sergey@pimenov.com.ua" class="no-wrap">Sergey Pimenov</a>. <br /> <span class="no-wrap">Domain by <a href="https://imena.ua/">Imena.ua</a>.</span> <span class="no-wrap">Hosting by <a href="https://mirohost.net/">Mirohost</a>.</span> <br/> <span class="no-wrap">Metro CDN by <a href="https://www.keycdn.com/">KeyCDN</a>.</span> <br/> <span class="no-wrap">IDE PhpStorm by <a href="https://www.jetbrains.com/">JetBrains</a>.</span> <br /> Currently <span class="version-number"></span>. Code licensed <a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. </div> </div> </footer> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script> $(".version-number").html(Metro.ver()); </script>    <script> setTimeout(function(){ var b = $(".adsbygoogle"); var div = $(".example"); if (Metro.utils.isLocalhost()) { return ; } if (b.length === 0) { div.html("<div class='bg-red fg-white p-4 text-center h3 text-light'>With your help, I can make Metro 4 even better! Please, disable AdBlock or AdGuard.<br>Thank you for your support!</div>"); } else { $.each(b, function(){ var bl = $(this); if (bl.height() < 50 || Metro.utils.getStyleOne(bl, 'display') === 'none') { div.html("<div class='bg-red fg-white p-4 text-center h3 text-light'>With your help, I can make Metro 4 even better! Please, disable AdBlock or AdGuard.<br>Thank you for your support!</div>"); } }); } }, 1000) </script> </body> </html>