在本章中，我們將討論Material Design Lite中的不同布局. HTML5的容器元素為
:
< div> : ;提供HTML內容的通用容器.
< header> : 代表標題部分.
< footer> : 表示頁腳部分.
< article> : 代表文章.
< section> : 為各種類型的部分提供通用容器.
MDL提供各種CSS類，以對容器應用各種預定義的視覺和行為增強功能.下表列出了可用的類及其效果.
<td style ="text-align:center; vertical-align:middle ;>> 8
| Sr.No. | Class Name&描述 |
|---|---|
| 1 | mdl-layout 將容器標識為MDL組件.在外部容器元素上是必需的. |
| 2 | mdl-js-layout 向布局添加基本MDL行為.在外部容器元素上是必需的. |
| 3 | mdl-layout__header 將容器標識為MDL組件.標題元素必需. |
| 4 | mdl-layout-icon 用于添加應用程序圖標.如果兩者都可見，則被菜單圖標覆蓋.可選的圖標元素. |
| 5 | mdl-layout__header-row 將容器標識為MDL標題行.標題內容容器必需. |
| 6 | mdl-layout__title 標識布局標題文本.布局標題容器需要. |
| 7 | mdl-layout-spacer 用于對齊標題或抽屜內的元素.它增長以填補剩余空間.通常用于將元素對齊到右側. div上的可選布局標題. |
8 | mdl-navigation 將容器標識為MDL導航組.導航元素必需. |
| 9 | mdl-navigation__link 將錨標識為MDL導航鏈接.標題和/或抽屜錨元素需要. |
| 10 | mdl-layout__drawer 將容器標識為MDL布局抽屜.抽屜容器元素需要. |
| 11 | mdl-layout__content 將容器標識為MDL布局內容.主元素必需. |
| 12 | mdl-layout__header - scroll 使標題滾動內容. header元素可選. |
| 13 | mdl-layout - 固定抽屜 使抽屜始終可見并打開更大的屏幕.在外部容器元素上可選，而不在抽屜容器元素上. |
| 14 | mdl-layout - fixed-header 制作標題始終可見，即使在小屏幕中也是如此.外容器元素可選. |
| 15 | mdl-layout - 僅限大屏幕 隱藏較小的元素屏幕.在mdl-layout的任何后代上都是可選的. |
| 16 | mdl-layout - 僅限小屏幕 隱藏大屏幕上的元素.在mdl-layout的任何后代上都是可選的. |
| 17 | mdl-layout__header - waterfall 允許"瀑布"效果有多個標題行. header元素可選. |
| 18 | mdl-layout__header - 透明 使標題透明并在布局背景上繪制. header元素可選. |
| 19 | mdl-layout__header - seamed 使用沒有陰影的標頭. header元素可選. |
| 20 | mdl-layout__tab-bar 將容器標識為MDL標簽欄.標題內的容器元素必需(標簽布局). |
| 21 | mdl-layout__tab 將錨標識為MDL標簽鏈接.標簽欄錨元素必需. |
| 22 | 是活躍的 將標簽標識為默認活動標簽.選項卡欄錨元素和關聯的標簽欄元素可選. |
| 23 | mdl-layout__tab-panel 將容器標識為制表符內容小組.標簽部分元素必需. |
| 24 | mdl-layout - fixed-tabs 使用固定標簽而不是默認標簽可滾動的標簽.外部容器元素可選，而不是標題內的容器. |
以下示例顯示了mdl的使用-layout類用于設置各種容器的樣式.
固定抽屜
要創建具有固定抽屜但沒有標題的模板，請使用以下MDL類.
mdl-layout : 將div標識為MDL組件.
mdl-js-layout : 將基本MDL行為添加到外部div.
mdl-layout - fixed-drawer : 使抽屜始終可見并在較大的屏幕中打開.
mdl-layout__drawer : 將div標識為MDL布局抽屜.
mdl-layout-title : 標識布局標題文本.
mdl-navigation : 將div標識為MDL導航組.
mdl-navigation__link : 將錨標識為MDL導航鏈接.
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"> <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"> </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>
Fixed Header
要使用固定的標頭創建模板，請使用其他MDL類。
mdl-layout--fixed-header : 使標題始終可見，即使在小屏幕上也是如此。
mdl_fixedheader.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"> </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>
Fixed Header and Drawer
要創建帶有固定標題和固定抽屜的模板，請使用以下其他MDL類。
mdl-layout--fixed-drawer:使抽屜始終可見并在大屏幕中打開。
mdl-layout--fixed-header:使標題始終可見，即使在小屏幕上也是如此。
mdl_fixedheader.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"> </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>
Scrolling Header
要創建帶有滾動標題的模板，請使用以下MDL類。
mdl-layout--header--scroll :使標題隨內容滾動。
mdl_scrollingheader.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"> </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>
Contracting Header
要創建帶有隨著頁面向下滾動而收縮的標題的模板，請使用以下MDL類。
mdl-layout__header--waterfall :允許帶有多個標題行的"瀑布"效果。
mdl_waterfallheader.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"> </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類。
mdl-layout__tab-bar:將容器標識為MDL標簽欄。
mdl-layout__tab :將錨點標識為MDL標簽鏈接。
mdl-layout__tab-panel :將容器標識為選項卡內容面板。
mdl_scrollabletabheader.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"> </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類。
mdl-layout--fixed-tabs :使用固定選項卡，而不是默認的可滾動選項卡。
mdl_fixedtabheader.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"> </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>
免責聲明：以上內容（如有圖片或視頻亦包括在內）有轉載其他網站資源，如有侵權請聯系刪除
