Material Design Lite Tutorial
Material Design Lite Tutorial
阅读(2.4k) 书签 赞(0) 我要纠错

Material Design Lite 布局

2018-12-19 18:17 更新

HTML5有以下容器中的元素：

  • <DIV> -提供HTML内容的通用容器。

  • <标题> -代表标题部分。

  • <页脚> -代表页脚部分。

  • <文> -代表的文章。

  • <节> -提供各类节的通用容器。

该MDL提供多种CSS类各种预先定义的外观和行为增强功能适用于容器。下表中提到的可用类和它们的影响。

SN 类名称和说明
1 MDL-布局
标识的容器作为MDL的组成部分。需要外部容器元素。
2 MDL-JS-布局
增加了基本的MDL行为的布局。需要外部容器元素。
3 MDL-layout__header
标识容器作为MDL的组成部分。必需的头元素。
4 MDL-布局图标
用于添加应用程序图标。获取由菜单图标覆盖，如果两者都是可见的。可选的图标元素。
五 MDL-layout__header行
标识容器作为MDL标题行。需要在头内容的容器。
6 MDL-layout__title
标识布局标题文本。需要在布局标题容器。
7 MDL-布局间隔
用于对准头或抽屉内的元件。它生长以填充剩余的空间。常用于右对齐的元素。可选的DIV布局如下称号。
8 MDL-导航
标识容器作为MDL导航组。需要导航元素。
9 MDL-navigation__link
标识主播MDL导航链接。需要对报头和/或抽屉锚元素。
10 MDL-layout__drawer
标识容器作为布局MDL抽屉。需要抽屉容器元素上。
11 MDL-layout__content
标识容器作为布局MDL内容。主要必备元素。
12 MDL-layout__header -滚动
使得与内容标题滚动。可选头元素。
13 MDL布局-固定抽屉
使得抽屉始终可见，并在更大的屏幕打开。可选的外部容器元素不是抽屉容器元素上。
14 MDL布局-固定头
使头始终可见，即使是在小屏幕。可选的外部容器元素。
15 MDL-布局-大屏幕只
隐藏在小屏幕上的元素。可选的MDL-布局中的任何后代。
16 MDL-布局-小屏幕只
隐藏在更大屏幕上的元素。可选的MDL-布局中的任何后代。
17 MDL-layout__header -瀑布
允许带有多个标题行“瀑布”效应。可选头元素。
18 MDL-layout__header -透明
使头部透明和借鉴布局的背景上。可选头元素。
19 MDL-layout__header -缝
采用了头部没有影子。可选头元素。
20 MDL-layout__tab吧
标识容器作为MDL标签栏。需要容器元素里面的头（标签布局）。
21 MDL-layout__tab
标识主播MDL标签链接。需要在标签栏锚元素。
22 是积极的
标识标签作为默认的活动标签。可选的标签栏锚元素和相关的标签部分元素。
23 MDL-layout__tab面板
标识容器作为标签内容面板。需要对标签部分元素。
24 MDL布局-固定标签
使用而不是默认的滚动标签的固定标签。可选的外部容器元素，里面没有头容器上。

例子

下面的例子展示了使用MDL-布局类的样式各种容器。

固定抽屉

要创建具有固定的抽屉，但没有头下面是使用MDL类的模板。

  1. MDL-布局 -标识的div作为MDL的组成部分。

  2. MDL-JS-布局 -增加了基本的MDL行为外层div。

  3. MDL布局-固定抽屉 -使抽屉始终可见，并在更大的屏幕打开。

  4. MDL-layout__drawer -标识DIV的布局MDL抽屉。

  5. MDL-布局标题 -标识布局标题文本。

  6. MDL-导航 -标识DIV的MDL导航组。

  7. MDL-navigation__link -标识主播MDL导航链接。

  8. MDL-layout__content -标识DIV的布局MDL内容。

mdl_fixeddrawer.htm 

<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!--  No header, and the drawer stays open on larger screens (fixed drawer).-->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content" style="padding-left:100px;">Hello World!</div>
      </main>
   </div>
