forked from Daemonite/material
-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
5 lines (5 loc) · 26.1 KB
/
index.html
1
2
3
4
5
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1,width=device-width"><link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin><link rel="preconnect" href="https://cdn.jsdelivr.net/" crossorigin><meta name="docsearch:language" content="en"><meta name="docsearch:version" content="4.6"><title>Daemonite Material Design 2</title><link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&family=Roboto+Slab:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet" crossorigin><link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" crossorigin><link href="/material/css/material.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" rel="stylesheet" crossorigin media="print" onload="this.media="all""><link href="https://getbootstrap.com/docs/4.6/assets/css/docs.css" rel="stylesheet" crossorigin><link href="/material/docs/css/docs.min.css" rel="stylesheet"><meta name="theme-color" content="#6200ee"><link href="/material/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"><link href="/material/favicon.ico" rel="icon"><meta name="author" content="Daemonite, Sesemaya, djibe, Bootstrap authors and contributors"></head><body class="doc-body" data-instant-intensity="mousedown"><a class="sr-only sr-only-focusable doc-skip" href="#doc-main-h1"><div class="container"><span class="doc-skip-text">Skip to main content</span></div></a><header class="navbar navbar-dark fixed-top toolbar-waterfall"><button aria-controls="doc-navdrawer" aria-expanded="false" aria-label="Toggle Navdrawer" class="navbar-toggler mr-3" data-target="#doc-navdrawer" data-toggle="navdrawer"><span class="navbar-toggler-icon"></span></button> <a aria-label="Daemonite Material 2" class="mr-auto doc-logo" href="/material/">M</a><div class="ml-3"><div class="dropdown"><button aria-expanded="false" aria-haspopup="true" class="navbar-toggler" data-toggle="dropdown" id="doc-dropdown-versions" type="button"><i class="material-icons mx-auto">history</i></button><div aria-labelledby="doc-dropdown-versions" class="dropdown-menu dropdown-menu-right"><span class="dropdown-header">Versions</span> <a class="dropdown-item active" href="/material/docs/4.6/">Latest (4.6.X)</a> <a class="dropdown-item" href="https://djibe.github.io/material/docs/4.4/">4.4.1</a></div></div></div></header><div aria-hidden="true" class="navdrawer doc-navdrawer" id="doc-navdrawer" tabindex="-1"><div class="navdrawer-content custom-scrollbar"><div class="d-flex flex-column doc-navdrawer-body"><div class="navdrawer-header"><a aria-label="Djibe Material" class="doc-logo" href="/material/">M</a> <span class="navbar-brand">Material UI 2</span></div><form class="navdrawer-body mt-2"><div id="docsearch" class="docsearch"></div></form><div class="navdrawer-divider mb-0"></div><nav class="navdrawer-nav"><a class="nav-item nav-link collapsed" data-toggle="collapse" href="#doc-navdrawer-getting-started"><strong>Getting started</strong></a><div class="collapse pb-2" id="doc-navdrawer-getting-started"><a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/getting-started/introduction/"><span class="font-weight-normal">Introduction</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/getting-started/download/"><span class="font-weight-normal">Download</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/getting-started/contents/"><span class="font-weight-normal">Contents</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/getting-started/migration/"><span class="font-weight-normal">Migration</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/getting-started/browsers-&-devices/"><span class="font-weight-normal">Browsers & devices</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/getting-started/theming/"><span class="font-weight-normal">Theming</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/getting-started/tooling/"><span class="font-weight-normal">Tooling</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/getting-started/webpack/"><span class="font-weight-normal">Webpack</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/getting-started/accessibility/"><span class="font-weight-normal">Accessibility</span></a></div><a class="nav-item nav-link collapsed" data-toggle="collapse" href="#doc-navdrawer-layout"><strong>Layout</strong></a><div class="collapse pb-2" id="doc-navdrawer-layout"><a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/layout/overview/"><span class="font-weight-normal">Overview</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/layout/grid/"><span class="font-weight-normal">Grid</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/layout/utilities-for-layout/"><span class="font-weight-normal">Utilities for layout</span></a></div><a class="nav-item nav-link collapsed" data-toggle="collapse" href="#doc-navdrawer-content"><strong>Content</strong></a><div class="collapse pb-2" id="doc-navdrawer-content"><a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/content/reboot/"><span class="font-weight-normal">Reboot</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/content/typography/"><span class="font-weight-normal">Typography</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/content/code/"><span class="font-weight-normal">Code</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/content/images/"><span class="font-weight-normal">Images</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/content/tables/"><span class="font-weight-normal">Tables</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/content/figures/"><span class="font-weight-normal">Figures</span></a></div><div class="navdrawer-divider"></div><a class="nav-item nav-link collapsed" data-toggle="collapse" href="#doc-navdrawer-components"><strong>Components</strong></a><div class="collapse pb-2" id="doc-navdrawer-components"><a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/alerts/"><span class="font-weight-normal">Alerts</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/badge/"><span class="font-weight-normal">Badge</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/breadcrumb/"><span class="font-weight-normal">Breadcrumb</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/buttons/"><span class="font-weight-normal">Buttons</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/button-group/"><span class="font-weight-normal">Button group</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/card/"><span class="font-weight-normal">Card</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/carousel/"><span class="font-weight-normal">Carousel</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/collapse/"><span class="font-weight-normal">Collapse</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/dropdowns/"><span class="font-weight-normal">Dropdowns</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/forms/"><span class="font-weight-normal">Forms</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/input-group/"><span class="font-weight-normal">Input group</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/jumbotron/"><span class="font-weight-normal">Jumbotron</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/list-group/"><span class="font-weight-normal">List group</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/media-object/"><span class="font-weight-normal">Media object</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/modal/"><span class="font-weight-normal">Modal</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/navs/"><span class="font-weight-normal">Navs</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/navbar/"><span class="font-weight-normal">Navbar</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/pagination/"><span class="font-weight-normal">Pagination</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/popovers/"><span class="font-weight-normal">Popovers</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/progress/"><span class="font-weight-normal">Progress</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/scrollspy/"><span class="font-weight-normal">Scrollspy</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/spinners/"><span class="font-weight-normal">Spinners</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/toasts/"><span class="font-weight-normal">Toasts</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/components/tooltips/"><span class="font-weight-normal">Tooltips</span></a></div><a class="nav-item nav-link collapsed" data-toggle="collapse" href="#doc-navdrawer-utilities"><strong>Utilities</strong></a><div class="collapse pb-2" id="doc-navdrawer-utilities"><a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/borders/"><span class="font-weight-normal">Borders</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/clearfix/"><span class="font-weight-normal">Clearfix</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/close-icon/"><span class="font-weight-normal">Close icon</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/colors/"><span class="font-weight-normal">Colors</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/display/"><span class="font-weight-normal">Display</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/embed/"><span class="font-weight-normal">Embed</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/flex/"><span class="font-weight-normal">Flex</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/float/"><span class="font-weight-normal">Float</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/image-replacement/"><span class="font-weight-normal">Image replacement</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/interactions/"><span class="font-weight-normal">Interactions</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/overflow/"><span class="font-weight-normal">Overflow</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/position/"><span class="font-weight-normal">Position</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/screen-readers/"><span class="font-weight-normal">Screen readers</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/shadows/"><span class="font-weight-normal">Shadows</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/sizing/"><span class="font-weight-normal">Sizing</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/spacing/"><span class="font-weight-normal">Spacing</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/stretched-link/"><span class="font-weight-normal">Stretched link</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/text/"><span class="font-weight-normal">Text</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/vertical-align/"><span class="font-weight-normal">Vertical align</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/utilities/visibility/"><span class="font-weight-normal">Visibility</span></a></div><a class="nav-item nav-link collapsed" data-toggle="collapse" href="#doc-navdrawer-extend-wip"><strong>Extend (WIP)</strong></a><div class="collapse pb-2" id="doc-navdrawer-extend-wip"></div><div class="navdrawer-divider"></div><a class="nav-item nav-link collapsed" data-toggle="collapse" href="#doc-navdrawer-material"><strong>Material</strong></a><div class="collapse pb-2" id="doc-navdrawer-material"><a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/app-bars-top/"><span class="font-weight-normal">App bars top</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/buttons/"><span class="font-weight-normal">Buttons</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/buttons-floating-action/"><span class="font-weight-normal">Buttons floating action</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/badges/"><span class="font-weight-normal">Badges</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/cards/"><span class="font-weight-normal">Cards</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/chips/"><span class="font-weight-normal">Chips</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/colors/"><span class="font-weight-normal">Colors</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/dark-theme/"><span class="font-weight-normal">Dark theme</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/data-tables/"><span class="font-weight-normal">Data tables</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/dialogs/"><span class="font-weight-normal">Dialogs</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/elevation-and-shadows/"><span class="font-weight-normal">Elevation and shadows</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/expansion-panels/"><span class="font-weight-normal">Expansion panels</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/icons/"><span class="font-weight-normal">Icons</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/lists/"><span class="font-weight-normal">Lists</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/menu/"><span class="font-weight-normal">Menu</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/navigation-drawer/"><span class="font-weight-normal">Navigation drawer</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/pickers/"><span class="font-weight-normal">Pickers</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/progress/"><span class="font-weight-normal">Progress</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/sliders/"><span class="font-weight-normal">Sliders</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/snackbars/"><span class="font-weight-normal">Snackbars</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/steppers/"><span class="font-weight-normal">Steppers</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/tabs/"><span class="font-weight-normal">Tabs</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/text-fields/"><span class="font-weight-normal">Text fields</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/tooltips/"><span class="font-weight-normal">Tooltips</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/material/typography/"><span class="font-weight-normal">Typography</span></a></div><a class="nav-item nav-link collapsed" data-toggle="collapse" href="#doc-navdrawer-plugins"><strong>Plugins</strong></a><div class="collapse pb-2" id="doc-navdrawer-plugins"><a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/plugins/character-counter/"><span class="font-weight-normal">Character counter</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/plugins/datatables/"><span class="font-weight-normal">DataTables</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/plugins/picker-flatpickr/"><span class="font-weight-normal">Picker flatpickr</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/plugins/sliders-ionrangeslider/"><span class="font-weight-normal">Sliders ionRangeSlider</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/plugins/select-select2/"><span class="font-weight-normal">Select Select2</span></a> <a class="nav-item nav-link pl-4 my-0 text-black-secondary" href="/material/docs/4.6/plugins/textarea-autosize/"><span class="font-weight-normal">Textarea autosize</span></a></div></nav><div class="mt-auto"><div class="navdrawer-divider mt-0"></div><div class="navdrawer-nav"><a class="nav-item nav-link text-black-secondary" href="https://github.com/djibe/material" target="_blank" rel="external nofollow noopener"><i class="material-icons mr-3">code</i>Fork me on GitHub</a></div></div></div></div></div><div class="jumbotron jumbotron-fluid mb-5 doc-jumbotron"><div class="container"><div class="row justify-content-center"><div class="col-lg-10 col-xl-8"><h1 class="typography-display-4" id="doc-main-h1">Material 2</h1><p class="font-weight-light typography-headline-6">Daemonite's Material UI 2 is a fully responsive front-end interface based on Google Material Design developed using Bootstrap 4.</p><div class="d-flex flex-wrap"><a class="btn btn-lg btn-primary mb-3 mr-3" href="/material/docs/4.6/getting-started/introduction/"><i class="material-icons mr-2">code</i>Documentation </a><a class="btn btn-lg btn-light text-primary mb-3" data-toggle="modal" href="#doc-modal-download"><i class="material-icons mr-2">cloud_download</i>Download</a></div><p class="text-white-hint typography-caption">Currently 4.6.2-1.0<br>(Based on Bootstrap 4.6.2)</p><hr class="mb-0"><div class="d-flex flex-wrap justify-content-end pb-3"><a class="btn btn-outline-light btn-sm" href="https://github.com/djibe/material" target="_blank" rel="external noopener noreferrer"><i class="material-icons mr-2">code</i>Fork me on GitHub</a></div></div></div></div></div><div aria-hidden="true" aria-labelledby="doc-modal-download-label" class="modal fade" id="doc-modal-download" role="dialog" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 class="modal-title" id="doc-modal-download-label">Download</h2><button aria-label="Close" class="close material-icons" data-dismiss="modal" type="button">close</button></div><div class="modal-body"><p>Material v4.6.2 is available for download in several ways, including some of the favorite package managers.</p><h3 class="mt-4 typography-body-2">Material CSS and JavaScript</h3><p><a href="https://github.com/djibe/material/releases" target="_blank" rel="external noopener noreferrer"><small class="align-text-top"><i class="material-icons">cloud_download</i></small> Download </a>Material's ready-to-use code to easily drop into any project. Includes compiled and minified versions of CSS and JavaScript plugins.</p><h3 class="mt-4 typography-body-1">Package Managers</h3><p>Pull in Material's source files with some of the most popular package managers.</p><pre class="bg-light p-3">
<code>npm install [email protected]</code>
</pre><pre class="bg-light p-3">
<code>gh repo clone djibe/material</code>
</pre></div></div></div></div><main class="doc-main"><div class="container"><div class="row justify-content-center"><div class="col-lg-10 col-xl-8"><div class="mb-5"><h2>Introduction</h2><p class="typography-subtitle-1">The basic idea behind this project is to combine the front-end technology of the popular <a href="https://getbootstrap.com/" target="_blank" rel="external nofollow noopener">Bootstrap <sup><i class="material-icons material-icons-inline">open_in_new</i> </sup></a>framework with the visual language of <a href="https://material.io/design/" target="_blank" rel="external nofollow noopener">Google Material Design <sup><i class="material-icons material-icons-inline">open_in_new</i> </sup></a>.</p></div><div class="blockquote mb-5"><p class="text-muted typography-body-1">Contents</p><p><a href="#doc_index_content_goals">Goals</a></p><p><a href="#doc_index_content_principles">Principles</a></p></div><div class="mb-5" id="doc_index_content_goals"><h3>Goals</h3><div class="row"><div class="col-md-6 mt-4"><h4 class="text-primary typography-headline-6">Primary</h4><p class="typography-body-1">The primary goal of this project is to give all Bootstrap components and elements a Google Material Design look, so it allows web developers to continue using the exact same Bootstrap HTML markup they are familiar with, but presents them a final outcome that is in line with the principles and specifics of Google Material Design.</p></div><div class="col-md-6 mt-4"><h4 class="text-primary typography-headline-6">Secondary</h4><p class="typography-body-1">A secondary goal of this project is to add support for some unique Google Material Design components such as floating buttons, pickers, and steppers, to name a few, which cannot be achieved by transforming existing Bootstrap components.</p><p class="typography-body-1">Because these components will require additional markup (some may require additional JavaScript), they will be documented separately in Material's documentation.</p></div></div></div><div class="mb-5" id="doc_index_content_principles"><h3>Principles</h3><div class="row"><div class="col-md-6 mt-4"><h4 class="text-primary typography-headline-6">CSS & HTML</h4><p class="typography-body-1">If a Bootstrap component has an exact match in Google Material Design, this project will style this Bootstrap component based on the specifications laid out in Google Material Design guidelines. For example, Bootstrap's <code>button</code> = Google Material Design's <code>button</code>.</p><p class="typography-body-1">If a Bootstrap component lacks an exact match in Google Material Design, the specifications of a closest matching component in Google Material Design guidelines will be used to style this Bootstrap component. For example, Bootstrap's <code>navbar</code> = Google Material Design's <code>toolbar</code>.</p><p class="typography-body-1">If a Bootstrap component lacks a related counterpart completely in Google Material Design, this project will style this component based on our own iteration of Google Material Design guidelines. For example, Bootstrap's jumbotron and pagination, etc.</p></div><div class="col-md-6 mt-4"><h4 class="text-primary typography-headline-6">JavaScript</h4><p class="typography-body-1">No modification has been made to Bootstrap's JavaScript. It is safe to use Bootstrap's JavaScript as it is.</p><p class="typography-body-1">However, in order to achieve some unique Material look such as floating labels, Material includes a handful of additional JavaScript to help bring some of the components to life.</p></div></div></div></div></div></div></main><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-GRJrh0oydT1CwS36bBeJK/2TggpaUQC6GzTaTQdZm0k=" crossorigin defer></script><script src="/material/js/material.min.js" defer></script><script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3" crossorigin async></script><script src="/material/docs/js/docs.min.js" defer></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/instantpage.min.js" type="module" crossorigin async></script></body></html>