Material Design Lite - 網格

上一頁
下一頁

Material Design Lite (MDL) 網格是一個用於在不同螢幕尺寸上佈局內容的元件。MDL 網格由一個容器/div 元素定義和包圍。網格在桌面尺寸螢幕上有 12 列，平板電腦尺寸螢幕上有 8 列，手機尺寸螢幕上有 4 列，每個尺寸都有預定義的邊距和間距。單元格按順序排列在一行中，按照定義的順序排列，但以下情況除外

  • 如果網格單元格在一個螢幕尺寸的行中不合適，它會流到下一行。

  • 如果網格單元格的指定列大小等於或大於螢幕尺寸的列數，則它會佔據整行。

MDL 提供各種 CSS 類來為網格應用各種預定義的視覺和行為增強。下表列出了可用的類及其效果。

序號 類名及描述
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（包括 1 和 12），預設為 4；“內部”div 元素可選。
6

mdl-cell--N-col-desktop

這有助於僅在桌面模式下將單元格的列大小設定為 N，N 為 1-12（包括 1 和 12）；“內部”div 元素可選。
7

mdl-cell--N-col-tablet

這有助於僅在平板電腦模式下將單元格的列大小設定為 N，N 為 1-8（包括 1 和 8）；“內部”div 元素可選。
8

mdl-cell--N-col-phone

這有助於僅在手機模式下將單元格的列大小設定為 N，N 為 1-4（包括 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 − 為外部 div 新增基本 MDL 行為。

  • 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>

結果

驗證結果。

列印頁面
上一頁
下一頁
廣告