</body>
</html>

结果

验证结果。

固定头

要创建具有以下附加MDL类固定头使用的模板。

  1. MDL布局-固定头 -使头始终可见，即使是在小屏幕。

mdl_fixedheader.htm 

<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!-- Always shows a header, even in smaller screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="" style="color:gray">Home</a>
               <a class="mdl-navigation__link" href="" style="color:gray">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content">Hello World!</div>
      </main>
   </div>
</body>
</html>

结果

验证结果。

固定页眉和抽屉

要创建具有固定的标题和固定的抽屉，下面的附加MDL类模板使用。

  1. MDL布局-固定抽屉 -使抽屉始终可见，并在更大的屏幕打开。

  2. MDL布局-固定头 -使头始终可见，即使是在小屏幕。

mdl_fixedheader.htm 

<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="" style="color:gray">Home</a>
               <a class="mdl-navigation__link" href="" style="color:gray">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content">Hello World!</div>
      </main>
   </div>
</body>
</html>

结果

验证结果。

滚动头

要创建具有滚动头，下面是使用MDL类的模板。

  1. MDL-布局-标题-滚动 -使与内容标题滚动。

mdl_scrollingheader.htm 

<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!--  Uses a header that scrolls with the text, rather than staying  locked at the top -->
   <div class="mdl-layout mdl-js-layout ">
      <header class="mdl-layout__header mdl-layout__header--scroll">      
         <div class="mdl-layout__header-row">
         <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="">Home</a>
               <a class="mdl-navigation__link" href="">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content" style="padding-left:100px;">Hello World!
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 </div>
      </main>
   </div>
</body>
</html>

结果

验证结果。

缔约头

要创建与合同作为页面向下滚动的标题模板，使用以下MDL类。

  1. MDL-layout__header -瀑布 -允许有多个标题行“瀑布”效应。

mdl_waterfallheader.htm 

<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout ">
      <header class="mdl-layout__header mdl-layout__header--waterfall">
	     <!-- Top row, always visible -->
         <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
	  </div>
	    <!-- Bottom row, not visible on scroll -->
    <div class="mdl-layout__header-row">
      <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="">Home</a>
               <a class="mdl-navigation__link" href="">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content" style="padding-left:100px;">Hello World!
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 </div>
      </main>
   </div>
</body>
</html>

结果

验证结果。

固定头用滚动标签

要创建具有滚动标签标头的模板，使用以下MDL类。

  1. MDL-layout__tab巴 -标识容器作为MDL标签栏。

  2. MDL-layout__tab -标识主播MDL标签链接。

  3. MDL-layout__tab面板 -标识容器作为标签内容面板。

mdl_scrollabletabheader.htm 

<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <!-- Top row, always visible -->
         <div class="mdl-layout__header-row">
         <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>          
         </div>
         <!-- Tabs -->
         <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
            <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
            <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
            <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>     
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
            <div class="page-content">Tab 1 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-2">
            <div class="page-content">Tab 2 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-3">
            <div class="page-content">Tab 3 Contents</div>
         </section>
      </main>
   </div>
</body>
</html>

结果

验证结果。

固定头固定标签

要创建具有固定的标签，以下附加MDL类的标题用的模板。

  1. MDL布局-固定选项卡 -使用固定的标签，而不是默认的滚动标签。

mdl_fixedtabheader.htm 

<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
      <header class="mdl-layout__header">
         <!-- Top row, always visible -->
         <div class="mdl-layout__header-row">
         <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>          
         </div>
         <!-- Tabs -->
         <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
            <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
            <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
            <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>     
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
            <div class="page-content">Tab 1 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-2">
            <div class="page-content">Tab 2 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-3">
            <div class="page-content">Tab 3 Contents</div>
         </section>
      </main>
   </div>
</body>
</html>

结果

验证结果。

以上内容是否对您有帮助：
← Material Design Lite 安装环境
Material Design Lite 网格 →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号