什么是MaterialDesignLite？MaterialDesignLite（MDL是使用CSS，JavaScript和HTML创建的UI组件库。MDLUI组件在遵循现代Web设计原则（如浏览器可移植性，设备独立性）的同时，可帮助构建有吸引力，一致且功能正常的网页和Web应用程序以及正常降级。以下是Material

有两种方法可以使用MaterialDesignLite-本地安装-您可以在本地计算机上下载material。{primary}-{accent}.min.css和material.min.js文件，并将其包含在HTML代码中。基于CDN的版本-您可以直接从内容交付网络（CDN）将material。{primary}-{

在本章中，我们将讨论MaterialDesignLite中的不同布局。HTML5具有以下容器元素-<div>-为HTML内容提供通用容器。<header>-表示标题部分。<footer>-表示页脚部分。<article>-代表文章。<section>-为各种类型的节提供通用容器。MDL提供了各种CSS类，以对容器应用各

MaterialDesignLite（MDL）网格是用于为不同屏幕尺寸布置内容的组件。MDL网格由container/div元素定义和包围。网格在桌面大小屏幕中有12列，在平板电脑大小屏幕中有8列，在电话大小屏幕中有4列，其中每个大小都有预定义的边距和装订线。单元格按照其定义的顺序依次排列，但有以下例外：如果网格单元格

MaterialDesignLite（MDL）选项卡组件是一个用户界面组件，它有助于以排他的方式在单个空间中显示多个屏幕。MDL提供了各种CSS类，以对选项卡应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。Sr.No.ClassName&Description1mdl-layoutIdentifiesaco

MDL页脚组件有两种主要形式：mega-footer和mini-footer。大型页脚比小型页脚包含更复杂的内容。大型页脚可以表示由水平规则分隔的多个内容部分，而小型页脚可以表示单个内容部分。页脚通常包含信息性内容和可点击内容，例如链接。MDL提供了各种CSS类，以对mega-footer和mini-footer应用各

MDL徽标组件是一个屏幕通知，可以是数字或图标。通常用于强调项数。MDL提供了一系列CSS类，以对徽章应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。Sr.No.ClassName&Description1mdl-badgeIdentifieselementasanMDLbadgecomponent.Req

MDL提供了一系列CSS类，可以对按钮应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。Sr.No.ClassName&Description1mdl-buttonSetsbuttonasanMDLcomponent,required.2mdl-js-buttonAddsbasicMDLbehaviortob

MDL提供了一系列CSS类，以应用各种预定义的视觉和行为增强功能并显示不同类型的卡。下表列出了可用的类及其效果。Sr.No.ClassName&Description1mdl-cardIdentifiesdivelementasanMDLcardcontainer,requiredon“outer”div.2mdl-c

MDL提供了一系列CSS类，以应用各种预定义的视觉和行为增强功能并显示不同类型的进度条。下表列出了可用的类及其效果。Sr.No.ClassName&Description1mdl-js-progressSetsbasicMDLbehaviortoprogressindicatorandisarequiredclass.