📝 Material Design Lite教程

23篇技术文档
  Material Design Lite教程

📅  最后修改于: 2020-10-22 05:45:36        🧑  作者: Mango

Material Design Lite,MDL是使用CSS,JavaScript和HTML创建的UI组件库。 MDL UI组件在遵循现代Web设计原则(如浏览器可移植性,设备独立性和平稳降级)的同时,有助于构建引人注目的,一致且功能正常的网页和Web应用程序。它有助于创建更快,更美观,响应速度更快的网站。它的灵感来自Google Material Design。听众本教程适用于渴望学习Mater...

  材料设计精简版-概述

📅  最后修改于: 2020-10-22 05:45:56        🧑  作者: Mango

什么是Material Design Lite?Material Design Lite(MDL是使用CSS,JavaScript和HTML创建的UI组件库。MDLUI组件在遵循现代Web设计原则(如浏览器可移植性,设备独立性)的同时,可帮助构建有吸引力,一致且功能正常的网页和Web应用程序以及正常降级。以下是Material Design Lite的主要功能-内置响应式设计。标准CSS,占用空间...

  Material Design Lite-环境设置

📅  最后修改于: 2020-10-22 05:46:23        🧑  作者: Mango

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

  材质设计精简版-布局

📅  最后修改于: 2020-10-22 05:48:23        🧑  作者: Mango

在本章中,我们将讨论Material Design Lite中的不同布局。 HTML5具有以下容器元素-<div>-为HTML内容提供通用容器。<header>-表示标题部分。<footer>-表示页脚部分。<article>-代表文章。<section>-为各种类型的节提供通用容器。MDL提供了各种CSS类,以对容器应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。Sr.No.Clas...

  材质设计精简版-网格

📅  最后修改于: 2020-10-22 05:49:08        🧑  作者: Mango

Material Design Lite(MDL)网格是用于为不同屏幕尺寸布置内容的组件。 MDL网格由container / div元素定义和包围。网格在桌面大小屏幕中有12列,在平板电脑大小屏幕中有8列,在电话大小屏幕中有4列,其中每个大小都有预定义的边距和装订线。单元格按照其定义的顺序依次排列,但有以下例外:如果网格单元格不适用于其中一种屏幕尺寸的行,它将流入下一行。如果网格单元格的指定列大...

  Material Design Lite-选项卡

📅  最后修改于: 2020-10-22 05:49:37        🧑  作者: Mango

Material Design Lite(MDL)选项卡组件是一个用户界面组件,它有助于以排他的方式在单个空间中显示多个屏幕。MDL提供了各种CSS类,以对选项卡应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。Sr.No.Class Name & Description1mdl-layoutIdentifies a container as an MDL component. Requ...

  材料设计精简版-页脚

📅  最后修改于: 2020-10-22 05:50:57        🧑  作者: Mango

MDL页脚组件有两种主要形式:mega-footer和mini-footer。大型页脚比小型页脚包含更复杂的内容。大型页脚可以表示由水平规则分隔的多个内容部分,而小型页脚可以表示单个内容部分。页脚通常包含信息性内容和可点击内容,例如链接。MDL提供了各种CSS类,以对mega-footer和mini-footer应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。Sr.No.Class N...

  材料设计精简版-徽章

📅  最后修改于: 2020-10-22 05:51:24        🧑  作者: Mango

MDL徽标组件是一个屏幕通知,可以是数字或图标。通常用于强调项数。MDL提供了一系列CSS类,以对徽章应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。Sr.No.Class Name & Description1mdl-badgeIdentifies element as an MDL badge component. Required for span or link element...

  材质设计精简版-按钮

📅  最后修改于: 2020-10-22 05:52:28        🧑  作者: Mango

MDL提供了一系列CSS类,可以对按钮应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。Sr.No.Class Name & Description1mdl-buttonSets button as an MDL component, required.2mdl-js-buttonAdds basic MDL behavior to button, required.3(none)Set...

  材料设计精简版-卡

📅  最后修改于: 2020-10-22 05:53:03        🧑  作者: Mango

MDL提供了一系列CSS类,以应用各种预定义的视觉和行为增强功能并显示不同类型的卡。下表列出了可用的类及其效果。Sr.No.Class Name & Description1mdl-cardIdentifies div element as an MDL card container, required on “outer” div.2mdl-card–borderPuts a border to...

  材料设计精简版-进度条

📅  最后修改于: 2020-10-22 05:53:22        🧑  作者: Mango

MDL提供了一系列CSS类,以应用各种预定义的视觉和行为增强功能并显示不同类型的进度条。下表列出了可用的类及其效果。Sr.No.Class Name & Description1mdl-js-progressSets basic MDL behavior to progress indicator and is a required class.2mdl-progress__indetermina...

  材料设计精简版-微调器

📅  最后修改于: 2020-10-22 05:53:39        🧑  作者: Mango

MDL提供了一系列CSS类,以应用各种预定义的视觉和行为增强功能并显示不同类型的微调框。下表列出了可用的类及其效果。Sr.No.Class Name & Description1mdl-spinnerIdentifies a container as MDL spinner component and is a required class.2mdl-js-spinnerSets basic MD...

  Material Design Lite-菜单

📅  最后修改于: 2020-10-22 05:54:29        🧑  作者: Mango

MDL提供了一系列CSS类,以应用各种预定义的视觉和行为增强功能并显示不同类型的菜单。下表列出了可用的类及其效果Sr.No.Class Name & Description1mdl-buttonIdentifies button as an MDL component and is required on button element.2mdl-js-buttonSets basic MDL be...

  材料设计精简版-滑块

📅  最后修改于: 2020-10-22 05:54:53        🧑  作者: Mango

MDL提供了一系列CSS类,以应用各种预定义的视觉和行为增强功能并显示不同类型的菜单。下表列出了可用的类及其效果。Sr.No.Class Name & Description1mdl-sliderIdentifies input element as an MDL component and is required.2mdl-js-sliderSets basic MDL behavior to ...

  材料设计精简版-复选框

📅  最后修改于: 2020-10-22 05:55:17        🧑  作者: Mango

MDL提供了一系列CSS类,以应用各种预定义的视觉和行为增强功能并显示不同类型的复选框。下表列出了可用的类及其效果。Sr.No.Class Name & Description1mdl-checkboxIdentifies label as an MDL component and is required on label element.2mdl-js-checkboxSets basic MD...