本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，博客地址為http://www.cnblogs.com/jasonnode/ 。網站上有對應每一小節的在線練習大家可以去試試。
一、單行頁腳/Mini footer
MDL的單行頁腳/Mini footer組件以單行水平方式組織所有的信息：
單行頁腳同樣采用flexbox布局，將整行分割為左右兩種區域，並 以空格填充剩余的行空間：
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">...</div>
<div class="mdl-mini-footer--right-section">...</div>
</footer>
left-section總是向左邊對齊，而right-section總是向右邊對齊。 單行頁腳內可以放置多個left-section或right-section。
在每個區域內，MDL預定義了兩種交互元素：鏈接和社交按鈕。
鏈接/link-list樣式應用在列表元素ul上，自動將列表成員水平排列：
<div class="mdl-mini-footer--left-section">
<ul class="mdl-mini-footer--link-list">
<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
</ul>
</div>
社交按鈕/social-btn樣式將元素修飾為36px正方大小的容器，可以設置其 背景圖片來構造圖標式按鈕。
配置選項
| MDL class | 說明 |
|---|---|
| mdl-mini-footer | 聲明元素為單行頁腳組件 |
| mdl-mini-footer--left-section | 聲明元素為左區域容器 |
| mdl-mini-footer--right-section | 聲明元素為右區域容器 |
| mdl-logo | 聲明元素為logo區 |
| mdl-mini-footer--link-list | 聲明元素為鏈接容器 |
| mdl-mini-footer--social-btn | 聲明元素為36px大小的方塊區域 |
二、多行頁腳/Mega footer
MDL的多行頁腳/Mega footer組件可以包含多個垂直排列的區域。當我們需要一個復雜 的頁腳區域來呈現信息及提供交互手段時，可以使用這個組件：
從上圖容易看出，單行頁腳/Mini footer組件相當於僅適用多行頁腳/Mega footer 組件的bottom-section區域。
當聲明為mdl-mega-footer--link-list樣式的列表元素出現在drop-down-section 區域時，其列表項是垂直排列的。
配置選項
| MDL class | 說明 |
|---|---|
| mdl-mega-footer | 聲明元素為多行頁腳組件 |
| mdl-mega-footer--top-section | 聲明元素為頂部區域 |
| mdl-mega-footer--middle-section | 聲明元素為中部區域 |
| mdl-mega-footer--bottom-section | 聲明元素為底部區域 |
| mdl-mega-footer--left-section | 聲明元素在容器內居左 |
| mdl-mega-footer--right-section | 聲明元素在容器內居右 |
| mdl-mega-footer--drop-down-section | 聲明元素為垂直內容區 |
| mdl-mega-footer--link-list | 聲明元素為鏈接容器 |
| mdl-mega-footer--heading | 聲明元素為標題 |
| mdl-logo | 聲明元素為logo區 |
| mdl-mega-footer--social-btn | 聲明元素為36px正方大小 |
三、柵格/Grid
MDL的柵格/Grid組件是響應式的，可以適應不同屏幕分辨率的布局要求：
柵格/Grid組件根據屏幕尺寸大小，自動地分割行寬：
- 桌面（ > 840px） - 12個單元格
- 平板（ 480px ~ 840px）- 8個單元格
- 手機（ < 480px）- 4個單元格
可以使用mdl-cell--N-col樣式聲明單元格的寬度：
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">...</div>
<div class="mdl-cell mdl-cell--4-col">...</div>
<div class="mdl-cell mdl-cell--4-col">...</div>
</div>
在不同的分辨率下，示例柵格將呈現如下：
如果我們希望在任何情況下，示例柵格總是顯示為相同的列數，那么 可以聲明單元格在不同環境下的樣式：
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">...</div>
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">...</div>
</div>
在同一行的各單元格，默認情況下總是拉伸/stretch其高度（采用同一行中最高單元格的高度），可以使用 mdl-cell--bottom樣式使單元格不拉伸，並將底部對齊：
與之類似，mdl-cell--top使單元格頂部對齊，mdl-cell--middle使單元格居中對齊：
<div class="mdl-grid">
<!--頂部對齊-->
<div class="mdl-cell mdl-cell--top">...</div>
<!--居中對齊-->
<div class="mdl-cell mdl-cell--middle">...</div>
<!--底部對齊-->
<div class="mdl-cell mdl-cell--bottom">...</div>
</div>
配置選項
| MDL class | 說明 |
|---|---|
| mdl-grid | 將元素聲明為grid組件 |
| mdl-cell | 將元素聲明為grid組件的單元格cell |
| mdl-cell--N-col | 設置單元格寬為N（1-12），默認為4。可選 |
| mdl-cell--N-col-desktop | 在桌面環境下設置單元格寬為N（1-12）。可選 |
| mdl-cell--N-col-tablet | 在平板環境下設置單元格寬為N（1-8）。可選 |
| mdl-cell--N-col-phone | 在手機環境下設置單元格寬為N（1-4）。可選 |
| mdl-cell--hide-desktop | 在桌面環境下隱藏該單元格 。可選 |
| mdl-cell--hide-tablet | 在平板環境下隱藏該單元格。可選 |
| mdl-cell--hide-phone | 在手機環境下隱藏該單元格。可選 |
| mdl-cell--stretch | 在垂直方向拉伸單元格以充滿父元素。 這是單元格的默認值 |
| mdl-cell--top | 在垂直方向單元格頂部對齊。可選 |
| mdl-cell--middle | 在垂直方向單元格居中對齊。可選 |
| mdl-cell--bottom | 在垂直方向單元格底部對齊。可選 |
四、選項卡/Tabs
MDL的選項卡/Tabs組件用來在多個內容間進行切換：
選項卡/Tabs組件具有固定的HTML結構，由選項欄、選項面板等元素構成：
<!--1. 聲明組件-->
<div class="mdl-tabs mdl-js-tabs">
<!--2. 聲明選項欄-->
<div class="mdl-tabs__tab-bar">
<!--2.1 聲明選項，使用href屬性指向選項面板，為要激活的選項應用is-active樣式-->
<a class="mdl-tabs__tab is-active" href="#panel-1">tab-1</a>
<a class="mdl-tabs__tab" href="#panel-2">tab-2</a>
</div>
<!--3. 聲明選項面板，使用id屬性聲明錨點 , 為要顯示的面板應用is-active樣式-->
<div class="mdl-tabs__panel is-active" id="panel-1">...</div>
<div class="mdl-tabs__panel" id="panel-2">...</div>
</div>
可以為組件元素應用mdl-js-ripple-effect樣式，使點擊時具有水紋動效。
配置選項
| MDL class | 功能 |
|---|---|
| mdl-tabs | 將元素聲明為tabs組件 |
| mdl-js-tabs | 實現tabs組件的基本邏輯 |
| mdl-tabs__tab-bar | 將元素聲明為tabs組件的導航條容器 |
| mdl-tabs__tab | 將鏈接元素聲明為tabs組件的tab頁觸發器 |
| mdl-tabs__panel | 將元素聲明為tabs組件的tab頁內容面板 |
| is-active | 將tab頁內容面板或tab頁觸發器設置為活動狀態 |
| mdl-js-ripple-effect | 為tab頁觸發器增加點擊時水紋效果。可選 |
五、卡片/Cards
MDL的卡片/Card組件非常適合顯示復雜的、包含多種類型信息的內容：
卡片通常具有固定的寬度，而高度則根據場景不同，可以固定，也可以變化。 卡片是一種新型的界面元素，它為用戶提供了通過單一訪問點訪問復雜信息 的手段。
使用mdl-card樣式類將外層元素聲明為卡片組件，使用mdl-card__title 等樣式類將內層元素聲明為標題、媒體、動作等容器：
<any class="mdl-card">
<any class="mdl-card__title">...</any>
<any class="mdl-card__media">...</any>
<any class="mdl-card__supporting-text">...</any>
<any class="mdl-card__actions">...</any>
<any class="mdl-card__menu">...</any>
</any>
卡片組件默認為330px寬，最小200px高，是一個主軸為豎向的flex容器。可以顯式地 設置其寬度和高度。
title、media、supporting-text和actions作為flex容器成員在垂直方向 上依次排列，其高度是由內容決定，或者被顯式地設定。例如，很多時候，我們希望給 title區域增加背景圖片以增強感染力，那么將照片設置為title區域的背景之后，還需要 設置title區域的高度：
<div class="mdl-card">
<div class="mdl-card__title" style="background:url(/course/55adae643ad79a1b05dcbf77/img/bg.jpg) no-repeat;backgroud-size:cover;height:150px;">
...
</div>
</div>
menu塊被設置為絕對定位，總是居於卡片組件的右上角。
配置選項
| MDL class | 說明 |
|---|---|
| mdl-card | 應用在外層容器，聲明元素為卡片 |
| mdl-card--border | 為區域增加頂部邊框，應用於actions區域和title區域 |
| mdl-shadow--Ndp | 為卡片添加N(2~8)dp的陰影，應用在外層容器 |
| mdl-card__title | 聲明容器為卡片標題區域，應用在內層容器 |
| mdl-card__title-text | 為卡片標題設置合適的樣式，應用在卡片標題區域的h1~h6 |
| mdl-card__subtitle-text | 為卡片子標題設置合適的樣式 |
| mdl-card__media | 聲明容器為卡片媒體區域，應用在內層容器 |
| mdl-card__supporting-text | 聲明容器為卡片正文區域，應用在內層容器 |
| mdl-card__actions | 聲明容器為卡片正文區域，應用在內層容器 |
| mdl-card__menu | 聲明元素為卡片菜單按鈕區 |
| mdl-card--expand | 聲明區域的flex-grow為1，使區域自動增長以填充卡片剩余空間 |