📌  相关文章
📜  材质设计精简版-网格

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

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

  • 如果网格单元格不适用于其中一种屏幕尺寸的行，它将流入下一行。

  • 如果网格单元格的指定列大小等于或大于屏幕大小的列数，则它将占据整行。

MDL提供了各种CSS类，以对网格应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。

Sr.No. Class Name & Description
1

mdl-layout

Identifies a container as an MDL component. Required on outer container element.
2

mdl-grid

Identifies a container as an MDL grid component. Required on “outer” div element.
3

mdl-cell

Identifies a container as an MDL cell. Required on “inner” div elements.
4

mdl-grid–no-spacing

Updates the grid cells to have no margin between them. Optional for grid container.
5

mdl-cell–N-col

This helps put the column size for the cell to N, N is 1-12 inclusive, defaults to 4; optional for “inner” div elements.
6

mdl-cell–N-col-desktop

This helps put the column size for the cell to N in desktop mode only, N is 1-12 inclusive; optional for “inner” div elements.
7

mdl-cell–N-col-tablet

This helps put the column size for the cell to N in tablet mode only, N is 1-8 inclusive; optional for “inner” div elements.
8

mdl-cell–N-col-phone

This helps put the column size for the cell to N in phone mode only, N is 1-4 inclusive; optional for “inner” div elements.
9

mdl-cell–hide-desktop

Hides the cell when in desktop mode. Optional for “inner” div elements.
10

mdl-cell–hide-tablet

Hides the cell when in tablet mode. Optional for “inner” div elements.
11

mdl-cell–hide-phone

Hides the cell when in phone mode. Optional for “inner” div elements.
12

mdl-cell–stretch

Stretches the cell vertically to fill the parent, default; optional for “inner” div elements.
13

mdl-cell–top

Aligns the cell to the top of the parent. Optional for “inner” div elements.
14

mdl-cell–middle

Aligns the cell to the middle of the parent. Optional for “inner” div elements.
15

mdl-cell–bottom

Aligns the cell to the bottom of the parent. Optional for “inner” div elements.

例

以下示例将帮助您理解使用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

现场演示

      
      
      
      
   
   
   
      

         

            
      
               Material Design Grid          
            
       
         

         
         

            Material Design Tutorial
            
         

         
         
    
            

               
1

               
2

               
3

               
4

               
5

               
6

               
7

               
8

               
9

               
10

               
11

               
12

            

            
            

               
1

               
2

               
3

            

            
            

               
6

               
4

               
2

            

            
            

               

                  6 on desktop, 8 on tablet

               

                  4 on desktop, 6 on tablet

               

                  2 on desktop, 4 on phone

结果

验证结果。