MDL教程

MDL 网格

Material Design Lite (MDL) 网格是用于为不同屏幕尺寸布置内容的组件。 MDL 网格由容器/div 元素定义和包围。一个网格在桌面大小的屏幕中有 12 列,在平板电脑大小的屏幕中有 8 列,在手机大小的屏幕中有 4 列,其中每个大小都有预定义的边距和装订线。单元格按定义的顺序按顺序排列在一行中,但以下情况除外:
如果网格单元格不适合屏幕尺寸之一的行,它会流入下一行。 如果网格单元格的指定列大小等于或大于屏幕大小的列数,则它会占据整行。
MDL 提供了各种 CSS 类来对网格应用各种预定义的视觉和行为增强功能。下表列出了可用的类及其效果。
Sr.No. 类名和描述
1
mdl-layout
将容器标识为 MDL 组件。外部容器元素需要。
2
mdl-grid
将容器标识为 MDL 网格组件。 "外部" div 元素需要。
3
mdl-cell
将容器标识为 MDL 单元。在"内部"div 元素上是必需的。
4
mdl-grid--no-spacing
更新网格单元以使其之间没有边距。网格容器可选。
5
mdl-cell--N-col
这有助于将单元格的列大小设置为 N,N 为 1-12,默认为 4 ;可选用于"内部"div 元素。
6
mdl-cell--N-col-desktop
这有助于仅在桌面模式下将单元格的列大小设置为 N,N 为 1-12(含);可选用于"内部"div 元素。
7
mdl-cell--N-col-tablet
这有助于仅在平板电脑模式下将单元格的列大小设置为 N,N 为 1-8 含;可选用于"内部"div 元素。
8
mdl-cell--N-col-phone
这有助于仅在电话模式下将单元格的列大小设置为 N,N 为 1-4 含;可选用于"内部"div 元素。
9
mdl-cell--hide-desktop
在桌面模式下隐藏单元格。可选的"内部"div 元素。
10
mdl-cell--hide-tablet
在平板电脑模式下隐藏单元格。可选的"内部"div 元素。
11
mdl-cell--hide-phone
在电话模式下隐藏单元格。可选的"内部"div 元素。
12
mdl-cell--stretch
垂直拉伸单元格以填充父级,默认;可选用于"内部"div 元素。
13
mdl-cell--top
将单元格与父单元格的顶部对齐。可选的"内部"div 元素。
14
mdl-cell--middle
将单元格与父单元格的中间对齐。可选的"内部"div 元素。
15
mdl-cell--bottom
将单元格与父单元格的底部对齐。可选的"内部"div 元素。

示例

以下示例将帮助您了解使用 mdl-grid 类在各种屏幕上布局内容。
本示例将使用下面给出的 MDL 类。
mdl-layout-将 div 标识为 MDL 组件。 mdl-js-layout-将基本 MDL 行为添加到外部 div。 mdl-layout--fixed-header-使标题始终可见,即使在小屏幕中也是如此。 mdl-layout__header-row-将容器标识为 MDL 标题行。 mdl-layout__drawer-将 div 标识为 MDL 布局抽屉。 mdl-layout-title-标识布局标题文本。 mdl-navigation-将 div 标识为 MDL 导航组。 mdl-navigation__link-将锚点标识为 MDL 导航链接。 mdl-layout__content-将 div 标识为 MDL 布局内容。 mdl-grid-将 div 标识为 MDL 网格组件。 mdl-cell-将 div 标识为 MDL 单元。 mdl-cell--1-col-将单元格的列大小设置为桌面屏幕大小的 12 个单元格中的 1 个单元格。 mdl-cell--2-col-将单元格的列大小设置为桌面屏幕大小的 12 个单元格中的 2 个单元格。 mdl-cell--4-col-将单元格的列大小设置为桌面屏幕大小的 12 个单元格中的 4 个单元格。 mdl-cell--6-col-将单元格的列大小设置为桌面屏幕大小的 12 个单元格中的 6 个单元格。 mdl-cell--4-col-phone-将单元格的列大小设置为手机屏幕大小的 4 个单元格中的 4 个单元格。 mdl-cell--6-col-tablet-将单元格的列大小设置为平板电脑屏幕大小的 8 个单元格中的 6 个单元格。 mdl-cell--8-col-tablet-将单元格的列大小设置为平板电脑屏幕大小的 8 个单元格中的 8 个单元格。

mdl_grid.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Grid</span>          
            </div>       
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design 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 = "mdl-grid">
               <div class = "mdl-cell mdl-cell--1-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">3</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">5</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">7</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">8</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">9</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">10</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">11</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">12</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--4-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">3</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--2-col graybox">2</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
                  6 on desktop, 8 on tablet</div>
               <div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
                  4 on desktop, 6 on tablet</div>
               <div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
                  2 on desktop, 4 on phone</div>
            </div>
         </main>
      </div>
   
   </body>
</html>
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4